《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》内容整理
UP主将Claude Design的核心设计能力提炼为可复用的Skill，使普通用户无需复杂工具即可生成高质量、可运行的网页代码。通过解析Claude Design的提示词体系，该Skill实现了角色动态切换、六步工作流、去AI化设计规范等关键机制，并在实际测试中显著提升网页设计的质感与专业度。
核心信息
- Claude Design的强大并非仅源于模型本身，而是其背后高度结构化的提示词设计体系。
- 真正决定设计品质的，是那些看似琐碎却系统性的规则集合。
- 将高端AI能力封装为可复用的Skill，是普通人跨越技术门槛的关键路径。
跳读导航
可先看这几段：
- 00:00:00：介绍Figma股价下跌背景，引出Anthropic新功能Claude Design
- 00:00:30：展示基于该Skill生成的两个设计案例效果
- 00:05:00：说明色彩系统采用OKLCH，因其感知均匀性提升视觉和谐感
- 00:11:00：细微规则叠加带来从合格到有风格的质变
- 00:12:00：推荐开源项目EasyAgent，用于复刻Claude Code类产品
内容主线
从工具到技能：让每个人都能做顶级网页设计
UP主介绍Claude Design功能虽强但难以使用，于是将其核心能力提炼为一个名为WebDesignEngineer的Skill，实现人人可用的高级网页设计能力。
揭秘Claude Design的六大设计思维
深入拆解Claude Design提示词中的核心设计原则，包括角色定位、六步工作流、去AI化规则、色彩系统选择、留白运用和自动化验证机制。
实战对比：Skill如何让设计从合格到精致
通过两个真实案例对比，展示使用Skill前后在信息缺失情况下生成网页的差异，凸显琐碎规则带来的整体质变。
开源共享与未来展望
公开WebDesignEngineer Skill及原始提示词，同时推荐其另一开源项目EasyAgent，帮助开发者构建企业级AI Agent系统。
边界与保留
- 该Skill依赖于Claude 3.5等特定模型，跨平台兼容性受限
- 部分规则如色彩系统需用户具备一定设计认知才能正确应用
- 提示词虽已泄露，但实际效果仍受上下文理解能力影响
- 未提及如何处理多语言或本地化内容的适配问题
回查证据
| 整理结论 | 视频依据 | 时间点 |
|---|---|---|
| 角色定位为专家设计师与产品经理关系 | 你是一个专家设计师，而用户是你的产品经理。注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。 | 00:02:15 |
| 直接输出可运行代码而非静态图片 | 他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。 | 00:01:00 |
| 去除AI味的设计规则清单，如禁用渐变背景、乱用emoji等 | 别滥用渐变背景，别乱用emoji，别用那种侧边色块的原生问题，如可能让大家的字体啊对齐无意义的数据和图标等。 | 00:04:00 |
| 细微规则叠加带来从合格到有风格的质变 | 没用skill的版本呢说实话本身已经很不错了……最后带来的版本呢大概就是八十五分到九十五分的差距。 | 00:11:00 |
| 细微规则叠加带来从合格到有风格的质变 | 这十分的差距呢其实就是skill里面看起来那些很琐碎的规则，那一个效果不大但是加起来就会产生质。 | 00:11:30 |
| 使用Skill前后在相同提示下生成的网页质量差异 | 我用同一套提示词分别跑了有带Skill和没有skill的版本……效果非常不错啊。 | 00:10:00 |
术语与来源
| 术语 | 本文语境 |
|---|---|
| Claude Design | Anthropic推出的AI设计功能，可基于文本提示生成可运行的网页代码，支持版本管理与交互验证。 |
| Skill | 一种可复用的AI工作流模块，封装特定任务的提示词、流程与规则，可在多种AI工具中调用。 |
| OKLCH | 一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合生成和谐配色。 |
| CIELAB | 国际照明委员会定义的感知均匀色彩空间，能准确反映人眼对颜色的感知差异。 |
| Diff | 版本控制系统中用于比较文件差异的功能，可用于追踪代码修改历史。 |
| 留白 | 设计中未被内容填充的空间，用于增强视觉层次与阅读节奏，是高级设计的重要手法。 |
| 角色定位 | 在提示词中设定AI的角色身份，如专家设计师与产品经理，以引导其决策方式。 |
| 工作流 | 一套结构化的任务执行流程，如理解需求→探索资源→制定计划→搭建结构→完成验证→总结。 |
| 来源项 | 内容 |
|---|---|
| UP主 | code秘密花园 |
| 平台 | B站 |
| BV号 | BV1MbosBfEoK |
| 链接 | https://www.bilibili.com/video/BV1MbosBfEoK |
| 时长 | 00:12:58 |
| 播放量 | 99,881 |
辅助参考：article.md（校正后全文）
分析引擎: qwen 模型: qwen-flash 原文长度: 4562 字 生成时间: 2026-05-16 09:55