生成式 AI 在产品设计和 UI 领域：过去、现在和未来

1. 生成式 AI 在产品设计和 UI 领域：过去、现在和未来张昊然妙多 / 副总裁

2. 01 02 目录 03 04 05 初代生成式 UI 01 表达力的灵感涌现 02 让 AI 理解设计系统 03 妙多 AI 2.0 04 演绎游戏：未来工具 “套模板”技术路线技术革新，回到生成代码为先妙多对打造 AI 产品的反思无壁垒？智能以外、上下文、演进的壳关于未来 UI 工具：四个假设

3.

4. 关于 Motiff 妙多

5. 01 初代生成式 UI “套模板”技术路线

6. User Interface 用户界面

7. “生成” UI 界面：意图到表达 Prompt A screen of a music streaming platform with sections for recommended tracks based on user preferences, highlighted featured playlists and an easy-to-navigate layout that enhances the user experience. The interface is in dark mode and green theme color.

8. 生成 UI 界面的早期探索者 Galileo AI Motiff Figma 2023.3 2024.6 2024.7

9. 弯道超⻋是罕⻅的，一般思路是先追上再说。

10. 近乎直觉的技术方案设计意图大模型生成界面的前端代码代码将代码转换为 UI 界面有点“丑”的界面

11. 比较残酷的现实：丑 Prompt Generate a ordering page for a food technology company. 2024.1 GPT4

12. Product-Technology Fit 技术未够，产品来凑。

13. “套模板”路线：模型解决表达，模板解决排版大模型用户我需要生成一个音乐 App 中的推荐歌单界面。理解（扩写）意图一个音乐播放应用程序主界面，名为 Streamify，右侧有一个搜索图标。有以下模块：应用名称下方有一个导航栏，包含四个选项：喜欢、新内容、热⻔内容和收藏图标。推荐曲目：这一部分展示了推荐的曲目，包括专辑封面、曲目名称和艺术家名称。每个曲目以卡片格式呈现，这是音乐应用的常⻅设计选择，方便用户浏览和选择曲目。精选播放列表：与推荐曲目部分类似，精选播放列表部分展示了图片、播放列表名称和简短描述。底部导航栏：底部导航栏包含三个图标：主⻚、搜索和你的库。这些图标简单直观，用户可以快速导航到应用的不同部分。套上合适的模版并填充适宜的图片、文字、主题色

14. 评测机制：效果评测专家打分： Prompt A personal data statistics page for a mental and physical health app, which includes modules for tracking mood, emotion distribution, sleep monitoring, and psychological symptom tracking over the past week. Motiff-V2 Figma Galileo AI PM:8 PD:7 AI:8 PM:7 PD:6 AI:7 PM:6 PD:5 AI:5

15. 评测机制经验 P 评测集专家打分不要忽略主观判别的重要性典型、全面、未必是大样本 A 效果评测机制自动化 D 与时俱进每一次迭代都评测，评测集更新：Bad Case 驱动让评测工程化、自动化。评分标准更新：用户反馈驱动 C

16. 02 表达力的灵感涌现技术革新，回到生成代码为先

17. “套模板”的局限性

18. 念念不忘：先生成代码路线 Claude 3.5 Sonnet 发布之初

19. 必有回响：Claude 的基因突变 Claude 3.5 Sonnet: 2024 年 11 月

20. 「新」产品是「新」模型的能力外溢。

21. 评测机制：评测新模型，永远 P0 1 2 构建围绕产品核心的评测集 3 2 新模型评测 4 2 先定性 “100 组⻓提示词生成界面” 可工程化就工程化，不能工程化 “GPT 40 生图在各方面显著强 “100 组草图生成界面” 就“手搓”。不要等。于两周前的 Gemini” “50 组短提示词生成界面规划” 再定量定量对应权衡。对重要因素排序 1. 质量*速度 “Gemini 2.5 和 Claude 3.7 对 2. 稳定性大部分任务不相上下，但是更 3. 成本快。”

22. 03 让 AI 理解设计系统妙多对打造 AI 产品的反思

23. 设计系统目标设计一致性实体样式（库）组件（库） Design Token 场景规范

24. “套模板”路线：特制的设计系统

25. “模板商店”：为每一个业务设计定制化生成 “表达力受限，对我们不是障碍，是需求。我们只希望设计师遵循我们已有的组件。” “既然你们已经可以‘套’自己的模板，那我们把我们的数据授权你们训练，可以让 AI ‘套’ 我们业务的模板吗？”

26. 路线选择：确定路径 vs. 不确定路径丰富模版商店表达力简单复杂灵感涌现 “玩具”初稿单一特定⻛格

27. 像理解人一样理解 AI

