--- title: "On-brand web pages with your coding agent | Rainbrand" description: "Build web pages in your own stack from a Rainbrand Brief, with each brand's logos, fonts, imagery and voice. See a Next.js page built from 19 Brief assets." url: "https://www.rainbrand.com/use-cases/web-page/" --- Use cases Web page # On-brand web pages in your own stack. Your coding agent requests a Brief for the page, then builds it in your project with the brand's logo, fonts, imagery and voice. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the guide](https://docs.rainbrand.com/use-cases/web-page) Hoplite · Web page ![The Hoplite feature page headed The pull request is the interface, beside a thread moving from a cloned repository to a draft pull request](https://www.rainbrand.com/_next/image?url=%2Fuse-cases%2Fweb-page%2Fhoplite-issue-to-pr.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) NEXT.JS · 19 BRIEF ASSETS ## (01) Why use Rainbrand A coding agent can build a page quickly, but without the brand it falls back on default fonts, stock imagery and generic copy. Rainbrand gives it a Brief for each page, with the guidance, logos, fonts and images that page needs. How it's made ## From a Brief to a finished page. Rainbrand · create\_brief Ready Brand: Hoplite Task: A feature page for hoplite.sh, from issue to pull request Returns: Guidance and 19 selected assets 1 Brief ### Plan the page from a Brief for the task. The Brief, in the page Next.js Funnel Display · Redaction 35 Type Architecture · Product UI Images 2 Build ### Build it in your stack with the brand's own files. Before you publish 5 checks - Brand fit against the Brief - Product claims and links - Asset and font rights - Keyboard access and contrast - Mobile layout 3 Check ### Check it against the brand before it ships. With your agent ## Ask your agent for the page. Describe the page, who it's for and its main action. Your agent requests a Brief, builds the page in your project and checks it against the Brief on desktop and mobile. [Read the guide](https://docs.rainbrand.com/use-cases/web-page) Works with your favourite agents - [](https://www.rainbrand.com/integrations/claude/) - [](https://www.rainbrand.com/integrations/cursor/) - [](https://www.rainbrand.com/integrations/codex/) - [](https://www.rainbrand.com/integrations/chatgpt/) - [](https://www.rainbrand.com/integrations/) Cursor Rainbrand connected You Build a feature page for hoplite.sh about how an issue becomes a pull request, for engineering teams, with Try Hoplite as the main action. Use this Next.js project and don't deploy anything. Cursor `create_brief` Hoplite feature page Cursor `get_brief` Waiting until it's ready Rainbrand Rainbrand BriefHoplite feature page Ready Story “The Pull Request is the Interface” and Hoplite's product flow. Design Typography, palette and gradient rules. Assets The logo, fonts, architectural imagery and product UI references. 19 assets The Brief is ready. The page will follow an issue through a thread, a cloud sandbox and tests to a pull request your team reviews, with no invented customers, numbers, pricing or certifications. It's built in your Next.js app with the Brief's logo, fonts and imagery. I previewed it on desktop and mobile and checked it against the Brief. Nothing is deployed. Illustrated with the Hoplite page from the web page guide, built in Next.js and React from a Brief with 19 assets. More web pages ## Made for other brands. The same kind of page for other brands, from our examples. ### [Eager](https://www.rainbrand.com/examples/eager/) ![The Eager landing page: Now in purple. beside the purple Blackcurrants carton on yellow](https://www.rainbrand.com/_next/image?url=%2Fexamples%2Feager%2Fcampaign%2Fpage-desktop-v1.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) A signup page for a new flavour, from a launch campaign Claude made with one Brief. See the example ### [Kaorium](https://www.rainbrand.com/examples/kaorium/) ![The Kaorium website: A scent, in your words. with bright, green and soft chosen beside Kaorium's butterfly](https://www.rainbrand.com/_next/image?url=%2Fexamples%2Fkaorium%2Fwebsite-desktop-selected.png&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) A website for describing a scent in up to three words, built by Codex from Kaorium's logo, fonts and butterfly. See the example ### [Extropic](https://www.rainbrand.com/examples/extropic/) ![The Extropic circuit sampler: Programmable randomness above a panel of controls, a trace of samples and a histogram](https://www.rainbrand.com/_next/image?url=%2Fexamples%2Fextropic%2Foutputs%2Fsampler-desktop.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) An interactive page where you set the odds of four random circuits and watch them sample, with every figure from extropic.ai. See the example Customers ## Teams building with Rainbrand. How companies integrate Rainbrand into their agents and products. [All customer stories](https://www.rainbrand.com/customers/?ref=landing) Revnu > “We use Rainbrand to fetch each customer’s brand and generate accurate, on-brand creative for their ads. It means we don’t have to reinvent that part of the stack ourselves.” George Jefferson Co-founder, Revnu [Read the story: Revnu puts a brand layer inside its AI growth product](https://www.rainbrand.com/customers/revnu/?ref=landing) Letter > “We pushed Rainbrand to production as our default image solution.” Mathew Pregasen Founder and CEO, The Letter Company [Read the story: Letter builds Rainbrand into Letterpress](https://www.rainbrand.com/customers/letter/?ref=landing) The GTM Co-Founder > “I have the ideas, but turning them into great design was always a struggle. Rainbrand makes me feel like the best designer in the world, and I don’t think I’ll need to hire one for the small stuff again.” Shane O’Connor Founder, The GTM Co-Founder [Read the story: The GTM Co-Founder uses one agent across several brands](https://www.rainbrand.com/customers/gtm-cofounder/?ref=landing) ## Build your first on-brand page. Connect Rainbrand to your coding agent, add a brand and describe the page you want. [Use it with your agents](https://docs.rainbrand.com/mcp/getting-started) [Integrate it with your product](https://docs.rainbrand.com/getting-started/embed-into-your-product) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). Web page FAQ ## Asked, answered. [All FAQs](https://www.rainbrand.com/faq/) ### What do I need to build a web page? A coding agent or development environment connected to Rainbrand through MCP, and a ready brand or sources such as a website to create one. Your agent requests a Brief and builds the page in your project. [Connect Rainbrand to your agent](https://docs.rainbrand.com/mcp/getting-started). ### What does the Brief add to the page? The Brief selects the brand guidance and assets that matter for this page. For Hoplite's page it supplied 19 assets, including the logo, fonts, architectural imagery and product UI references, with typography, palette and gradient rules for the design. [How Briefs work](https://www.rainbrand.com/briefs/). ### Does it work with my web stack? Yes. The Hoplite page was built with Next.js and React, but your agent uses the stack already in your project. The same workflow suits your own website, client pages or a product that serves several brands. ### How do I keep the copy accurate? Ask your agent to use only claims it can support from the Brief or official sources, as the guide's prompt does. The Hoplite page leaves out invented customers, numbers, pricing and certifications. [See the prompt](https://docs.rainbrand.com/use-cases/web-page#run-it-with-your-agent). ### What should I check before publishing? Check product claims and call-to-action links against the brand's current approved sources, confirm the assets and fonts can be used on the web, and review keyboard access, contrast and the mobile layout. To check a screenshot against the brand, [request a Review](https://www.rainbrand.com/reviews/). The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/) [View pricing](https://www.rainbrand.com/pricing/)