{
"summary": "UP主将Claude Design的核心设计能力提炼为可复用的Skill，使普通用户无需复杂工具即可生成高质量、可运行的网页代码。通过解析Claude Design的提示词体系，该Skill实现了角色动态切换、六步工作流、去AI化设计规范等关键机制，并在实际测试中显著提升网页设计的质感与专业度。",
"timeline": [
{
"time": "00:00:00",
"point": "介绍Figma股价下跌背景，引出Anthropic新功能Claude Design"
},
{
"time": "00:00:15",
"point": "指出Claude Design使用门槛高，因此将核心功能封装为通用Skill"
},
{
"time": "00:00:30",
"point": "展示基于该Skill生成的两个设计案例效果"
},
{
"time": "00:01:00",
"point": "解释Claude Design的设计哲学：直接输出可运行代码而非静态图片"
},
{
"time": "00:02:15",
"point": "拆解提示词第一点：角色定位为专家设计师与产品经理关系"
},
{
"time": "00:03:00",
"point": "分析第二点：六步工作流——理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结"
},
{
"time": "00:04:00",
"point": "强调第三点：去除AI味的设计规则清单，如禁用渐变背景、乱用emoji等"
},
{
"time": "00:05:00",
"point": "说明色彩系统采用OKLCH，因其感知均匀性提升视觉和谐感"
},
{
"time": "00:06:00",
"point": "提出留白是解决版式问题的关键策略"
},
{
"time": "00:07:00",
"point": "介绍第六点：输出独立验证脚本，对网页进行全局检查"
},
{
"time": "00:08:00",
"point": "指出Claude Design无API且版本不一致，无法集成到工作流"
},
{
"time": "00:09:00",
"point": "宣布基于泄露提示词开发WebDesignEngineer Skill并开源"
},
{
"time": "00:10:00",
"point": "演示对比：使用Skill前后在相同提示下生成的网页质量差异"
},
{
"time": "00:11:00",
"point": "总结：细微规则叠加带来从合格到有风格的质变"
},
{
"time": "00:12:00",
"point": "推荐开源项目EasyAgent，用于复刻Claude Code类产品"
}
],
"chapters": [
{
"title": "从工具到技能：让每个人都能做顶级网页设计",
"start_time": "00:00:00",
"end_time": "00:02:00",
"summary": "UP主介绍Claude Design功能虽强但难以使用，于是将其核心能力提炼为一个名为WebDesignEngineer的Skill，实现人人可用的高级网页设计能力。"
},
{
"title": "揭秘Claude Design的六大设计思维",
"start_time": "00:02:00",
"end_time": "00:08:00",
"summary": "深入拆解Claude Design提示词中的核心设计原则，包括角色定位、六步工作流、去AI化规则、色彩系统选择、留白运用和自动化验证机制。"
},
{
"title": "实战对比：Skill如何让设计从合格到精致",
"start_time": "00:08:00",
"end_time": "00:11:00",
"summary": "通过两个真实案例对比，展示使用Skill前后在信息缺失情况下生成网页的差异，凸显琐碎规则带来的整体质变。"
},
{
"title": "开源共享与未来展望",
"start_time": "00:11:00",
"end_time": "00:12:58",
"summary": "公开WebDesignEngineer Skill及原始提示词，同时推荐其另一开源项目EasyAgent，帮助开发者构建企业级AI Agent系统。"
}
],
"quotes": [
{
"text": "你是一个专家设计师，而用户是你的产品经理。注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。",
"time": "00:02:15"
},
{
"text": "他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。",
"time": "00:01:00"
},
{
"text": "别滥用渐变背景，别乱用emoji，别用那种侧边色块的原生问题，如可能让大家的字体啊对齐无意义的数据和图标等。",
"time": "00:04:00"
},
{
"text": "没用skill的版本呢说实话本身已经很不错了……最后带来的版本呢大概就是八十五分到九十五分的差距。",
"time": "00:11:00"
},
{
"text": "这十分的差距呢其实就是skill里面看起来那些很琐碎的规则，那一个效果不大但是加起来就会产生质。",
"time": "00:11:30"
},
{
"text": "我用同一套提示词分别跑了有带Skill和没有skill的版本……效果非常不错啊。",
"time": "00:10:00"
},
{
"text": "那么如果你最近也在尝试做agent领域的转型啊，这个项目不协调错过啊。",
"time": "00:12:30"
}
],
"key_points": [
"Claude Design的核心价值不仅在于模型算力，更在于其精心设计的提示词体系。",
"真正的高级设计来自对细节规则的严格遵循，而非单一功能突破。",
"通过提取提示词精华，可将高端AI设计能力转化为普通人可用的Skill。",
"工作流设计应包含主动提问与自动验证机制，避免盲目生成。",
"去AI化的视觉语言（如禁用渐变、emoji）是提升专业感的关键。",
"色彩系统选择需考虑感知均匀性，OKLCH优于传统HSL。",
"留白不仅是布局技巧，更是表达逻辑与节奏的重要手段。",
"自动化验证可有效防止自我感觉良好的设计缺陷。"
],
"thesis": [
"Claude Design的强大并非仅源于模型本身，而是其背后高度结构化的提示词设计体系。",
"真正决定设计品质的，是那些看似琐碎却系统性的规则集合。",
"将高端AI能力封装为可复用的Skill，是普通人跨越技术门槛的关键路径。",
"未来的设计效率提升，不在于工具升级，而在于工作流与规则的标准化"
],
"evidence": [
{
"point": "拆解提示词第一点：角色定位为专家设计师与产品经理关系",
"support": "你是一个专家设计师，而用户是你的产品经理。注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。",
"time": "00:02:15"
},
{
"point": "解释Claude Design的设计哲学：直接输出可运行代码而非静态图片",
"support": "他输出的不是图片，是真实能跑起来的代码，链接是可以点的，标签也可以切版本，可以diff。",
"time": "00:01:00"
},
{
"point": "强调第三点：去除AI味的设计规则清单，如禁用渐变背景、乱用emoji等",
"support": "别滥用渐变背景，别乱用emoji，别用那种侧边色块的原生问题，如可能让大家的字体啊对齐无意义的数据和图标等。",
"time": "00:04:00"
},
{
"point": "总结：细微规则叠加带来从合格到有风格的质变",
"support": "没用skill的版本呢说实话本身已经很不错了……最后带来的版本呢大概就是八十五分到九十五分的差距。",
"time": "00:11:00"
},
{
"point": "总结：细微规则叠加带来从合格到有风格的质变",
"support": "这十分的差距呢其实就是skill里面看起来那些很琐碎的规则，那一个效果不大但是加起来就会产生质。",
"time": "00:11:30"
},
{
"point": "演示对比：使用Skill前后在相同提示下生成的网页质量差异",
"support": "我用同一套提示词分别跑了有带Skill和没有skill的版本……效果非常不错啊。",
"time": "00:10:00"
}
],
"caveats": [
"该Skill依赖于Claude 3.5等特定模型，跨平台兼容性受限",
"部分规则如色彩系统需用户具备一定设计认知才能正确应用",
"提示词虽已泄露，但实际效果仍受上下文理解能力影响",
"未提及如何处理多语言或本地化内容的适配问题"
],
"implications": [
"对于非设计师的开发者而言，此技能极大降低了高质量网页设计的门槛。",
"该方法论可迁移至其他AI生成领域，如UI、PPT、文档等，形成统一设计标准。",
"提示词工程正成为AI应用成败的关键，值得系统研究与积累。",
"开源社区可通过此类技能加速AI生产力工具的民主化进程。"
],
"actionables": [
"前往GitHub搜索 `web-design-skill` 项目，下载并部署WebDesignEngineer Skill。",
"在Cursor或Claude Code中使用该Skill，尝试生成个人作品集网站。",
"将提示词中的去AI化规则纳入自身设计流程，提升作品专业度。",
"参考该项目结构，构建属于自己的AI辅助设计工作流。",
"参与EasyAgent项目，学习如何从零构建企业级AI Agent系统。"
],
"terms": [
{
"term": "Claude Design",
"meaning": "Anthropic推出的AI设计功能，可基于文本提示生成可运行的网页代码，支持版本管理与交互验证。"
},
{
"term": "Skill",
"meaning": "一种可复用的AI工作流模块，封装特定任务的提示词、流程与规则，可在多种AI工具中调用。"
},
{
"term": "OKLCH",
"meaning": "一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合生成和谐配色。"
},
{
"term": "CIELAB",
"meaning": "国际照明委员会定义的感知均匀色彩空间，能准确反映人眼对颜色的感知差异。"
},
{
"term": "Diff",
"meaning": "版本控制系统中用于比较文件差异的功能，可用于追踪代码修改历史。"
},
{
"term": "留白",
"meaning": "设计中未被内容填充的空间，用于增强视觉层次与阅读节奏，是高级设计的重要手法。"
},
{
"term": "角色定位",
"meaning": "在提示词中设定AI的角色身份，如专家设计师与产品经理，以引导其决策方式。"
},
{
"term": "工作流",
"meaning": "一套结构化的任务执行流程，如理解需求→探索资源→制定计划→搭建结构→完成验证→总结。"
},
{
"term": "去AI味",
"meaning": "通过规避常见AI生成模式（如渐变、大圆角、假数据），使作品更具真实设计感。"
},
{
"term": "EasyAgent",
"meaning": "UP主正在开发的开源项目，目标是从零复刻Claude Code类产品的本地化AI Agent系统。"
}
],
"corrected_text": "就在前两天，Figma的股价崩了。这已经是Anthropic一以贯之的节奏。而就在这一波风潮中，Anthropic宣布的新功能——Claude Design，引发了广泛关注。你可以理解为设计师的Claude Code。大家都知道，使用AI工具生成产品有多难。于是，我将Claude Design的核心功能集成成了一个技能（Skill），现在你也能轻松成为自己的网站设计师。\n\n下面这两个设计，其实都是我基于这个Skill生成的效果。大家可以先看一下实际效果。我是花园老师，欢迎来到Code秘密花园。\n\nClaude Design的设计哲学其实很简单：左边大字，直接输出设计能力。其本质是算力的体现。你要什么，它就直接给你设计出来。你可能会想，这不就是AI版的ChatGPT吗？其实没那么简单。Claude Design团队曾明确表示：不要用对待普通工具的方式去使用它。它更像Claude Code，是一种全新的设计工作方式。\n\n真正关键的是，它并不需要你亲自画图。你只需提供清晰的提示，它就能输出真实可运行的代码。链接可以直接点击，标签可以切版本，还能做diff对比。你直接生成一张好看的UI图，完全不是一回事。\n\n当然，Claude Design之所以强大，一方面依赖于Claude模型本身的能力，另一方面则源于其精心设计的设计思维。Claude Design并非仅仅依靠算力，而是通过一套完整的设计提示词，实现了信息密度极高的系统化输出。\n\n我花了一些时间仔细研究了这套提示词。接下来，我们来拆解其中值得借鉴学习的核心要素。\n\n第一点，角色定位。提示词开头的第一句就很有意思：“你是一个专家设计师，而用户是你的产品经理。”注意，这里并没有说“你是一个AI助手”，而是强调设计师与产品经理的关系。这带来两个好处：一是AI做决策会更果断；二是它本身就应具备独立判断力。但关键在于，它会反问一句：“你才是产品经理，得你说了算。”此外，它还要求AI根据任务自由切换身份——做动画时，就当动效设计师；做原型时，就当UI设计师；做PPT时，就当代设计。这样，它就不会用网页设计的脑子去做所有事情。\n\n第二点，工作流。提示词中定义了一套六步流程：理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结。其中有两个值得深入探讨的细节。\n\n第一个是“何时该问，何时直接开干”。很多AI要么太主动，反复提问；要么又太被动，什么都不问就直接动手。而Claude Design则巧妙地建立了一种自我判断机制。比如，当你提出“帮我做个PPT”时，它会先思考几个关键问题，确认是否需要进一步澄清。但如果是在公司例会上急需交付，它就会直接开干。它用一个具体例子说明了什么是“有效的问题”。\n\n第二个是“结构先行”的原则。它不会急于输出内容，而是先构建整体结构。它会自动生成核心框架，再逐步填充细节。这种“先搭骨架，再填血肉”的方式，确保了最终成果的逻辑性和完整性。\n\n第三点，是我认为最具加持力的部分——去除AI味。你之前用AI生成网页时，是不是大部分情况下都是蓝紫色渐变、大圆角卡片、大量emoji图标、假数据满屏？这些元素单独看可能还行，但组合起来，一眼就能看出是AI生成的。这就像写文章一样，套路明显，缺乏个性。\n\nClaude Design列了一份非常完整的清单，提醒开发者避免这些常见陷阱。例如：别滥用渐变背景，别乱用emoji，别使用侧边色块，避免无意义的数据和图标。这些看似琐碎的规则，实则构成了高级感的基础。\n\n它不仅指出哪些不能做，还给出了替代方案。比如，推荐使用正确的配色体系。为什么是OKLCH？因为传统的HSL色彩空间存在感知不均匀的问题——亮度值可能比蓝色看起来更大，导致视觉错位。如果用随机配色，虽然技术上没问题，但往往不协调。\n\n而OKLCH基于CIELAB色彩空间，是一个感知均匀的体系。它能保持亮度和色度不变，只调整色相，呈现的颜色自然和谐。这个细节虽小，却能让网页的高级感瞬间提升。你可以看看视频中的颜色示例，每个形状的配色都十分舒服。\n\n第四点，关于经典设计原则的应用。它强调“每个元素都有存在的理由”。这不是随意堆砌，而是有意识地控制每一个组件的位置与功能。留白在这里扮演了关键角色。留白不仅是视觉缓冲，更是解决问题的手段。相比强行塞入更多内容，合理的留白反而更具表现力。\n\n第五点，验证环节。在输出完成后，Claude Design会自动执行一次全面的验证。它会对当前完成的网页进行检查，确保没有遗漏或错误。这一理念与我们之前分享过的Claude Code实践一致。如果只是局部测试，AI可能自我感觉良好；但一旦换到全局视角，问题就会暴露无遗。\n\n这正是提示词中最核心的价值所在。\n\n不过，目前有一个现实问题：Claude的官方产品更新频繁，版本迭代快，我已彻底放弃使用原生工具。但它没有开放API，无法直接接入自己的工作流。好消息是，它的提示词已经泄露。而Claude Design之所以厉害，一半靠模型，另一半正是这套提示词。\n\n因此，我基于这套提示词，打造了一个名为WebDesignEngineer的Skill。这个Skill完整提炼了Claude Design提示词中的精华内容，无论你在Claude Code、Cursor还是Codex中使用，都可以直接调用。\n\n这个Skill的运作流程如下：首先，我在其中补全了Claude Design原本缺失的功能模块。例如，我采用了经过验证的高质量版本，并在此基础上建立了标准特性。在写代码前，必须先明确设计系统，包括可复用的组件、规范、配色方案等。如果不先说清楚，后续结构容易混乱。\n\n接着，系统会直接输出一个成品。如果方向不对，还可以随时调整。然后进入写代码阶段，支持分阶段迭代。你可以先生成最小可用版本，再逐步完善。从非交互原型，到V1版本，再到完整版本，层层递进。\n\n在基础版本之上，我还加入了更多去除AI味的策略。同时，我引入了一套经过验证的参数化结构。这个Skill还附带一份文本说明，包含多个典型代码模板。这些灵感来源于Claude Design提示词中关于“云”的那一部分。\n\n接下来，我用同一套提示词，在相同环境下分别测试了带Skill和不带Skill的版本。测试环境均为Cursor + Claude 3.5。\n\n第一个案例：我要求生成一个数字产品的深色版本。未使用Skill的版本效果尚可：深色背景，模糊绘制风格，简约新潮，整体风格基本成立。但细看之下，青紫粉渐变略显老套，字体也偏传统。布局仍是标准的Hero加卡片结构，外扩式落地页，整体不错，但缺乏创意。视觉上堆叠了大量发光和渐变特效，显得浮夸。\n\n而使用Skill的版本则完全不同。配色采用LAB色彩空间，整体色调接近专业印刷级的深沉质感。标题与正文字体兼具技术感与亲和力，既不冰冷，也不俗气。布局不再是传统卡片式，动画效果流畅自然，充满创意。整体感觉，宛如一位经验丰富的设计师亲手打造。\n\n第二个测试：我仅给出一个简单指令：“做一个独立摄影师的个人作品集网站。”没有任何额外提示。这能考验AI在信息极度匮乏下的自主决策能力。\n\n未使用Skill的版本直接开干：深色背景，磨砂玻璃质感，半透明卡片，文案充满典型的AI腔调。本应体现的“漫游感”“自由感”完全缺失，观感平庸。\n\n而使用Skill的版本则主动提问：整体配色倾向？核心视觉元素？风格基调？在获得反馈后，它虚构了一个名叫Chloe的摄影师，从头设计了一套完整的视觉语言。最终效果极具高级感——从上往下浏览，如同翻阅一本高端摄影画册。看到这个网站，你会立刻相信这位摄影师的审美水准。\n\n最后总结：未使用Skill的版本，本身已经很不错。基于现有模板，输出质量远超大多数程序员手写代码。评分大概在85到95分之间。而使用Skill后，从“合格”跃升至“有风格”，从“完整”迈向“精致”。这十个百分点的差距，恰恰来自那些看似琐碎的规则。\n\n它们单个作用不大，但叠加起来，便产生了质变。\n\n我已将Skill的完整文件、原始参考的Claude Design提示词，以及多个Demo网站打包开源。大家需要的话，可前往GitHub搜索该项目，自行下载使用。\n\n最后，向大家推荐我最近在做的开源项目——EasyAgent。在上一期解说Harvey的视频发布后，许多同学问我如何在实际项目中构建Agent。于是，我推出了这个项目。目标是从零复刻一个类似Claude Code的本地产品，最终实现企业级AI能力。它能让你真正理解Claude Code这类产品的底层逻辑，看清Harvey究竟是如何工作的。\n\n如果你最近也在尝试转型进入Agent领域，这个项目不容错过。如果本教程对你有所帮助，欢迎点赞、投币、收藏。后续我将持续分享更多有价值的AI实战内容。感谢观看，我们下期见。",
"provider": "qwen",
"model": "qwen-flash",
"text_length": 4562,
"generated_at": "2026-05-15T10:37:23.495450"
}