《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》整理稿
1. 先给判断
视频类型
工具推广 / 方法拆解 / 案例对比 / 项目导流
一句话结论
这条视频更像一条“工具推广 / 方法拆解 / 案例对比 / 项目导流”内容，主角是 Claude Design、Skill，更适合抓主线、方法和判断，而不是逐段细抄。
这条内容最值得先看什么
1. 它能帮你看清作者是怎么拆步骤、讲顺序和组织方法的。 2. 它能帮你看清案例对比到底在证明什么，而不是只看表面效果。 3. 它能帮你把真正可借鉴的方法和推广包装拆开看。
读的时候要先带着的保留
1. 当前证据不足，先把它当导读，不要当成完整深度分析。 2. 时间点可信度低，原话和时间戳主要用于复查，不宜直接抄成精确笔记。 3. 该Skill依赖于上游模型能力（如Claude 3.5），若模型性能下降则效果受限。
2. 还原内容
这条内容在讲什么
- 主角：Claude Design、Skill
- 核心问题：真正决定AI生成网页质量的，不是模型本身，而是背后精心设计的提示词体系。
- 适合怎么读：先看这份报告抓主线，再决定要不要回到正文细读。
内容是怎么往下推的
1. 起点：Figma股价下跌背景，并引出Claude Design功能及其使用门槛 2. 问题：Claude Design虽强大但难以使用，于是将其核心能力封装为可复用的Skill，使任何开发者都能在现有AI工具中实现高质量网页设计 3. 判断：真正决定AI生成网页质量的，不是模型本身，而是背后精心设计的提示词体系。 4. 拆解：通过动态角色设定、六步工作流、去AI味设计清单及色彩系统规范，构建了一套可复制的专业级设计逻辑。 5. 方案：通过两个对比案例证明，加入Skill后生成的网页在配色、布局、创意和整体质感上实现质的飞跃。 6. 验证：演示对比测试：同一提示词下，有Skill版本明显优于无Skill版本
顺着视频往下看
| 时间 | 内容 | 作用 |
|---|---|---|
| 00:00:00 | 介绍Figma股价下跌背景，并引出Claude Design功能及其使用门槛 | 引入 |
| 00:00:15 | 提出核心观点：将Claude Design功能封装成通用Skill，让普通人也能成为顶级网站设计师 | 方案 |
| 00:01:30 | 展示基于该Skill生成的两个设计案例，强调其视觉效果优于普通AI生成结果 | 方案 |
| 00:02:15 | 拆解Claude Design的设计哲学：输出真实可运行代码，而非静态图片 | 方法 |
3. 提炼方法
可以直接借走的做法
- 访问GitHub仓库（https://github.com/ConardLi/web-design-skill/）下载并部署WebDesignEngineer Skill：先照着做一遍，再看是否适合你的场景。
- 在Cursor或Codex中启用该Skill，尝试用简单提示词生成网页原型：先照着做一遍，再看是否适合你的场景。
- 将提示词中的去AI味规则融入日常设计流程，主动规避常见低质模式：先照着做一遍，再看是否适合你的场景。
哪些人更适合先看这条
- 适合把作者的拆解顺序借回自己的学习流程里试一次。
- 如果你正准备换工具或补辅助材料，可以重点看它怎么配合方法使用。
看完可以直接带走什么
- 访问GitHub仓库（https://github.com/ConardLi/web-design-skill/）下载并部署WebDesignEngineer Skill。
- 在Cursor或Codex中启用该Skill，尝试用简单提示词生成网页原型。
- 将提示词中的去AI味规则融入日常设计流程，主动规避常见低质模式。
关键概念
| 概念 | 视频里的意思 | 是否需要进一步核查 |
|---|---|---|
| Claude Design | Anthropic推出的AI设计功能，可基于自然语言提示生成可运行的网页代码，输出为真实可交互的前端项目。 | 否 |
| Skill | 一种可复用的AI提示工程模块，封装特定任务的完整流程与规则，可在多种AI工具中调用。 | 否 |
| OKLCH | 一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合用于生成协调且高级的配色方案。 | 否 |
| CIELAB | 国际照明委员会定义的感知均匀色彩空间，能准确反映人眼对颜色变化的感知差异。 | 否 |
| Diff | 版本控制系统中用于比较文件差异的功能，可用于追踪网页设计变更历史。 | 否 |
| WebDesignEngineer | UP主基于Claude Design提示词开发的开源Skill，整合了设计流程、规则与模板，支持多平台调用。 | 否 |
4. 质量复查
这份整理稿靠什么站住
本次转写质量较低，以下内容以主题整理为主，时间点和原话引用更适合作为复查入口，不建议直接当精确笔记。
当前只抽取到 2 条较可靠证据，因此以下内容更适合作为初步导读，而不是完整深度分析。
这些判断分别来自哪里
| 判断 | 类型 | 证据 |
|---|---|---|
| 当前时间线与原话不宜直接当精确笔记使用 | 待核查 | 仅 3 段转写 / 2 条较可靠证据 |
| 输出真实可运行代码，而非静态图片 | 原文明确 | 00:02:15 / 他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。 |
| 同一提示词下，有Skill版本明显优于无Skill版本 | 原文明确 | 00:11:15 / 我用同一套提示词分别跑了有带Skill和没有skill的版本啊……最后带来的版本呢大概就是八十五分到九十五分的差距。 |
| 真正决定AI生成网页质量的，不是模型本身，而是背后精心设计的提示词体系。 | 整理归纳 | 基于多段时间轴、章节摘要与原话做的压缩整理 |
| 通过将高端设计思维模块化为可复用的Skill，普通人也能达到专业设计师水平。 | 整理归纳 | 基于多段时间轴、章节摘要与原话做的压缩整理 |
| AI辅助设计正从“工具使用”转向“方法论复用”，未来竞争力在于提示工程能力。 | 模型判断 | 基于视频主线做出的延伸判断，适合带回自己的场景再验证 |
转写情况
- 分段数量：3
- 明显识别错误信号：是
- 时间戳可信度：低
- 建议阅读方式：仅作参考
还要保留哪些疑问
- 该Skill依赖于上游模型能力（如Claude 3.5），若模型性能下降则效果受限。
- 部分规则（如留白、配色）仍需人工判断，无法完全自动化。
- 未提供完整的前端框架集成方案，需用户自行配置环境。
- 作者承认原始提示词来自泄露内容，存在版权与合规风险。
回查证据
| 整理结论 | 视频依据 | 时间点 |
|---|---|---|
| 输出真实可运行代码，而非静态图片 | 他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。 | 00:02:15 |
| 同一提示词下，有Skill版本明显优于无Skill版本 | 我用同一套提示词分别跑了有带Skill和没有skill的版本啊……最后带来的版本呢大概就是八十五分到九十五分的差距。 | 00:11:15 |
术语与来源
| 术语 | 本文语境 |
|---|---|
| Claude Design | Anthropic推出的AI设计功能，可基于自然语言提示生成可运行的网页代码，输出为真实可交互的前端项目。 |
| Skill | 一种可复用的AI提示工程模块，封装特定任务的完整流程与规则，可在多种AI工具中调用。 |
| OKLCH | 一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合用于生成协调且高级的配色方案。 |
| CIELAB | 国际照明委员会定义的感知均匀色彩空间，能准确反映人眼对颜色变化的感知差异。 |
| Diff | 版本控制系统中用于比较文件差异的功能，可用于追踪网页设计变更历史。 |
| WebDesignEngineer | UP主基于Claude Design提示词开发的开源Skill，整合了设计流程、规则与模板，支持多平台调用。 |
| EasyAgent | UP主另一开源项目，目标是从零复刻类似Claude Code的本地AI Agent产品，用于企业级AI应用开发。 |
| Harvey | 由Anthropic推出的AI代理产品，代表了下一代智能体在复杂任务中的自主执行能力。 |
| 来源项 | 内容 |
|---|---|
| UP主 | code秘密花园 |
| 平台 | B站 |
| BV号 | BV1MbosBfEoK |
| 链接 | https://www.bilibili.com/video/BV1MbosBfEoK |
| 时长 | 00:12:58 |
| 播放量 | 103,690 |
辅助参考：article.md 是完整学习稿，report.md 负责把主线和证据先收紧。
分析引擎: qwen 模型: qwen-flash 原文长度: 4562 字 生成时间: 2026-05-17 20:07 报告模板版本: video-digest-article-v2-debug-20260517-1425