Best PracticesLesson 19 of 23
How to Describe Your Design to Claude Code
2 min readClaude Code for DesignersUpdated Feb 18, 2026
The single biggest factor in code quality is how you describe what you want. Vague prompts get vague output. This lesson teaches you the level of detail Claude Code actually needs — colors, sizes, interactions, framework — and what to leave out.
How to Describe Your Design to Claude Code
Even Better: Use Figma MCP
If you use Figma, you can skip manual descriptions entirely. Connect Figma to Claude Code via MCP and let it read your actual designs — colors, spacing, components, everything. See Module 2: Figma ↔ Code for setup instructions.
Be Specific, Not Vague
Not this:
Create a nice button
Do this:
Create a button with a #2563EB background, white text, 12px border radius, 16px padding, and a hover effect that makes it 5% larger
Include Design Details
- Colors: Use hex codes (#2563EB, not "blue")
- Sizes: Specify padding, margins, font sizes (16px, not "normal")
- Interactions: Describe what happens on hover, click, etc.
- Responsiveness: Mention if it needs to work on mobile/tablet
- Framework: Say "Use React and Tailwind CSS"
Good Prompt Examples
- Create a form with email and password fields. Use #1F2937 text, light gray background, and make it responsive.
- Build a product card showing: image on top, title below, price, and a 'Buy Now' button. Make it 300px wide.
- Design a navigation bar with a logo on the left and 4 menu items on the right. Make it sticky (stays at top when scrolling).
Specific beats vague, every time
- Replaced "nice button" with concrete colors, sizes, and interactions
- Always specified the framework (React + Tailwind)
- Built a mental template for prompts: structure → colors → sizes → interactions → responsiveness
Better prompts in. Better code out. Next: testing whether the code actually does what you wanted.