{
  "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": "传统的HSL色彩空间有个很大的问题啊就是感知不均匀，那是的亮度值呢首先可能比蓝色看的的大问题。",
      "time": "00:05:00"
    },
    {
      "text": "每个元素都能明明自己为什么的该有，那但首先你要想加起来啊这用用户是每个里面啊可能个个的的问题啊用留白来解题。",
      "time": "00:06:00"
    },
    {
      "text": "如果用做个个个的的自自自己的形的很时候呢它会这个形式的的自自己没有题题但是如果换一个全局的的产品啊就是自我感觉良好就很容易被解构。",
      "time": "00:07: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。",
    "留白不仅是布局技巧，更是表达逻辑与节奏的重要手段。",
    "自动化验证可有效防止自我感觉良好的设计缺陷。",
    "开源共享是推动AI能力普及的核心路径。",
    "从零复刻Claude Code类产品的关键在于构建可迭代的Agent架构"
  ],
  "thesis": [
    "Claude Design的强大并非仅源于模型本身，而是其背后高度结构化的提示词设计体系。",
    "真正决定设计品质的，是那些看似琐碎却系统性的规则集合。",
    "将高端AI能力封装为可复用的Skill，是普通人跨越技术门槛的关键路径。",
    "未来的设计效率提升，不在于工具升级，而在于工作流与规则的标准化"
  ],
  "evidence": [
    {
      "point": "Claude Design输出的是可运行代码而非静态图，具备版本控制能力",
      "support": "而且呢他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff",
      "time": "00:01:00"
    },
    {
      "point": "提示词中明确要求禁止使用渐变背景、乱用emoji等典型AI痕迹",
      "support": "比如说别滥用渐变背景别乱用emoji别可那种种侧边色块的原生问题啊啊如可可能让大家的字体啊对齐无意义的数据和图标等",
      "time": "00:04:00"
    },
    {
      "point": "使用OKLCH色彩空间可实现感知均匀的颜色过渡，提升视觉和谐感",
      "support": "传统的HSL色材空间有个很大的问题啊就是感知不均匀……但那是个CIELAB的一个感知均匀的色彩空间啊它可以保持亮度和色度不变啊只转变色相啊呈现的颜色啊自然很和谐了",
      "time": "00:05:00"
    },
    {
      "point": "留白被用作解决版式问题的核心策略，而非装饰",
      "support": "用留白来解题可能够个来东西可可一个个个的留白比可个一数的版题啊可能更有表现的一点啊",
      "time": "00:06:00"
    },
    {
      "point": "技能版本在信息不足时主动提问，而非直接生成",
      "support": "这个有skill的版本呢是他直接问我们几个问题啊包括整体的配色色调的倾向然后核心的元素等等",
      "time": "00:10:00"
    },
    {
      "point": "未使用Skill的版本在缺乏提示时直接生成，导致风格混乱",
      "support": "没有skill的版本呢啊就直接开干啊然后我们再看一下最后的原素啊首先啊这个没有skill的版本啊这个设计啊非常的版本首先深色背景然后磨砂玻璃的感觉然后半透明的一些卡片啊然后还有一些满满的AI感的一些文案",
      "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"
}