A Small Trick to Help Claude Code Understand Your Design (ASCII Art + Color-Coded Instructions)
Let’s Be Honest
Claude Code is weak at frontend.
Backend and logic? Excellent. But the “subtle nuances” of UI often don’t get through.
The Usual Frustrations
Sound familiar?
- You specify a layout, but it comes out misaligned
- Margins are slightly off
- It doesn’t understand your flex intent
- You get a UI that’s just… not what you asked for
Then you request a fix:
👉 The fix is off too 👉 It gets even more off 👉 You start feeling like you’re talking to your grandpa
That “do you get it? do you not?” state.
It Can Handle the Big Picture
To be fair, it’s not completely hopeless.
- Screenshots
- HTML mockups
- Figma screenshots
It handles these reasonably well.
But here’s the problem 👇
👉 Fine-tuning is catastrophically weak
Solution 1: Lock the Structure with ASCII Art
This is the most effective technique.
Don’t describe the layout in sentences — show it as structure.
Example:
+-------------------------------+ | Header | +-------------------------------+ | Sidebar | Main Content | | | | | | +-------------+ | | | | Card | | | | +-------------+ | +-------------------------------+ | Footer | +-------------------------------+
Key points:
- Break it into block units
- Make horizontal/vertical arrangement explicit
- Show nesting
👉 The AI can now understand it as “structure”
Solution 2: Assign Colors to Roles
This is even more effective.
Assign a color to each DIV:
Header: Red Sidebar: Blue Main: Green Card: Yellow
Then say 👇
“Separate DIVs by color and lay them out accordingly.”
What happens:
👉 The AI understands “visual boundaries”
Solution 3: Verbalize Your CSS
This is critically important.
Saying “make it look nice” fails 100% of the time.
NG:
- Center it nicely
- Arrange it with good balance
OK:
- display: flex
- justify-content: space-between
- gap: 16px
- width: 300px fixed
👉 Eliminate all ambiguity
Combine All Three
The ultimate pattern 👇
- ASCII art for structure
- Colors for block definitions
- Specific CSS instructions
Example prompt template:
Please create the following layout:
Structure: +----------------------+ | Header | +----------------------+ | Sidebar | Main | +----------------------+
Color mapping: Header: Red Sidebar: Blue Main: Green
CSS requirements:
- Overall flex
- Sidebar: 250px fixed width
- Main: remaining width
- gap: 16px
👉 This virtually eliminates misalignment
Why This Works
Claude Code:
- Sentences → interpretation is ambiguous
- Structure → strong
- Constraints → strong
In other words:
👉 If you let it “interpret,” you lose 👉 If you “constrain,” you win
Summary
Tips for getting Claude Code to understand UI:
- Lock the structure with ASCII art
- Separate roles with colors
- Write CSS explicitly
- Ban vague expressions
Bonus
What happens if you don’t do this:
👉 “Not-quite-right UI” gets generated infinitely
What happens if you do:
👉 You get something very close on the first try