上班时间,偷偷练化了个Skill(内附下载链接)

最近Skill这个词，在AI圈非常的火热啊，不亚于前段时间的小龙虾。那什么是skill呢？其实简单的理解，就是一个AI的技能点，转化为设计这个行业的话，大家可以理解为UI设计的能力、图标设计的能力。

火归火，简单归简单，但是掌握在自己手上的能力才是属于自己的。包括前段时间很火的awesome-design，融合了很多大厂的规范组件炼制而成的，依托于Claude的大模型，整体输出的效果确实非常在线。

下面我会把我炼制skill的一个大概的流程给大家讲解一下，这次使用的软件是腾讯研发的workbuddy，因为Claude要会员，为了省钱，就选择了老东家腾讯的工具，使用后的感觉还是不错的，但是与Claude确实也有一些差距，但奔着免费和初步尝试也就觉得可以接受。

1.本次炼制skill的目的——学以致用

其一，是使用过awesome之后，觉得比较不错，所以想自己尝试下能不能去炼制一个更加符合自己思考维度的skill。

其二，正所谓学海无涯，虽然可以直接使用别人的东西，但觉得，总得自己得亲自去尝试一下新的东西，亲自去炼制也更便于自己理解skill究竟是个什么东西。

2.解决痛点，自动获取配图和图标

awesome-design的逻辑是一次性炼化了很多大厂的设计风格，比较能够满足风格发散进行使用，是一个大而全的skill，但在使用过程中缺少了一些配图、图标的能力，使用Claud的时候，模型有自学能力会自己配齐，但遇到一些比较差的模型这点就会有弊端，使用我本次炼化的一个关键点，就是想通过skill自己去拉取unsplash的配图和拉取remixicon的图。

3.本次skill需要满足的关键

我在开始炼制的时候就根据自己日常做设计的几个核心做了简单的列举，包括：

1. 界面layout的合理性

由于我是直接让workbuddy嵌入了整套Apple的 HIG，所以在基础的界面layout上是不用太过担心的，所以这方面在的过程中也得到了验证

2. 图标的美感度

UI设计的最基础的核心就是图标的美感度，这也决定了这套skill是否成功的关键，我直接让workbuddy引用了remixicon.com上的免费素材，不是简单的抓取，而是让AI自己在每次抓取的过程中去自己学习和分析图标的设计美感度。

3. 配图的美观度

配图充当着UI设计的门面，所以选择了Unsplash的免费图库，作为基础，让skill每次应用的时候，都从unsplash上抓取对应主题的配图进行使用。

这里做了一个冗余机制，当unsplash的配图无法满足设计需求或者缺图时，启用绘图大模型自己绘制相关配图进行使用。

4. 界面的可应用性

就是说，通过这个skill出来的界面必须是可以应用的，至少得达到70%以上的完整度，然后再在这个基础上，去优化一些基础细节。

5. 界面的可延展性

UI的设计并非是单界面的设计，而是需要AI懂得进行系统性的设计，包括每个界面之间的交互逻辑等。

4.本次炼制的流程的基本流程

Step1:初始化

使用workbuddy初始化，建立skill creator，并对自己的skill进行命名，由于我这次想要炼制的是apple的设计风格，使用暂时命名为：apple-design skill

除了命名之外，还需要让workbuddy告诉你这个skill触发的相关prompt，基本上与设计相关的自然描述即可，比如：帮我设计一个无人机的网站、帮我设计一个咖啡品牌的app之类的。（由于现在AI的进步，使用skill的prompt并不需要像以前mj那种那么复杂了，基本都是属于自然语言描述）

Step2：建立设计系统

这一步是设计skill必不可少的一步，但其实并不复杂。可以分成几部走：

（1）首先我让workbuddy去搜索apple的HIG（Human Interface Guidelines）设计系统，现让AI自己通过搜寻之后，自己学习一遍相关的规范；

（2）让workbuddy加载我常用的一个图标网站remixicon.com，从这个网站中获取免费的图标优先进行下载并使用，并让它进行学习重绘

（3）调用免费的图片素材库unsplash.com，作为界面设计的配图填充

（4）每次界面生成时，都需要输出深浅2组配色

Step3：制定初始命令

这一步的主要作用是防止skill一开始就乱绘制，所以我在制定skill初始的时候写了几条要求

（1）在每一个初始prompt的时候，对会返回2个问题：1.你想绘制一个什么样配色风格的产品；2.你绘制的产品适用于什么样的终端，（如果在prompt里面已经描述了相关的终端和配色要求就会自动跳过）

（2）优先获取我之前建立的系统，进行学习之后再开始进行设计，比如一些图片下载、图标应用之类的，现进行自动运行

而且我在获取图片的时候进行了更细节的要求，比如头像尺寸的要求之类的，这也是踩过坑之后增加的

Step4：初步测试

经过前面三个步骤的设计，就可以开始对自己的skill进行测试验证了，验证的几个维度主要是：（1）skill运行的合理性，比如我们要求的是A风格，它出了B风格，那就是不合理的；（2）界面的整体框架是否符合我们想要的定义；（3）验证里面的细节，包括配图、图标、布局、模块的一致性等等。

Step5：反复测试并修复问题

经过前面几部的验证，整体上的效果还是可以接受的，但仍需反复进行测试，尽量多的尝试不同的案例，然后再结合不同的界面进行修复优化skill，每一次界面输出，基本都有个五六次的优化空间，这个阶段有点像是在教一个刚入门的设计师，通过不断的沟通，让它输出的设计越来越接近你的审美并满足你的要求。

5. 本次炼制的基本结果

下面给大家展示下，炼制完之后，通过该skill生成的一些效果

咖啡品牌APP

运动品牌APP

潮玩品牌APP

无人机官网

汽车官网

写在最后

最近随着ChatGPT Image2和Claude design的推出，设计师没有出路的言论又开始发酵了，传递这种言论的人不是坏就是故意坏。

从我从事设计这么多年，我始终坚信一个原则，就是设计师的战场从来就不止在设计稿或者设计软件上，而是在于能否拓宽自己能力的壁垒上，每个阶段都要跟随趋势去提升自己。

比如用户体验为王的时代，更多的是要求设计师具备用户体验的思维，每一步的设计都需要把用户思考进去，而现在AI的时代下，设计师更应该具有学习AI、使用AI的能力，除了使用软件，更有可能去创造属于自己的“软件”，或者利用AI-Coding去创造属于自己的产品。

往前看一步，也许路子就宽了，别停短视频的人整体在那吹屁。

目前skill已经上传GitHub，大家可以前往尝试，有什么问题可以在评论区给反馈

附上链接：https://github.com/dayviwong/apple-design-skill