This is the #1 mistake I see devs make when using AI to code...
Prajwal Tomar@PrajwalTomar_
69 views
May 23, 2025
~2 min read
Advertisement
1
This is the #1 mistake I see devs make when using AI to code frontend UIs.
And it breaks your UI faster than you think.
If you’re using Cursor, Bolt, or Windsurf to ship fast, read this before you start coding ↓
And it breaks your UI faster than you think.
If you’re using Cursor, Bolt, or Windsurf to ship fast, read this before you start coding ↓
2
1/ AI loves to mix hardcoded values with your design system
One second it’s pulling your Tailwind variables.
Next second it’s throwing in hex codes or px margins directly in the component.
This happens because you never gave it a rule to follow.
One second it’s pulling your Tailwind variables.
Next second it’s throwing in hex codes or px margins directly in the component.
This happens because you never gave it a rule to follow.
3
2/ Set your design system BEFORE you code
Before you start development:
• Finalize your global.css with color and spacing variables
• Define your tailwind.config.js with consistent theme tokens
• Stick to one design language (Material, iOS, custom, etc.)
No system = chaos.
Before you start development:
• Finalize your global.css with color and spacing variables
• Define your tailwind.config.js with consistent theme tokens
• Stick to one design language (Material, iOS, custom, etc.)
No system = chaos.
4
3/ In Cursor, use Project Rules
This lets you give hard constraints to the AI like:
• “Use only the colors and spacing defined in global.css”
• “Never hardcode values”
• “Refer to tailwind.config.js for all design tokens”
This keeps your UI consistent across prompts.
This lets you give hard constraints to the AI like:
• “Use only the colors and spacing defined in global.css”
• “Never hardcode values”
• “Refer to tailwind.config.js for all design tokens”
This keeps your UI consistent across prompts.
5
4/ The best time to enforce structure is the start
Once AI-generated code spreads inconsistent styles, cleaning it up is painful.
You’ll be stuck with:
• Redundant classes
• Inline styles
• Conflicting breakpoints
• Broken responsiveness
Save yourself the rework.
Once AI-generated code spreads inconsistent styles, cleaning it up is painful.
You’ll be stuck with:
• Redundant classes
• Inline styles
• Conflicting breakpoints
• Broken responsiveness
Save yourself the rework.
6
5/ Bonus: Add examples inside your rules
You can show Cursor or Windsurf samples of:
• How to structure components
• Which buttons or card layouts to use
• Preferred padding, margins, and font sizes
The more clarity, the better the output.
You can show Cursor or Windsurf samples of:
• How to structure components
• Which buttons or card layouts to use
• Preferred padding, margins, and font sizes
The more clarity, the better the output.
7
6/ My workflow for every AI-built UI
• Lock the design system in config files
• Create .cursorrules before the first line of code
• Keep components atomic and reusable
• Audit early for hardcoded styles
• Use screenshots in Cursor to fix specific UI bugs
• Lock the design system in config files
• Create .cursorrules before the first line of code
• Keep components atomic and reusable
• Audit early for hardcoded styles
• Use screenshots in Cursor to fix specific UI bugs
8
7/ Final thoughts
AI tools are fast, but not opinionated.
If you don’t give them rules, they’ll guess.
And that’s how you end up with a messy codebase.
Consistency = clarity = scalable design
Bookmark this before your next AI build.
AI tools are fast, but not opinionated.
If you don’t give them rules, they’ll guess.
And that’s how you end up with a messy codebase.
Consistency = clarity = scalable design
Bookmark this before your next AI build.
