我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师
主阅读台
这个阶段主阅读台和显性阅读入口都只保留两份主文件：article.md 和 report.md。
正文整理稿
按视频原讲述顺序整理的正文稿。
article.md《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》
来源：未知平台 [code秘密花园]
时长：00:12:58
BV号：BV1MbosBfEoK
说明：以下文字按视频原讲述顺序整理，口语、重复和明显噪声已做轻度收束。
官方工具很强，但真正卡人的还是接入门槛
这段开场其实就做了一件事：先承认 Claude Design 很强，但普通人很难直接把它接进自己的工作流，所以他才动了把它重新封成 Skill 的念头。
他先从 Figma 股价下跌这件事切进来，借这个话头把 Claude Design 和它的使用门槛一并带出来。
紧接着他把这条视频真正想讲的主意抛出来：把 Claude Design 的核心能力封成一个通用 Skill。
为了先把观感立住，他一上来就展示了两个用这套 Skill 做出来的网页案例。
真正拉开差距的，不只是模型，而是背后的提示词结构
讲完缘起之后，他没有急着卖 Skill，而是先回头拆 Claude Design 到底强在哪，尤其是角色、流程和限制规则这几层。
接着他用一个例子把这件事讲具体：以用户需求为导向，直接输出可运行的真实网页代码。他接着把一个关键判断讲明白：Claude Design 更像一种带判断力的协作机制，而不只是一个听命行事的工具。
然后，他把重点落在理解需求、探索资源、制定计划、构建结构、完成验证、极简总结。再往下，他把重点落在AI 应根据任务灵活切换身份（如前端开发者、动效设计师等）。
再往下，他把重点落在滥用渐变、发光、假数据、图标堆砌等典型模式。这些规则在他看来不是装饰细节，而是一张明确的禁用清单，用来防止页面一路滑回廉价模板。
拆完提示词之后，他没有停在讲思路，而是把它直接封成了一个 Skill
前面那套思路拆完以后，他才把自己的封装端出来，重点不是名字，而是它把这些规则真正装进了可复用的工作流里。
说到视觉质感时，他又把配色单独拆开，认为 LAB 这类感知更均匀的色彩空间更容易做出高级感。除了配色，他还反复提留白和元素理由，意思是页面上每一块东西都得说得清为什么要存在。
最后一层是验证，他希望 AI 在交付前自己先站到更高视角把整页再检查一遍。但问题也在这里：官方工具不稳定、没有 API，所以他干脆绕过产品本身，转去吃它背后的提示词。
同一套需求，为什么加上 Skill 之后页面就不再像模板
接下来这段不再讲原理，而是直接上对比，看同样的需求在有无 Skill 的情况下到底差在哪里。
他还提到，标题和正文的字体都更有特点，技术感也更强。
于是他把前面拆出来的这些东西重新封装，做成了一个叫 WebDesignEngineer 的 Skill。
讲完方法和案例之后，他顺手把开源项目和下一条主线也带了出来
收尾时他把前面提到的 Skill、提示词和 demo 一并开源，同时顺手把 EasyAgent 这条新项目线也接了进来。
他认为，这个版本没有落回传统卡片式布局，动画也更舒服，整体更像一位经验丰富的设计师做出来的作品。
第二个测试里，他只给了一个非常简单的提示词：做一个独立摄影师的个人作品集网站，用来考验 AI 在信息极度缺乏时的自主决策能力。
为了证明这套封装不是空话，他又拿了两个案例做正面对比：同样的需求，有 Skill 和没 Skill 会长成两种结果。
本文由 AI 基于转写整理，仅供复查参考。
结构化报告
更适合扫结构、看判断和证据边界。
report.md《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》整理稿
1. 先给判断
视频类型
工具推广 / 方法拆解 / 案例对比 / 项目导流
一句话结论
这条视频更像一条“工具推广 / 方法拆解 / 案例对比 / 项目导流”内容，主角是 Claude Design、Skill，更适合抓主线、方法和判断，而不是逐段细抄。
这条内容最值得先看什么
1. 它能帮你看清作者是怎么拆步骤、讲顺序和组织方法的。 2. 它能帮你看清案例对比到底在证明什么，而不是只看表面效果。 3. 它能帮你把真正可借鉴的方法和推广包装拆开看。
读的时候要先带着的保留
1. 当前证据不足，先把它当导读，不要当成完整深度分析。 2. 时间点可信度低，原话和时间戳主要用于复查，不宜直接抄成精确笔记。 3. 当前样本的转录质量一般，引文和证据只保留了较可信的部分。
2. 还原内容
这条内容在讲什么
- 主角：Claude Design、Skill
- 核心问题：Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。
- 适合怎么读：先看这份报告抓主线，再决定要不要回到正文细读。
内容是怎么往下推的
1. 起点：Figma 骨价崩盘背景，并引出 Claude Design 新功能及其使用门槛 2. 问题：揭示 AI 生成网页常出现的“廉价感”滥用渐变、发光、假数据、图标堆砌等典型模式 3. 判断：Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。 4. 拆解：深入解析 Claude Design 的提示词体系，包括动态角色设定、六步工作流、避免 AI 常见设计陷阱等关键机制，揭示其如何实现从“合格”到“精致”的跃迁。 5. 方案：UP 主基于 Claude Design 提示词开发的开源 Skill 工具 webdesignengineer，强调其支持多种 AI 编辑器，具备结构化流程与视觉规范控制能力 6. 验证：通过两个真实测试案例，对比使用 Skill 与不使用 Skill 生成的网页设计，直观展现配色、布局、创意表达等方面的显著差异。 7. 导流：推荐使用 LAB 色彩空间替代传统 HSL，实现感知均匀的自然配色
顺着视频往下看
| 时间 | 内容 | 作用 |
|---|---|---|
| 00:00:00 | UP主介绍 Figma 骨价崩盘背景，并引出 Claude Design 新功能及其使用门槛 | 引入 |
| 00:00:15 | 提出将 Claude Design 的核心功能封装为通用 Skill，使普通人也能成为顶级网站设计师 | 方案 |
| 00:00:30 | 展示基于该 Skill 生成的两个实际网页案例，体现其设计效果 | 方案 |
| 00:01:45 | 解释 Claude Design 的设计哲学：以用户需求为导向，直接输出可运行的真实网页代码 | 方法 |
3. 提炼方法
可以直接借走的做法
- 把这条判断拿回自己的场景里验证：Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力：先照着做一遍，再看是否适合你的场景。
- 把这条判断拿回自己的场景里验证：AI 生成网页的“廉价感”源于重复性设计模式，可通过提示词规则有效规避：先照着做一遍，再看是否适合你的场景。
- 把这条判断拿回自己的场景里验证：使用 LAB 色彩空间可实现更自然、感知均匀的配色，显著提升网页高级感：先照着做一遍，再看是否适合你的场景。
哪些人更适合先看这条
- 适合把作者的拆解顺序借回自己的学习流程里试一次。
- 如果你正准备换工具或补辅助材料，可以重点看它怎么配合方法使用。
看完可以直接带走什么
- 把这条判断拿回自己的场景里验证：Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。
- 把这条判断拿回自己的场景里验证：AI 生成网页的“廉价感”源于重复性设计模式，可通过提示词规则有效规避。
- 把这条判断拿回自己的场景里验证：使用 LAB 色彩空间可实现更自然、感知均匀的配色，显著提升网页高级感。
关键概念
| 概念 | 视频里的意思 | 是否需要进一步核查 |
|---|---|---|
| Claude Design | Anthropic 推出的 AI 设计工具，能够根据自然语言指令生成可运行的网页界面，强调设计哲学与真实代码输出。 | 否 |
| Skill | 一种可复用的 AI 提示词模板或工作流配置，可在 Cursor、Codex 等平台调用，实现特定任务自动化。 | 否 |
| webdesignengineer | UP 主基于 Claude Design 提示词开发的开源 Skill 工具，用于生成高质量、可运行的网页设计。 | 否 |
| LAB 色彩空间 | 一种感知均匀的色彩模型，能更准确反映人眼对颜色的感知差异，常用于高级视觉设计。 | 否 |
| HSL 色彩空间 | 一种常见的色彩表示方式，但存在感知不均匀的问题，可能导致颜色对比失真。 | 否 |
| EasyAgent | UP 主近期推出的开源项目，用于帮助开发者复现类似 Claude Code 的 AI Agent 实践流程。 | 否 |
4. 质量复查
这份整理稿靠什么站住
本次转写质量较低，以下内容以主题整理为主，时间点和原话引用更适合作为复查入口，不建议直接当精确笔记。
当前只抽取到 2 条较可靠证据，因此以下内容更适合作为初步导读，而不是完整深度分析。
这些判断分别来自哪里
| 判断 | 类型 | 证据 |
|---|---|---|
| 当前时间线与原话不宜直接当精确笔记使用 | 待核查 | 仅 3 段转写 / 2 条较可靠证据 |
| 推荐使用 LAB 色彩空间替代传统 HSL，实现感知均匀的自然配色 | 原文明确 | 00:06:10 / 传统的 HSL 色彩空间有个很大的问题，就是感知不均匀，亮度值可能比蓝色看的还大。 |
| AI 应根据任务灵活切换身份（如前端开发者、动效设计师等） | 原文明确 | 00:02:45 / 它不会用去做网页的脑子去做所有的东西，而是根据任务自由地切换身份。 |
| Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。 | 整理归纳 | 基于多段时间轴、章节摘要与原话做的压缩整理 |
| AI 生成网页的“廉价感”源于重复性设计模式，可通过提示词规则有效规避。 | 整理归纳 | 基于多段时间轴、章节摘要与原话做的压缩整理 |
| 它至少说明了一件事：Claude Design 的核心优势在于其提示词驱动的动态角色与结构化工作流，而非单纯模型能力。 | 模型判断 | 基于视频主线做出的延伸判断，适合带回自己的场景再验证 |
转写情况
- 分段数量：3
- 明显识别错误信号：是
- 时间戳可信度：低
- 建议阅读方式：仅作参考
还要保留哪些疑问
- 当前样本的转录质量一般，引文和证据只保留了较可信的部分。
- 这段内容更偏经验分享或方法展示，落地前还需要放回自己的场景验证。
回查证据
| 整理结论 | 视频依据 | 时间点 |
|---|---|---|
| 推荐使用 LAB 色彩空间替代传统 HSL，实现感知均匀的自然配色 | 传统的 HSL 色彩空间有个很大的问题，就是感知不均匀，亮度值可能比蓝色看的还大。 | 00:06:10 |
| AI 应根据任务灵活切换身份（如前端开发者、动效设计师等） | 它不会用去做网页的脑子去做所有的东西，而是根据任务自由地切换身份。 | 00:02:45 |
术语与来源
| 术语 | 本文语境 |
|---|---|
| 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 在生成内容后自动进行质量检查的能力，确保输出符合设计标准。 |
| 来源项 | 内容 |
|---|---|
| 创作者 | code秘密花园 |
| 平台 | 未知平台 |
| BV号 | BV1MbosBfEoK |
| 时长 | 00:12:58 |
| 播放量 | 89,109 |
辅助参考：article.md 是完整学习稿，report.md 负责把主线和证据先收紧。
分析引擎: qwen 模型: qwen-flash 原文长度: 4557 字 生成时间: 2026-05-18 18:44 报告模板版本: video-digest-article-v2-debug-20260517-1738
这篇后面怎么留？
第一版先只接快速路径，不打断阅读，也不改正文稿。
可见结果先只保留：不留 / 参考 / 方法 / 功能候选 / inbox。
复查动作
当前证据只有 2 条，适合优先复查。