如何使用AI UI Designer生成漂亮的UI和原型

这两天，AI UI Designer （www.aiuidesigner.com）做了一次较大的迭代。主要内容有两个，一个是让AI生成的UI可以手动编辑，另一个就是使用统一的设计系统，让同一个项目的所有页面的风格一致、每个页面的header和footer一致。

让AI生成的UI可以手动编辑，其实算是补全了AI UI Designer的一个基本功能的缺失，但保持同一项目中的页面的风格、header、footer的一致性，就是现在AI UI Designer的一个亮点了。

通过一个测试，说明一下如何使用AI UI Designer生成漂亮的UI和原型

设计之前

在首页的入口组件，有两个选择，分别代表两个不同的实现路径。

1、选择One page

这个是直接生成一个页面的。比较简单。

2、选择full UI

这个workflow可以生成整套UI。

先输入你想要设计的项目，比如：设计一个卖茶叶的电商网站。

之后，就会调用plan agent，生成方案。

确定方案后，会生成Design System。

然后就会进入设计器页面，你就可以生成UI了。

设计中

进入设计器页面后，你会发现紧贴在左侧chatbot旁边的任务清单。而右侧预览区，预览区的设计系统。

设计系统

包括全局样式、header、footer，这个时候都已经放在预览区了，点击它们，可以打开一个属性面板，通过修改属性的值，就可以修改配色等。也可以在属性面板输入提示词，让AI修改。

任务清单

每个页面具体的提示词，你不用再想了，因为已经生成好了。在任务清单点击相应页面的“Generate”按钮，提示词自动提交，开始生成。生成完成后，就会把生成的UI展示在右侧预览区。

如果对这个UI满意，可以继续点其它页面的“Generate”，继续生成。

修改UI

修改UI，有三种方式：

AI Agent修改整个UI

如果对这个UI不满意，可以选中这个UI，再提交修改要求，AI Agent会根据要求修改，最后生成一个新的UI展示在原来的UI的旁边。

人工修改

直接点击UI上的元素，就能打开这个元素的属性面板，直接修改属性面板上的值就可以了。

或者，如果只是修改文字，可以直接双击这个元素，就可以直接在UI上修改文字了。

AI修改元素

在属性面板，还有一个AI编辑。使用它，就可以用AI对选中的元素进行修改了。

导出

选中UI时，会有浮动工具栏出现，其中有下载的图标。点击后，可以从下拉菜单中选择导出成html、PNG等。 这是这次测试生成的首页的UI，导出的图片：