How to Build a Brand Guide for AI-Generated Frontends

You ask Claude Code to build you a dashboard. It gives you a clean layout with blue buttons, gray cards, 8px border radius, and Inter font. Looks fine. Professional, even.

Then you ask it to build a landing page. You get a different blue, Tailwind defaults, 6px border radius, and system fonts. Still looks fine on its own. But put the two next to each other and they look like they were built by different companies. Because, in a sense, they were.

This is the dirty secret of AI-assisted frontend development in 2026. The code works. The layouts are decent. But the visual identity is random. Every prompt starts from zero. The AI has no memory of your brand, your color palette, your spacing system, or your component patterns. So it makes something up each time.

I got tired of fixing this manually. So I built a brand guide skill for Claude Code that solves the problem at the source. It creates a structured JSON file that the AI reads before generating any frontend code, locking every color, font, spacing value, and component pattern to your specifications.

This post walks through why AI frontends look generic, how a machine-readable brand guide fixes it, and how to build one yourself. The skill is open source, and most of what you need to know is right here in this article.

01 Why AI Frontends All Look the Same

AI coding tools are trained on millions of repositories. The "average" of all those repos is Tailwind defaults: blue-500 primary, gray-100 backgrounds, rounded-lg corners, Inter or system-ui fonts. That average is what you get when you don't specify otherwise.

And "specify otherwise" is harder than it sounds. You can write "use my brand colors" in your prompt, but which colors? You can say "make it match our website," but the AI can't see your website. It can't open a browser and screenshot your homepage. It generates from text instructions alone.

The result: developers spend 30-45 minutes after every AI generation session hunting down wrong hex values, inconsistent spacing, mismatched fonts, and buttons that look nothing like the rest of the app. That's not a minor annoyance. On a project with 15-20 frontend components, you're losing full days to visual cleanup.

The prompt engineering trap

The instinct is to write longer prompts. "Use #d4421e as the primary color, Syne for headings, Instrument Sans for body text, 4px base spacing unit, 0px border radius on cards..." And that works for one generation. But you have to paste that block into every single prompt. Miss it once and you're back to Tailwind blue.

Worse, prompts are lossy. Natural language is ambiguous. "Use generous spacing" means different things to different models (and different versions of the same model). "Make the buttons pill-shaped" might give you border-radius: 9999px on Tuesday and border-radius: 24px on Thursday.

You need something structured. Something the AI can parse deterministically. Something that persists across sessions.

02 What a Machine-Readable Brand Guide Looks Like

A brand guide for AI consumption is a JSON file. Not a PDF. Not a Figma link. Not a paragraph of instructions. A structured data file with explicit tokens for every visual decision.

Here's a simplified version of the schema:

{
  "brand": {
    "name": "Acme Corp",
    "personality": ["bold", "technical", "approachable"],
    "tone": "Confident with a technical edge, never cold"
  },
  "colors": {
    "primary": {
      "base": "#d4421e",
      "light": "#f0a892",
      "dark": "#a3321a",
      "contrast": "#ffffff"
    },
    "neutral": {
      "50": "#f0ece4",
      "900": "#0a0a0a"
    },
    "semantic": {
      "success": "#22c55e",
      "error": "#ef4444"
    }
  },
  "typography": {
    "headingFont": "Syne",
    "bodyFont": "Instrument Sans",
    "monoFont": "JetBrains Mono",
    "scale": {
      "base": "1rem",
      "lg": "1.125rem",
      "4xl": "2.25rem"
    }
  },
  "spacing": {
    "unit": "0.25rem",
    "containerMax": "1280px"
  },
  "components": {
    "buttons": {
      "borderRadius": "none",
      "textTransform": "uppercase"
    },
    "cards": {
      "shadow": "none",
      "border": true
    }
  },
  "rules": {
    "dos": ["Always use color tokens, never hardcode hex"],
    "donts": ["Never use gradients on text"]
  }
}

That's a trimmed example. The full schema has fields for shadows, border treatments, motion/animation philosophy, input styles, navigation patterns, and line heights. But the structure is the point: every visual decision has an explicit, parseable value.

When an AI reads this file before generating code, it doesn't guess. It looks up colors.primary.base and gets #d4421e. It checks components.buttons.borderRadius and gets none. No ambiguity. No drift.

03 The Two-Mode Approach: Build It, Then Enforce It

Creating a brand guide JSON by hand is tedious. You have to pick colors, pair fonts, define a spacing scale, decide on border treatments, choose shadow depths, set animation timing. That's 50+ decisions, and most developers aren't designers.

The brand guide skill I released handles this with two modes:

Builder mode walks you through an interactive interview. It asks about your brand personality, shows you color palette options as rendered HTML previews, presents font pairings side by side, and lets you compare spacing philosophies visually. After each decision, it regenerates the preview so you see the cumulative effect. At the end, it exports a brand-guide.json file plus a polished visual reference you can share with your team.

