web-design
A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.
xiaopu-ai- 评测生成时间（北京时间）
- 本报告引擎
- v3.8.0
- 当前引擎
- v3.16.0
本报告与当前引擎使用不同规则；原分数不会自动更新，不同版本的分数不宜直接对比。
进入后确认来源与额度，提交才会创建任务。
综合采用结论
核心能力可用，建议在受控范围内试用
- 基础评测完成+25/25确定性评分与静态安全扫描已完成
- README 有效证据+8/253,097 个去重后的有效字符
- 独立证据来源+4/201 类非重复证据，重复文件不叠加
- 仓库元数据+10/10已取得仓库状态与采用数据
- 活跃记录+5/5已取得最近提交时间
- AI 复核+15/15已完成结构化 AI 证据复核
web-design技能工作流程
README描述了从输入到输出的连续处理步骤，包括三个阶段。
左右滑动查看完整图示
- • Phase A · Understand
- • Phase B · Produce DESIGN.md
- • Phase C · Generate code
- README中'What it does'描述输入PRD/URL/截图并生成DESIGN.md
- 安装命令: git clone ... ~/.claude/skills/web-design
- 本地运行: python3 -m http.server 8000
- 仓库布局列出SKILL.md、references、scripts等
- 许可证MIT
- 问题与用途描述
- 有效 README
- 安装或接入步骤
- 可执行示例
- 未发现已知高风险模式
- 缺少输出或结果说明
- 缺少限制、权限或边界
- 缺少错误处理或排障
- 缺少输出或结果说明，未展示生成代码的示例
- 未说明限制、权限或边界，如输入大小或兼容性
使用Claude Code的开发者、需要从PRD或截图快速生成网页设计的场景、希望先有设计规范再编码的团队、需要跨工具可移植设计文档的用户
非Claude Code环境、需要详细错误处理或排障支持的用户、需要完整输出示例的初学者
也有自己的公开项目？先看完证据，再用当前规则生成独立报告。
评测我的项目 →静态扫描不是安全保证，生产接入前仍应人工复核权限和数据边界。
- 01补充输出或结果说明
- 02补充限制、权限或边界
- 03补充错误处理或排障
方法、证据与局限展开收起
GitHub Repository API
1 个文件 · 3,675 字符
v3.8.0 · AI 复核已启用（deepseek-chat）
- 静态评测不会安装或执行项目代码
- 安全扫描基于高信号文件与已知模式，不能替代人工审计
- 流行度只反映采用程度，不代表安全或工程质量
30 天热度趋势
README
web-design
A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.
✨ 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
Motion effects on the landing page derive from work by David Haz:
- vue-bits (MIT) — GradientBlinds, RollingGallery
- react-bits (MIT) — DomeGallery
Reference inspirations for the DESIGN.md structure draw from awesome-design-md (MIT).
📄 License
MIT — use it, fork it, ship it.
Built with ❤️ by @KAOPU-XiaoPu