28. 人如何学习并应用设计系统学习组件库，同时也学习业务实际应用的典型界面。在设计过程中几乎不会先考虑设计系统里有什么。更关注设计本身，也更关注对同类设计的调研。对设计系统的掌握是一种“习得”，最关键的能力是触类旁通。 “最好的学生” 常常不遵守规定，达成一致性往往依赖检查。老板说：“我们参考 XXX 设计一下吧？”

29. “照着 Airbnb ⻛格设计一个外卖产品”

30. 新研究：让 AI 习得设计系统，而非取用用户描述设计意图共同作为 Context 输入将业务设计系统总结为 AI 可读懂的版本大模型生成

31. 阶段性成果：主流设计系统可控

32. 路线选择：选择上限更高的不确定，相信模型进化的能力丰富新的范式模版商店 AI 可理解的设计系统表达力简单复杂 “手搓”建立灵感涌现 “玩具”初稿 Claude 3.5 Sonnet 单一特定⻛格

33. 像理解人一样理解 AI 意味着预判成⻓

34. 04 妙多 AI 2.0 无壁垒？智能以外、上下文、演进的壳

35. 妙多 AI 2.0：设计师的 Copilot

36. 无壁垒时代怎么构建壁垒？智能以外上下文演进的壳

37. 关注智能以外：交互快一倍，体验好十倍 1. 魔法框：Chat Box 只是 Input 的一部分。 2.图片处理/文字翻译：原生体验的便利性。

38. 关注智能以外：最后一公里问题

39. 上下文：⻓期被低估的价值 1. 指定区域的编辑：指哪儿改哪儿 2.图片生成：基于场景

40. 上下文的“记忆”：我们如何与人合作？和 AI 和人 1. 请帮我生成一个咖啡点单小程序的首⻚。小张，你看下这些文档，把咖啡小程序做一版请参考 ……………………………………请遵循………………………………………… 请注意……………………………………… 我期望………………………… 2. 请帮我生成一个咖啡点单小程序的商品选择⻚。请参考 …………………………………… 方案出来看看。

41. 演进的壳：壳就是场景，回归本质找上限高的大场景生产资料：界面的本质？生产者：设计行为的本质？生产关系：设计流程的本质？图片创建新设计：生成需求理解文字迭代老设计：编辑设计调研图和文的布局建立交互：原型产出方案

42. PTF 从 Product-Technology Fit 到 Pre-Technology Fit

43. 05 演绎游戏：未来工具关于未来 UI 工具：四个假设

44. 我欣赏的两种分类法：其一 By Mootion，童超 AI+ +AI 所谓 AI Native 所谓 AI 驱动 Perplexity Google Gamma PowerPoint Runway 剪映 Midjourney Canva Lovable Cursor 上手“炸裂”，完成最后一公里难。从不可用到可用。编辑器既是壁垒，又是负担。从有用到好用。

45. 我欣赏的两种分类法：其二 agent 难酷 Devin Lovable, Replit, Bolt New pro By 拾象，Cage citizen 行老 Cursor, Motiff Wix AI copilot

46. 未来不是线性外推的，但演绎仍充满魅力。

47. 演绎：5 年后，我们在使用怎样的界面设计工具？分类 1 分类 2 简述假设 1 + AI Pro * Copilot 手动编辑器解决 70% 工作，AI 助理解决 30% 工作。手动编辑器解决 30% 工作，AI 助理解决 70% 工作。假设 2 AI + Pro * Agent 编辑器不重要，AI 像设计师一样在成熟的编辑器上绘制。假设 3 AI + Citizen * Agent AI 生成和编辑解决 80% +，更为简化的编辑器手动编辑收尾。假设 4 AI + 被蚕⻝不存在界面设计工具，它只是一站式 Coding 产品的一个功能。

48. 一些产研相关流程变化的洞察：来自硅谷没有设计师研发一抵五 80%+ 代码 AI 创建华人创业者深入当地单个人效超高，信仰一没有技术债更信奉 AI 先产品生⻓在当地，或是人带多 Agents。生成。搬到当地打磨产品。早期团队所有人贡献定 Salesforce 都开始强制全研发在国内，国内研发体研发用 AI Coding。团队红利仍然存在。义产品。

49. 演绎之外：近两年的产品反思慢理性非乐观过度演绎传统用户视⻆最新有新发现，好我觉得短期内模型这是⻓期产品吗？我们⻅过的设计师像我们还可以… 不会… 终局会不会…？都是这样认为…

50. AI 时代，产品人请 ENTJ。

51. 用 ENTJ 心态对抗 AI 时代的不确定性 E N T J Build in public 动态看未来虽然想不清楚行动果断不要憋大招下注模型演进认知有效，经验有碍不做比做错代价大

52.

53. THANKS miaoduo.com 妙多 | AI 时代设计工具