Enforcer mode reads an existing brand-guide.json and treats it as law. Every color in the generated output must trace back to a brand token. Every font must match the guide. Spacing values must come from the defined scale. The AI self-audits before presenting any output, scanning for hardcoded hex values, off-brand fonts, and spacing that deviates from the system.

Builder creates the constraints. Enforcer applies them. You run Builder once (or whenever you rebrand), then Enforcer runs every time you build anything.

What the Builder interview covers

The interview has ten stages. Each one produces a visual preview artifact:

1. Discovery: What's the brand? Do you have existing assets (logo, colors, website)?
2. Personality: Pick adjectives on spectrums (professional vs. playful, minimal vs. dense, traditional vs. modern)
3. Colors: Three palette options rendered as swatches and mini UI mockups. Primary, secondary, neutral scale, semantic colors
4. Typography: Three font pairings shown rendering the same content at multiple sizes
5. Spacing: Side-by-side comparison of airy vs. compact layouts using the same card component
6. Shape and depth: Sharp, soft, round, or mixed border treatments shown on real UI elements
7. Components: Buttons (filled, outlined, ghost), cards, inputs, navigation patterns
8. Motion: Minimal, subtle, or expressive animation philosophy
9. Rules: Explicit do's and don'ts. "Never use pure black." "Always use the spacing scale."
10. Export: Final review of the complete visual reference, then JSON file generation

If you already have a logo or existing website, the Builder extracts colors and visual patterns from those assets first. It meets you where you are instead of starting from scratch.

04 How the Enforcer Actually Works

Enforcer mode isn't a suggestion system. It's a constraint system. This is what it does every time you ask the AI to build a frontend component:

Step 1: Parse the guide. It reads brand-guide.json and loads every token into context.

Step 2: Generate CSS custom properties. Before writing any component code, it creates a :root { } block with CSS variables derived from the brand tokens. --color-primary: #d4421e;, --font-heading: 'Syne', sans-serif;, --spacing-4: 1rem;, and so on.

Step 3: Build the UI. Layout decisions, content structure, information hierarchy are still creative choices. But every visual property (color, font, spacing, border-radius, shadow) references a brand token. No raw hex values. No arbitrary pixel counts.

Step 4: Self-audit. Before showing you the result, it scans the output for violations. Any hardcoded color not from the guide? Any font-family not in the spec? Any spacing value not on the scale? Any rule from the "don'ts" list broken? It fixes violations before you see them.

The self-audit is the part that makes this more than a template. LLMs are probabilistic. They drift. Even with a brand guide in context, the model might slip a #333 into a text color instead of using var(--text-primary). The audit step catches that drift before it reaches your codebase.

What stays creative, what gets locked

Locked by the guide: Colors, fonts, spacing values, border radii, shadows, animation timing, component patterns (button shapes, card styles, input treatments).

Still your call: Page layout, content flow, information architecture, which components to use where, imagery, copywriting, overall page structure.

Think of it like writing music in a specific key. The key constrains which notes you can play. It doesn't constrain the melody.

05 Building Your Own Brand Guide (Without the Skill)

You don't need the skill to use this approach. The skill automates the interview and preview process, but the underlying technique works with any AI coding tool. Here's how to do it manually.

Start with your existing assets

Open your current website or app. Extract the actual values being used:

# In your browser's dev tools console:
# Get all unique colors in use
const styles = document.querySelectorAll('*');
const colors = new Set();
styles.forEach(el => {
  const cs = getComputedStyle(el);
  colors.add(cs.color);
  colors.add(cs.backgroundColor);
  colors.add(cs.borderColor);
});
console.log([...colors].filter(c => c !== 'rgba(0, 0, 0, 0)'));

Do the same for fonts, spacing values, and border radii. You'll probably find inconsistencies in your existing codebase. That's normal. Pick the values you want and discard the accidental ones.

Define your color tokens

At minimum, you need:

• Primary color with light and dark variants plus a contrast value for text-on-primary
• Neutral scale from near-white to near-black (50 through 950)
• Semantic colors: success (green), warning (amber), error (red), info (blue)
• Background tokens: main page bg, card/surface bg, section bg
• Text tokens: primary text, secondary/muted text, inverse (text on dark)

Secondary and accent colors are optional but recommended if your brand uses more than one hue.

Pick your fonts

You need a heading font, a body font, and a monospace font. Google Fonts works well because the AI can generate the correct <link> import automatically. Define your type scale too: what size is body text, h1, h2, h3, small text? Use rem units.

Define spacing and shape

Pick a base unit (4px / 0.25rem is standard) and build a scale from it. Decide on border radius tokens: are your components sharp, softly rounded, or pill-shaped? Define shadow tokens if you use elevation in your design.

Write the rules

This is the part most people skip, and it matters more than the tokens. Rules tell the AI what not to do. Examples that work well:

