“不会UI设计”的程序员，如何用AI做出让小朋友着迷的界面？

作为一名个人开发者，从零到一实现软件全部功能是家常便饭。很多朋友已经能熟练运用 AI 编程助手完成功能开发，可一到软件界面设计，就犯了难——即便有 shadcn/ui、radix-ui 或 magic UI 这类现成的组件库，依然不知如何下手。框架搭好之后，还常常要为 UI 样式反复调整，实在令人头疼。

最近我在开发一个面向小朋友的“浮力知识演示程序”，今天就来和大家分享一下，如何用 AI 工具高效完成 UI 界面的设计与实现。

一、从需求文档生成 UI 设计描述

首先，我们需要基于功能文档产出 UI 设计描述文档。这里我用了 iflow CLI 中的一个叫 ui-ux-designer 的 Agent。使用方法很简单，如果还没安装，可以按 iflow 官网指引先安装该 Agent。

我在 CLI 中这样调用它，并附上功能设计文档，让 AI 帮我完成 UI 设计：

> $ ui-ux-designer @docs/games/01-buoyancy-lab.md 请根据这个文档为我完成UI设计。

ps: 这儿的ui-ux-designer是这个Agent的全称，iflow里面加上‘ $’符号进行Agent的调用。

当然，你也可以用 Cursor、Gemini CLI、Claude Code、Codex 等其他 AI 编程工具生成 UI 描述，只是指令要写得更明确些，比如：

> 请根据这个文档为我完成 UI 设计，输出详细的 UI 设计描述，保存为 markdown 格式文件。

这个阶段的目标很明确：将功能描述转化为详细的界面描述，包括布局、元素位置、颜色配置等。

很快，AI 就生成了一份非常详细的 UI 设计文档，保存为 xxx-ui-design.md。里面涵盖了整体框架、各模块设计、通用组件、响应式规则、视觉风格、音效建议、无障碍设计和技术实现要点，甚至还有用户流程图。

我快速浏览后，觉得内容很扎实，基本上没有槽点，唯一调整的是把技术建议中提到的“PixiJS 或 Phaser 框架”删掉了一个，只保留我打算用的那一个。

二、用 UI 描述文档直接生成界面

1. 先试了 Figma

首先想到的是行业标配的 Figma，它现在已经支持基于文本描述生成 UI 的功能。

我把详细的 UI 描述文档粘贴进去，稍等片刻，Figma 生成了两个界面。效果算是中规中矩，但离我想要的“开箱即用”还有距离，有些元素比较粗糙，排版也不够精致。

 Figma 生成的效果图：L2

因为我的项目偏游戏化，界面需要更个性化的设计。但如果是开发常见的 APP 或 Web 系统，Figma 生成的 UI 已经足够用了，建议大家都可以试试。

2. 改用 Antigravity + Gemini 3 Pro 生成主界面

这次我吸取教训，不让 AI 一次性实现所有功能，而是分步进行，先只实现主界面，并且不做具体功能。提示词如下：

@01-buoyancy-lab-ui-design.md  
请按照 UI 设计文件为我设计并实现 UI 主界面，可以点击“三个楼层按钮”分别进入 Zone1、Zone2、Zone3 的主界面。具体功能暂时不实现。

为了效果更好，我在 “Conversation mode” 中选了 planning，模型选用 Gemini 3 Pro (High)。

过了一会儿，Antigravity 就生成了主界面，支持点击 L1、L2、L3 进入不同关卡。其中 L1 的部分交互已实现，L2 和 L3 的内容区域则预留为空，等待后续开发。

这里是 Antigravity 生成的主界面效果：L1

Antigravity 生成的主界面效果：L2

Antigravity 生成的主界面效果：L3

这个结果基本符合我的预期，而且直接输出了可用代码，省去了从 UI 稿到代码的转换环节。我只需要在主内容区填充具体功能即可，大大节省了时间。

三、总结一下

1. 1. 从功能到 UI 描述：有了功能文档后，可借助 AI 编程助手（特别是专注于 UI/UX 的 Agent）生成详细的 UI 设计描述，这是确保后续步骤顺畅的基础。
2. 2. 从描述到界面代码：拿到 UI 描述后，再用 AI 生成实际界面。关键是要分步进行，先主界面、再子页面，每步验证满意后再继续，避免一次性让 AI 实现所有界面，否则容易失控。
3. 3. 工具是辅助，思路要清晰：即使AI助手可以自主规划并实现所有功能，但要开发出满意的应用，还是要按照软件开发流程（如：功能设计、UI设计、模块设计等等）逐步进行，确保每一步都达到设计的要求。无论是 iflow、Figma 还是 Antigravity，本质都是帮我们提高效率的工具。清晰的设计阶段划分 + 明确的提示词，才能让 AI 真正为你所用。

以上就是我近期利用 AI 完成 UI 设计的工作流。你在做界面设计时有什么心得或好用的工具？欢迎在评论区一起交流。