xiaopu-ai/web-design

设计美观且一致网页的Claude代码技能——先规范，代码后。

✨ 它的作用

输入 SKILL 一个 PRD、参考 URL 或 截图——任何组合都行。它生成一个可读、可编辑、可移植的 DESIGN.md ** 先**。只有这样，它才生成网页代码。

结果是：界面、视觉效果、动态和响应性都非常出色。页面间保持一致，跨 AI 工具便携，且可手动编辑。

🧭 它是如何运作的

阶段A ·理解。 从PRD/URL/截图/关键词/品牌名称中提取设计线索。优雅的备用链条即使在输入稀疏时也能保持工作。

**阶段B ·生成DESIGN.md。**完整的9个部分规格：颜色·类型·组件·布局 ·运动 ·深度 ·该做与不该做 ·响应式 ·可访问性。一旦你批准，规格书就存在你的项目中，可以手工编辑。

**阶段C ·生成代码。**严格遵守规范。根据100分质量检查表进行自我审计。存在参考URL时进行差分审计。

📦 仓库布局

🚀 安装

克隆到你的Claude代码技能目录中：

✨ What it does

Feed the SKILL a PRD, a reference URL, or a screenshot — any combination works. It produces a readable, editable, portable DESIGN.md first. Only then does it generate the web code.

The result: UI, visuals, motion, and responsiveness that all land. Consistent across pages, portable across AI tools, editable by hand.

🧭 How it works

Phase A · Understand. Extracts design cues from PRD / URL / screenshot / keywords / brand name. A graceful fallback chain keeps it working even with sparse inputs.

Phase B · Produce DESIGN.md. A full 9-section spec: color · type · component · layout · motion · depth · do’s & don’ts · responsive · accessibility. Once you approve it, the spec lives in your project and can be edited by hand.

Phase C · Generate code. Strictly follows the spec. Self-audits against a 100-score quality checklist. Diff-audits when a reference URL exists.

📦 Repository layout

web-design/
├── SKILL.md            # the skill itself (instructions for Claude)
├── references/         # design systems, style seeds, motion library,
│                       # interaction patterns, quality checklist
├── scripts/            # Playwright crawler, static token extractor,
│                       # Unsplash image fetcher
└── docs/               # landing page (served by GitHub Pages)
    ├── index.html
    ├── styles.css
    ├── app.js
    ├── DESIGN.md       # the page's own spec (produced by the SKILL itself)
    └── images/

🚀 Install

Clone into your Claude Code skills directory:

git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design

Claude Code will auto-discover the SKILL the next time you start a session.

💻 Run the landing page locally

cd web-design/docs
python3 -m http.server 8000
# open http://localhost:8000

Opening index.html directly with file:// won’t work — Google Fonts and the OGL ES module need an HTTP origin.

🙏 Credits