Summary

This Claude Code SKILL addresses the challenge of generating consistent, high-quality web designs by prioritizing a structured specification process. It enables users to input design requirements via PRDs, reference URLs, or screenshots, producing a detailed DESIGN.md specification before generating web code. This approach ensures UI, visuals, motion, and responsiveness align perfectly, offering portability and manual editability for developers and designers.

How It Works

The SKILL operates in three phases: understanding input (PRD, URL, screenshot, etc.) via a fallback chain, producing a comprehensive 9-section DESIGN.md specification (covering color, type, layout, motion, accessibility, etc.), and finally generating code that strictly adheres to this spec. Code is self-audited against a 100-score checklist and diff-audited against reference URLs, ensuring high fidelity and consistency.

Quick Start & Requirements

Installation involves cloning the repository into your Claude Code skills directory: git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design. Claude Code automatically discovers the skill. To run the project's landing page locally, navigate to web-design/docs, then execute python3 -m http.server 8000 and open http://localhost:8000. Requires a Claude Code environment and Python 3 for local hosting.

Highlighted Details

• Generates a detailed, human-editable 9-section DESIGN.md specification.
• Employs self-auditing against a 100-score quality checklist and diff-auditing against reference URLs for generated code.
• Supports diverse input formats including PRDs, reference URLs, screenshots, keywords, and brand names.
• Incorporates motion effects inspired by MIT-licensed libraries (vue-bits, react-bits).

Maintenance & Community

The project is maintained by @KAOPU-XiaoPu. Issue reporting is available via GitHub Issues. No other specific community channels (like Discord/Slack) or sponsorship details are provided in the README.

Licensing & Compatibility

The project is licensed under the MIT license. This permissive license allows for unrestricted use, modification, and distribution, including for commercial purposes and integration into closed-source projects.

Limitations & Caveats

As a "Claude Code SKILL," its primary functionality is tied to the Claude AI ecosystem. The quality of the generated DESIGN.md and subsequent code may vary based on the richness and clarity of the initial input, despite the fallback mechanisms. No specific limitations, known bugs, or alpha/beta status are detailed.