# 《我把 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-18 18:44* *报告模板版本: video-digest-article-v2-debug-20260517-1738*