Three files to keep your designs consistent
AI models default to purple gradients and generic SaaS dashboards because they are guessing. You can keep your design consistent without writing huge prompts. Just document your tech stack, design tokens, and visual anti-patterns in three simple markdown files at the root of your project.
00 The blind guess problem
When you ask a model to write a component, the code usually compiles. But the design is boring: rounded-square icon tiles above headings, nested cards, and Inter typography.
The model does this because it doesn’t know what you want your app to look like. If you give it clear, machine-readable rules, the generic designs disappear.
01 claude.md — Document the context
Put a claude.md file at your project root. The model reads this system instructions file when it starts. Use it to set the core tech stack and rules.
## Product GigHub is a tool for working musicians. The UI must feel professional and efficient—no generic SaaS tropes. ## Tech Stack - React 18, TypeScript, Vite - Tailwind CSS ## Conventions - Components go in /src/components. - Use Tailwind classes; no inline styles. - Reference the existing Card pattern in /src/components/Card.tsx.
02 design.md — Define the design tokens
Create a design.md file to document your design language. Cover typography, colours, spacing, and things to avoid.
# Design Language ## Typography - Display: Playfair Display (headings) - Body: DM Sans (copy) - Mono: DM Mono (times, metadata) ## Colors - Background: #F5F0E8 - Text Primary: #1A1A1A - Text Secondary: #6B6B6B - Accent: #2D5BE3 - Rule: No gradients. No purple. ## Avoid - Rounded icon badges above headings - Cards nested inside cards - Decorative illustrations - SaaS dashboard templates
03 impeccable.md — Enforce the rules
While design.md lists the rules, impeccable.md tells the model to audit its code against those rules before writing edits.
First, install the design auditor tool:
npx skills add pbakaus/impeccable
Then, write your impeccable.md file:
# Design Enforcement Enforce the Impeccable design skill for frontend changes: - Enforce the 4px grid. - Follow the typography scale in design.md. - Run anti-pattern checks before returning code. - Flag any deviations from design.md.
If the layouts start to drift, run the audit command to find where:
npx impeccable audit
04 Directory structure
your-project-root/ ├── claude.md ← Product context & code conventions ├── design.md ← Typography, colour tokens, and avoid lists ├── impeccable.md ← Automated audit instructions └── src/
05 Checklist
Create or update claude.md with product context and conventions.
Create design.md with visual tokens and an explicit 'avoid' list.
Install the Impeccable design auditor plugin.
Write the impeccable.md instructions pointing back to design.md.
Restart your coding session to load the new markdown files.
Writing these files takes under twenty minutes, and the payoff is immediate: new components start from a consistent base instead of a guess.