THE DESIGN SKILL FOR CLAUDE CODE

First a spec,
then the code.

Feed it a PRD, a reference URL, or a screenshot.
It produces a readable, editable, portable DESIGN.md first.
Then it generates web code where UI, visuals, motion, and responsiveness all land.

Install now Why it works this way →
01Input PRD / URL / Screenshot
→
02Produce DESIGN.md spec
→
03Output 100-score code
WHY DESIGN.MD

Why a spec first

AI writes code directly vs. spec-first, code-second — not in the same league.

AI writes directly
/* hero.css */
background: #2a2a2a;
color: #333;
padding: 12px;
/* footer.css — new palette again */
background: #1d1d1d;
color: rgb(45,45,45);
padding: 14px;
  • × Colors drift between pages
  • × Type sizes depend on AI memory
  • × Motion tier picked on a whim
  • × New tool or chat → start over
DESIGN.md first, then code
/* tokens from DESIGN.md */
--bg: #0a0b0e;
--text-1: #ebecef;
--sp-5: 24px;
/* every page references the same set */
.hero { background: var(--bg); }
.footer { background: var(--bg); }
  • ✓ Colors, type, spacing all named
  • ✓ Consistent across pages
  • ✓ Portable across AI tools
  • ✓ Edit one DESIGN.md line, site-wide
THREE INPUTS · ONE OUTPUT

Start from anywhere

A PRD, a reference URL, a screenshot — or any combination. The SKILL decides where to extract design cues from.

# Product
Tagline: an AI collaborator for designers
## Target users
Indie designers · small teams
## Core pages
Landing · Features · Pricing
01 / 03

PRD document

Derives direction from positioning, audience, pages and competitors.

linear.app
#5E6AD2
#0A0A0A
#F7F8F8
Inter · 48/24/16
48 tokens ✓
02 / 03

Reference URL

Playwright crawler extracts palette, fonts, spacing and motion — 48 tokens in seconds.

screenshot.png
03 / 03

Screenshot / Sketch

Extracts mood, temperature, density and type tone straight from pixels. Reliable fallback.

WORKFLOW · THREE PHASES

A → B → C · three phases

No one-shot shortcut. Each phase leaves you an approval gate.

A
PHASE A
Understand

Extract design cues from PRD / URL / screenshot / keywords / brand name; fallback chain has your back.

// extracted
  • · Tone keywords × 5
  • · Competitor tokens × 48
  • · Interaction tier suggestion
B
PHASE B
Produce DESIGN.md

A full 9-section spec. Once you approve it, it lives in your project and can be edited by hand.

// DESIGN.md · 9 sections
  • · Color · Type · Component
  • · Layout · Motion · Depth
  • · Do's / Don'ts · Responsive
C
PHASE C
Generate code

Strictly follows the spec. Self-audits against the 100-score checklist. Diff-audits when a reference exists.

// audit · 100-score
  • ✓ 0 hardcoded hex
  • ✓ All component states covered
  • ✓ Responsive + reduced-motion
WHAT'S INSIDE

A full design asset vault

The SKILL ships with its own reference library — drag to spin, hover to pause.

01

58 brand presets

Linear · Stripe · Apple · Supabase · Vercel · Figma · Cursor · …

AI/MLDev+4
02

10 style seeds

Editorial · Dark tech · Minimal · Pro · Playful · Zen · Cyber · Organic · Swiss · Glass

Mix OK
03

3 interaction tiers

L1 static · L2 fluid · L3 immersive (pin + 3D + WebGL)

L1L2L3
04

7 scene defaults

Landing · Portfolio · Blog · Dashboard · PPT · App UI · Email

Scene-driven
05

Motion library · 124

Text 24 + Animations 29 + Components 32 + Backgrounds 40, curated per style.

MIT credited
06

Crawler + QA scripts

Playwright viewport crawler · static token extractor · quality checklist self-audit.

PythonGraceful
BUILT WITH

Made with this SKILL

MADE BY
小普 · XiaoPu

小普 · XiaoPu

web-design is a side project. If it saves you time, a star on GitHub helps keep it actively maintained.

人人都是产品经理
INSTALL · IT'S OPEN SOURCE

Free open-source.
Clone to run.

No account. No API key. No subscription.

git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design
Requires Claude Code
View on GitHub