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 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.
Where
page URL + section name
What should change
describe the visual outcome
What should not · optional
protect what you like
Your prompt (fill target and outcome)
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 section
You want to adjust one visual detail - a shadow, a radius, a color.
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.
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.
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.
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.
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.
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.
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 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 --dangerously-skip-permissionsLaunch 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.claudeLaunch Claude Code in its default mode, which asks you to approve each action.
claude --continueResume 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 -cclaude --resumeShow a list of previous sessions in this folder and pick one to resume.
/modelSwitch models mid-session. Opus for taste-heavy design work, Sonnet for quick edits, Haiku for speed.
/mcpList MCP servers and their auth status. Use to connect to Figma or confirm Chrome DevTools is ready.
/clearStart a fresh conversation. Good between unrelated tasks.
/compactCompress the current conversation without losing the plot. Use when a session gets long.
/reviewAsk Claude to review the current pull request. A second opinion on your own work.
Ctrl+CStop whatever is running. Safe to press at any time.
Shift+EnterMulti-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.
Anthropic Skills (official)
The official repository of community and Anthropic-maintained Claude Code skills. Browse, install, or read source for inspiration.
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.
Claude Code documentation
Official docs: installation, hooks, MCPs, skills, slash commands, keyboard shortcuts.
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
.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.Next
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.