xiaopu-web-design-skill

Skill by ara.so — Design Skills collection.

A Claude Code SKILL for designing beautiful, consistent web pages using a spec-first, code-second methodology. It generates a comprehensive DESIGN.md specification before producing any code, ensuring visual consistency, accessibility, and maintainability.

What It Does

The web-design SKILL transforms requirements (PRD, reference URLs, screenshots, or keywords) into production-ready web pages through a three-phase process:

1. Phase A - Understand: Extract design cues from inputs
2. Phase B - Produce DESIGN.md: Generate a 9-section design specification
3. Phase C - Generate Code: Build HTML/CSS/JS that strictly follows the spec

Installation