web-design: a Claude Code SKILL that writes DESIGN.md specs before generating web code
tom_doerr · x · 2026-09-04
The open-source GitHub project xiaopu-ai/web-design is a Claude Code SKILL built on a "spec first, code second" approach for generating beautiful, consistent web pages (700+ stars).
- Flexible inputs: PRD, reference URL, screenshot, keywords, or brand name in any combination, with a graceful fallback chain for sparse inputs
- Phase A Understand extracts design cues; Phase B produces DESIGN.md — a 9-section spec covering color, type, component, layout, motion, depth, do's & don'ts, responsive, and accessibility, editable by hand and kept in the repo; Phase C generates code strictly following the spec, self-audits against a 100-point checklist, and diff-audits against a reference URL
- The result: UI, visuals, motion, and responsiveness that land, consistent across pages and portable across AI tools
More from coding & agent
- Cloud Desktop Launches: Watch Your Agents Work and Take Over Like Localhost — charlieholtz · 2026-09-04
- Build a near-free agentic software factory: open-source Hermes plus Meta Muse Spark 1.3 — intellectronica · 2026-09-04
- Yutori ships Navigator n2, a 27B frontier computer-use model, tops MyPCBench — kohjingyu · 2026-09-04
- OpenAI ships async function calling, mid-turn steering and cache-safe reasoning effort in Responses API — msg · 2026-09-04
- Dev uses Codex as co-presenter at OpenAI hackathon — amaarora · 2026-09-04
- Standing out when everyone has AI: subtract the generic, then go deep — round · 2026-09-04