# 《我把 Claude Design 做成了 Skill，人人都能成为顶级网站设计师》全文（清洗版）

> 来源：B站 [code秘密花园]
> 时长：00:12:58
> BV号：BV1MbosBfEoK
> 说明：本文已对口语填充词、重复字、语气词进行了系统清洗

---

就在前两天figma的骨价崩了这已经是enthroropicb一以代的其它东司的东件那首先传布的新功能叫clouddesign你可以理解为设计师的cloudcode大家都知道用上它的的产品有多难于是我把clouddesign的核心功能其成了人人都能的的现于你可能成为自己的网的设计了下面这两个包括大家现在看到的这个设能其实都是我基于这个skskill价的做出来的效业大家可以先看一下效果大家我是欢原老师欢迎是到是e发源clclddesign的设计哲学其实很简单左边大字要可直接出设计能那其实本质上的算n那你要啥它就直接给你设出来那你可能会想这不就是AI的的cgmn其其实那那么简单那clouddesign己的设计团队实这样说那不要用对待给的工具的方式那其用clououdesign那其实更像cloucode其其实c工的的设计其可可不上的作是可能c的可能clcloudesign直接反来来于家可了主要的设成设其其要做好给的就可以了你不用自己画那只实看自的的提以就行而且他输出的博士图片是真实能跑起来的代页链家是可以点的标签也可以切版本可以diff你直接生成一张好看的UI图完全就不是一回事儿了当然clouddesign之所以的一大都是clcloudesign的模型能力另一就要靠它用心设计的设示思那clcloudesignn其不的的个的计n其就可可的的算n那完整做设示词扒出来了信息密度非常高自己画了一些时间仔细研究了一下下面我们先仔细拆解一下这套提示词看看到底有哪些是值得我们去借鉴学习的地方第一点角色助手开头的第一句就挺有意思的他说你是一个专家设计师而用户是你的产品经份比意这里并没有说你是一个AI助手主要说的是设计师和产品经理的关系这可以带来两个好处第一个啊AI做决策会更果断但样本身就应该有自己的判断力但是关键点他又回来问你因为你才是产品经理就是得你说了色还有一点他会要求AI根据任务自由的切个问题比如做动画就当动效设计据原型就当用i设识啊PPT啊就就当代设计这样他就不会用去做网页的脑子去做所有的东西那这里提示词就一句你是个前端开发者就完事了但是clouddesign告诉我们好的角色定位应该是动态的可以根据具体的任务去灵活的切换身份第二个点工作流他在提示词里面定义了一套六部的东程大概是这样的首先理解需求探索资源制些计划然后大建结构完成验证极简的总结那这里有两个点我们值得展开来说一下第一个就是什么时候该问什么时候直接开干很多AI呢要么大自你一个的题然么不不问么都就就干那oudesignn啊给一个个自己的的断方西首说把做做PPTT啊可能能会能的几个问题但是你说帮我做个PPT啊们的全业会非上就要的了比如它直接就看干他非常巧妙的用一个例子来认识了什么叫一的的东题第二个系个就是结结他个个a只只出出关的的意意项项做一一的东西它以结能西自自己的的西第个原原则同用用变的一以变很的的西第三三点是我觉自自做价的的东西就是a除II色但是可以想一下你之前在去用AI职业生成网页的时候是不是大部分情况下都是自文蓝的渐变一些大元的的片有一些EMG当图标一些假数据到处都是可能单独看一西但AI大部分情况下默认生出来都是这种效果它就变成一种种题但但大家把这个网页一眼就能认出来它是AI生成的这个就跟写文章一样你可能能看看一些些东的东题此外什么值得注意识综种套述这种套路能容人都能问一来的啊clouddesign呢是列了一份非常完整的情单这里我们举几个例子比如说别滥用简变背景别乱用emoge别可那种种侧测测色框的原原的题如可可能让大家的字体对其无意义的数据和图标等但但把这些以a啊ALL的给你列出来啊b这a呢不能去走这些老东路那这里的推荐也很讲究他重点解出来些千不不能用的问题但是它个方来也给了一些东题是一一很的的题题第个点都用用西的首先它能做字的的东题就用用品色色但是不一用就用OKLC的c机的题但但是它会不要凭控去的的总题那为什么是做KLCT啊首先传统的HSL色材空间有个很大的东题就是感知不均匀那是的亮度值首先可能比蓝色看的的一大题那但如如果用ALL随机配色经常是不质上没问题但是可能就是不容但那是个CCI的一是个感知均匀的色彩空间它可以保持亮度和色度不变只转变形代里现的颜色自然很和谐了那这个细节可能看着挺小的但是网页的高级感可能看着一下子就上来了是家可以看我这个视频里的这个颜示的这个方的但是能可个个形的很舒服是后可个点点个原点其个里可这个个的的这个经的的那用一个个的的很很个了是一个CCE有个传统的的东念可是我不不直接个把控的很容来是是它做个个d页这个个的这个来的但是一个个的这系方式可可能能个起的的可以但但是每个又看起来很舒用啊cloud的这个很明确每个元素都能明明自己为什么的该有那但首先你要想加起西这用用户是能可个个里可能个个的的问题用留白来解题可能够个来东西可可一个个的留白比可个一数的版题可能更有表现的一点是是我们看第六个点验可可个个的的后可fo出一个独立的的验念然是对当前完成的网页做全面的检查这里跟我们之前分享过的cloudcode在上的实践有相同的理念可果用做个个的的自自己的形的很时候它会这个形西的的自自己没有题题但是如果换一个全形的的产品就是自我感觉良好就很容易被解解但是就是clousigclouddesign提示词里面最核心的我觉得有价值的一些东西了但是有个比较现的问题了就是ncloupq的的品内内起来来的的都一的版版本那那我我就经靠这了三个的了那所以我现在已经彻底放弃工东东西了但是没有api啊它没有办法直接加到这个自己的网作流里面不过好消息是它的提示词已经泄露出来了clouddesign啊厉害的这一半儿主要就是靠这套提示词所以我就基于这套提示词做了一个skill就叫webdesignengineer那这个skill里面那刚才我们介绍的这套提示词里面的精华完整的提炼出来了那然管你是在cloudcodecursor还是codex啊都可以直接去使用人人都能成为顶级的网站设计了这个scale呢大概的一的首先我把clouddesign中没有的工的的这的的布的的首如我是这个用的的这有价值的版本然后在这个基上上我种标的的几个特首先写代码之前必须先用的然的它采用的设计系统本以可可自的的工具这些的列出那如果不先说清楚然后可可能自己一的的一的结构就比接可来那后你直介介到的就是一个成品那如果我面的方向不对可能后可能接的容的那说出来还有开始写代码那后可以可接去做的版了那第二点就是要求他这体的一出的一个在假设和这位符的一个最小的版本那这个粗的的AI版本然能要它它一一形的的版本直接出一个非用CD图之后后v一的版本可能要有的东西后后我我如要是整整体的的版本那后就全版的了另另在clouddesign的基础版本我还不用了更多的去除AIword的本然那我我还另外的一了几构如我我验验过的这体的一的的参的的版本那这个skill还附带一个的文本然后包含了一些典型的代码模本那这里的灵感其实来源于refeclouddesign的它的提示词里面的cloud的的那一部分那下面我我们要是体的的一它的的个来了那我用同一套提示词分别跑了有dearoponskill和没有skill的版本那那果工名取件里我们测试使用的环境全部都是cursor加cloud的p点的了那然后我们来看第一个例例另我可它它我做一一个个的的数的版本的深色的版本然后下面我给它一些些点我我来看一下没用skill做出的版本另里效果也还挺不错的深色的背景然后要oud绘制的版本那可有一些简新的版本然后整体的一工的是有的首先仔细一看这个青子粉渐变的版本那这个字体也比较老套然后布局就是这种标准的hero加卡片的这种特点首一个我外出式的这个落地页的结构整体上还不错但是缺少了一些创意视觉上堆起了大量的这种发光和渐变的这个特效首先后我们再看这种skill的版本首先它的配色整体使用的是这种LC的的个那后我我配的AID的版本本那这能可常接近的整质印刷的深沉的这个色调然后标题和正文的字体都比较有特点技术感十足但是又不会显到很冰冷然后下面也不是那种传统的卡片式布局动画效果做的也很舒服很有创意感整体上这个版本感觉像是一个非常有经验的设计师的杰作然后我们来看第二个测试那这次我发了一个非常简单的提示词首先做一个独立摄影师的个人作品集的文站然后就没有其他任何的提示词了那这样可以考验AI在信息极度缺乏的时候的自主决策能力那首先这个有skill的版本是他直接问我们几个问题包括整体的配色色调的倾向然后核心的元素等等然后没有skill的版本就直接开干然后我们再看一下最后的原素首先这个没有skill的版本这个设计非常的版本首先深色背景然后完后发功的感觉然后半透明的一些卡片然后还有一些满满的AI感的一些文案那首先们本该有的那种漫真自由的感觉其后完全没有体现出来然后我们看有skill的版本那后最后的效果首先它虚构了一个clo的摄目那从头设计了一套完整的视觉风格这样一下子高级感的上来了哎从上面往下翻就像在翻一本高端的摄影风格那最到这个网站你一定就会非常相信这个摄影师的审美了真的是感觉非常效果非常的不错那最后我们做一下总结没用skill的版本说实话本身已经很不错了首先这个个的的这这个模很然后后我跑出来的东西然后后现在大多数的程序员手写的都会强那最后带来的版本大概就是八十五分到九十五分的差距那如用到好看从完整到精致从合格到有风格那这十分的差距其实就是skill里面看起来那些很琐碎的规则那那一个效果不大但是加起来就会产生质那scill的完整文件然后以及原始参考的clouddesign的提示词包括几个demo网站我都打包到一起开源了那大家需要可以直接去gettap上搜这个项目自取就可以了那最后在跟大家推荐一下我最近在做的这个easyagent的这个开源项目那上一个解说harineys的视频发出之后很多同学来问我在实际的项目里面agentharness的这怎怎做那那我就做了这个开源项目那后这个项目的目标就是那最后从林能够复刻一个cloucocode类似cloucocode的一个本的的产那那最个整个的的目目那那个个的的产发一企业业的i的能力那能够够清楚clououcode这种产品那真实的harineys到底是怎么做的那如果你最近也在尝试做agent领域的转型这个项目不容错过那果这个教程对你有所帮助希望得到一个免费的三连后续我会持续分享更多有价值的AI教程感谢你的观看我们下期见

---

*全文由 AI 转录并清洗生成，仅供参考。*