生成式
AI
在产品设计和
UI领域：
过去、现在和未来张昊然妙多
/
副总裁01
初代生成式
UI
“套模板”技术路线02
表达力的灵感涌现
技术革新，回到生成代码为先目录04
妙多
AI
2.0
无壁垒？智能以外、上下文、演进的壳0402010303让
AI
理解设计系统
妙多对打造
AI
产品的反思05演绎游戏：未来工具
关于未来
UI
工具：四个假设
关于
Motiff
妙多初代生成式
UI“套模板”技术路线
User
Interface
用户界面
“生成”UI
界面：意图到表达PromptA
screen
of
a
music
streaming
platformwith
sectionsfor
recommendedtracksbased
on
user
preferences,
highlightedfeatured
playlists
and
an
easy-to-navigatelayoutthat
enhancesthe
user
experience.The
interface
is
in
dark
mode
and
greentheme
color.
生成
UI界面的早期探索者GalileoAIMotiffFigma2023.32024.62024.7弯道超车是罕见的，一般思路是先追上再说。
近乎直觉的技术方案有点“丑”的界面大模型生成
界面的前端代码将代码转换为UI
界面设计意图代码 比较残酷的现实：丑PromptGenerate
a
ordering
pagefor
afoodtechnology
company.2024.1
GPT4Product-Technology
Fit技术未够，产品来凑。
“套模板”路线：模型解决表达，模板解决排版我需要生成一个音乐
App中的推荐歌单界面。理解（扩写）意图大模型—个音乐播放应用程序主界面，名为Streamify，右侧
有—个搜索图标。有以下模块：应用名称下方有—个导航栏，包含四个选项：喜欢、新
内容、热门内容和收藏图标。推荐曲目：这—部分展示了推荐的曲目，包括专辑封面、曲目名称
和艺术家名称。每个曲目以卡片格式呈现，这是音乐应
用的常见设计选择，方便用户浏览和选择曲目。精选播放列表：与推荐曲目部分类似，精选播放列表部分展示了图片、
播放列表名称和简短描述。底部导航栏：底部导航栏包含三个图标：主页、搜索和你的库。这些图标简单直观，用户可以快速导航到应用的不同部分。套上合适的
模版并填充
适宜的图
片、文字、
主题色用户
评测机制：效果评测专家打分：
Figma
Galileo
AIMotiff-V2PromptA
personal
data
statistics
pagefor
a
mental
and
physical
health
app,which
includes
modulesfor
tracking
mood,
emotion
distribution,
sleepmonitoring,
and
psychological
symptom
tracking
overthe
past
week.PM:8
PD:7AI:8PM:7
PD:6AI:7PM:6PD:5AI:5
评测机制经验P评测集典型、全面、未必是大样本效果评测机制与时俱进评测集更新：Bad
Case驱动评分标准更新：用户反馈驱动C自动化每—次迭代都评测，让评测工程化、自动化。专家打分不要忽略主观判别的重要性AD表达力的灵感涌现技术革新，回到生成代码为先
“套模板”的局限性
念念不忘：先生成代码路线Claude
3.5
Sonnet
发布之初
必有回响：
Claude
的基因突变Claude
3.5
Sonnet:
2024
年
11
月「新」产品是「新」模型的能力外溢。
评测机制：评测新模型，永远
P01构建围绕产品核心的评测集“100
组长提示词生成界面”“100
组草图生成界面”“50
组短提示词生成界面规划”2新模型评测可工程化就工程化，不能工程化就“手搓”。不要等。先定性“GPT40
生图在各方面显著强
于两周前的
Gemini”“Gemini
2.5
和
Claude
3.7
对
大部分任务不相上下，但是更
快。”再定量定量对应权衡。对重要因素排序1.质量*速度2.
稳定性3.
成本43让AI
理解设计系统妙多对打造AI
产品的反思
设计系统目标设计—致性实体样式（库）组件（库）Design
Token场景规范
“套模板”路线：特制的设计系统
“模板商店”：为每一个业务设计定制化生成“既然你们已经可以‘套’自己的模板，那我们把我们的数据授权
你们训练，可以让AI‘套’我们业务的模板吗？”“表达力受限，对我们不是障碍，是需求。我们只希望设计师遵循我们已有的组件。”
路线选择：确定路径vs.不确定路径表达力丰富模版商店简单灵感涌现“玩具”初稿单一特定风格复杂像理解人一样理解
AI
人如何学习并应用设计系统学习组件库，同时也学习业务实际应用的典型界面。在设计过程中几乎不会先考虑设计系统里有什么。更关注设计本身，也更关注对同类设计的调研。对设计系统的掌握是—种“习得”，最关键的能力是触类旁通。“最好的学生”常常不遵守规定，达成—致性往往依赖检查。老板说：“我们参考
XXX
设计一下吧？”
“照着Airbnb
风格设计一个外卖产品”
新研究：让AI
习得设计系统，而非取用用户描述设计意图共同作为
Context
输入大模型生成将业务设计系统总结为AI
可读懂的版本
阶段性成果：主流设计系统可控AI
可理解的设计系统
路线选择：选择上限更高的不确定，相信模型进化的能力表达力丰富新的范式模版商店简单复杂“手搓”建立“玩具”初稿单一特定风格灵感涌现Claude
3.5
Sonnet像理解人一样理解AI意味着预判成长妙多
AI
2.0无壁垒？智能以外、上下文、演进的壳
妙多AI
2.0：设计师的
Copilot
无壁垒时代怎么构建壁垒？演进的壳智能以外上下文
关注智能以外：交互快一倍，体验好十倍1.魔法框：
Chat
Box
只是
Input
的一部分。2.图片处理/文字翻译：原生体验的便利性。
关注智能以外：最后一公里问题
哪儿2.图片生成：基于场景
上下文的“记忆”：我们如何与人合作？和
AI1.
请帮我生成—个咖啡点单小程序的首页。
请参考
请
遵循
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
请注意
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
我期望
…
…
…
…
…
…
…
…
…
…2.
请帮我生成—个咖啡点单小程序的商品选
择页。请参考
和人小张，你看下这些文档，把咖啡小程序做—版方案出来看看。 演进的壳：壳就是场景，回归本质找上限高的大场景生产者：设计行为的本质？创建新设计：生成迭代老设计：编辑
建立交互：原型生产资料：
界面的本质？图片文字图和文的布局生产关系：设计流程的本质？需求理解设计调研产出方案PTF从
Product-Technology
Fit到
Pre-Technology
Fit演绎游戏：未来工具关于未来
UI
工具：四个假设
我欣赏的两种分类法：其一By
Mootion，童超上手“炸裂”，完成最后一公里难。从不可用到可用。AI+所谓AI
Native+AI所谓AI
驱动PerplexityGoogleGammaPowerPointRunway剪映MidjourneyCanvaLovableCursor编辑器既是壁垒，又是负担。从有用到好用。
我欣赏的两种分类法：其二By
拾象，Cageagent酷Lovable,
Replit,
Bolt
Newprocitizen⾏Cursor,
Motiffcopilot难⽼Wix
AIDevin未来不是线性外推的，但演绎仍充满魅力。
演绎：5
年后，我们在使用怎样的界面设计工具？分类
1分类
2简述假设
1+
AIPro
*
Copilot手动编辑器解决
70%
工作，AI
助理解决
30%
工作。手动编辑器解决
30%
工作，AI
助理解决
70%
工作。假设
2AI
+Pro
*
Agent编辑器不重要，AI
像设计师—样在成熟的编辑器上绘制。假设
3AI
+Citizen
*AgentAI
生成和编辑解决
80%
+，更为简化的编辑器手动编辑收尾。假设
4AI
+被蚕食不存在界面设计工具，它只是—站式
Coding
产品的—个功能。
一些产研相关流程变化的洞察：来自硅谷80%+
代码
AI
创建没有技术债更信奉AI
先生成。Salesforce都开始强制全体研发用
AI
Coding。没有设计师
研发一抵五单个人效超高，信仰一人带多
Agents。早期团队所有人贡献定义产品。华人创业者
深入当地产品生长在当地，或是搬到当地打磨产品。研发在国内，国内研发团队红利仍然存在。
