一个新时代设计师的codex学习分享
深圳/UI设计师/72天前/2103浏览
版权
一个新时代设计师的codex学习分享
最近codex很火，而我工作之余也浅浅研究了一下，在这里跟大家分享下
其实说来有趣，我一个设计师居然也在研究ai开发方面的知识，没办法，我只能说：“行走江湖，技多不压身吧～”ok切入正题，首先我们在学习之初应该先有个概念，比如：
什么是skill？
Skill 是一种可重用的工作流程描述，通常由一组文件组成，其中最核心的是一个 SKILL.md 文件
上面是官方的解释，其实我自己的理解，skill就是多个md文件组成的一个工作流。他的工作原理就好像，我们在codex中输入一个指令，codex采用我们的这个指令去调用提前设置好的工作流（skill）来进行工作。
网上我们经常刷到一些焦虑推文，比如AI替代UI设计师等，但其实我们真正去使用，效果往往都是差强人意的。所以最近我一直在研究codex如何能够稳定输出一定的界面设计，由于是自学，所以也走了不少弯路，比如不走skill的规范流程，只靠输出md的规范文档，或者单个的组件描述文档，试图去跑通这件事情，结果倒还凑合，可不够稳定，可能上一张界面还比较稳定，下一张界面就会变得潦草。
在操作之前，首先要确保codex至少是要连通figma的，
这样子他就可以直接通过我们自己的figma链接，来进行读取数据，或者编辑操作
codex可以连通很多好用的软件，这里只是以figma为例
正式操作
- 首先我们要有一个figma文件的组件库，最好是分类完善的，如果公司内部没有成熟组件库的话，使用开源的也ok，这次我使用开源组件库来演示（HeroUI Figma Kit），下面可以看到这是我用来演示的开源组件库HeroUI Figma Kit，他的分类命名都还算是蛮完善的。
- 接下来就是很直观的给指令环节，我们只需要把我们组件库figma的链接+相关提示词发送给codex，例如：基于htttps://www.xxxxxxxxxxx.com请基于这个figma链接里的规范，帮我制作一个通用的UI规范skill；
- 之后可以看到codex输出了多个md文件，这就是一个简易的skill，可以试着采用这个skill去让他制作一个界面，看下具体的效果，我实际运用场景并不是在figma中进行设计，我使用的是codex在pencil中去进行设计，不过原理是相同的
上面是我用codex在pencil中制作的两个页面，整体还是有一些效果的。
- 对此，我们也可以根据本次的产出物，去逆推md文档里有无可完善的地方，比如有的按钮尺寸，或者字体规范等，都可以去找到对应的md文档进行微调；或者可以直接给codex输入对应的调整指令。
当然，调整完成后，我们的通用的skill规范已经出具雏形了，
后续使用只需要调取对应的指令就好
此时你可能会有疑问，如果我没法输出那么完善的提示词，不按照完整提示词的话，他做出来的界面又会变得随心所欲，该怎么办？
那么好，下面就来解决这个问题
- 我们可以直接让code去生成标准化的UI界面的提示词，之后我们可以跑一下试下结果，再做微调，之后就可以让它把这个提示词转化为一个提示词skill，以便我们下次调用。
到这里就可以了，但我为了一种更加稳妥，选择确认下当前的工作流程，以便为下次标准化的工作流做准备
以上是我的分享，当然也欢迎大家一起学习交流！
文章最后浅聊一下感受，当然只是我自己的片面角度：
其实AI对于UI这个行业来说，目前还是帮助很大的，但是要说替代的话，还不至于，我们作为设计师来讲，能做的其实也是顺应当下的时代，尽可能的让AI工具为我们自己所用，少一点焦虑，多一份努力吧！
好的设计拼的从不是效率，而是思维。
67
举报
声明
99
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
67登录即可同步推荐记录哦
99登录即可加入我的收藏
评论登录即可评论想法
分享分享