Cheat sheet — Claude Code for Designers

How to use this page

Prompt patterns and commands are grouped by what you will actually be doing — designing, iterating, reviewing. Copy a prompt, swap in your file name and goal, and send it. The patterns are the training wheels; after a week you will not need them.

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.

The target

Which file or component

Say the filename. "in components/Hero.tsx" beats "the hero area" every time.

The outcome

What should change

Describe the end state visually, not the code. Claude picks the implementation.

The constraint

What should not change

Protect existing typography, spacing, and brand. Prevents scope creep into a redesign.

Try it right now. Fill the three boxes below and watch Claude’s 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.

The target

file path or component name

The outcome

what should change, visually

The constraint · optional

what should NOT change

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, adjust the details in <like this> to your situation, and send.

Pattern 1

Tweak a single component

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

prompt

In components/Hero.tsx, 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

Generate five variations of the pricing card in components/PricingCard.tsx. Vary the layout direction, the emphasis on the price, and the CTA placement. Stay on-brand (primary #3e2df5, orange #ff5c35). 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 code to match. Pair with the Figma MCP.

prompt

Here is a Figma frame — figma.com/design/xxxx?node-id=123. Implement it as a new component at components/sections/AboutCallout.tsx. Use the existing typography tokens and the Button primitive from ui/button.

Pattern 4

Pull live data into a component

You want the component to reflect real content instead of hardcoded placeholders.

prompt

The team page currently uses placeholder data. Read src/data/team.ts, create a TeamMember type, and render the real team list inside components/sections/TeamGrid.tsx.

Pattern 5

Build a preview page for review

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

prompt

Create a new route at app/preview/hero/page.tsx that renders every Hero variant stacked with a sticky filter at top to isolate any single one. Do not link to it from the public nav. Set robots: noindex.

Pattern 6

Fix a visual bug

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

prompt

On mobile (< 768px), the event image on components/EventCard.tsx gets cropped at the top and bottom. The Meetup poster is roughly 1:1. Fix by using object-contain plus a blurred backdrop of the same image so there are no empty bars.

Pattern 7

Audit a page for accessibility

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

prompt

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

Slash commands worth remembering

These are the only nine 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

Start a new session in the current project folder.

Run this inside your project directory.

/status

Show the model, working directory, and which MCP servers are active.

/model

Switch models. Opus for design work that requires taste, 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 ones most relevant to designer workflows.

Curated

Anthropic Skills (official)

The official repository of community and Anthropic-maintained Claude Code skills. Browse, install, or read source for inspiration.

DesignKey internal

frontend-design (internal)

The DesignKey-internal skill that applies our design system when generating UI. Invoked with /frontend-design once you are inside a DesignKey project.

Docs

Claude Code documentation

Official docs: installation, hooks, MCPs, skills, slash commands, keyboard shortcuts.

Community

Community skills on GitHub

Search GitHub for "claude-code-skill" to find community-authored skills for specific frameworks (Tailwind, Shadcn, Framer Motion, etc.).

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.

Head back to the series

Part 1 walks through the mental model and tooling. Part 2 is the case study — the prompts above, used in practice, on a real component.

Series index Part 1