How Designers Can Use Claude and Claude Code for Real Work

Designers often ask me whether Claude can replace their design tool. I think that is the wrong question. Claude is very good at the production side of design: building the real thing, applying a system consistently, making the deck, checking every screen. It is weak at taste unless you hand it yours. Set it up that way and it becomes the most productive teammate you have had.

This is how I set up Claude and Claude Code for design work, and the few skills that actually matter.

Pick the right surface

There are two places to work, and they suit different jobs.

• claude.ai and the desktop app are best for decks, PDFs, critiques of screenshots and quick prototypes. Turn on code execution in Settings, then Capabilities, and manage skills under Customize, then Skills. The PowerPoint, Word, Excel and PDF skills are already there.
• Claude Code is where you build real interfaces in a real codebase. It is also where most design skills and plugins install. You do not need to be an engineer to use it. You need to be comfortable reading what it did.

If you are new, start on claude.ai with a critique or a deck, then move to Claude Code when you want to ship something.

Connect Figma

The official marketplace has a Figma plugin that bundles Figma's MCP server. It lets Claude read frames, components and variables from your files instead of guessing from a screenshot.

/plugin install figma@claude-plugins-official

Then run /mcp to sign in. Figma's own guide to the MCP server explains which plans and seats include it. The quality of what comes out depends on your file. Named layers, real components and variables for color and spacing translate well. A file full of detached groups does not.

Give Claude a direction before it draws anything

Left alone, Claude produces the average of every interface it has seen. The fix is to decide the direction yourself and write it down. Anthropic's frontend-design skill pushes Claude to commit to a clear aesthetic before it writes code, which is a good baseline:

/plugin install frontend-design@claude-plugins-official

Then brief it the way you would brief a junior designer:

We are designing the pricing page for a calm, premium note taking app.
Audience: freelancers who pay for tools they trust.
Mood: quiet, editorial, lots of whitespace. No gradients, no glass.
Type: one serif for headings, one sans for UI. Suggest two pairings.
Before writing code, give me the direction in five bullet points
and wait for my approval.

The last line matters most. Approving a direction takes one minute. Undoing a finished page that went the wrong way takes much longer.

Turn your design system into a skill

This is the step most designers skip, and it is the one that pays off the most. Every rule you keep repeating in comments belongs in a skill. Create a folder in your project and save this as .claude/skills/our-design-system/SKILL.md:

---
name: our-design-system
description: Our product's design rules. Use whenever creating or
  changing any screen, component, style or copy in this project.
---

# Tokens
Use only the CSS variables in src/styles/tokens.css. Never hardcode
colors, font sizes or spacing.

# Spacing
4 and 8 point scale only: 4, 8, 12, 16, 24, 32, 48, 64.

# Type
Headings: line height 1.1. Body: line height 1.4.
Max line length about 70 characters.

# Components
Reuse components in src/components before creating new ones.
Buttons: one primary per view.

# Copy
Sentence case. Plain words. No exclamation marks.

Commit it and everyone on the team, including Claude, works from the same rules. If you want help writing it, install skill-creator from the official marketplace and ask it to interview you about your system.

Let Claude see what it built

Claude writes CSS without looking at the result unless you give it eyes. The Playwright plugin gives it a real browser:

/plugin install playwright@claude-plugins-official

After any visual change I ask for a check like this:

Open http://localhost:3000/pricing in the browser.
Take screenshots at 390px and 1440px wide.
Compare them against our-design-system and list every
spacing, alignment or type issue you see, worst first.
Fix only the top three, then screenshot again.

Limiting it to three fixes per round keeps the changes reviewable. You stay in the loop instead of receiving a pile of edits.

Get a second opinion on your own work

Claude is a useful critic when you give it criteria. Upload a screenshot on claude.ai or point Claude Code at a page and ask for a review against a specific user and task, with every issue tied to a fix. Community tools go further. impeccable adds design audit and critique commands, and gstack includes design review skills that score a page and explain what would raise the score. Pick one critic and learn it well. Several critics with different opinions in the same session mostly produce noise.

Make the deliverables

The document skills turn Claude into a production assistant for the parts of the job nobody enjoys.

• Decks: give it your outline and your brand colors and ask for a real .pptx you can open and edit.
• PDFs: case studies, style guides, handoff notes.
• App Store screenshots: the community app-store-screenshots skill scaffolds a small editor and exports marketing screenshots at store sizes. Install it with npx skills add ParthJadhav/app-store-screenshots after reading the repo.

In Claude Code, the same document skills come from Anthropic's skills repo:

/plugin marketplace add anthropics/skills
/plugin install document-skills@anthropic-agent-skills

Start with one real project, not a demo. Connect Figma, write your design system skill, and let Claude build one screen while you review every step. You are still the art director. The difference is that the gap between your decision and the shipped result gets much shorter.