《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》内容整理
UP主将Claude Design的核心设计能力提炼为可复用的Skill，使用户无需复杂工具即可生成高质量、可运行的网页代码。通过重构提示词中的角色定位、工作流与设计规范，该Skill在实际测试中显著提升了AI生成网页的质感与专业度，尤其在去除AI味、增强视觉叙事和结构合理性方面表现突出。
核心信息
- AI生成网页的品质差异，本质上是提示词设计深度的差异。
- 真正的设计能力不是生成，而是通过规则引导AI做出符合人类审美与逻辑的决策。
- 将顶尖设计流程封装为可复用的Skill，是打破技术壁垒、实现普惠设计的关键。
跳读导航
可先看这几段：
- 00:00:00：介绍Figma股价崩盘背景，并引出Claude Design功能及其使用门槛
- 00:00:30：展示基于该Skill生成的两个网页设计效果，强调其真实可运行性
- 00:05:00：提出“去AI味”设计原则，列举禁止滥用渐变、emoji、无意义数据等常见陷阱
- 00:11:30：技能带来的“十分差距”来自琐碎规则的累积效应，实现从合格到有风格的跃升
- 00:12:20：推荐开源项目EasyAgent，用于复刻Claude Code类本地AI产品
内容主线
从工具到技能：让每个人都能做顶级网页设计
视频开篇介绍Claude Design的功能局限与使用门槛，提出将其核心能力转化为通用Skill的解决方案，使普通用户也能获得专业级网页设计能力。
揭秘Claude Design的设计哲学：不只是生成图片
强调Claude Design输出的是可运行代码而非静态图像，具备链接可点、版本可切、diff可查等真实工程特性，本质是AI驱动的前端开发流程。
提示词的精髓：角色、流程与设计思维
深入拆解提示词中的六大核心要素：动态角色定位、六步工作流、决策判断机制、去AI味设计清单、OKLCH色彩系统、留白与结构自明性，展现其背后的设计思维。
从理论到实践：构建可复用的WebDesignEngineer Skill
基于泄露的提示词，构建开源Skill WebDesignEngineer，整合设计系统、最小原型、参数化版本与代码模板，适配多种AI工具环境。
实测对比：有无Skill的质变差异
通过两个典型场景测试，证明加入Skill后生成的网页在创意、风格、视觉叙事和去AI味方面实现被他描述为更适合，体现规则累积的质变效应。
延伸价值：通往企业级AI Agent的路径
推荐开源项目EasyAgent，旨在从零复刻Claude Code式本地AI产品，帮助开发者理解并构建企业级AI Agent系统。
边界与保留
- 该Skill依赖于用户输入的提示质量，若初始指令模糊，仍可能产生偏差结果。
- 部分规则（如色彩、排版）需用户具备一定审美基础才能合理判断是否适用。
- 当前版本未集成自动化部署或响应式适配功能，仍需人工微调。
- 作者承认其方法基于对提示词的逆向工程，存在潜在版权或合规风险。
回查证据
| 整理结论 | 视频依据 | 时间点 |
|---|---|---|
| 角色定位影响AI决策果断性与责任归属感 | 你是一个专家设计师而用户是你的产品经理……你才是产品经理啊就是得你说了算啊 | 00:02:45 |
| 角色定位与动态身份切换 | 你是一个专家设计师，而用户是你的产品经理。注意啊这里并没有说你是一个AI助手啊主要说的是设计师和产品经理的关系。 | 00:02:45 |
| 不是生成图片，而是输出可运行代码 | 他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff。 | 00:01:20 |
| 提出“去AI味”设计原则，列举禁止滥用渐变、emoji、无意义数据等常见陷阱 | 别滥用渐变背景，别乱用emoji，别用那种种侧边色块的原生问题，如可可能让大家的字体啊对齐无意义的数据和图标等。 | 00:05:00 |
| 技能带来的“十分差距”来自琐碎规则的累积效应，实现从合格到有风格的跃升 | 没用skill的版本呢说实话本身已经很不错了……最后带来的版本呢大概就是八十五分到九十五分的差距。 | 00:11:30 |
术语与来源
| 术语 | 本文语境 |
|---|---|
| Claude Design | Anthropic推出的AI设计功能，可基于自然语言提示生成可运行的网页代码，具备版本控制与交互能力。 |
| Skill | 一种可复用的AI工作流模块，封装特定任务的提示词、流程与规则，可在不同AI工具中调用。 |
| OKLCH | 一种基于CIELAB色彩空间的现代色彩表示法，具有感知均匀性，适合生成协调自然的配色方案。 |
| CIELAB | 一种感知均匀的色彩空间，能保持亮度与色度不变，仅改变色相，使颜色过渡更自然。 |
| 去AI味 | 指通过规则规避AI生成内容中常见的套路化、低质化特征，如渐变背景、大圆角卡片、假数据等。 |
| 工作流 | 一套结构化的任务执行步骤，如理解需求→探索资源→制定计划→搭建结构→完成验证→极简总结。 |
| 验证机制 | 在生成完成后，由AI自动对结果进行全局检查，识别潜在缺陷或逻辑矛盾。 |
| WebDesignEngineer | UP主基于Claude Design提示词开发的开源Skill，整合了设计系统、最小原型、去AI味规则等核心要素。 |
| 来源项 | 内容 |
|---|---|
| UP主 | code秘密花园 |
| 平台 | B站 |
| BV号 | BV1MbosBfEoK |
| 链接 | https://www.bilibili.com/video/BV1MbosBfEoK |
| 时长 | 00:12:58 |
| 播放量 | 100,281 |
辅助参考：article.md（校正后全文）
分析引擎: qwen 模型: qwen-flash 原文长度: 4562 字 生成时间: 2026-05-16 10:32