web-design-skill 学习笔记
Claude Design 是什么？
Claude Design 是 Anthropic 发布的设计工具，发布当天直接导致了 Figma 股价暴跌。
核心理念： 左边打字，右边直接出设计稿（本质上是可运行的网页，不是图片）
与传统设计工具的区别
| 维度 | 传统设计工具（如 Figma） | Claude Design |
|---|---|---|
| 主导者 | 人在画布上操作，AI 辅助提速 | AI 是主要生成者，人负责审核 |
| 输出物 | 设计图/图片 | 真实可运行的代码 |
| 交互方式 | 手动绘制 | 文字描述 → 自动生成 |
| 版本管理 | 需手动操作 | 链接可点击，标签可切版本 |
本质： Claude Design 更像 Claude Code（设计师版），而不是 AI 版 Figma。
核心提示词拆解（6 大要点）
视频对 Claude Design 泄露的提示词进行了深度拆解，提炼出 6 个核心设计原则：
角色定位 —— 动态身份切换
提示词原文要旨： “你是一个专家设计师，而用户是你的产品经理”
关键洞察：
- ❌ 不要说"你是一个 AI 助手"
- ✅ 建立设计师 ↔ 产品经理的协作关系
两个好处：
- AI 决策更果断 — 设计师本身应该有判断力，不用事事请示
- 关键点会来问你 — 因为用户是产品经理，最终由用户拍板
动态身份切换：
- 做动画 → 动效设计师
- 做原型 → UX 设计师
- 做 PPT → Deck 设计师
💡 启示： 很多人的提示词只写一句"你是个前端开发者"就完事了。好的角色定位应该是动态的，根据具体任务灵活切换身份。
工作流 —— 六步流程
|
|
细节一：提问的艺术（什么时候该问？什么时候直接干？）
问题： 很多 Agent 要么先问你一堆问题，要么啥也不问闷头就干。
Claude Design 的策略：
- 输入 “帮我做个 PPT” → 先问几个问题（信息不足）
- 输入 “帮我做个 PPT，全运会马上要用，10 分钟” → 直接开干（紧急场景，信息充分）
💡 启示： 根据上下文的紧迫程度和信息完整度，灵活决定是提问还是执行。
细节二：总结原则
- ✅ 只说关键注意事项和下一步动作
- ❌ 不要复述自己已经做了什么
💡 启示： 这个原则可以有效避免 AI 产生大量废话。
去除 AI 味（最有价值的部分）
典型的 AI 生成网页特征：
- 紫粉蓝渐变背景
- 大圆角卡片
- Emoji 当图标
- 到处堆砌假数据
- 左侧彩色边框的圆角卡片
- 烂大街的字体
- 无意义的数据和图标堆砌
这就像文章里通篇都是"此外"“值得注意的是"“综上所述"一样，一眼就能闻出来是 AI 写的。
Claude Design 的做法： 列出一份完整的"雷区清单”，逐条告诉 AI 不能走这些老套路。
字体推荐也很讲究：
- 明确列出千万不能用的字体 + 替代方案
- 推荐小众但品质很高的字体
色彩系统 —— OKLCH 色彩空间
配色策略优先级：
|
|
为什么用 OKLCH 而不是 HSL？
| HSL | OKLCH | |
|---|---|---|
| 感知均匀性 | ❌ 不均匀（同亮度值，黄色比蓝色亮很多） | ✅ 均匀 |
| AI 配色效果 | 数值没问题但看着不舒服 | 保持亮度和色度不变，只转色相，颜色自然和谐 |
💡 启示： OKLCH 这个看似很小的细节，能让网页的高级感直接提升一个档次。
内容原则 —— “用 1000 个 NO 换一个 YES”
引用乔布斯经典名言。
AI 做网页的传统毛病： 恨不得把空间全塞满 — Hero、特性、评价、数据、FAQ、联系方式……一股脑全上，但每块都平庸。
Claude Design 的态度：
- 每个元素都得证明自己为什么应该在那里
- 如果觉得页面空 → 可能是排版问题，用留白来解决
- 一个大胆的留白 > 十个凑数的板块
验证机制 —— 子 Agent 检查
原理： 开发完成后，fork 出一个独立的子 Agent 对网页做全面检查。
为什么要独立的子 Agent？
- 同一个上下文里的 AI 容易"自我感觉良好”
- 独立的子 Agent 没有"感情包袱"，更容易发现问题
验证内容：
- 是否有 AI 味特征？
- 配色是否和谐？
- 字体是否恰当？
- 布局是否有创意？
Skill 文件的核心优化
Skill 文件在 Claude Design 提示词的基础上，做了三个关键优化：
先说设计系统再写代码
在开始编码之前，要求 AI 明确列出：
- 配色方案
- 字体选择
- 间距系统
- ……
为什么？ 如果不说清楚，AI 会默默自己做决定直接写代码。等你看到成品时，如果方向不对只能推翻重来。提前说出来，还没写代码就能纠偏。
尽早输出最小可用版本
- 要求 AI 先拿出一个带假设和占位符的粗糙 V0 版本
- 一个粗糙的 V0 > 花几倍时间做出精雕细琢的 V1
为什么？ 如果整个方向都错了，V1 做得再精致也全白干了。
额外补充
- 补充了更多去除 AI 味的条目
- 增加了几套经过验证的字体和配色参考对照表
- 附带 reference 文件（典型代码模板，来源于提示词中的 “copy study the component” 部分）
效果对比演示
测试环境：Cursor + Claude 4.7（有 Skill vs 无 Skill）
太空探索博物馆线上展览页
| 无 Skill | 有 Skill | |
|---|---|---|
| 配色 | 青紫粉渐变，典型 AI 霓虹感 | OKLCH 定义，接近杂志印刷的深沉色调 |
| 字体 | 比较老套 | 标题和正文都有特点，技术感十足 |
| 布局 | 标准 Hero + 卡片，教科书式落地页 | 非传统卡片式，有创意感 |
| 动画 | 有星空和行星动画，但堆砌了大量发光特效 | 舒适、有创意感 |
| 总体 | 有太空感，缺少创意 | 像非常有经验的设计师的杰作 |
独立摄影师个人作品集（极简提示词）
| 无 Skill | 有 Skill | |
|---|---|---|
| 设计风格 | 深色背景 + 霓虹发光 + 半透明卡片，老套 | 虚构了一位北欧摄影师，从头设计完整视觉风格 |
| 文案 | 满满的 AI 感 | — |
| 情感表达 | 摄影师本该有的自由感完全没体现 | 像在翻一本高端摄影画册 |
| 决策策略 | 直接开干，没问问题 | 主动提问了配色倾向、核心元素等 |
最终结论
|
|
Skill 里的每条规则单独看效果不大，但加起来就会产生质变。这就是从"能用"到"好看"、从"完整"到"精致"、从"合格"到"有风格"的差距。
核心知识点速查
| # | 知识点 | 一句话总结 |
|---|---|---|
| 1 | 动态角色定位 | 根据任务灵活切换 AI 身份，而不是一句"你是前端"了事 |
| 2 | 工作流六步法 | 理解需求→探索资源→制定计划→搭建结构→完成验证→简要总结 |
| 3 | 提问的艺术 | 根据信息完整度和紧迫度决定是提问还是直接干 |
| 4 | 去除 AI 味 | 列出雷区清单，禁用渐变/Emoji/大圆角卡片等老套路 |
| 5 | OKLCH 配色 | 感知均匀的色彩空间，比 HSL 更能产生和谐配色 |
| 6 | 内容克制 | 每个元素都要证明自己存在的理由，大胆留白 |
| 7 | 子 Agent 验证 | 用独立上下文检查，避免"自我感觉良好" |
| 8 | 先说设计系统再写代码 | 提前暴露设计决策，避免方向性错误 |
| 9 | 快速出 V0 | 粗糙但快速的原型 > 精致但方向错误的成品 |