• "Never use pure black (#000) or pure white (#fff). Use neutral-950 and neutral-50."
• "Buttons are always uppercase with letter-spacing: 0.08em."
• "No gradients anywhere. Flat colors only."
• "Max two font weights per page. Regular (400) and bold (700)."
• "Cards use borders, not shadows, for visual separation."

Negative constraints ("never do X") are more effective than positive ones ("always do Y") because LLMs have more failure modes than success modes. Telling the AI what to avoid eliminates entire categories of drift.

Save it as JSON and add it to your project

Put the file at the root of your project as brand-guide.json. Then add a line to your AI tool's instructions (CLAUDE.md for Claude Code, .cursorrules for Cursor, or equivalent) telling it to read the file before generating any frontend code:

# In your CLAUDE.md or project instructions:
Before generating any frontend code, read brand-guide.json
and use ONLY the colors, fonts, spacing values, and component
patterns defined there. Self-audit your output for any
hardcoded values that don't reference brand tokens.

That single instruction gets you 80% of the enforcement benefit. The skill adds the self-audit loop and structured interview on top, but this manual approach works.

06 Real-World Results

I've been using this approach for six weeks across four different projects. The difference was obvious:

Before the brand guide: Every AI-generated component needed 20-40 minutes of manual corrections to colors and fonts, plus spacing fixes. Across a 15-component dashboard, that was 5-8 hours of visual cleanup.

After the brand guide: Components come out on-brand on the first generation about 90% of the time. The remaining 10% usually involves the AI using a raw hex value instead of a CSS variable, which takes 2 minutes to fix. Total cleanup time per project dropped from hours to under 30 minutes.

The bigger win is consistency across sessions. Before, if I generated a sidebar on Monday and a settings page on Wednesday, they'd look like they came from different apps. Now they share the same visual DNA because both generations read the same brand file.

Where it still breaks

No system is perfect. The places where brand enforcement still slips:

• Complex gradients and illustrations. If your brand uses specific gradient angles or illustrated elements, those are hard to capture in JSON tokens. You'll need to describe them in the rules section with natural language.
• Responsive breakpoints. The guide handles spacing and font sizes, but responsive layout logic (when to stack columns, when to hide elements) still needs prompt-level instructions.
• Third-party component libraries. If the AI reaches for a component from shadcn/ui or similar, the default styling of that library can override your brand tokens. Add a rule: "Do not use pre-built component libraries. Build components from scratch using brand tokens."
• Long conversations. In very long chat sessions, the AI may lose track of the brand guide deep in its context window. Starting fresh with the guide at the top of context helps.

07 Adapting This for Cursor, Copilot, and Other Tools

The brand guide skill was built for Claude Code, but the JSON-based approach works with any AI coding tool that accepts project-level instructions.

Cursor: Add a .cursorrules file that references your brand-guide.json. Cursor reads project rules before generating code, so the same enforcement pattern applies.

GitHub Copilot: Include brand-guide.json in your repository and reference it in your Copilot instructions file. Copilot's context window is smaller, so you may need a condensed version of the guide with only the most-used tokens.

bolt.new / Lovable / v0: These tools don't support persistent project files in the same way, but you can paste the JSON (or a condensed version) at the start of each session. Not as elegant, but it works.

The JSON format is tool-agnostic by design. Any AI that can read structured data can consume it.

08 The Brand Audit Trick

One feature of the brand guide skill that's easy to overlook: audit mode. If you paste existing HTML/CSS and ask "does this follow my brand guide?", it will:

1. Parse every color value, font declaration, spacing value, border-radius, and shadow in your code
2. Compare each against the brand guide tokens
3. Report deviations in a table: what was found, what it should be, where in the code
4. Offer to fix the deviations automatically

This works retroactively on code that was generated before you had a brand guide. I used it to audit a 40-page marketing site and found 127 color values that should have been 14 tokens. The auto-fix brought it in line in about ten minutes.

What We Didn't Cover

This post gives you the full approach for single-project brand consistency. But there's more to the design system AI coding workflow that we didn't get into:

• Multi-project brand management: Using the same guide across a marketing site, a web app, and a mobile app with platform-specific overrides
• Design token export: Converting brand-guide.json into Tailwind config, CSS-in-JS theme objects, or native platform tokens
• Version control for brand guides: How to evolve your brand over time without breaking existing pages
• Team workflows: Getting five developers with five AI tools all generating on-brand output

Start Here

If you take one thing from this post: stop typing color values into prompts. Put them in a JSON file. Tell the AI to read it. That single change will save you more time than any prompt engineering trick.

For the full guided experience with visual previews and auto-export, grab the brand guide skill from GitHub. It's open source, it works with Claude Code today, and the JSON output works with any AI tool that reads project files.

Your frontends should look like your brand. Not the average of every Tailwind project on GitHub.