Why Claude Is Aesthetically Amnesiac
Claude writes excellent backend logic. It can scaffold a full auth flow, wire up a database schema, and handle edge cases you didn't think of. Then you ask it to add a button and it renders it in #6366f1 with rounded-lg and a box shadow that doesn't exist anywhere in your actual codebase.
It's not a bug. It's the default behavior. Without explicit constraints, Claude samples from its training distribution — which is flooded with purple-accent, rounded-everything Tailwind UIs. It has learned what “typical” looks like, and typical is what you get.
The fix is not better prompting. “Use my design system” doesn't work because Claude doesn't know what your design system is. “Use dark backgrounds and a green accent” produces different greens on every run. The only thing that works is mathematical specificity: exact hex values, exact pixel values, zero wiggle room.
That's what CLAUDE.md is for.
What a Real CLAUDE.md Design System Block Looks Like
Here's a production-grade block you can drop into your CLAUDE.md. This example uses a dark minimal aesthetic — one accent, neutral base, tight radius:
## Design System Rules
You are building with a locked design system. Do not invent tokens.
Do not substitute. If you cannot implement a component with the
tokens below, ask — do not approximate.
### Typography
- Heading font: "DM Serif Display", serif — weights 400 only
- Body font: "DM Sans", sans-serif — weights 400, 500
- Heading letter-spacing: -0.02em
- Body letter-spacing: 0em
- Do not use system fonts. Do not use Inter. Do not use Roboto.
### Colors
- Background: #0e0e0e
- Surface: #171717
- Surface hover: #1f1f1f
- Border: rgba(255, 255, 255, 0.07)
- Text primary: #f0f0f0
- Text muted: rgba(240, 240, 240, 0.45)
- Accent: #a8e635
- Accent soft: rgba(168, 230, 53, 0.10)
- Do not introduce any color not listed above.
### Shape
- Default radius: 6px
- Small radius (inputs, tags): 4px
- Large radius (cards, modals): 10px
- Do not use rounded-full on non-circular elements.
### Depth & Shadows
- Default shadow: 0 4px 24px rgba(0, 0, 0, 0.45)
- Small shadow: 0 1px 4px rgba(0, 0, 0, 0.3)
- No colored shadows. No glow effects unless requested.
- Cards use surface color (#171717) + default shadow.
### Behavioral Rules
- Never use inline styles. CSS variables or Tailwind only.
- The accent (#a8e635) appears on: primary buttons, active
states, focus rings, and links on hover. Nowhere else.
- Disabled states use text-muted + 0.5 opacity. Not gray-400.
- Spacing follows 4px base unit: 4, 8, 12, 16, 24, 32, 48, 64px.That's approximately 1,800 characters. Every line is doing work. There's no room for Claude to default to its training distribution because the constraints are total.
The Four Sections That Actually Matter
Most CLAUDE.md guides online are about code style — linting rules, naming conventions, file structure. Fine for backend consistency. Useless for UI.
A design system block needs four things:
Typography constraints with font family names exactly as they appear in Google Fonts, plus weight restrictions. If you allow weight 700 and your design uses 400, Claude will bold every heading.
Color constraints with exact hex values and explicit rules about where each color applies. The accent rule is the most important one. “Use green for buttons” produces a different green every time. #a8e635 on primary buttons only is unambiguous.
Shape constraints with pixel values, not Tailwind class names. rounded-lg maps to 8px in Tailwind's default config but you may have overridden it. Write 6px and the ambiguity disappears.
Behavioral rules — this is what separates a working CLAUDE.md from one that fails after three prompts. Rules like “the accent appears on interactive elements only” and “never use inline styles” and “cards use surface color, not background color” encode the design decisions that would otherwise get lost.
The Manual Process Is Brutal
Writing this file correctly for a new project takes between two and four hours. Not because the format is complicated — it's markdown. Because getting here requires:
Finalizing your actual design tokens (most developers haven't done this formally). Translating visual decisions into precise numerical constraints. Testing the file against 20+ prompts to find where Claude still drifts. Iterating on the behavioral rules until edge cases are covered. Maintaining it as the design evolves.
Most developers skip it because the upfront cost is invisible until they've spent six hours manually correcting Claude's CSS output across a 30-component build.
How SeedFlip Generates This Automatically
SeedFlip's Pro tier includes IDE rule file downloads as an export option. When you find a seed you want to build with — or remix one using Lock & Remix to lock your preferred palette and shuffle typography — you can export the complete CLAUDE.md directly.
The exported file isn't a generic template. It's generated from that seed's actual token values: the exact hex codes, the exact Google Font names and weights, the exact radius and shadow specs. The behavioral rules are pre-written and structured specifically for LLM ingestion — not for humans to read but for Claude to parse and enforce.
The same seed also exports .cursorrules and .windsurfrules if you're working in Cursor or Windsurf. One seed, three IDEs, zero manual token extraction.
The underlying token set is the same one that powers The Briefing — a ~1,700-character AI prompt with five structured sections (Typography, Colors, Shape, Depth, Rules) that you paste into Cursor, v0, or Bolt to scaffold a new project. The CLAUDE.md export is the persistent version of that briefing: it lives in your repo and re-applies the constraints on every subsequent prompt automatically.
You can pull the full token set as CSS Variables via The DNA (free), or Tailwind Config via The Tailwind DNA (Pro). The rule file sits on top of those as the behavioral layer.
The Value Proposition Is Arithmetic
Spend four hours writing, testing, and iterating a CLAUDE.md design system block. Or pay $19, open The Archive, find a seed that matches your aesthetic, and export it in 30 seconds.
That's not a pitch. That's division.
The only reason to write it manually is if you have highly specific token values that don't exist in any seed — which is reasonable. In that case, the examples in this article give you the exact format. Start with the structure above, swap the hex values, and run 20 prompts before you consider the file done.
For everyone else: stop correcting Claude's CSS and start constraining it.
Browse the seed library and export your CLAUDE.md in 30 seconds.