Web Design Engineer Skill

定义

基于 Cloud Design 提示词开发的通用 AI 网页设计 Skill（约 400 行），可在 Cursor、Codex、Claude Code 等任何 AI 编程工具中使用，让普通用户也能做出专业级网站设计。

详细说明

核心优化点

1. 设计系统先言后写：写代码之前必须先用自然语言把设计系统说清楚——配色、字体、间距等全列出来，在开始写代码之前就可以做纠偏。

2. 尽早起草 V0 版本：一个粗糙的 V0 版本可能比花几倍时间精雕细琢的 V1 版本有用得多——因为后者如果整个方向都错了，最后就全白干了。

3. 更多去除 AI 味的条目：在 Cloud Design 基础之上补充了更多去 AI 味的规则。

4. 字体和配色参考对照表：额外增加了几套经过验证的字体和配色参考对照表。

5. 典型代码模板：附带 reference 文件，包含典型代码模板，灵感来源于 Cloud Design 提示词中的 "copy studied component" 部分。

效果提升

• 从 85 分提升到 95 分
• 从能用到好看
• 从完整到精致
• 从合格到有风格

开源地址

https://github.com/ConardLi/web-design-skill/

与其他概念的关系

• CloudDesign - 基于 Cloud Design 提示词开发
• 去除AI味 - 核心优化方向
• OKLCH色彩系统 - 配色策略基础
• 角色定位 - 提示词设计维度
• 六步工作流 - 工作流程基础

来源

• 我把ClaudeDesign做成了Skill人人人都能成为顶级网站设计师