drafts

A Claude Code skill for designers who aren't designers.

Type /drafts pricing page with three tiers and get four radically different designs side-by-side in a browser picker. Each is rendered under a different taste-skill persona (brutalist / minimalist / soft / gpt-taste / etc.) so divergence is guaranteed — not prompted. Click one, Claude ports it into your real stack.

Install

One line, via npx skills:

npx skills add <you>/drafts

That symlinks the skill into ~/.claude/skills/drafts/ for Claude Code (and whatever other agents you have configured). Pass -g to force global install, or --copy if you'd rather copy than symlink.

Alternatively, clone it directly:

git clone https://github.com/<you>/drafts.git ~/.claude/skills/drafts

Requires python3 on the PATH (stdlib only — no pip installs). No other dependencies.

Use

In any Claude Code session:

/drafts <freeform description of the feature>

Examples:

• /drafts pricing page with three tiers and a FAQ
• /drafts settings screen with tabs for profile, billing, notifications
• /drafts hero section for a b2b analytics tool

Claude will:

1. Pick 4 personas that give the biggest stylistic spread for your feature.
2. Invent realistic shared content (same copy across all 4 — you compare design, not text).
3. Spawn 4 parallel subagents, one per persona, each producing a self-contained index.html.
4. Launch a local picker in your browser. Use 1–4 to switch, Enter to pick, R to regenerate with different personas.
5. On pick, Claude detects your stack (React/Next/Vue/Svelte from package.json), asks where to put the file, and ports the chosen design in.

Everything lives under drafts/<slug>/ in the current project while you're exploring. drafts/ is added to .gitignore automatically. On pick, the folder is cleaned up.

What's inside

drafts/
├── SKILL.md        # orchestration spec Claude follows
├── personas/       # vendored from taste-skill (8 design personas + utility skills)
└── assets/
    ├── picker.html # the browser picker UI
    └── server.py   # stdlib-only local server; relays PICK / REGENERATE events

Personas

All eight taste-skill sub-skills are vendored into personas/. Six are design personas the picker rotates through:

Persona	Vibe
soft	Apple / Linear-tier, cinematic depth, premium fonts
brutalist	Swiss print × CRT terminal, rigid grids, oversized numerals
minimalist	Editorial monochrome, Notion-like, no gradients
gpt-taste	Awwwards-level, GSAP motion, asymmetric layouts
taste	Balanced high-agency baseline
stitch	Semantic DESIGN.md-driven

redesign and output are utility skills (audit-existing and full-output enforcement) — the picker skips them.

Credits

Personas are pulled verbatim from Leonxlnx/taste-skill. The drafts skill wraps them with a picker, parallel generation, and auto-integration.