Use This Brand-Kit Script to Stop Claude Code from Generating Generic

What Changed — A Script to Front-Load Brand Intent

Developer Lily has open-sourced a pattern that solves a common Claude Code frustration: the "default Tailwind vibe." Her brand-kit/generate.sh script generates a brand guide, CSS tokens, and a preview HTML file before you write a single line of frontend code. This forces Claude Code to implement with intentional design choices instead of falling back to shadows, rounded corners, and uniform card grids.

What It Means For You — Escape Generic AI Design

When you tell Claude Code "build a landing page" without design instructions, it defaults to the lowest common denominator. That's because Claude has no information about your brand's intent. The framework's defaults fill the void.

By running generate.sh first, you create three files that act as a design contract:

• brand-guideline.md: Worldview, style direction, palette intent, typography strategy, motion principles, do's and don'ts
• tokens.css: oklch-based CSS custom properties
• preview.html: A single-HTML landing page fragment that applies the tokens visually

Hand these files to Claude Code with the instruction "implement following this guide." The output transforms completely — Claude stops guessing and starts executing your specific design vision.

Try It Now — Commands to Use Brand-Kit

Clone or create the brand-kit structure locally:

brand-kit/
├── generate.sh        ← main script
├── lib/
│   └── strip_fence.py ← code-fence stripping utility
├── output/
│   └── <slug>/        ← where generated files land
└── README.md

Run the script with a project slug and a brief summary:

cd ~/dev/brand-kit
bash generate.sh my-project "SaaS landing page for developer tools. Clean, minimal, with subtle gradients."

This generates three files in sequence. The script splits generation into three separate Claude Code calls to avoid token limits — the guideline is substantial, and adding tokens + preview on top would truncate output.

Each call feeds into the next:

• The guideline's first 6000 characters inform the token generation
• The full tokens.css informs the preview generation

This ensures all three files share the same worldview. If you don't like the direction, rewrite the summary and add --force to regenerate. Add --refs to also generate a references.md with real reference URLs gathered via WebSearch.

Why It Works — Token Economics and Context

The key insight: without design instructions, Claude uses its training data's defaults. By front-loading a brand guide, you:

1. Fill the information void — Claude doesn't have to guess what "clean" means for your project
2. Reduce decision paralysis — With explicit do's and don'ts, Claude generates faster and more consistently
3. Create a cascading context — The guideline informs tokens, which inform the preview, creating a coherent design system

The three-call approach is deliberate. A single call would produce broken CSS or HTML when it hits the max token count. Splitting ensures each file is complete and consistent.

For Claude Code Users

This pattern works with any Claude Code workflow. Add this step to your project setup:

# In your project root
bash ~/dev/brand-kit/generate.sh project-name "description"
cp output/project-name/* ./
claude code "Implement the landing page following brand-guideline.md and tokens.css"

You'll see Claude produce UIs that feel bespoke, not templated. The technique is especially powerful for personal projects where you want distinct visual identities across different apps.

References

• Original article: Front-load your brand guide to AI before you write a line of frontend code
• Related: Getting Claude Code and Codex to collaborate on a single machine

Source: dev.to