新手用AI做UI设计，我建议先用codex修改figma源文件局部

Hi，我是盛夏，一个不断用 AI 重构自己设计流程的 UI 设计师。

我研究 AI 做 UI 设计已经很长时间了。

尝试过即梦、 Lovart、 ChatGPT、Figma Make、Pencil、 Google 的 Stitch、Codex+skill。

其中最好用的是Codex 加插件和 Skill 这种形式。它的工作流程比较直接，也省事，最后交付起来也很方便。

它可以直接让 Codex 进入 Figma 源文件，在原来的设计稿上增加页面、修改组件、补齐状态。

如果你是第一次用 AI 做 UI 设计，我建议你不要一上来就让 AI 给你生成一整套设计页面，也不要一开始就让它给你出整套设计规范。因为在 AI 还不了解你的项目、业务和设计风格时，它很容易给出一些 AI 味比较重、模板化比较明显的设计。然后你想让它真正符合自己的需求，可能要经过大量对话、调整和修改。很有可能花了很多时间，最后什么也没得到。

我建议你从改局部开始。先让它帮你补一个 Icon、一个弹窗、一个空状态页面、再到加一个简单功能的全流程页面。

先动手试一下，尝到一点甜头，知道具体该怎么用，怎么跟它沟通，再逐渐加深使用。

接下来我会展示 4 个实际工作中的案例，由浅入深，带你感受一下解放双手的感觉。

REAL CASES

案例一：优化icon

「插入你的figma链接」这个页面里左侧导航栏中剧本比对和剧本查重的icon一样，请你帮我把剧本查重的icon重新设计一下

生成后继续追加对话

把剧本比对icon也重绘一下

REAL CASES

案例二：设计空状态页面

「插入你的figma链接」在这个页面下面设计一个暂无agent，点击下方按钮去创建。的空状态页面

REAL CASES

案例三：设计一个功能的全流程页面

「插入你的figma链接」在这个页面的空白处设计剧本比对这个功能。功能描述：上传两个剧本，一个修改前、一个是修改后，上传后，点击开始比对，出现剧本比对的框（与修改前后对比弹窗的设计一致），左边修改前，右边修改后，修改后的是可以编辑的。

这个页面上传后，如果像更换，或者是删除了重新上传怎么办，也设计一下，还有上传框的hover样式也要设计一下，放不下的话可以在页面右边生成新的页面

这个页面，需要标示出来修改了哪里，修改后的是可以继续编辑的，剧本很长在这里框里是需要滚动条的，修改后，是需要下载文件的。这些都设计一下

它做的不只是一个静态页面，而是把组件的不同状态一起补齐了。甚至还有一个我当时没有考虑到的历史记录，它也帮我补进了功能方案里。这就是我觉得 Codex 真正好用的地方。

REAL CASES

案例四：完全重复性工作（脏活累活）

还有一种工作，我以前做的时候真的很烦。比如一套系统的所有页面都已经设计完了，现在左侧菜单栏需要增加一个新的功能入口。这时候不是只改一个页面，而是这个 Page 里的所有 Frame 都要加。

Figma 自带的选中相似图层，并不是每次都那么好用。以前我会一个 Frame 一个 Frame 地改。这件事没有什么设计难度，也没有什么技术含量，纯粹就是重复。

现在我只需要告诉 Codex，把这个功能入口添加到当前 Page 的所有 Frame 中，并且说明放置的位置和样式，它就可以帮我批量加好。

在剧本管理页，我把创建对话的位置改到了上面，下面放了头像和昵称。我现在需要把所有页面都进行这个操作

把剧本管理的页面都帮我重命名一下

∞

THE END

总结

以上就是这次先分享的 4 个案例。

看完这几个案例你会发现，Codex 最好用的地方，是直接进入现有的 Figma 源文件，按照原来的设计规范直接画界面。并且在交付这一块也很方便，我们把figma链接直接给前端即可，现在前端也是直接用在本地项目调取figma源文件改代码的。

真正达到了不用动手，口喷做设计。

所以第一次用 AI 做 UI 设计，不用一上来就挑战整套产品。先从一个小图标、一个弹窗、一个空状态开始。等它真的在你的 Figma 源文件里把东西改好，再用它做更深入的事情。

这篇先分享前 4 个案例，后面我会继续讲剩下的案例，以及我用了哪些插件和 Skill，让 Codex 做出来的页面跟原设计稿规范保持一致。

或者如果你还不知道怎么安装 Codex，或者怎么让 Codex 和 Figma 连接起来，也可以私信我或者在评论区提问。

我是盛夏，一名正在把 AI 放进真实 UI 工作流的设计师。

如果你觉得今天这篇有收获，欢迎点赞、在看，也可以转发给有需要的设计师朋友。

下篇会介绍一个能让 Codex 做出高质量设计的插件 CC- Design。前面案例二中的空状态页面，之所以能达到这个效果，和这个插件有很大关系。具体怎么安装、怎么使用，我会在下篇详细讲。

感兴趣的话可以关注我，更新后就能第一时间看到。