# 《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》内容整理

> UP主将Claude Design的核心设计思维提炼为可复用的Skill，使普通用户无需复杂工具即可生成高质量、可运行的网页代码。该Skill通过角色定位、六步工作流、去AI味设计规则和结构化验证流程，显著提升AI生成网页的设计质感与专业度，已开源供开发者使用。

## 核心信息

- 真正的AI设计能力不在于模型算力，而在于精心设计的提示词体系。
- 通过结构化提示词将顶级设计思维转化为可复用的技能，是普通人跨越技术鸿沟的关键。
- 设计质量的跃升并非来自单点突破，而是由一系列看似琐碎但系统性的规则共同作用的结果。

## 跳读导航

可先看这几段：

- **00:00:00**：视频开场，提及Figma股价崩盘，并引出Claude Design功能
- **00:00:30**：宣布将Claude Design核心功能集成成通用Skill，名为WebDesignEngineer
- **00:05:00**：去除AI味的设计规则，如避免渐变背景、乱用emoji等
- **00:11:30**：差距在于琐碎规则叠加产生的质变，非单一功能提升
- **00:12:00**：公布开源项目地址，并推荐另一个相关开源项目EasyAgent

## 内容主线

## 从工具到技能：让每个人都能成为顶级网站设计师

UP主介绍自己将Claude Design的核心能力封装为一个通用技能（Skill），使任何用户都能在Claude Code、Cursor或Codex中使用，无需依赖官方工具即可生成高质量网页代码。


## Claude Design的本质：不只是生成图片，而是输出可运行代码

强调Claude Design输出的是真实可运行的代码，支持链接点击、版本控制和diff比较，与传统AI生成图片有本质区别。


## 提示词拆解：角色、流程与去AI味设计规则

深入分析提示词中的六大关键要素：动态角色定位、六步工作流、禁止滥用渐变与emoji、使用OKLCH色彩空间、合理运用留白、以及输出独立验证脚本。


## 实战对比：Skill带来的质变效果

通过两个对比案例，展示在信息不足时，带Skill的AI能主动提问并构建完整视觉风格，而无Skill版本则呈现典型AI味设计。


## 开源与未来：从复刻到企业级AI能力

公开WebDesignEngineer Skill及原始提示词，鼓励社区使用；同时推荐开源项目EasyAgent，目标是从零复刻类似Claude Code的本地AI产品。


## 边界与保留

- 该Skill依赖于用户输入的质量，若提示词模糊，仍可能生成低质量结果。
- 未提供完整的自动化部署方案，需手动配置环境。
- 部分规则（如色彩空间）需用户具备一定设计知识才能正确应用。
- 仅适用于前端网页生成，不涵盖后端逻辑或复杂交互设计。

## 回查证据

| 整理结论 | 视频依据 | 时间点 |
|------|------|------|
| 角色定位为专家设计师与产品经理关系 | 他说你是一个专家设计师而用户是你的产品经理注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。 | 00:03:00 |
| 直接输出可运行代码而非图片 | 而且呢他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff。 | 00:02:30 |
| 如避免渐变背景、乱用emoji等 | 比如说别滥用渐变背景别乱用emoji别可那种种侧边色块的原生问题啊啊如可可能让大家的字体啊对齐无意义的数据和图标等。 | 00:05:15 |
| 留白是解决版式问题的重要手段，优于堆砌元素。 | 用留白来解题可能够个来东西可可一个个个的留白比可个一数的版题啊可能更有表现的一点啊。 | 00:07:30 |

## 术语与来源

| 术语 | 本文语境 |
|------|------|
| Claude Design | Anthropic推出的AI设计功能，可将自然语言提示转化为可运行的网页代码，强调设计思维与系统化流程。 |
| Skill | 一种可复用的AI任务模板，包含特定角色、流程和规则，用于引导AI完成复杂任务。 |
| OKLCH | 一种基于CIELAB色彩空间的现代色彩表示方式，具有感知均匀性，适合生成和谐配色。 |
| CIELAB | 一种感知均匀的色彩空间，能保持亮度和色度不变，仅改变色相，使颜色过渡更自然。 |
| Diff | 版本控制系统中用于比较文件差异的功能，可用于追踪代码变更。 |
| Prompt Engineering | 通过精心设计提示词来优化AI输出质量的技术，是当前AI应用的核心能力之一。 |
| EasyAgent | UP主正在开发的开源项目，用于从零复刻类似Claude Code的本地AI产品，支持企业级AI能力构建。 |
| Harvey | 一个由Anthropic开发的AI代理产品，代表了下一代AI系统在自动化任务执行方面的潜力。 |

| 来源项 | 内容 |
|------|------|
| UP主 | code秘密花园 |
| 平台 | B站 |
| BV号 | BV1MbosBfEoK |
| 链接 | https://www.bilibili.com/video/BV1MbosBfEoK |
| 时长 | 00:12:58 |
| 播放量 | 103,294 |


*辅助参考：article.md（校正后全文）*

---

*分析引擎: qwen*
*模型: qwen-flash*
*原文长度: 4562 字*
*生成时间: 2026-05-16 22:05*