Giving Claude Code a Design Direction

Your todo app works. You can add items, check them off, and delete them. But right now it looks like a prototype. In this chapter, we'll turn it into something you'd actually want to use every day.

The secret? Telling Claude Code what you want it to look like.

Why design direction matters

If you just say "make it look better," Claude Code will make generic improvements. But if you give it a clear visual direction, the results are dramatically better.

💡Info

Claude Code is like a skilled contractor. "Build me a house" gets you a house. "Build me a mid-century modern house with large windows, warm wood tones, and an open floor plan" gets you something special.

Three ways to describe your design

1. Reference existing apps

The most effective approach is referencing apps your audience already knows:

"Style this app like Linear — clean, minimal, lots of whitespace, subtle borders, muted colors with one accent color."

"I want the feel of Notion — clean sans-serif typography, soft grays, rounded corners, gentle shadows."

"Make it look like the Vercel dashboard — dark background, crisp type, monospace accents, high contrast."

2. Use mood descriptions

Describe the feeling you want:

"Make the UI feel calm and focused. Soft colors, generous spacing, nothing flashy. The user should feel relaxed when they open this app."

"I want it to feel professional and trustworthy. Think enterprise SaaS — structured, clean, confident."

3. Specify concrete design tokens

If you know what you want, be specific:

"Use Inter for body text, 16px base size. Primary color #6366f1 (indigo). 8px border radius on cards. 1px borders in gray-200."

✅Tip

The best prompts combine all three: a reference app, a mood, and a few specific preferences. For example: "Style it like Linear — clean and minimal. Use indigo as the accent color, Inter font, and generous whitespace."

💡Info

When you say "Style it like Linear," you're using a technique called few-shot prompting — giving Claude an example of the result you want. This works for any task, not just design. Want Claude Code to write tests in a certain style? Show it one example test. Want commit messages in a specific format? Provide an example. Examples teach Claude patterns faster than explanations.

Using screenshots as references

Claude Code can read images too. If you have a screenshot of a design you love, you can reference it:

"Here's a screenshot of the UI I want to match: @screenshot.png — apply a similar style to our todo app"

You can also paste screenshots of bugs or layout issues:

"This is what my app looks like right now: @current-state.png — the spacing between the header and list is too large, fix it"

✅Tip

Screenshots are the fastest way to communicate visual intent. A picture of "what I want" beats three paragraphs of description. Drop reference images in your project folder and use @ to reference them.

Our design direction

For our todo app, here's the prompt we'll build toward:

"Redesign the todo app with a clean, modern look inspired by Linear and Things 3. Use a calm color palette with indigo as the primary accent. Generous whitespace, subtle borders, smooth transitions. The app should feel focused and calm — a tool that helps you think clearly."

Throughout this chapter, we'll break that big vision into small, focused steps — each one a prompt to Claude Code.

The iteration mindset

Design with Claude Code is iterative. You won't get perfection on the first try, and that's fine.

Give a clear direction
Review what Claude Code produces
Adjust with follow-up prompts ("make the shadows softer", "increase spacing between items")
Repeat until it feels right

⭐Important

Don't try to describe every pixel. Give the direction, let Claude Code make design decisions, then refine. This is faster and often produces better results than trying to specify everything upfront.

With a clear design direction in mind, let's start building the visual system for our app.