AI工具在UI设计界面中的实践与思考

这段时间一共落地了5个设计案例：其中2个为真实上线项目，3个为个人练习项目。期间主要使用的工具：Switch、Lovart、Heyboss ，以及用 Google Studio AI 实现页面交互。

工具链接放下方⬇️ 请大佬们自便 

https://stitch.withgoogle.com/

https://www.lovart.ai/zh

https://heyboss.ai/

https://aistudio.google.com/apps

咋们正文开唠：（时间戳 2025.07 – 2026.02）

在探索UI/UX设计里和AI折腾的这半年，自我感觉是一件挺具体的事情： AI在UI界面设计里，到底能不能真的用？能用到什么程度？这一阶段，AI主要适合用来干两件事：

1⃣️灵感：梳理页面布局与信息结构思路 

2⃣️拆解：AI是如何理解界面元素的？

对我来说最有用的，不是解决”设计更好看界面了”，虽然一开始我是奔着这个需求去尝试的。但后面解锁发现适合用寻找灵感，梳理页面布局与信息结构思路，然后更容易和产品对齐目标。 特别是在那种分工很细的团队里，这点特别明显。以前我们会花很多时间在”这个页面到底怎么排”上来回讨论，现在可以很快出几个结构方向对齐设计目标。

我的感受是，快速出原型图且不再局限于线框图了，最开始的初衷还是把线框图直接转化成高保真UI稿，真实结论是，这个裂缝无法缝合！（达不到预期）

🤔️ 但如果本身就不用线框，是否就不存在裂缝要缝合？

在另外一个项目尝试没有原型图的情况下，快速完成页面布局。这个阶段AI工具给我最直观的价值是在 Axure / Figma 里反复调整原型的时间大幅减少，还能更直观、高效与团队成员对齐设计目标。

设计稿前期核心目的是服务沟通对齐与自我思路梳理；这部分工作被AI分担，尤其在没有精细化/岗位全责的分工的团队中， 整体效率明显提升。 主要是咋们设计师🧑‍🎨心情愉悦值 up！up！，因为俺是一个不爱抠像素的，比较害怕听到 说”换布局/风格，看看效果” ，主动一个听劝但过程煎熬😩 应该懂的都懂吧～

 另一个很明显的变化是：就是找灵感，你想要多少种花样就会有多少种花样【换一换】可比去花瓣找快太多（甚至可以垫图） 这样就可以结合业务发散页面结构，以前被诟病的”飞机稿”的问题不就迎刃而解呀嘛！ 

我花在思考用户场景上的时间变多了，花在反复调整界面布局的时间变少了。这一阶段我的设计目标很明确：快速对齐方案，先想清楚原型要满足什么业务场景、用户会如何使用。这也绕回了最初想解决的问题：原型转高保。

 如果说原型转高保真会失败， 

那么。。。 AI到底是怎么”理解界面“的？ 

AI的UI稿提示词设计思路

Step 1 问题定义 ：帮助AI“理解你要改什么

Step 2 策略设定：让AI不只是“生成图” 而是“生成结构+规范”

Step 3 生成界面：快速生成结构合理、组件清晰的界面草图

Step 4 结构化导入：快速生成结构合理、组件清晰的界面草图

Step 5 人机协同优化：将AI初稿打磨成真正的“可交付设计方案”

它怎么判断哪个是重点、哪个是层级、哪个是结构。 和我提示词有什么关联，这个UI语境的知识库是如何搭建的， 所以我拆解了一个大结构：页面框架描述、模块描述、元素描述，核心要梳理清晰这几个问题，

一、问业务方向（精准补全版）

1. 页面的核心任务是什么？

2. 想要突出的关键信息有哪些？

3. 目标用户是谁？使用场景是什么？

4. 页面核心转化/行为是什么？

5. 业务优先级与信息层级是什么？

二、问设计方向（完整闭环）

1. 对应关键信息，需要用什么视觉元素承载？

2. 整体设计原则是什么？（简洁/高级/活泼/专业等）

3. 色彩、字体、质感风格如何定义？

4. 信息布局与交互逻辑如何安排？

5. 最终呈现风格与平台规范是什么

原型提示词的结构是：主体内容 + 界面风格 + 布局排版（色彩 + 质感 + 视角比例 …)

整理更新UI知识库，以后也许是做设计搭建AI- agent的关键所在，以及一个我当时脑子里冒出来的问题：未来这些界面规范，会不会被慢慢对齐？（题外话了，先按下窄且不表）

[第二阶]

探索AI在项目优化中的新突破

近几个月抱着真实做项目优化的目的，测试AI工具的新能力。有几个让我挺惊喜的点：

这个和我第一轮用AI的体验完全不一样。因为最早其实挺痛苦的：生成一张图 → 用 Figma 插件转 →然后得到一堆：乱码、排版问题、完全不可用的结构； 折腾下来反而不如传统工具流程高效，还不如我自己画。当“生成 → 修改 → 可交互“这条链路慢慢跑通之后， 我开始觉得这件事有点意思了。

[最后]

分享完整AI设计流尝试

思路不难但关键在于把它走通一遍：从「接到需求」开始 ，→ 拆解设计目标→ 定义可生成的元素→ 转化为 Demo 验证。

整个流程一旦建立起来，会非常丝滑。这次我主要用的是 Stitch 来跑这一套流程（听说 Figma 最近也在这块做得不错，大家可以对比试试）重点不是工具本身，而是你的设计思路：

1. 先把“需求”翻译成清晰的目标，需求梳理用到大语言模型里面，我比较满意deepseek（目前阶段）企业网银转账流程重构设计AI工具使用链接详见，从需求到交互：大语言模型尝试

Gemini的对话

https://gemini.google.com/share/ecdbb39a3f1f

Kimi 的对话

https://www.kimi.com/share/19cc2098-0042-81dc-8000-0000f2ddfdb5

Deepseek的对话：

https://chat.deepseek.com/share/1jq4l2qmczbfpuzt39 

Claude的对话：

https://claude.ai/share/5e3e0868-09c3-4b46-814d-2cdb1337137d

2. 再把目标拆成“可生成的结构单元” 生成设计图，梳理清晰的设计表述（红框部分）是控制页面设计的关键！

以下是我尝试了两种风格：

1⃣️风格

https://stitch.withgoogle.com/projects/8380999807223204753

2⃣️风格

https://stitch.withgoogle.com/projects/7257223448019387420

3. 用figma工具微调，这步还是要组件化思维，Stitch出图的一致性还是不够的，没事咋们自己手动微调一下，毕竟它都把图层命名的很清晰，这都是小事！

https://www.figma.com/design/8yO2DQ0BbCxsdpBoWJAcjK/%E7%BD%91%E9%93%B6%E8%BD%AC%E8%B4%A6?node-id=0-1&t=AOslmxd9V7ym34ht-1

👋 ⬆️ 去评审 👀UI设计稿

4. 最后根据设计稿可以在生成动态demo：一种是stitch直接导出的（不可修改），另外一个方法是用AI studio 用自然语言就能做动态交互。

5.交付交付交互说明文档

如果你也在探索 AI + 设计的工作流，这一套可以直接拿去试。欢迎一起交流不同工具下的实践方式👀，可以直接在飞书留言切磋琢磨以下

https://my.feishu.cn/docx/VyBXd0AtRo2gxFx7Ou5cnN2rncg?from=from_copylink