{
  "text": "就在前两天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的一是\n个感知均匀的色彩空间啊它可以保持亮度和色度不变啊只转变色相啊呈现的颜色啊自然很和谐了那这个细节呢可能看着挺小的但是网页的高级感啊可能看着一下子就上来了啊是家可以看啊我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服呢是后一个点啊个原点啊其个里啊可这个个个的的这个经典啊那用一个个的的很合适啊是一个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的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体呢都比较有特点啊技术感十足但是又不会显到很\n冰冷然后下面啊也不是那种传统的卡片式布局动画效果啊做的也很舒服很有创意感整体上啊这个版本感觉像是一个非常有经验的设计师的杰作啊然后我们来看第二个测试啊那这次呢我发了一个非常简单的提示词啊首先做一个独立摄影师的个人作品集的文站啊然后就没有其他任何的提示词了啊那这样呢可以考验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教程感谢你的观看我们下期见",
  "segments": [
    {
      "start": 0.25,
      "end": 300.0,
      "text": "就在前两天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的一是\n个感知均匀的色彩空间啊它可以保持亮度和色度不变啊只转变色相啊呈现的颜色啊自然很和谐了那这个细节呢可能看着挺小的但是网页的高级感啊可能看着一下子就上来了啊是家可以看啊我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服呢是后一个点啊个原点啊其个里啊可这个个个的的这个经典啊那用一个个的的很合适啊是一个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的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体呢都比较有特点啊技术感十足但是又不会显到很\n冰冷然后下面啊也不是那种传统的卡片式布局动画效果啊做的也很舒服很有创意感整体上啊这个版本感觉像是一个非常有经验的设计师的杰作啊然后我们来看第二个测试啊那这次呢我发了一个非常简单的提示词啊首先做一个独立摄影师的个人作品集的文站啊然后就没有其他任何的提示词了啊那这样呢可以考验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教程感谢你的观看我们下期见"
    },
    {
      "start": 300.07,
      "end": 600.0,
      "text": "就在前两天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的一是\n个感知均匀的色彩空间啊它可以保持亮度和色度不变啊只转变色相啊呈现的颜色啊自然很和谐了那这个细节呢可能看着挺小的但是网页的高级感啊可能看着一下子就上来了啊是家可以看啊我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服呢是后一个点啊个原点啊其个里啊可这个个个的的这个经典啊那用一个个的的很合适啊是一个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的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体呢都比较有特点啊技术感十足但是又不会显到很\n冰冷然后下面啊也不是那种传统的卡片式布局动画效果啊做的也很舒服很有创意感整体上啊这个版本感觉像是一个非常有经验的设计师的杰作啊然后我们来看第二个测试啊那这次呢我发了一个非常简单的提示词啊首先做一个独立摄影师的个人作品集的文站啊然后就没有其他任何的提示词了啊那这样呢可以考验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教程感谢你的观看我们下期见"
    },
    {
      "start": 600.05,
      "end": 777.795,
      "text": "就在前两天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的一是\n个感知均匀的色彩空间啊它可以保持亮度和色度不变啊只转变色相啊呈现的颜色啊自然很和谐了那这个细节呢可能看着挺小的但是网页的高级感啊可能看着一下子就上来了啊是家可以看啊我这个视频里的这个颜色示例的这个方的但是每个形状的很舒服呢是后一个点啊个原点啊其个里啊可这个个个的的这个经典啊那用一个个的的很合适啊是一个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的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体呢都比较有特点啊技术感十足但是又不会显到很\n冰冷然后下面啊也不是那种传统的卡片式布局动画效果啊做的也很舒服很有创意感整体上啊这个版本感觉像是一个非常有经验的设计师的杰作啊然后我们来看第二个测试啊那这次呢我发了一个非常简单的提示词啊首先做一个独立摄影师的个人作品集的文站啊然后就没有其他任何的提示词了啊那这样呢可以考验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教程感谢你的观看我们下期见"
    }
  ],
  "language": "zh",
  "source": "funasr_chunked_parallel",
  "model": "paraformer-zh"
}