---
title: "Claude Code skills and MCP for on-brand frontend design | Rainbrand"
description: "Install the Rainbrand plugin to give Claude Code your brand's voice, fonts, logos and photos. Build on-brand pages and components, and review each against the brand."
url: "https://www.rainbrand.com/integrations/claude-code/"
---
[Integrations](https://www.rainbrand.com/integrations/)
Checked 29 Oct 2026
Claude Code with Rainbrand
# Claude Code skills and MCP for on-brand frontend design
Install the Rainbrand plugin to give Claude Code your brand's voice, fonts, logos and photos. Build on-brand pages and components, and review each against the brand.
[Docs quickstart](https://docs.rainbrand.com/mcp/getting-started)
Written by Siddharth Borderwala, Founding Engineer at Rainbrand
Install Rainbrand's plugin with two terminal commands, then sign in from `/mcp`. Before Claude Code builds a page or component, it can ask Rainbrand for a Brief with the brand's font files, colours, voice, logo rules and reference images for that job, and send a screenshot of the result back for a Review. Claude Code comes with every paid Claude plan, and admins can limit which plugins and MCP servers it accepts.
## Install the Rainbrand plugin
The plugin bundles two things: Rainbrand's MCP server, which gives Claude Code the tools to list brands and request Briefs, Reviews and generations, and the Rainbrand Skill, a short set of instructions for using those tools. Run the first two steps in your terminal, not inside a session.
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).
Installed from your shell, the plugin is on for you in every project on this machine. That includes the VS Code extension and the desktop app's local sessions, which read the same settings as the terminal. When you start a new session, Claude Code shows a notice that a server needs authentication. Open `/mcp`, select `rainbrand` and sign in to Rainbrand in your browser.
Then check which account is connected. If you use more than one Rainbrand account, do this before anything else.
Ask Claude Code
```
Show me which Rainbrand account is connected.
```
### Which plans can use it
Claude Free: Doesn't include Claude Code.
Pro and Max
Claude Code is included, and you install plugins and MCP servers yourself.
Team and Enterprise
Claude Code is included. Admins can restrict which MCP servers and plugin marketplaces Claude Code accepts. If Rainbrand is blocked, ask them to allow the `rainbrandai/rainbrand-skills` marketplace and `https://mcp.rainbrand.com/mcp`.
Claude Console or a cloud provider
Claude Code bills through your API account, Amazon Bedrock, Google Cloud's Agent Platform or Microsoft Foundry. The plugin works the same way, but connectors you added on claude.ai don't load.
Claude Code on the web, at claude.ai/code, runs in the cloud and doesn't load plugins or MCP servers from your machine. Add Rainbrand as a connector on claude.ai instead, following the Claude steps in the [MCP quickstart](https://docs.rainbrand.com/mcp/getting-started); cloud sessions receive your connectors. On Team and Enterprise, only admins can add connectors.
### Pick a brand, or add one
If your team already has brands in Rainbrand, ask Claude Code to list them.
Ask Claude Code
```
List my Rainbrand brands so I can choose one for this project.
```
To add one, point Claude Code at what defines the brand: a website, a brand guide, written rules, logos or images. Claude Code reads files in your project and uploads them to Rainbrand itself with a `curl` command, so there's no file picker to open. A brand from a website or PDF is usually ready in about 90 seconds.
Ask Claude Code
```
Add a brand in Rainbrand from [your website] and the files in ./brand: the brand guide PDF and the logos. Wait until it's ready, then show me its name and a summary of its guidance.
```
A new brand goes into your personal account unless you name a team.
## Get a Brief for the section
Example
Sazabi is a real brand used for illustration. This is independent concept work, not made with or endorsed by Sazabi. Sazabi is a trademark of Sazabi Inc.
I ran this with Sazabi, an observability company whose site sets tall condensed capitals in white and red on near-black. Rainbrand's [Sazabi example](https://www.rainbrand.com/examples/sazabi/) has Claude making a film, a model kit and a pilot licence page from the same brand. Here Claude Code builds something Sazabi's homepage doesn't have: a section telling engineers they can connect their coding agent to Sazabi, which Sazabi's [docs](https://docs.sazabi.com/get-started/coding-agents) cover through a CLI and an MCP server.
Ask for the Brief before there's any code, and describe what the section holds. Rainbrand picks guidance and files for that job rather than sending the whole brand.
Ask Claude Code
```
Request a Rainbrand Brief for Sazabi. I'm building a homepage section for sazabi.com in this Next.js app with Tailwind: a dark band telling engineers they can connect Claude Code, Codex or Cursor to Sazabi so the agent can read production logs while it writes code. It has a headline, one paragraph, the CLI install command, the MCP server URL, a button to the docs and a wide illustration. I need the font files, which colours go where, button and snippet styling, voice for the headline, and references for the illustration. Wait for the Brief and show me its guidance, including anything the brand doesn't settle.
```
The Brief linked Sazabi's heading font, Teko Sans, as a WOFF file at weight 600, and its button font, Eurostile, as a WOFF2 at 700. Body text is Spline Sans at 16px, which the brand has no file for, so it said to load it from Google Fonts. For colour it gave `#FAFAFA` text on `#010401`, `#FF0027` red used sparingly, and `#161918` for the raised snippet boxes. The voice is clear, technically fluent and decisive, with no claims of self-healing software. For the illustration it asked for dark technical line art with a little red, as atmosphere rather than proof, and gave three of Sazabi's line drawings as style references.
It also listed what Sazabi's brand doesn't settle. The guidance puts headings at weight 400 while the only Teko file is 600. There's no code font, no snippet styling and no exact button radius. The integrations, the MCP URL and the CLI flow aren't in the brand either, so it said to check them against Sazabi's docs.
## Make the illustration
Claude Code has no image model of its own, so I asked it to generate the illustration through Rainbrand's AI Gateway, which sends the Brief with the request.
Describe the image the Brief asked for. I first asked for Sazabi's mech, which the Brief hadn't picked, and Claude Code went looking for other images in the brand, so I stopped it and asked for the line art the Brief described.
Ask Claude Code
```
Generate the section's illustration through Rainbrand with Nano Banana 2.1 at 21:9, following the same Brief: dark, mostly monochrome technical line art with fine lines and a little red, in the style of the Brief's references, showing a wall of log lines with one line marked in red. Keep the left half near-black for the text, with no words or logos. Save it to public/images and use it in the section.
```
Rainbrand added the Brief's guidance and reference images to the request. The image came back at 3168 by 1344 pixels: a wall of racks in fine white line art, one row lit red, and the left half near-black for the text.
Made through Rainbrand's AI Gateway with Nano Banana 2.1, Oct 30, 2026.
## Build the section from the Brief
Where the Brief left a gap, I told Claude Code to look at sazabi.com rather than guess.
Ask Claude Code
```
Build the section as a React component with Tailwind. Save the Brief's font files into the project and load them with next/font. Where the Brief says to check the live site, check sazabi.com. Take the CLI command and MCP URL from docs.sazabi.com/get-started/coding-agents and leave the logo out. Then run the dev server and screenshot the section at 1440 and 390 pixels wide.
```
Claude Code saved the Brief's Teko and Eurostile files into `app/fonts` and loaded them with `next/font`, with Spline Sans and JetBrains Mono from Google Fonts. It set the headline in Teko at 600 in capitals and the button in Eurostile, put the CLI command and MCP URL from Sazabi's docs in snippet boxes with copy buttons, and left the logo out. This is part of the component it wrote:
```
const CLI_INSTALL = "npm install -g @sazabi/cli@latest";
const MCP_URL = "https://mcp.sazabi.com/mcp";
const DOCS_URL = "https://docs.sazabi.com/get-started/coding-agents";
// …
Give your coding agent production logs
// …
// …
Connect your agent
```
Claude Code then ran the dev server and took these screenshots itself. On phones the illustration fades behind the copy.
At 1440 pixels.
At 390 pixels.
## Check the section against the brand
A Review checks an image, so the screenshots go to Rainbrand. Claude Code uploads them itself: it asks Rainbrand for an upload link and sends each file with `curl`.
Ask Claude Code
```
Upload both screenshots to Rainbrand and request a Review of each for colour, typography, logo and copy. Give it the exact copy and say the section has no logo. Fix anything it flags, then review again.
```
Both screenshots passed colour, typography and copy on their first Review, so there was nothing to fix. Logo came back not applicable, since the section has no logo. The copy check noted that the headline and button are set in capitals, which come from the CSS, and the Reviews ignored the "N" badge in the corner, Next.js's dev-mode indicator.
Colour
Pass on both. The background, the snippet boxes and the button's red match Sazabi's values.
Typography
Pass on both: Teko for the headline, Spline Sans for the body and Eurostile Bold for the button. On the phone, one letter came back uncertain, and the check still passed.
Logo: Not applicable on both. There's no logo, as intended.
Copy
Pass on both. The text matches exactly, with the headline and button set in capitals.
## Why not CLAUDE.md or a project skill
Many Claude Code guides put fonts and colours in `CLAUDE.md`. Claude Code loads that file into every session, and Anthropic's [memory docs](https://code.claude.com/docs/en/memory) say to keep each one under 200 lines, because longer files take more context and reduce how closely Claude follows them. It's the right place for a repository's commands and conventions. Sazabi's brand alone has 14 colours, three typefaces, logo rules and a voice guide, and its font and logo files have to live somewhere else anyway.
A project skill suits a brand better. A folder in `.claude/skills/` stays out of context until a task matches its description, holds font files, logos and reference images next to its `SKILL.md`, can pull in live data with shell commands, and Claude Code picks up edits to it during a session. Anthropic keeps its own brand colours and fonts as a [skill](https://github.com/anthropics/skills/tree/main/skills/brand-guidelines), and skills follow an open standard, so other agents that support it can read the same folder.
Each repository needs its own copy of the skill, personal skills in `~/.claude/skills` don't load in cloud sessions, and Claude chat, Cursor and Codex each need the folder too, so when the brand changes, someone updates every copy. Within a task, Claude decides which of the skill's files to read.
Rainbrand keeps one brand for every connected agent and the API. Edit it once and every agent uses the new version on its next task. A Brief picks what one task needs and says what the brand doesn't cover, as Sazabi's did. A brand from a PDF or website takes about 90 seconds on average. If you want the brand in the repository as well, export the [Brand Skill folder](https://docs.rainbrand.com/guides/use-brand-skill) through Rainbrand's API and commit it. It's a snapshot, so export it again when the brand changes.
## What it can't do in Claude Code
Claude Code on the web doesn't load plugins or MCP servers from your machine, so cloud sessions need the Rainbrand connector added on claude.ai. Non-interactive runs, such as `claude -p` in CI, can't open the sign-in page, so sign in once from `/mcp` or with `claude mcp login rainbrand` first. Reviews check an image for colour, typography, logo and copy; they don't read your code or judge layout, so look at the phone screenshot yourself. A Brief covers what's in the brand, and Sazabi's had no code font or snippet style, so Claude Code chose those. Rainbrand's plugin comes from a third-party marketplace, so Claude Code doesn't update it unless you turn on auto-update in `/plugin`. Rainbrand's tools come from its server and change without a plugin update.
## Fix common problems
Claude Code says rainbrand needs authentication
Open `/mcp`, select `rainbrand` and sign in, or run `claude mcp login rainbrand` in your shell.
Rainbrand's tools don't appear after installing
Start a new session. If they're still missing, open `/plugin` and check the Errors tab.
Rainbrand is listed twice in /mcp
You have the plugin and also a server you added with `claude mcp add`, or the claude.ai connector. Claude Code connects to one of them. To remove a server you added, run `claude mcp remove rainbrand` with the scope you added it at, such as `--scope user`.
The marketplace or server is blocked
Your organisation's managed settings restrict plugins or MCP servers. Ask your admin to allow the `rainbrandai/rainbrand-skills` marketplace and `https://mcp.rainbrand.com/mcp`.
Rainbrand can't open a local file
Ask Claude Code to upload it with Rainbrand's upload tool and approve the `curl` command it runs. Rainbrand can't read paths on your computer.
It works in the terminal but not on the web
Cloud sessions don't load your plugins. Add the Rainbrand connector on claude.ai.
A Brief or Review is still processing
Ask Claude Code to check the same Brief or Review again. Starting over can create a duplicate.
Out of credits
Follow the link in the error to add credits or upgrade.
More fixes are in Rainbrand's [troubleshooting guide](https://docs.rainbrand.com/mcp/troubleshooting).
## Questions
### Do I need the plugin, or is `claude mcp add` enough?
`claude mcp add` is enough for the tools:
```
claude mcp add --transport http --scope user rainbrand https://mcp.rainbrand.com/mcp
claude mcp login rainbrand
```
The plugin adds the same server plus the Rainbrand Skill, a short set of instructions for using Rainbrand's tools, and installs both in one step.
### I already added Rainbrand in Claude. Do I need to add it again?
Not if you sign in to Claude Code with the same claude.ai account. Connectors you added on claude.ai appear in `/mcp` without setup, and cloud sessions get them too. If you also install the plugin, Claude Code connects to Rainbrand once, through the plugin, because it ranks plugin servers above claude.ai connectors at the same address.
### Does it work with Anthropic's frontend-design skill?
Yes, and they do different jobs. Anthropic's [frontend-design plugin](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design) gives Claude a design process and a list of defaults that make a page look generated. One of them is "a near-black background with a single bright acid-green or vermilion accent", which is close to Sazabi's real site. The same skill says that where a brief pins down a visual direction, "the brief's own words always win". Ask for the Rainbrand Brief first, so the brand is that brief. Install the skill with `claude plugin install frontend-design@claude-plugins-official`. Guides that add the `claude-code-plugins` marketplace are out of date; Anthropic has deprecated it.
### Does it work in VS Code, JetBrains and the desktop app?
Yes. The terminal, the VS Code extension and the desktop app's local sessions read the same settings, so a plugin installed from your shell works in all three. JetBrains IDEs run Claude Code in their terminal, so the same steps apply. Claude Code on the web needs the claude.ai connector instead.
### Can my team share it?
Yes. Each person installs the plugin and signs in with their own Rainbrand account, and brands in a Rainbrand team are available to everyone in it. To turn the plugin on for a repository, install it with `--scope project`, which records it in `.claude/settings.json`. Each collaborator still runs the install once.
### What does it cost?
Claude Code comes with Claude Pro, Max, Team and Enterprise, or bills through the Claude Console or your cloud provider. Rainbrand needs its own account and works on every Rainbrand plan. Briefs, Reviews and generations through Rainbrand's AI Gateway use Rainbrand credits, listed on the [pricing page](https://www.rainbrand.com/pricing/).
## Read next
- [MCP quickstart](https://docs.rainbrand.com/mcp/getting-started)
Connect any agent, add a brand and request your first Brief.
- [Which MCP servers provide brand guidelines and assets?](https://www.rainbrand.com/blog/mcp-servers-for-brand-guidelines/)
Brand MCP servers differ in whose brand they cover and what an agent gets back. From each server’s documentation, here is which of Rainbrand, Frontify, Bynder, Standards, Canva, Figma, Brandfetch and Pulumi’s own brand server fits which job.
- [Which brand guideline formats can AI tools actually use?](https://www.rainbrand.com/blog/brand-guideline-formats-for-ai/)
AI tools can open a PDF, a deck, a web page or a Markdown file, but each format keeps different parts of a brand intact. Compare PDFs, portals, Markdown, BRAND.md, Agent Skills, DESIGN.md and design tokens by what they carry, how agents read them and where they break.
- [How to give multiple AI assistants the same brand guidelines](https://www.rainbrand.com/blog/give-multiple-ai-assistants-the-same-brand-guidelines/)
Connect assistants to the same maintained brand, give each task the guidance and files it needs, and track the snapshots that still need replacing.
- [ChatGPT with Rainbrand](https://www.rainbrand.com/integrations/chatgpt/)
Install the Rainbrand plugin to give ChatGPT your brand's voice, logos and photos. Make on-brand copy, images, video and audio, and review each asset against the brand.
- [Claude with Rainbrand](https://www.rainbrand.com/integrations/claude/)
Add the Rainbrand connector to give Claude your brand's voice, logos and photos. Make on-brand writing, decks and images, and review each asset against the brand.
## Install in your agent.
Add Rainbrand to the agent you already use.
[Read the docs](https://docs.rainbrand.com/mcp/getting-started)
### 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).
### 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).
### 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).
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/)