由于昨天 AI 写的知识库页面 UI 效果上「很AI」，没有设计感（或者说很丑）， 所以我们使用另外一个工具「Google Stitch」来设计界面。
打开 Stitch 网站， https://stitch.withgoogle.com/[1]
不一会，就会出现一个新的页面，展示你的 AI 应用，说实话界面还挺精美的，细节地方和UI设计的差不多。
整体界面效果不错，还有主题编辑功能，以及深色和浅色模式。我们切换深色模式，看一下效果。
虽然界面很好，但不是我想要的。
一次生成多个页面
现在我们让他参考阿里云的知识库来实现管理、详情和上传三个界面。
这次一下生成了三个界面，分别是管理、详情和上传，而且生成速度也很快。 但是貌似没有参考阿里云的知识库，只是根据提示词生成了三个界面。
使用参考图生成
下面试试使用参考图生成界面。
参考图是这样的，图片本身就比较模糊。
生成的效果是这样的。
从结果上来看，AI 是理解了界面的信息，包括各个操作的含义。
我们现在优化界面，首先处理左上角Logo 属于侧边栏而不是顶部栏的问题：
「整体布局是上下结构而不是左右结构」
我们已对“知识库管理”界面的整体布局进行了调整：
知识库管理：界面现在采用上下结构。顶部区域整合了原先的左侧导航栏（如“知识库”、“收藏夹”、“最近使用”及常用知识库列表）和原先的顶部导航栏（应用名称、搜索框、创建按钮和用户相关的通知/设置/头像）。下方内容区域则集中展示“星标知识库”和“知识库”列表，并以卡片形式呈现，同时保留了之前优化的操作按钮和阴影效果。底部的“回收站”入口保持不变。
您觉得这种新的上下布局如何？
上下结构是上下结构了，但是用力过猛了哈哈。
然后告诉 AI，
「先上下，后左右布局」
不得不说，Google AI 的理解力真的强啊。
多风格和多选项
输入框下面有一个多选项，可以一次生成多个备选稿件， 这里我们让其生成不同风格的图片。
除了一个传统的简约风格，还给我一个现代科技感风格的深色设计稿：
以及一个复古拟物风格的设计稿：
但是，界面功能有一点儿不一样了。大家记住如果是要修改设计稿， 记得选中设计稿再进行提示。
这次就有一个功能一样，只是样式不同的设计稿了：
或者是科技感的，
编辑
对于编辑， Stitch 也很方便，我们可以框选元素，描述，然后 AI 就会根据描述进行编辑。
然后看看AI一次修改的效果。
好吧，我解释一下，其实我是先给大家一个错误的演示了。
但是，我使用编辑功能提示了好几次，包括框选大的小的组件（甚至半个屏幕），都没啥好效果。 哪位大神能理解这个功能，快告诉我。
最后我还是放弃了，直接使用提示功能：
移动 标题 「法律文档」和副标题， 到顶部栏，放在直属库管理后面形成面包屑
出来的结果基本可用。
总结
Stitch 生成设计稿支持三种模式（不知道选啥的话，就选Pro），以及支持代码下载和导出到 这些好玩儿的功能今天不展开了，下面跟大家说一下使用感受。
优点
对于常规的企业应用设计，不需要很多创意的，谷歌 stitch 能很好的完成设计任务。包括：
-
• 根据描述生成设计 -
• 修改设计稿细节 -
• 样式和布局调整 -
• 根据设计稿或者图片进行界面设计
对于复杂的，或者非常有个性化的设计，我目前还没有测试，效果不好评价，但是本文中的内容已经能覆盖现实中的企业大部分软件页面设计工作了。
顺便提一点，Stitch 应用页面UI的渲染性能也很出色。二三十个页面在画布里面，一点也不看，放大缩小编辑都很丝滑。
缺点
优点是初期效率高，缺点后期效率低。
特别是当 AI 的设计稿已经基本符合需求时，任何一些个小调整，比如
-
• 移动一个元素的位置， -
• 改一下大小或颜色
都要等半分钟或者一分钟去生成效果图，效果图不满意了还要继续提示继续生成。 和传统设计相比这个速度就太慢了，对于微调看效果，设计过程中经常是反反复复，可能十几次， 但是使用 AI 调整太费劲了。
还有一些场景，比如想把 A 页面的某个元素拷贝的 B 页面，这些对于传统设计工具 很简单的事情，你要提示AI去做，还有一定概率开盲盒，而且速度也同样没有传统设计工具快。
最后
如果是企业为了生产力提效，最好的办法就是用 Stitch 完成设计的前半部分（整体样式、多种交互等），用传统设计工具完成后半部分（微调）。
所谓慢就是快，这个在 AI 使用的领域也同样试用。如果手工能很快完成的一些操作， 我个人的经验，老老实实手工去完成，一些看似很简单的问题，很可能在一次次的提示过程中， 一个小时就过去了。
引用链接
[1]: https://stitch.withgoogle.com/