用途：该技能是 Claude Code 的 SKILL，用「先规格、后代码」的方法把需求（PRD、参考网址、截图或关键词）转化为可用于生产的网页，先产出 DESIGN.md 设计规格，再生成代码，以保持视觉一致性、可访问性与可维护性。
主要能力：分三阶段。Phase A 理解输入，从 PRD、参考 URL、截图、关键词、品牌名中提取设计线索，并带降级回退；Phase B 生成含 9 个部分的 DESIGN.md，覆盖色彩系统、字体排版、组件库、布局系统、动效、深度与阴影、设计原则、响应式行为、可访问性；Phase C 生成 HTML/CSS/JS，严格遵循规格，并按 100 分质量清单自审、在提供参考 URL 时做差异审计、保持多页一致。
使用方式：安装命令为 git clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design，Claude Code 下次启动会自动发现。随后在对话中用自然语言调用该技能并给出 PRD、参考 URL 或截图等输入，先审查 DESIGN.md，再生成或重新生成代码。仓库含 SKILL.md、references（design-systems、style-seeds、motion-library、interaction-patterns、quality-checklist.md）、scripts（crawl.py、extract_tokens.py、fetch_images.py）与 docs 示例。脚本用法：pip install playwright beautifulsoup4 后运行 python crawl.py --url https://example.com --output tokens.json；python extract_tokens.py --input ../docs --output design-tokens.json；设置 UNSPLASH_ACCESS_KEY 后运行 python fetch_images.py --query "technology" --count 5 --output ../docs/images/。可在 references/style-seeds/ 与 references/motion-library/ 添加自定义风格种子与动效模式。
适用场景：落地页、多页网站统一设计、对照参考站点改版、截图还原、可访问性优先站点、A/B 变体等。
限制：资料未提供定价、平台兼容性、效果保证等信息；质量清单、断点与性能细节以仓库文件为准，此处暂未提供完整内容。