Chapter 3: Polish & Design
Chapter 3 Review
Chapter 3 Review
You started this chapter with a working but plain todo app. Now you have something that looks and feels like a real product. Let's review what you learned and make sure it sticks.
Review questions
Work through these to check your understanding. Think through each answer before reading the explanation.
What is the most effective way to give Claude Code a design direction?
Why do we use CSS custom properties (variables) for our color system instead of hardcoded Tailwind color classes?
What is the recommended duration range for UI transitions like hover states and focus rings?
What does the /compact command do, and when should you use it during design work?
What is the purpose of the inline script for dark mode in the head of the document?
What is the difference between CSS transitions and Motion animations? When would you use each?
Why do we use Tailwind's class dark mode strategy instead of the media strategy?
What you built
In this chapter, you transformed a functional prototype into a polished application:
- Design direction -- How to communicate visual intent to Claude Code
- User-level memory -- Persistent design preferences across projects
- Color system -- Cohesive, theme-ready CSS variables
- Typography -- Professional font choices and hierarchy
- Component polish -- Borders, shadows, spacing, hover states, and context management with
/compact - Icons and badges -- Visual indicators for actions and status
- Form improvements -- Focus states, validation, keyboard experience
- Transitions -- Smooth state changes throughout the app
- Toast notifications -- User feedback with undo support
- Animations -- Entrance/exit animations with Motion
- Dark mode -- Full theme support with system preference detection
- Responsive layout -- Mobile-first design that works everywhere
- Final polish -- Favicon, loading states, error boundaries
You did not write most of this code by hand. You described what you wanted, Claude Code implemented it, and you refined it with follow-up prompts. This is the core workflow: direct, review, refine.
Key prompting techniques you practiced
- Reference apps -- "Style it like Linear" gives Claude Code a clear target
- Specific properties -- "150ms ease-out" is better than "make it smooth"
- Audit prompts -- "Check all interactive elements for hover states" catches gaps
- Iterative refinement -- "Make the shadow softer" narrows in on what you want
- System-level prompts -- "Define colors as CSS variables" creates foundations that other components build on
Practice challenge
If you want to push further, try this prompt with Claude Code:
"Add a filter bar to the todo app. Show three buttons: All, Active, and Completed. Style them as pill-shaped tabs with the active one using the primary color. Add a smooth underline or background transition when switching between filters. Make it responsive -- on mobile the pills should be full width."
This exercise combines almost everything from this chapter: component styling, transitions, responsive design, and dark mode compatibility.
Before moving on: Open your app on your phone (or use the browser's device toolbar). Toggle dark mode. Add a todo and delete one. If everything looks smooth and polished at every step, you are ready for Chapter 4. If something feels off, go back and prompt Claude Code to fix it. Polish is about the details.
What's next
In Chapter 4, you'll explore using Claude Code beyond coding — for marketing, content, product management, and team workflows. Then in Chapter 5, you'll learn how to write tests with Claude Code, ensuring your polished app works correctly as you keep building.
Your app doesn't just work -- it feels good to use. That is the difference between a project and a product.