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