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