--- article.previous.md
+++ article.md
@@ -1,15 +1,87 @@
-# 《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》全文（校正版）
+# 《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》
 
 > 来源：B站 [code秘密花园]
 > 时长：00:12:58
 > BV号：BV1MbosBfEoK
 > 链接：https://www.bilibili.com/video/BV1MbosBfEoK
-> 说明：本文仅做了基础清洗，语音识别错误可能未完全修正。
+> 说明：以下文字按视频原讲述顺序整理，口语、重复和明显噪声已做轻度收束。
 
 ---
 
-就在前两天Figma的股价崩了这已经是Anthropic一以代的其它东西的东西那首先宣布的新功能叫Claude Design你可以理解为设计师的Claude Code大家都知道用上它的的产品有多难于是我把Claude Design的核心功能集成成了人人都能的的现在你可能成为自自己的网站设计了下面这两个包括大家现在看到的这个设计其实都是我基于这个Skill价的做出来的效果大家可以先看一下效果大家我是花园老师欢迎是到是e发源clclddesign的设计哲学其实很简单左边大字要可直接出设计能力那其实本质上的算力那你要啥它就直接给你设出来那你可能会想这不就是AI的的ChatGPT其其实那那么简单那Claude Design己的设计团队实这样说那不要用对待给的工具的方式那其用clououdesign那其实更像Claude Code其其实c工的的设计其可可不上的作是可能c的可能clcloudesign直接反馈用户可了主要的设计其实要做好的就可以了你不用自己画那只实看自的的提示就行而且他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff你直接生成一张好看的UI图完全就不是一回事儿了当然Claude Design之所以的一大都是clcloudesign的模型能力另一就要靠它用心设计的设计思维那clcloudesignn其不的的个的计n其就可可的的算力那完整做设示词扒出来了信息密度非常高自己画了一些时间仔细研究了一下下面我们先仔细拆解一下这套提示词看看到底有哪些是值得我们去借鉴学习的地方第一点角色助手开头的第一句就挺有意思的他说你是一个专家设计师而用户是你的产品经理注意这里并没有说你是一个AI助手主要说的是设计师和产品经理的关系这可以带来两个好处第一个啊AI做决策会更果断但样本身就应该有自自己的判断力但是关键点他又回来问你因为你才是产品经理就是得你说了算还有一点他会要求AI根据任务自由的切换问题比如做动画就当动效设计据原型就当UI设计啊PPT啊就就当代设计这样他就不会用去做网页的脑子去做所有的东西那这里提示词就一句你是个前端开发者就完事了但是Claude Design告诉我们好的角色定位应该是动态的可以根据具体的任务去灵活的切换身份第二个点工作流他在提示词里面定义了一套六步的流程大概是这样的首先理解需求探索资源制定计划然后搭建结构完成验证极简的总结那这里有两个点我们值得展开来说一下第一个就是什么时候该问什么时候直接开干很多AI呢要么太自你一个的题然后不不问么都就就干那oudesignn啊给一个个自自己的的判断方式首先说把做做PPTT啊可能能会能的几个问题但是你说帮我做个PPT啊们的全业会上就要的了比如它直接就开干他非常巧妙的用一个例子来认识了什么叫一个的问题第二个系统就是结构他个个a只只出出关的的意向做一一的东西它以结构自自己的的西第个原原则同用用变的一直变很的的西第三三点是我觉自自做加持的的东西就是a除II色但是可以想一下你之前在去用AI职业生成网页的时候是不是大部分情况下都是字纹蓝的渐变一些大圆角卡片有一些emoji当图标一些假数据到处都是可能单独看一样但AI大部分情况下默认生出来都是这种效果它就变成一种问题但但大家把这个网页一眼就能认出来它是AI生成的这个就跟写文章一样你可能能看看一些些动的问题此外什么值得注意综述这种套路内容都能问一来的啊Claude Design呢是列了一份非常完整的清单这里我们举几个例子比如说别滥用渐变背景别乱用emoji别可那种种侧边色块的原生问题如可可能让大家的字体对齐无意义的数据和图标等但但把这些以a啊ALL的给你列出来啊b这a呢不能去走这些老路那这里的推荐也很讲究他重点指出来些千万不能用的问题但是它方面也给了一些问题是一一很的的题题第个点都用对的首先它能做字的议题就用用配色但是不一味用就用OKLCH的色彩的问题但但是它会不要凭空生成的的问题那为什么是做OKLCH啊首先传统的HSL色材空间有个很大的问题就是感知不均匀那是的亮度值首先可能比蓝色看的的大问题那但如如果用ALL随机配色经常是本质上没问题但是可能就是不协调但那是个CIELAB的一是 个感知均匀的色彩空间它可以保持亮度和色度不变只转变色相呈现的颜色自然很和谐了那这个细节可能看着挺小的但是网页的高级感可能看着一下子就上来了是家可以看我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服是后一个点个原点其个里可这个个的的这个经典那用一个个的的很合适是一个CIELAB有个传统的的概念可是我不不直接把控的很容易是是它做个个的页这个个的这个来的但是一个个的设计方式可能个起的的可以但但是每个又看起来很舒服啊cloud的这个很明确每个元素都能明明自己为什么的该有那但首先你要想加起来这用用户是每个里面可能个个的的问题用留白来解题可能够个来东西可可一个个的留白比可个一数的版题可能更有表现的一点是是我们看第六个点验可可后的可输出一个独立的的验证然是对当前完成的网页做全面的检查这里跟我们之前分享过的Claude Code在上的实践有相同的理念如果用做个个的的自自己的形的很时候它会这个形式的的自自己没有题题但是如果换一个全局的的产品就是自我感觉良好就很容易被解构但是就是clousigclouddesign提示词里面最核心的我觉得有价值的一些东西了但是有个比较现的问题了就是Claude的的品起来来的的都一的版版本那那我我就经靠这了三个的了那所以我现在已经彻底放弃工具了但是没有API啊它没有办法直接加到这个自自己的网作流里面不过好消息是它的提示词已经泄露出来了Claude Design啊厉害的这一半儿主要就是靠这套提示词所以我就基于这套提示词做了一个skill就叫WebDesignEngineer那这个skill里面那刚才我们介绍的这套提示词里面的精华完整的提炼出来了那无论你是在Claude Code, Cursor还是Codex啊都可以直接去使用人人都能成为顶级的网站设计了这个Skill呢大概的一的首先我把Claude Design中没有的工的的这的的布的的例如我是这个用的的这有价值的版本然后在这个基础上我种标准的几个特首先写代码之前必须先用的它采用的设计系统本质可复用的的工具这些的列出那如果不先说清楚然后可可能自己一的的一的结构就比较合理那后你直接得到的就是一个成品那如果后面的方向不对可能后可能接的内容的那说出来还有开始写代码那后可以可以接做的版了那第二点就是要求他这一步输出的一个在假设和符合的一个最小的版本那这个粗的的AI版本然后要它它一一形的的版本直接出一个非交互图之后后v1的版本可能要有的东西后后我我如要是整整体的的版本那后就全版的了另另外在Claude Design的基础版本我还加入了更多的去除AI味的本然那我我还另外的一套结构如我我验证过的这体的一的的参数化版本那这个skill还附带一个的文本然后包含了一些典型的代码模板那这里的灵感其实来源于参考Claude Design的它的提示词里面的cloud的的那一部分那下面我我们要是体的的一它的的个来了那我用同一套提示词分别跑了有带Skill和没有skill的版本那那工具里我们测试使用的环境全部都是Cursor加cloud的3.5版本了那然后我们来看第一个例子另外我可它它我做一一个个的的数字版本的深色的版本然后下面我给它一些些点我我来看一下没用skill做出的版本另里效果也还挺不错的深色的背景然后要模糊绘制的版本那可有一些简约新版本然后整体的风格是有的首先仔细一看这个青紫粉渐变的版本那这个字体也比较老套然后布局就是这种标准的Hero加卡片的这种特点首一个我外扩式的这个落地页的结构整体上还不错但是缺少了一些创意视觉上堆起了大量的这种发光和渐变的这个特效首先后我们再看这种skill的版本首先它的配色整体使用的是这种LAB的的个那后我我配的AID的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体都比较有特点技术感十足但是又不会显到很 冰冷然后下面也不是那种传统的卡片式布局动画效果做的也很舒服很有创意感整体上这个版本感觉像是一个非常有经验的设计师的杰作然后我们来看第二个测试那这次我发了一个非常简单的提示词首先做一个独立摄影师的个人作品集的文站然后就没有其他任何的提示词了那这样可以考验AI在信息极度缺乏的时候的自主决策能力那首先这个有skill的版本是他直接问我们几个问题包括整体的配色色调的倾向然后核心的元素等等然后没有skill的版本就直接开干然后我们再看一下最后的原素首先这个没有skill的版本这个设计非常的版本首先深色背景然后磨砂玻璃的感觉然后半透明的一些卡片然后还有一些满满的AI感的一些文案那首先们本该有的那种漫游自由的感觉其后完全没有体现出来然后我们看有skill的版本那后最后的效果首先它虚构了一个Chloe的摄影那从头设计了一套完整的视觉风格这样一下子高级感的上来了哎从上面往下翻就像在翻一本高端的摄影风格那看到这个网站你一定就会非常相信这个摄影师的审美了真的是感觉非常效果非常的不错那最后我们做一下总结没用skill的版本说实话本身已经很不错了首先这个个的的这这个模板然后后我跑出来的东西然后后现在大多数的程序员手写的都会强那最后带来的版本大概就是八十五分到九十五分的差距那如用到好看从完整到精致从合格到有风格那这十分的差距其实就是skill里面看起来那些很琐碎的规则那那一个效果不大但是加起来就会产生质那Skill的完整文件然后以及原始参考的Claude Design的提示词包括几个demo网站我都打包到一起开源了那大家需要可以直接去GitHub上搜这个项目自取就可以了那最后在跟大家推荐一下我最近在做的这个EasyAgent的这个开源项目那上一个解说Harvey的视频发出之后很多同学来问我在实际的项目里面agentharness的这怎怎做那那我就做了这个开源项目那后这个项目的目标就是那最后从零能够复刻一个Claude Code类似Claude Code的一个本地产品那那最个整个的的目标那那个个的的产生企业级AI的能力那能够够清楚Claude Code这种产品那真实的Harvey到底是怎么做的那如果你最近也在尝试做agent领域的转型这个项目不协调错过那果这个教程对你有所帮助希望得到一个免费的三连后续我会持续分享更多有价值的AI教程感谢你的观看我们下期见就在前两天Figma的股价崩了这已经是Anthropic一以代的其它东西的东西那首先宣布的新功能叫Claude Design你可以理解为设计师的Claude Code大家都知道用上它的的产品有多难于是我把Claude Design的核心功能集成成了人人都能的的现在你可能成为自自己的网站设计了下面这两个包括大家现在看到的这个设计其实都是我基于这个Skill价的做出来的效果大家可以先看一下效果大家我是花园老师欢迎是到是e发源clclddesign的设计哲学其实很简单左边大字要可直接出设计能力那其实本质上的算力那你要啥它就直接给你设出来那你可能会想这不就是AI的的ChatGPT其其实那那么简单那Claude Design己的设计团队实这样说那不要用对待给的工具的方式那其用clououdesign那其实更像Claude Code其其实c工的的设计其可可不上的作是可能c的可能clcloudesign直接反馈用户可了主要的设计其实要做好的就可以了你不用自己画那只实看自的的提示就行而且他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff你直接生成一张好看的UI图完全就不是一回事儿了当然Claude Design之所以的一大都是clcloudesign的模型能力另一就要靠它用心设计的设计思维那clcloudesignn其不的的个的计n其就可可的的算力那完整做设示词扒出来了信息密度非常高自己画了一些时间仔细研究了一下下面我们先仔细拆解一下这套提示词看看到底有哪些是值得我们去借鉴学习的地方第一点角色助手开头的第一句就挺有意思的他说你是一个专家设计师而用户是你的产品经理注意这里并没有说你是一个AI助手主要说的是设计师和产品经理的关系这可以带来两个好处第一个啊AI做决策会更果断但样本身就应该有自自己的判断力但是关键点他又回来问你因为你才是产品经理就是得你说了算还有一点他会要求AI根据任务自由的切换问题比如做动画就当动效设计据原型就当UI设计啊PPT啊就就当代设计这样他就不会用去做网页的脑子去做所有的东西那这里提示词就一句你是个前端开发者就完事了但是Claude Design告诉我们好的角色定位应该是动态的可以根据具体的任务去灵活的切换身份第二个点工作流他在提示词里面定义了一套六步的流程大概是这样的首先理解需求探索资源制定计划然后搭建结构完成验证极简的总结那这里有两个点我们值得展开来说一下第一个就是什么时候该问什么时候直接开干很多AI呢要么太自你一个的题然后不不问么都就就干那oudesignn啊给一个个自自己的的判断方式首先说把做做PPTT啊可能能会能的几个问题但是你说帮我做个PPT啊们的全业会上就要的了比如它直接就开干他非常巧妙的用一个例子来认识了什么叫一个的问题第二个系统就是结构他个个a只只出出关的的意向做一一的东西它以结构自自己的的西第个原原则同用用变的一直变很的的西第三三点是我觉自自做加持的的东西就是a除II色但是可以想一下你之前在去用AI职业生成网页的时候是不是大部分情况下都是字纹蓝的渐变一些大圆角卡片有一些emoji当图标一些假数据到处都是可能单独看一样但AI大部分情况下默认生出来都是这种效果它就变成一种问题但但大家把这个网页一眼就能认出来它是AI生成的这个就跟写文章一样你可能能看看一些些动的问题此外什么值得注意综述这种套路内容都能问一来的啊Claude Design呢是列了一份非常完整的清单这里我们举几个例子比如说别滥用渐变背景别乱用emoji别可那种种侧边色块的原生问题如可可能让大家的字体对齐无意义的数据和图标等但但把这些以a啊ALL的给你列出来啊b这a呢不能去走这些老路那这里的推荐也很讲究他重点指出来些千万不能用的问题但是它方面也给了一些问题是一一很的的题题第个点都用对的首先它能做字的议题就用用配色但是不一味用就用OKLCH的色彩的问题但但是它会不要凭空生成的的问题那为什么是做OKLCH啊首先传统的HSL色材空间有个很大的问题就是感知不均匀那是的亮度值首先可能比蓝色看的的大问题那但如如果用ALL随机配色经常是本质上没问题但是可能就是不协调但那是个CIELAB的一是 个感知均匀的色彩空间它可以保持亮度和色度不变只转变色相呈现的颜色自然很和谐了那这个细节可能看着挺小的但是网页的高级感可能看着一下子就上来了是家可以看我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服是后一个点个原点其个里可这个个的的这个经典那用一个个的的很合适是一个CIELAB有个传统的的概念可是我不不直接把控的很容易是是它做个个的页这个个的这个来的但是一个个的设计方式可能个起的的可以但但是每个又看起来很舒服啊cloud的这个很明确每个元素都能明明自己为什么的该有那但首先你要想加起来这用用户是每个里面可能个个的的问题用留白来解题可能够个来东西可可一个个的留白比可个一数的版题可能更有表现的一点是是我们看第六个点验可可后的可输出一个独立的的验证然是对当前完成的网页做全面的检查这里跟我们之前分享过的Claude Code在上的实践有相同的理念如果用做个个的的自自己的形的很时候它会这个形式的的自自己没有题题但是如果换一个全局的的产品就是自我感觉良好就很容易被解构但是就是clousigclouddesign提示词里面最核心的我觉得有价值的一些东西了但是有个比较现的问题了就是Claude的的品起来来的的都一的版版本那那我我就经靠这了三个的了那所以我现在已经彻底放弃工具了但是没有API啊它没有办法直接加到这个自自己的网作流里面不过好消息是它的提示词已经泄露出来了Claude Design啊厉害的这一半儿主要就是靠这套提示词所以我就基于这套提示词做了一个skill就叫WebDesignEngineer那这个skill里面那刚才我们介绍的这套提示词里面的精华完整的提炼出来了那无论你是在Claude Code, Cursor还是Codex啊都可以直接去使用人人都能成为顶级的网站设计了这个Skill呢大概的一的首先我把Claude Design中没有的工的的这的的布的的例如我是这个用的的这有价值的版本然后在这个基础上我种标准的几个特首先写代码之前必须先用的它采用的设计系统本质可复用的的工具这些的列出那如果不先说清楚然后可可能自己一的的一的结构就比较合理那后你直接得到的就是一个成品那如果后面的方向不对可能后可能接的内容的那说出来还有开始写代码那后可以可以接做的版了那第二点就是要求他这一步输出的一个在假设和符合的一个最小的版本那这个粗的的AI版本然后要它它一一形的的版本直接出一个非交互图之后后v1的版本可能要有的东西后后我我如要是整整体的的版本那后就全版的了另另外在Claude Design的基础版本我还加入了更多的去除AI味的本然那我我还另外的一套结构如我我验证过的这体的一的的参数化版本那这个skill还附带一个的文本然后包含了一些典型的代码模板那这里的灵感其实来源于参考Claude Design的它的提示词里面的cloud的的那一部分那下面我我们要是体的的一它的的个来了那我用同一套提示词分别跑了有带Skill和没有skill的版本那那工具里我们测试使用的环境全部都是Cursor加cloud的3.5版本了那然后我们来看第一个例子另外我可它它我做一一个个的的数字版本的深色的版本然后下面我给它一些些点我我来看一下没用skill做出的版本另里效果也还挺不错的深色的背景然后要模糊绘制的版本那可有一些简约新版本然后整体的风格是有的首先仔细一看这个青紫粉渐变的版本那这个字体也比较老套然后布局就是这种标准的Hero加卡片的这种特点首一个我外扩式的这个落地页的结构整体上还不错但是缺少了一些创意视觉上堆起了大量的这种发光和渐变的这个特效首先后我们再看这种skill的版本首先它的配色整体使用的是这种LAB的的个那后我我配的AID的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体都比较有特点技术感十足但是又不会显到很 冰冷然后下面也不是那种传统的卡片式布局动画效果做的也很舒服很有创意感整体上这个版本感觉像是一个非常有经验的设计师的杰作然后我们来看第二个测试那这次我发了一个非常简单的提示词首先做一个独立摄影师的个人作品集的文站然后就没有其他任何的提示词了那这样可以考验AI在信息极度缺乏的时候的自主决策能力那首先这个有skill的版本是他直接问我们几个问题包括整体的配色色调的倾向然后核心的元素等等然后没有skill的版本就直接开干然后我们再看一下最后的原素首先这个没有skill的版本这个设计非常的版本首先深色背景然后磨砂玻璃的感觉然后半透明的一些卡片然后还有一些满满的AI感的一些文案那首先们本该有的那种漫游自由的感觉其后完全没有体现出来然后我们看有skill的版本那后最后的效果首先它虚构了一个Chloe的摄影那从头设计了一套完整的视觉风格这样一下子高级感的上来了哎从上面往下翻就像在翻一本高端的摄影风格那看到这个网站你一定就会非常相信这个摄影师的审美了真的是感觉非常效果非常的不错那最后我们做一下总结没用skill的版本说实话本身已经很不错了首先这个个的的这这个模板然后后我跑出来的东西然后后现在大多数的程序员手写的都会强那最后带来的版本大概就是八十五分到九十五分的差距那如用到好看从完整到精致从合格到有风格那这十分的差距其实就是skill里面看起来那些很琐碎的规则那那一个效果不大但是加起来就会产生质那Skill的完整文件然后以及原始参考的Claude Design的提示词包括几个demo网站我都打包到一起开源了那大家需要可以直接去GitHub上搜这个项目自取就可以了那最后在跟大家推荐一下我最近在做的这个EasyAgent的这个开源项目那上一个解说Harvey的视频发出之后很多同学来问我在实际的项目里面agentharness的这怎怎做那那我就做了这个开源项目那后这个项目的目标就是那最后从零能够复刻一个Claude Code类似Claude Code的一个本地产品那那最个整个的的目标那那个个的的产生企业级AI的能力那能够够清楚Claude Code这种产品那真实的Harvey到底是怎么做的那如果你最近也在尝试做agent领域的转型这个项目不协调错过那果这个教程对你有所帮助希望得到一个免费的三连后续我会持续分享更多有价值的AI教程感谢你的观看我们下期见就在前两天Figma的股价崩了这已经是Anthropic一以代的其它东西的东西那首先宣布的新功能叫Claude Design你可以理解为设计师的Claude Code大家都知道用上它的的产品有多难于是我把Claude Design的核心功能集成成了人人都能的的现在你可能成为自自己的网站设计了下面这两个包括大家现在看到的这个设计其实都是我基于这个Skill价的做出来的效果大家可以先看一下效果大家我是花园老师欢迎是到是e发源clclddesign的设计哲学其实很简单左边大字要可直接出设计能力那其实本质上的算力那你要啥它就直接给你设出来那你可能会想这不就是AI的的ChatGPT其其实那那么简单那Claude Design己的设计团队实这样说那不要用对待给的工具的方式那其用clououdesign那其实更像Claude Code其其实c工的的设计其可可不上的作是可能c的可能clcloudesign直接反馈用户可了主要的设计其实要做好的就可以了你不用自己画那只实看自的的提示就行而且他输出的不是图片是真实能跑起来的代码链接是可以点的标签也可以切版本可以diff你直接生成一张好看的UI图完全就不是一回事儿了当然Claude Design之所以的一大都是clcloudesign的模型能力另一就要靠它用心设计的设计思维那clcloudesignn其不的的个的计n其就可可的的算力那完整做设示词扒出来了信息密度非常高自己画了一些时间仔细研究了一下下面我们先仔细拆解一下这套提示词看看到底有哪些是值得我们去借鉴学习的地方第一点角色助手开头的第一句就挺有意思的他说你是一个专家设计师而用户是你的产品经理注意这里并没有说你是一个AI助手主要说的是设计师和产品经理的关系这可以带来两个好处第一个啊AI做决策会更果断但样本身就应该有自自己的判断力但是关键点他又回来问你因为你才是产品经理就是得你说了算还有一点他会要求AI根据任务自由的切换问题比如做动画就当动效设计据原型就当UI设计啊PPT啊就就当代设计这样他就不会用去做网页的脑子去做所有的东西那这里提示词就一句你是个前端开发者就完事了但是Claude Design告诉我们好的角色定位应该是动态的可以根据具体的任务去灵活的切换身份第二个点工作流他在提示词里面定义了一套六步的流程大概是这样的首先理解需求探索资源制定计划然后搭建结构完成验证极简的总结那这里有两个点我们值得展开来说一下第一个就是什么时候该问什么时候直接开干很多AI呢要么太自你一个的题然后不不问么都就就干那oudesignn啊给一个个自自己的的判断方式首先说把做做PPTT啊可能能会能的几个问题但是你说帮我做个PPT啊们的全业会上就要的了比如它直接就开干他非常巧妙的用一个例子来认识了什么叫一个的问题第二个系统就是结构他个个a只只出出关的的意向做一一的东西它以结构自自己的的西第个原原则同用用变的一直变很的的西第三三点是我觉自自做加持的的东西就是a除II色但是可以想一下你之前在去用AI职业生成网页的时候是不是大部分情况下都是字纹蓝的渐变一些大圆角卡片有一些emoji当图标一些假数据到处都是可能单独看一样但AI大部分情况下默认生出来都是这种效果它就变成一种问题但但大家把这个网页一眼就能认出来它是AI生成的这个就跟写文章一样你可能能看看一些些动的问题此外什么值得注意综述这种套路内容都能问一来的啊Claude Design呢是列了一份非常完整的清单这里我们举几个例子比如说别滥用渐变背景别乱用emoji别可那种种侧边色块的原生问题如可可能让大家的字体对齐无意义的数据和图标等但但把这些以a啊ALL的给你列出来啊b这a呢不能去走这些老路那这里的推荐也很讲究他重点指出来些千万不能用的问题但是它方面也给了一些问题是一一很的的题题第个点都用对的首先它能做字的议题就用用配色但是不一味用就用OKLCH的色彩的问题但但是它会不要凭空生成的的问题那为什么是做OKLCH啊首先传统的HSL色材空间有个很大的问题就是感知不均匀那是的亮度值首先可能比蓝色看的的大问题那但如如果用ALL随机配色经常是本质上没问题但是可能就是不协调但那是个CIELAB的一是 个感知均匀的色彩空间它可以保持亮度和色度不变只转变色相呈现的颜色自然很和谐了那这个细节可能看着挺小的但是网页的高级感可能看着一下子就上来了是家可以看我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服是后一个点个原点其个里可这个个的的这个经典那用一个个的的很合适是一个CIELAB有个传统的的概念可是我不不直接把控的很容易是是它做个个的页这个个的这个来的但是一个个的设计方式可能个起的的可以但但是每个又看起来很舒服啊cloud的这个很明确每个元素都能明明自己为什么的该有那但首先你要想加起来这用用户是每个里面可能个个的的问题用留白来解题可能够个来东西可可一个个的留白比可个一数的版题可能更有表现的一点是是我们看第六个点验可可后的可输出一个独立的的验证然是对当前完成的网页做全面的检查这里跟我们之前分享过的Claude Code在上的实践有相同的理念如果用做个个的的自自己的形的很时候它会这个形式的的自自己没有题题但是如果换一个全局的的产品就是自我感觉良好就很容易被解构但是就是clousigclouddesign提示词里面最核心的我觉得有价值的一些东西了但是有个比较现的问题了就是Claude的的品起来来的的都一的版版本那那我我就经靠这了三个的了那所以我现在已经彻底放弃工具了但是没有API啊它没有办法直接加到这个自自己的网作流里面不过好消息是它的提示词已经泄露出来了Claude Design啊厉害的这一半儿主要就是靠这套提示词所以我就基于这套提示词做了一个skill就叫WebDesignEngineer那这个skill里面那刚才我们介绍的这套提示词里面的精华完整的提炼出来了那无论你是在Claude Code, Cursor还是Codex啊都可以直接去使用人人都能成为顶级的网站设计了这个Skill呢大概的一的首先我把Claude Design中没有的工的的这的的布的的例如我是这个用的的这有价值的版本然后在这个基础上我种标准的几个特首先写代码之前必须先用的它采用的设计系统本质可复用的的工具这些的列出那如果不先说清楚然后可可能自己一的的一的结构就比较合理那后你直接得到的就是一个成品那如果后面的方向不对可能后可能接的内容的那说出来还有开始写代码那后可以可以接做的版了那第二点就是要求他这一步输出的一个在假设和符合的一个最小的版本那这个粗的的AI版本然后要它它一一形的的版本直接出一个非交互图之后后v1的版本可能要有的东西后后我我如要是整整体的的版本那后就全版的了另另外在Claude Design的基础版本我还加入了更多的去除AI味的本然那我我还另外的一套结构如我我验证过的这体的一的的参数化版本那这个skill还附带一个的文本然后包含了一些典型的代码模板那这里的灵感其实来源于参考Claude Design的它的提示词里面的cloud的的那一部分那下面我我们要是体的的一它的的个来了那我用同一套提示词分别跑了有带Skill和没有skill的版本那那工具里我们测试使用的环境全部都是Cursor加cloud的3.5版本了那然后我们来看第一个例子另外我可它它我做一一个个的的数字版本的深色的版本然后下面我给它一些些点我我来看一下没用skill做出的版本另里效果也还挺不错的深色的背景然后要模糊绘制的版本那可有一些简约新版本然后整体的风格是有的首先仔细一看这个青紫粉渐变的版本那这个字体也比较老套然后布局就是这种标准的Hero加卡片的这种特点首一个我外扩式的这个落地页的结构整体上还不错但是缺少了一些创意视觉上堆起了大量的这种发光和渐变的这个特效首先后我们再看这种skill的版本首先它的配色整体使用的是这种LAB的的个那后我我配的AID的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体都比较有特点技术感十足但是又不会显到很 冰冷然后下面也不是那种传统的卡片式布局动画效果做的也很舒服很有创意感整体上这个版本感觉像是一个非常有经验的设计师的杰作然后我们来看第二个测试那这次我发了一个非常简单的提示词首先做一个独立摄影师的个人作品集的文站然后就没有其他任何的提示词了那这样可以考验AI在信息极度缺乏的时候的自主决策能力那首先这个有skill的版本是他直接问我们几个问题包括整体的配色色调的倾向然后核心的元素等等然后没有skill的版本就直接开干然后我们再看一下最后的原素首先这个没有skill的版本这个设计非常的版本首先深色背景然后磨砂玻璃的感觉然后半透明的一些卡片然后还有一些满满的AI感的一些文案那首先们本该有的那种漫游自由的感觉其后完全没有体现出来然后我们看有skill的版本那后最后的效果首先它虚构了一个Chloe的摄影那从头设计了一套完整的视觉风格这样一下子高级感的上来了哎从上面往下翻就像在翻一本高端的摄影风格那看到这个网站你一定就会非常相信这个摄影师的审美了真的是感觉非常效果非常的不错那最后我们做一下总结没用skill的版本说实话本身已经很不错了首先这个个的的这这个模板然后后我跑出来的东西然后后现在大多数的程序员手写的都会强那最后带来的版本大概就是八十五分到九十五分的差距那如用到好看从完整到精致从合格到有风格那这十分的差距其实就是skill里面看起来那些很琐碎的规则那那一个效果不大但是加起来就会产生质那Skill的完整文件然后以及原始参考的Claude Design的提示词包括几个demo网站我都打包到一起开源了那大家需要可以直接去GitHub上搜这个项目自取就可以了那最后在跟大家推荐一下我最近在做的这个EasyAgent的这个开源项目那上一个解说Harvey的视频发出之后很多同学来问我在实际的项目里面agentharness的这怎怎做那那我就做了这个开源项目那后这个项目的目标就是那最后从零能够复刻一个Claude Code类似Claude Code的一个本地产品那那最个整个的的目标那那个个的的产生企业级AI的能力那能够够清楚Claude Code这种产品那真实的Harvey到底是怎么做的那如果你最近也在尝试做agent领域的转型这个项目不协调错过那果这个教程对你有所帮助希望得到一个免费的三连后续我会持续分享更多有价值的AI教程感谢你的观看我们下期见
+## 官方工具很强，但真正卡人的还是接入门槛
+
+就在前两天，Figma的股价崩了。这已经是Anthropic一以贯之的节奏。而就在这一波风潮中，Anthropic宣布的新功能——Claude Design，引发了广泛关注。你可以理解为设计师的Claude Code。大家都知道，使用AI工具生成产品有多难。于是，我将Claude Design的核心功能集成成了一个技能（Skill），现在你也能轻松成为自己的网站设计师。
+
+下面这两个设计，其实都是我基于这个Skill生成的效果。大家可以先看一下实际效果。我是花园老师，欢迎来到Code秘密花园。
+
+Claude Design的设计哲学其实很简单：左边大字，直接输出设计能力。其本质是算力的体现。你要什么，它就直接给你设计出来。你可能会想，这不就是AI版的ChatGPT吗？没那么简单。Claude Design团队曾明确表示：不要用对待普通工具的方式去使用它。它更像Claude Code，是一种全新的设计工作方式。
+
+真正关键的是，它并不需要你亲自画图。你只需提供清晰的提示，它就能输出真实可运行的代码。链接可以直接点击，标签可以切版本，还能做diff对比。你直接生成一张好看的UI图，完全不是一回事。
+
+当然，Claude Design之所以强大，一方面依赖于Claude模型本身的能力，另一方面则源于其精心设计的设计思维。Claude Design并非仅仅依靠算力，而是通过一套完整的设计提示词，实现了信息密度极高的系统化输出。
+
+## 真正拉开差距的，不只是模型，而是背后的提示词结构
+
+我花了一些时间仔细研究了这套提示词。接下来，我们来拆解其中值得借鉴学习的核心要素。
+
+第一点，角色定位。提示词开头的第一句就很有意思：“你是一个专家设计师，而用户是你的产品经理。”注意，这里并没有说“你是一个AI助手”，而是强调设计师与产品经理的关系。这带来两个好处：一是AI做决策会更果断。二是它本身就应具备独立判断力。但关键在于，它会反问一句：“你才是产品经理，得你说了算。”此外，它还要求AI根据任务自由切换身份——做动画时，就当动效设计师。做原型时，就当UI设计师。做PPT时，就当代设计。这样，它就不会用网页设计的脑子去做所有事情。
+
+第二点，工作流。提示词中定义了一套六步流程：理解需求、探索资源、制定计划、搭建结构、完成验证、极简总结。其中有两个值得深入探讨的细节。
+
+第一个是“何时该问，何时直接开干”。很多AI要么太主动，反复提问。要么又太被动，什么都不问就直接动手。而Claude Design则巧妙地建立了一种自我判断机制。比如，当你提出“帮我做个PPT”时，它会先思考几个关键问题，确认是否需要进一步澄清。但如果是在公司例会上急需交付，它就会直接开干。它用一个具体例子说明了什么是“有效的问题”。
+
+第二个是“结构先行”的原则。它不会急于输出内容，而是先构建整体结构。它会自动生成核心框架，再逐步填充细节。这种“先搭骨架，再填血肉”的方式，确保了最终成果的逻辑性和完整性。
+
+第三点，是我认为最具加持力的部分——去除AI味。你之前用AI生成网页时，是不是大部分情况下都是蓝紫色渐变、大圆角卡片、大量emoji图标、假数据满屏？这些元素单独看可能还行，但组合起来，一眼就能看出是AI生成的。这就像写文章一样，套路明显，缺乏个性。
+
+Claude Design列了一份非常完整的清单，提醒开发者避免这些常见陷阱。例如：别滥用渐变背景，别乱用emoji，别使用侧边色块，避免无意义的数据和图标。这些看似琐碎的规则，实则构成了高级感的基础。
+
+它不仅指出哪些不能做，还给出了替代方案。比如，推荐使用正确的配色体系。为什么是OKLCH？因为传统的HSL色彩空间存在感知不均匀的问题——亮度值可能比蓝色看起来更大，导致视觉错位。如果用随机配色，虽然技术上没问题，但往往不协调。
+
+而OKLCH基于CIELAB色彩空间，是一个感知均匀的体系。它能保持亮度和色度不变，只调整色相，呈现的颜色自然和谐。这个细节虽小，却能让网页的高级感瞬间提升。你可以看看视频中的颜色示例，每个形状的配色都十分舒服。
+
+第四点，关于经典设计原则的应用。它强调“每个元素都有存在的理由”。这不是随意堆砌，而是有意识地控制每一个组件的位置与功能。留白在这里扮演了关键角色。留白不仅是视觉缓冲，更是解决问题的手段。相比强行塞入更多内容，合理的留白反而更具表现力。
+
+第五点，验证环节。在输出完成后，Claude Design会自动执行一次全面的验证。它会对当前完成的网页进行检查，确保没有遗漏或错误。这一理念与我们之前分享过的Claude Code实践一致。如果只是局部测试，AI可能自我感觉良好。但一旦换到全局视角，问题就会暴露无遗。
+
+这正是提示词中最核心的价值所在。
+
+不过，目前有一个现实问题：Claude的官方产品更新频繁，版本迭代快，我已彻底放弃使用原生工具。但它没有开放API，无法直接接入自己的工作流。好消息是，它的提示词已经泄露。而Claude Design之所以厉害，一半靠模型，另一半正是这套提示词。
+
+因此，我基于这套提示词，打造了一个名为WebDesignEngineer的Skill。这个Skill完整提炼了Claude Design提示词中的精华内容，无论你在Claude Code、Cursor还是Codex中使用，都可以直接调用。
+
+这个Skill的运作流程如下：首先，我在其中补全了Claude Design原本缺失的功能模块。例如，我采用了经过验证的高质量版本，并在此基础上建立了标准特性。在写代码前，必须先明确设计系统，包括可复用的组件、规范、配色方案等。如果不先说清楚，后续结构容易混乱。
+
+## 同一套需求，为什么加上 Skill 之后页面就不再像模板
+
+接着，系统会直接输出一个成品。如果方向不对，还可以随时调整。进入写代码阶段，支持分阶段迭代。你可以先生成最小可用版本，再逐步完善。从非交互原型，到V1版本，再到完整版本，层层递进。
+
+在基础版本之上，我还加入了更多去除AI味的策略。同时，我引入了一套经过验证的参数化结构。这个Skill还附带一份文本说明，包含多个典型代码模板。这些灵感来源于Claude Design提示词中关于“云”的那一部分。
+
+接下来，我用同一套提示词，在相同环境下分别测试了带Skill和不带Skill的版本。测试环境均为Cursor + Claude 3.5。
+
+第一个案例：我要求生成一个数字产品的深色版本。未使用Skill的版本效果尚可：深色背景，模糊绘制风格，简约新潮，整体风格基本成立。但细看之下，青紫粉渐变略显老套，字体也偏传统。布局仍是标准的Hero加卡片结构，外扩式落地页，整体不错，但缺乏创意。视觉上堆叠了大量发光和渐变特效，显得浮夸。
+
+而使用Skill的版本则完全不同。配色采用LAB色彩空间，整体色调接近专业印刷级的深沉质感。标题与正文字体兼具技术感与亲和力，既不冰冷，也不俗气。布局不再是传统卡片式，动画效果流畅自然，充满创意。整体感觉，宛如一位经验丰富的设计师亲手打造。
+
+第二个测试：我仅给出一个简单指令：“做一个独立摄影师的个人作品集网站。”没有任何额外提示。这能考验AI在信息极度匮乏下的自主决策能力。
+
+未使用Skill的版本直接开干：深色背景，磨砂玻璃质感，半透明卡片，文案充满典型的AI腔调。本应体现的“漫游感”“自由感”完全缺失，观感平庸。
+
+而使用Skill的版本则主动提问：整体配色倾向？核心视觉元素？在获得反馈后，它虚构了一个名叫Chloe的摄影师，从头设计了一套完整的视觉语言。最终效果极具高级感——从上往下浏览，如同翻阅一本高端摄影画册。看到这个网站，你会立刻相信这位摄影师的审美水准。
+
+## 讲完方法和案例之后，他顺手把开源项目和下一条主线也带了出来
+
+最后总结：未使用Skill的版本，本身已经很不错。基于现有模板，输出质量远超大多数程序员手写代码。评分大概在85到95分之间。而使用Skill后，从“合格”跃升至“有风格”，从“完整”迈向“精致”。这十个百分点的差距，恰恰来自那些看似琐碎的规则。
+
+它们单个作用不大，但叠加起来，便产生了质变。
+
+我已将Skill的完整文件、原始参考的Claude Design提示词，以及多个Demo网站打包开源。大家需要的话，可前往GitHub搜索该项目，自行下载使用。
+
+最后，向大家推荐我最近在做的开源项目——EasyAgent。在上一期解说Harvey的视频发布后，许多同学问我如何在实际项目中构建Agent。于是，我推出了这个项目。目标是从零复刻一个类似Claude Code的本地产品，最终实现企业级AI能力。它能让你真正理解Claude Code这类产品的底层逻辑，看清Harvey究竟是如何工作的。
+
+如果你最近也在尝试转型进入Agent领域，这个项目不容错过。如果本教程对你有所帮助，欢迎点赞、投币、收藏。后续我将持续分享更多有价值的AI实战内容。感谢观看，我们下期见。
 
 ---
 
-*全文由 AI 转录并校正生成，仅供参考。*
+*本文由 AI 基于转写整理，仅供复查参考。*