别再死磕Figma做UI设计了，用Stitch AI工作流太省事了

Sponsor

作为一个矩阵产品的团队主理人，我最近一直在研究如何用AI来提效设计，让团队的UI同学把精力放在长线精品的项目上去，用AI来完成矩阵产品的UI这类重复性工作

关于Google Stitch

去年我开始测试Google Stitch，但那个时候的stitch本质还是一段前端代码，无法直接在客户端复用，更多时候只能算一个创意工具。

年前stitch更了一个版本，支持了生成的页面可以copy导出到figma，这意味着AI生成的页面可以直接运用在我们现有的工作流中。

但后续的问题非常明显——在处理成套UI的时候，色调，倒角，字体等设计细节上无法做到统一性，同时生成的内容经常会出现左右或者上下无法撑满的情况，导致想要用还需要设计同学微调。

很尴尬的是，对于一个熟练的设计师来说，微调和她重新做一个的时间区别并不大，这个时候的stitch姑且算是生产力工具，但也更多是能省点没那么熟练的设计同学的时间。

但随着本月stitch的大更新，我这几天抽空跑了一遍流程，发现特么的stitch真的变成设计的生产力工具了，以下是我的一些心得（仅个人观点）

不太优雅的地方：

1. 还是无法替代精品长线产品的UI设计工作，或者说想要达到同等效果比设计师手搓需要花的时间更长；

2. 还是无法100%从stitch直接导出到Figma之后就直接丢给开发，但是需要微调的东西已经非常少了，而且如果规范或者约束到位的话，理论上是可以实现的；

3. 部分如图标，插图，动效还是相对简单或者需要多次调整提示词才能达到比较OK的效果，但是这块可以用nano banana或者即梦来快速解决（专业的工具做专业的事情）。

很强的地方：

1. 对于矩阵产品而言，原型和设计的顺序可能需要颠倒过来了，可以先生成设计再用stitch反向生成原型（但第一个原型包还是推荐画一遍，矩阵包感觉原型的意义不大了）

2. 设计同学的部分工作可能变成从自己动手设计变成了审核AI的设计，从设计能力作为核心变成了审美作为核心（有点像之前腾讯的设计同学，主要的工作是制定设计规范和审核外包设计的产出是否符合规范）

3. 一整套矩阵产品的UI设计的工期单位可能从“day”变成了“hour”

4. 免费

接下来分享下我的stitch工作流，主要有7个环节：

1. 寻找参照

2. 把参照变成提示词

3. 建立Design Systems

4. 生成风格参考页

5. 生成功能页面

6. 导出到figma微调

7. 丢给开发

一，首先是寻找参考

参考的来源可以是三个类型：

1. 优秀竞品的截图

2. 自己的产品设计稿

3. 原型图

三者区别不大，可以混着用

二，把参考图变成提示词

寻找完参考之后不要直接丢给stitch去生成，否则生成的效果可能不尽如人意，只会变成参考图的青春版本

更好的选择是把参考图直接丢给Gemini，让他输出一段提示词

最终，我们将得到一个表，包含了你所有需要生成的页面，弹窗（icon也可以单独拆出来精细化生成）

三，建立Design Systems

如果只有每个单独页面的提示词的话，还是会存在色调，倒角，字体等不统一的问题，这个时候就需要Design Systems来发挥作用

Design Systems有两种创建方式，Gui和CLi，Gui如下

但是AI时代，我选择用CLi

还是让gemini生成一段json

上传json

检查是否符合预期

四. 生成风格参考页

建立设计系统后，如果直接生成具体的功能页的话，理论上差别并不会特别大，但是为了进一步统一设计细节和风格，最还是先生成一个包含了所有元素的风格参考页面，作为后续全部页面的元页面

五，开始生成功能页面

选中参考风格页面，并复制gemini给你的提示词，告诉stitch在参考风格页的基础上生成新页面

然后花费30分钟，你得到了一整套UI的主页面，可以看到还是有许多细节问题，比如tab栏的icon并不完全一致，顶部的导航栏也不完全一致，虽然并不优雅，但是完成度和统一性尚可，但这就够了，请看下一步

六，导出到figma微调

右边设计图，点击导出，选择FIgme

然后在figma点击粘贴，然后再微调一下细节

七，丢给开发

然后把figma直接丢个开发同学即可，如果是AI开发的，可以直接导出MCP然后用Cursor，文档如下：

https://cursor.com/cn/docs/mcp

最后总结我的7步无痛工作流（建议收藏）：

1️⃣ 找参考：​ 竞品截图 or 自己的旧稿，混着用。

2️⃣ 图转Prompt：​ 别直接丢给AI！先把参考图扔给Gemini，让它生成精准提示词（Prompt）。

3️⃣ 建立Design System：​ 这是灵魂！让AI生成一个JSON规范，锁定主色、倒角、字体。（我用的潘通802C荧光绿+黑，贼赛博！）

4️⃣ 生成风格页：​ 先做一个“元页面”定调性。

5️⃣ 批量生成页面：​ 复制Prompt，让AI疯狂输出。

6️⃣ Figma微调：​ 导出后设计师只需做“裁判”，修修细节。

7️⃣ 丢给开发：​ 甚至可以直接接Cursor/MCP，丝滑到飞起～

以后设计师的核心能力不再是“画图手速”，而是审美把控和规范制定！把重复劳动交给AI，把脑子留给创造力，这才是正解呀！

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。