Skip to main content
DesignKey Studio

Claude Code for Designers

Claude Code cheat sheet for designers

Copy-ready prompt patterns, the commands worth memorizing, and the skills worth bookmarking, all in one tab.

The three-part prompt pattern

Every prompt that gets a good result has the same three ingredients. Miss any one and Claude has to guess, which is usually where mistakes happen.

Where

Page URL + section name

"On /about, in the hero section" is the whole locator Claude needs. No file paths required.

What should change

Describe the visual outcome

Say what a user should see after the change. Be specific about the visual, not the code.

What should not

Protect what you like

Typography, spacing, brand colors. Prevents Claude from drifting into a redesign you did not ask for.

Try it right now. Fill the three boxes below and watch the prompt assemble itself. The copy button sends the result straight to your clipboard.

Build a prompt

Fill the three boxes. Watch the prompt assemble itself. Copy and paste into Claude Code.

1

Where

page URL + section name

2

What should change

describe the visual outcome

3

What should not · optional

protect what you like

Your prompt (fill target and outcome)

claude-code · promptwaiting…

Your assembled prompt will appear here as you type.

Copy-ready prompts

Seven prompts for the seven things designers do most often. Paste one, adjust the details to your situation, and send.

Pattern 1

Tweak a single section

You want to adjust one visual detail - a shadow, a radius, a color.

prompt

On /, in the hero section, change the CTA button from a drop shadow to a subtle inner glow in brand blue. Keep the radius and typography unchanged.

Pattern 2

Generate visual variations

You have an idea but want options. Ask Claude to explore.

prompt

On /pricing, generate five variations of the pricing card. Vary the layout direction, the emphasis on the price, and the CTA placement. Stay on brand. Render them on a preview page so I can compare side by side.

Pattern 3

Match a Figma frame

You have a Figma link and want the result on a page to match.

prompt

Here is a Figma frame - figma.com/design/xxxx?node-id=123. Add it as a new section on /about, positioned between the intro and the team grid. Use the existing typography and button styles on the site.

Pattern 4

Pull live data into a page

You want a page to reflect real content instead of hardcoded placeholders.

prompt

On /team, the page currently shows placeholder names and photos. Connect it to the real team list we keep in the site data and render the actual members.

Pattern 5

Build a preview page for review

You want a private URL where design candidates live side by side.

prompt

Create a preview page at /preview/hero that renders every hero variant stacked with a filter at the top to isolate any single one. Do not link to it from the public nav, and keep it out of search engines.

Pattern 6

Fix a visual bug

Something does not look right on a specific device or state.

prompt

On / on mobile, the event image in the upcoming events card gets cropped at the top and bottom. The poster is square-ish. Fix it so the whole image is visible without empty bars.

Pattern 7

Audit a page for accessibility

Before shipping, you want a second pair of eyes on contrast and semantics.

prompt

Audit /about for accessibility. List every contrast ratio below 4.5:1, every interactive element missing a label, and every heading that breaks hierarchy. Do not fix anything yet - just report.

Slash commands worth remembering

These are the only ones you will reach for as a designer. Everything else in Claude Code is either automatic or rarely needed. Type them into the Claude prompt, one at a time.

claude --dangerously-skip-permissions

Launch Claude Code in auto mode. It stops asking to approve every step and just does the work - review the outcome, not each edit. This is how we recommend you work day-to-day.

Type this in your terminal inside the project folder.
claude

Launch Claude Code in its default mode, which asks you to approve each action.

claude --continue

Resume the most recent session in this folder. Use it when you closed the terminal and want to pick up where you left off.

Short form: claude -c
claude --resume

Show a list of previous sessions in this folder and pick one to resume.

/model

Switch models mid-session. Opus for taste-heavy design work, Sonnet for quick edits, Haiku for speed.

/mcp

List MCP servers and their auth status. Use to connect to Figma or confirm Chrome DevTools is ready.

/clear

Start a fresh conversation. Good between unrelated tasks.

/compact

Compress the current conversation without losing the plot. Use when a session gets long.

/review

Ask Claude to review the current pull request. A second opinion on your own work.

Ctrl+C

Stop whatever is running. Safe to press at any time.

Shift+Enter

Multi-line prompt. Paste a full brief without it sending early.

UI/UX skills worth bookmarking

Claude Code skills are reusable instruction bundles you can pull into a session to bias Claude toward a specific style of work. The ones below are the most relevant to designer workflows.

Writing your own skill

A skill is just a markdown file in .claude/skills/ with a frontmatter block and some instructions. If you find yourself pasting the same context (“always use our blue, always use Tailwind v4, always use our radius tokens”) at the start of every prompt, that is a skill waiting to be written. Ask in #design for help turning it into one.
Claude CodePrompt patternsDesign workflow

Share this article

Go deeper

Back to the Series

Want your design team working like this?

We walk design and product teams through the same workflow on a call, using the tools they already have. Book 30 minutes and tell us where the hand-off breaks down today.

Contact Us