Claude Code skills and MCP for on-brand frontend design

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.

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.

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; 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.

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.

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

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 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 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.

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.

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.

Build the section from the Brief

Where the Brief left a gap, I told Claude Code to look at sazabi.com rather than guess.

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";

// …

<h2 className="font-display text-5xl leading-[0.8] font-semibold tracking-[-0.03em] uppercase [font-kerning:none] sm:text-7xl">
  Give your coding agent production logs
</h2>

// …

<CopySnippet label="Install the CLI" value={CLI_INSTALL} />
<CopySnippet label="MCP server" value={MCP_URL} />

// …

<a
  href={DOCS_URL}
  className="mt-10 inline-flex h-11 items-center rounded-sm bg-signal px-6 font-cta text-lg leading-none font-bold tracking-[0.07em] text-white uppercase [font-kerning:none] …"
>
  Connect your agent
</a>

Claude Code then ran the dev server and took these screenshots itself. On phones the illustration fades behind the copy.

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.

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 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, 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 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.

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 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.