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