《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》
UP主将 Claude Design 的核心设计哲学提炼为一个可复用的 Skill 工具，通过开源方式让任何人无需掌握复杂技能即可生成高质量、可运行的网页设计。该工具基于 Claude Design 的提示词体系，强调角色动态定位、工作流结构化和视觉规范约束，显著提升 AI 生成网页的设计质感与专业度。视频通过对比测试展示了 Skill 前后在配色、布局、创意表达上的质变效果。
---
基本信息
| 项目 | 内容 |
|---|---|
| UP主 | code秘密花园 |
| 时长 | 00:12:58 |
| BV号 | BV1MbosBfEoK |
| 播放量 | 89,109 |
---
时间轴
| 时间 | 要点 |
|---|---|
| 00:00:00 | UP主介绍 Figma 骨价崩盘背景，并引出 Claude Design 新功能及其使用门槛 |
| 00:00:15 | 提出将 Claude Design 的核心功能封装为通用 Skill，使普通人也能成为顶级网站设计师 |
| 00:00:30 | 展示基于该 Skill 生成的两个实际网页案例，体现其设计效果 |
| 00:01:45 | 解释 Claude Design 的设计哲学：以用户需求为导向，直接输出可运行的真实网页代码 |
| 00:02:15 | 指出 Claude Design 不同于普通 AI 工具，更像是一种动态角色协作机制 |
| 00:03:00 | 强调 Claude Design 的提示词中包含六步工作流：理解需求、探索资源、制定计划、构建结构、完成验证、极简总结 |
| 00:04:10 | 分析提示词中关于角色定位的重要性：AI 应根据任务灵活切换身份（如前端开发者、动效设计师等） |
| 00:04:45 | 揭示 AI 生成网页常出现的“廉价感”问题：滥用渐变、发光、假数据、图标堆砌等典型模式 |
| 00:05:15 | 列出 Claude Design 提示词中明确禁止的设计陷阱，如滥用渐变背景、乱用 emoji、无意义字体对齐等 |
| 00:06:00 | 推荐使用 LAB 色彩空间替代传统 HSL，实现感知均匀的自然配色 |
| 00:07:10 | 强调留白与元素逻辑关系的重要性，主张每个元素应有明确存在理由 |
| 00:08:00 | 说明提示词中包含自我验证机制，要求 AI 对生成结果进行独立检查 |
| 00:09:00 | 指出 Claude Design 无 API 支持，无法直接集成到工作流，但其提示词已泄露 |
| 00:09:30 | 宣布基于该提示词开发了名为 webdesignengineer 的 Skill 工具并开源 |
| 00:10:00 | 展示使用 Skill 与未使用 Skill 的两个对比案例，分别测试深色主题和摄影师个人站 |
从 Claude Design 到人人可用的 Skill
时间: 00:00:00 - 00:01:45
UP主介绍 Claude Design 的兴起背景，指出其虽强大但难以使用，因此决定将其核心能力提炼为一个通用 Skill，使非专业人员也能轻松生成高质量网页设计。
Claude Design 的设计哲学与提示词精髓
时间: 00:01:45 - 00:06:00
深入解析 Claude Design 的提示词体系，包括动态角色设定、六步工作流、避免 AI 常见设计陷阱等关键机制，揭示其如何实现从“合格”到“精致”的跃迁。
WebDesignEngineer：开源 Skill 的诞生与功能
时间: 00:06:00 - 00:09:30
介绍 UP 主基于 Claude Design 提示词开发的开源 Skill 工具 webdesignengineer，强调其支持多种 AI 编辑器，具备结构化流程与视觉规范控制能力。
实战对比：Skill 前后的设计质变
时间: 00:09:30 - 00:10:00
通过两个真实测试案例，对比使用 Skill 与不使用 Skill 生成的网页设计，直观展现配色、布局、创意表达等方面的显著差异。
开源共享与未来展望
时间: 00:10:00 - 00:12:58
公布 Skill 完整项目文件与参考源码的开源地址，并推荐另一个相关开源项目 EasyAgent，鼓励观众参与 AI Agent 实践与技术转型。
关键引用
你是一个专家设计师，而用户是你的产品经理，但你得问一句：你才是产品经理啊。
—— [00:02:30]
它不会用去做网页的脑子去做所有的东西，而是根据任务自由地切换身份。
—— [00:02:45]
别滥用渐变背景，别乱用 emoji，别用那种侧边测色框的原题，别用无意义的数据和图标。
—— [00:04:50]
传统的 HSL 色彩空间有个很大的问题，就是感知不均匀，亮度值可能比蓝色看的还大。
—— [00:06:10]
LAB 是一个感知均匀的色彩空间，它可以保持亮度和色度不变，只转变形代，呈现的颜色自然很和谐。
—— [00:06:25]
每个元素都能明明自己为什么存在，该有那但首先你要想加起西啊，这用用户是能可个个里啊。
—— [00:07:15]
它会出一个独立的验证念，然是对当前完成的网页做全面的检查。
—— [00:08:10]
没用 skill 的版本本身已经很不错了，但带来的差距大概就是八十五分到九十五分的差距。
—— [00:10:20]
一个效果不大，但是加起来就会产生质的变化。
—— [00:10:30]
如果你最近也在尝试做 agent 领域的转型，这个项目不容错过。
—— [00:12:30]
核心观点
1. Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。
2. AI 生成网页的“廉价感”源于重复性设计模式，可通过提示词规则有效规避。
3. 使用 LAB 色彩空间可实现更自然、感知均匀的配色，显著提升网页高级感。
4. 留白与元素逻辑关系是构建专业设计的关键，每个元素都应有明确目的。
5. 自我验证机制能有效防止 AI 自我感觉良好，提升最终输出质量。
6. 将 Claude Design 的提示词封装为 Skill 可实现跨平台复用，降低使用门槛。
7. 微小规则的积累能带来设计品质的质变，从“合格”走向“有风格”。
8. 开源共享是推动 AI 设计民主化的关键路径，促进社区协作与技术演进。
术语速查
| 术语 | 解释 |
|---|---|
| Claude Design | Anthropic 推出的 AI 设计工具，能够根据自然语言指令生成可运行的网页界面，强调设计哲学与真实代码输出。 |
| Skill | 一种可复用的 AI 提示词模板或工作流配置，可在 Cursor、Codex 等平台调用，实现特定任务自动化。 |
| webdesignengineer | UP 主基于 Claude Design 提示词开发的开源 Skill 工具，用于生成高质量、可运行的网页设计。 |
| LAB 色彩空间 | 一种感知均匀的色彩模型，能更准确反映人眼对颜色的感知差异，常用于高级视觉设计。 |
| HSL 色彩空间 | 一种常见的色彩表示方式，但存在感知不均匀的问题，可能导致颜色对比失真。 |
| EasyAgent | UP 主近期推出的开源项目，旨在帮助开发者复现类似 Claude Code 的 AI Agent 实践流程。 |
| Prompt Engineering | 通过精心设计提示词来引导 AI 输出符合预期结果的技术，是本视频的核心方法论。 |
| Self-Verification | AI 在生成内容后自动进行质量检查的能力，确保输出符合设计标准。 |
| Dynamic Role Assignment | AI 根据任务类型动态切换角色（如设计师、产品经理、前端开发）以提升决策合理性。 |
| Open Source | 将项目代码与文档公开，允许任何人查看、使用、修改和分发，促进技术共享与协作。 |
---
分析引擎: qwen 模型: qwen-flash 原文长度: 4557 字 生成时间: 2026-05-11 20:43