AI Can Build Features. It Can't Make Them Look Like They Belong Together. (Unless You Tell It How.)

PublishedFebruary 25, 2026

Reading Time5 min read

The biggest problem with using AI coding tools like Claude Code, Cursor, or Jules to build websites and apps isn't whether they can do it.

They can.

The problem is page A looks one way, page B looks completely different. Buttons change color every time you generate something new. Spacing is never the same twice. Font sizes feel like they were picked at random.

It looks like 10 people built it and none of them ever talked to each other.

I ran into this the moment I started using AI to write code. Because I'm a designer. I see it immediately when something is off. Someone without a design background might look at the output and say "looks fine." But it's not fine. It has a face but no consistency.

And consistency is what separates a toy from a real product.

The fix isn't hard. But you have to do it before writing the first line of code.

1. Create a Design Rule File Before You Start

Before letting AI write anything, create a rules file. Could be DESIGN_RULES.md, .cursorrules, or CLAUDE.md depending on your tool.

Be explicit about:

Colors (primary, secondary, accent, background, text)
Fonts, sizes, weights for heading, body, caption
Spacing system (4px grid? 8px grid?)
Border radius (every component must match)
Button styles (primary, secondary, ghost)
Shadows (use or not, exact values)

Example:

## Color System
- Primary: #2563EB
- Secondary: #1E293B
- Accent: #F59E0B
- Background: #FFFFFF
- Surface: #F8FAFC
- Text Primary: #0F172A
- Text Secondary: #64748B

## Typography
- Heading 1: Inter, 32px, Bold
- Heading 2: Inter, 24px, Semibold
- Body: Inter, 16px, Regular
- Caption: Inter, 14px, Regular

## Spacing
- Base unit: 8px
- Component padding: 16px
- Section gap: 32px
- Page margin: 24px

## Components
- Border radius: 12px (all components)
- Button height: 44px
- Input height: 44px
- Shadow: 0 1px 3px rgba(0,0,0,0.1)

Just this alone will make AI produce output that looks consistent across the entire project.

2. Build a Component Library as AI's Reference

Don't let AI decide what a button should look like on its own.

Create two or three components first. Button, Card, Input, Modal. Then tell AI to always reference existing components when building new ones.

In Claude Code I put this in my CLAUDE.md:

When creating new UI components, always reference existing
components in /src/components/ui/ for consistent styling.
Never invent new color values or spacing.
Always use the design tokens defined in /src/styles/tokens.ts

That's it. AI stops inventing random styles on its own.

3. Use Design Tokens Instead of Hard-coded Values

This is something every designer knows but non-designers often skip.

Don't let AI write color: #2563EB directly in every file. Make it use tokens instead. Something like var(--color-primary) or colors.primary in your Tailwind config.

Because when you want to change a color later, you change it in one place and the whole project updates. No hunting down hex codes scattered across fifty files.

Put this in your rule file:

NEVER use hard-coded color values in components.
ALWAYS use design tokens from the theme configuration.
If a color doesn't exist in the token system, ask before adding it.

4. Screenshot Check Every 3-4 Components

This is what I do personally, every single time.

Every time AI builds 3 or 4 new components, I screenshot the screen and compare them visually. Is the spacing consistent? Do the colors match? Are the proportions balanced?

If something starts drifting, fix it immediately. Don't let it accumulate. Because AI will use the broken component as reference for the next one. Then the next one drifts further. Before you know it, the whole project looks like a collage.

Think of it like a design review every sprint.

5. Show AI a "Correct Example"

This is the trick that works best.

Instead of writing long descriptions of what you want, show AI a finished example.

I often screenshot a page that's already designed correctly, paste it into the conversation, and say "build the new page matching this style."

AI understands visual references extremely well. Better than reading spec documents.

The Bottom Line

AI coding tools build features fast. But without a design system guiding them, what you get is a Frankenstein app. Pieces that don't look like they belong together.

As a designer who's been using AI to write code for months, here's what I've learned.

AI doesn't have "eyes" the way a designer does. It doesn't know the difference between 12px and 16px spacing in terms of feel. It can't see that two similar colors make a UI look muddy. It doesn't understand how good typography hierarchy makes everything easier to read.

But if you tell it clearly, it follows instructions remarkably well.

The key is simple. Don't let AI make design decisions on its own. Write the rules. Build the system. Then it becomes the most consistent team member you've ever had.

Designer + AI + Design System = Ship fast, look good

If you want to see the actual rule file I use with Claude Code, let me know. Happy to share.

← Back to blog