Design with Claude: from idea to design system · Lesson 2
How to talk about design with Claude
Prompt patterns for design tasks: how to provide references, describe constraints, iterate effectively, and get predictable results. The difference between subjective requests and structural prompts.
Practical exercise
What to do after this lesson
Pick a component you want to improve in your project (or take any button/card). Ask Claude three times: first — an open request ('make it good'), second — a structural request from pattern #5, third — iteration with specific changes. Compare the quality of all three outputs.
Task grader
Pick a component you want to improve in your project (or take any button/card). Ask Claude three times: first — an open request ('make it good'), second — a structural request from pattern #5, third — iteration with specific changes. Compare the quality of all three outputs.
Ready-to-use prompt
Template for this lesson
Copy and adapt to your context. Text in angle brackets should be replaced.
Create a <component name> for <product type>. Design system: - Colors: background <hex>, accent <hex>, text <hex>, border <hex> - Typography: <font>, <sizes> - Spacing: base unit <px>, rounded corners <px> Component variants: <list> States: <list> Tech stack: <React/Vue/HTML/Tailwind/CSS Modules> Strictly use only values from the design system above. No hardcoded values outside tokens.