Claude Code for Designers

A three-part field guide for designers who want to use Claude Code to generate, explore, and ship component variations — without waiting on a developer for every experiment.

Why this series exists

Designers on the team have asked what Claude Code can actually do, and — just as often — whether the output can be trusted. This series answers both with real work, not slideware.

What you will learn

How to brief, branch, prompt, review, and ship design variations. By the end of Part 3 you will have walked through one real component from blank repo to production.

Who it is for

Designers who are curious, skeptical, or both. No existing Git knowledge assumed. Screenshots included for every step so you know what the output actually looks like.

In this series

Three parts and a cheat sheet

Start reading Part 1

Part 1

Git, Claude Code, and why a designer should care

The mental model, the tooling, the first session. No commands to memorize — just a clean way to think about branches, a free app to review changes, and the shape of a good prompt.

How Git actually works (in four boxes, no jargon)
GitHub Desktop as your window into every change
The five-step rhythm of a Claude Code session
The three-part prompt pattern that actually works

12 min readRead

Part 2

Generating design variations — the TJUG case study

One countdown card, fourteen variations, real feedback loops. The exact prompts, the first-pass mistakes, the moment the crop bug appeared, and how it got fixed.

The first prompt and the five variants that came back
"Not great, do a better job" — interpreting feedback productively
Scaling to 10 more on-brand variants without drift
Catching crop bugs, off-brand palettes, and dead-weight variants

~18 minRead

Part 3

From 14 variants to a shipped component

Narrowing down, wiring the winner into production, and shipping with the same discipline any dev team would expect — branches, pull requests, review.

Picking a direction (and why you do not have to pick just one)
The hand-off: PR description, screenshots, test plan
A two-list checklist for reviewing AI-generated code
What to expect when a developer opens the diff

15 min readRead

Companion reference

The Claude Code cheat sheet for designers

Copy-ready prompt patterns, nine slash commands worth remembering, and the UI/UX skills on GitHub we recommend bookmarking.

Open

All three parts are live

The series is complete. Start with Part 1 if you are new to Git and Claude Code; skip ahead to Part 2 if you just want to see the case study; jump to Part 3 for the shipping discipline. The cheat sheet above is meant to stay open in a tab after you finish reading.