How xiaopu-ai/web-design works
web-design is a Claude Code skill that turns design inputs into an editable DESIGN.md spec, then generates web code from that approved spec. Its documented workflow is distinct from its supporting reference library and utility scripts. The README describes the scripts’ roles, but the excerpts do not establish that the skill invokes them, so those connections are left out.
Main entry points: SKILL.md Design skill
Components 11
Design workflow
- Design skill
SKILL.md - PRD, URL, screenshot, keywords
- DESIGN.md spec
- Generated web code
Design knowledge
- Design references
references - Design systems
references/design-systems - Patterns and guidance
references
Supporting utilities
- Website crawler
scripts/crawl_website.py - Token extractor
scripts/extract_design_tokens.py - Image candidates
scripts/fetch_unsplash_images.py
Other components
- Designer
Connections 6
- Designer → PRD, URL, screenshot, keywords: provides
README.md - PRD, URL, screenshot, keywords → Design skill: informs
README.md - Design skill → DESIGN.md spec: produces first
README.md - Designer → DESIGN.md spec: approves
README.md - DESIGN.md spec → Design skill: guides generation
README.md - Design skill → Generated web code: generates
README.md