Why AI tools ignore your design
Coding models are trained on millions of interfaces, and when a prompt leaves the design open they fill it with the most common choices: Inter, a purple-to-blue gradient, rounded white cards with soft shadows, an emoji in each heading. That is what people call AI slop. It is not a bug; it is the average.
Most attempts to fix it describe a mood. The model still has to invent every value, and it invents the average again. The fix is to remove the guesswork: give the tool the values, make them the only ones available, and say what not to do.
1. Write the values, not adjectives
Replace “clean, modern, premium” with the system itself: every allowed colour as a hex value with its job, the type scale with sizes and weights, the spacing steps, the corner radii and the shadows. A model cannot guess #1ED760 from “Spotify-ish green”.
2. Put the values in code the tool must use
Paste them as CSS custom properties and a Tailwind v4 @theme block that starts with --color-*: initial. With Tailwind’s default palette removed, slate, indigo and violet utilities stop existing, so the model cannot reach for them.
3. Ban the defaults explicitly
List what the design never does, each with a reason: no gradients, no emoji icons, no glassmorphism, no row of three identical feature cards, no headline heavier or lighter than measured. Models follow concrete bans far better than general taste.
4. Make the rules permanent context
Save them where the tool reads them on every request: CLAUDE.md for Claude Code, AGENTS.md for Codex and others, a .cursor/rules file for Cursor, or the project knowledge in Lovable. A rule that is only in the first prompt fades by the third change.
5. Check the output against the system
Ask the tool to search its code for every colour, size, radius and font and replace anything not in the list, then to compare a screenshot with the reference. In a code editor, a script that fails on off-system values does this automatically.
Where the values come from
If you have a design system, export its tokens. If you are starting from a site whose style you admire, measure it: a design system extractor reads the colours, type scale, spacing, radii and shadows from the rendered page. Use the style, never the other site’s name, copy, images or licensed fonts.
PikSpec’s Build with AI does all five steps in one go: it measures a page, writes the tokens and bans, adds the files each tool reads (CLAUDE.md, AGENTS.md, Cursor rules), and includes a checker that lists every off-system value.
Tool by tool
Claude Code and Codex: put the rules in CLAUDE.md or AGENTS.md and the tokens in your global CSS; ask the agent to run a check before it finishes.
Cursor: add a rule file under .cursor/rules with alwaysApply, pointing at the tokens file.
Lovable, Bolt and v0: they start from a prompt, so lead with what you are building, then the values and bans. Keep the most important rules first, because long prompts get truncated. After the first result, ask for a pass that replaces every off-list colour.
Questions
Why does Lovable ignore my design instructions?
Usually because the instructions describe a feeling instead of values, or because they were only in the first prompt. Give exact colours, fonts and sizes, list what to avoid, and put them in the project's knowledge so every later change sees them.
What should a DESIGN.md contain?
The allowed colours with their roles, the type scale, spacing steps, radii, shadows, component rules and a list of things the design never does, each as concrete values.
Do I need Tailwind for this?
No, CSS custom properties work anywhere. Tailwind helps because removing its default palette makes off-system colours impossible to use by accident.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.