🧭 这不是“让 AI 画几个好看的页面”这么简单。 真正重要的是，如何让 AI 在 Figma 里遵守结构、状态、安全区和交付约束，最后生成一套可以继续迭代的移动端 UI。

从流程稿到高保真交付稿

当我们说“让 AI 帮我创建一个登录注册流程”时，真正需要解决的问题通常不止一个。它既包括页面本身的视觉表达，也包括流程之间的衔接、不同状态的可读性、移动端安全区的处理方式，以及这套稿子是否能继续往交付方向推进。

如果只追求“先把页面画出来”，最后得到的往往只是几张好看的截图；如果从一开始就把视口、层级、状态栏、Home Indicator、safe area、组件一致性和内容密度都纳入约束，结果会更接近一份真正可落地的交付稿。

先定义屏幕，再定义内容

移动端 UI 最常见的错误，不是颜色不对，也不是排版不够漂亮，而是从一开始就没有把 屏幕外壳 和 屏幕内容 分开处理。

我更倾向于把每个 screen 拆成三个层级：

• 固定尺寸的 screen shell

• 放置业务内容的 viewport

• 独立的系统层，例如 Status Bar 与 Home Indicator 这样做有两个直接好处：

• 页面高度不会随着内容忽长忽短

• 内容能明确地被约束在安全区之内 对于 390 x 844 这一类 iPhone 视口来说，顶部和底部的安全区应当被视为真实的系统占位，而不是留白装饰。只有把这件事处理清楚，后面的布局节奏才有意义。

流程稿解决结构，高保真稿解决交付

流程稿和高保真稿解决的是不同问题。

流程稿更重要的是：

• 页面关系是否清楚

• 登录、注册、验证码、完成页是否组成一条顺滑路径

• 用户在关键节点是否知道下一步是什么 高保真交付稿更重要的是：

• 是否有明确的设备视口和安全区

• 顶部系统状态与底部手势区是否被正确处理

• 表单、按钮、说明文案和辅助状态是否在真实尺寸下仍然可读

• 页面之间是否形成一致的组件语言和视觉节奏 换句话说，流程稿是在解决“走得通”，高保真稿是在解决“交得出”。

Skill 不是装饰，而是行为约束

很多人会把 skill 理解成一组提示词，但在实际创建 UI 的过程中，它更像是一套任务级的行为约束。

它会影响的不是一句文案怎么写，而是整条执行路径：

• 创建前要不要先检查 page 结构
• 要不要先确认字体和可用的 design system
• use_figma 脚本是否需要先返回节点 id 再继续下一步
• 是否应该先建承载内容的 wrapper，再往里放多张 screen
• 是否需要在创建后再截图检查裁切、重叠和安全区问题 当 skill 开始约束“先做什么、后做什么、哪些 API 细节不能错”时，它对 UI 质量的影响，已经远远超过普通的审美建议了。

Status Bar 与 Home Indicator 不是可有可无

在概念稿里，很多时候我们可以不显式画出系统状态栏和底部 Home Indicator，只保留足够的呼吸空间，让大家先看清结构和节奏。

但在交付稿里，这两个元素最好被当成系统层来处理，而不是被忽略：

• Status Bar 决定顶部信息是否压到安全区
• Home Indicator 决定底部按钮、辅助信息和页脚说明是否真正可用 这件事的价值，不在于“更像 iPhone 截图”，而在于它迫使我们重新检查所有内容的真实占位。很多表单页在概念稿里看起来没有问题，一旦加上状态栏与底部手势区，问题就会立刻暴露出来：按钮太低、页脚被挤压、辅助信息与系统层互相打架。

当内容超出高度时，不要拉长屏幕

如果一个 screen 的内容开始超出高度，最糟糕的做法通常不是删掉内容，而是直接把 screen 拉长。那样确实“装得下了”，但它不再是移动端视口，而变成了一张长图。

更稳妥的处理方式通常有三种：

• 保持 screen shell 固定高度，让内容在 viewport 中滚动
• 如果页面职责过多，把它拆成两步或三步流程
• 折叠次要信息，把不影响首要任务的内容延后展示 这个判断很像产品设计本身：当一个页面开始容纳过多职责时，问题通常已经不只是排版，而是信息架构。

一份更可持续的 UI 交付稿应该长什么样

真正可持续的 UI 交付稿，至少要满足下面几件事：

• 所有 screen 采用一致的视口尺寸与外壳结构
• 组件在不同页面之间保持稳定的形态和节奏
• 状态页不是临时补上的，而是与主流程一起设计
• 文案、表单、说明信息在真实尺寸下依然可读
• 后续还能继续补 prototype、错误态和边界情况，而不是推倒重来 这也是为什么“先有结构，再有高保真”会更稳。流程稿负责找对路径，高保真稿负责把这条路径变成真实可交付的设计对象。

结语

AI 可以很快地产出页面，但真正有价值的不是“快”，而是能不能在快的同时保住结构、规则和交付质量。

从流程稿到高保真交付稿，最关键的不是多画几个阴影和渐变，而是让每一层约束真正进入创建过程：screen shell、safe area、状态栏、Home Indicator、组件一致性、内容密度，以及每一步之后都愿意回头检查结果。

当这些约束同时存在时，AI 生成的 UI 才会从“看起来不错”，慢慢变成“真的可以继续交付”。