ui设计提示词怎么写？从线框图到高保真的指令链
别绕了，ui设计提示词的关键不在一句写得漂亮，而在拆成组件、间距、色板三层分开发。我拿登录页高保真实测过：一句话甩给AI改了三轮还乱，拆三层后两轮就收敛到能交付的版本，耗时从40多分钟压到15分钟左右。
ui设计提示词要按组件、间距、色板三层分开写，AI出的高保真才稳定可用。八月底我给一个SaaS客户做登录页，第一版直接让AI"出一张高保真登录页"，结果按钮是渐变紫、输入框圆角一个16px一个24px、主色出现了9种色值。改到第三轮我认输了，重开对话从头写指令。这一篇就把那次翻车和修正过程拆给你看。
ui设计提示词为什么不能一句话甩给AI
因为一句话指令把所有决定权都交给了模型，它只能用训练数据里的"平均值审美"来填坑，出来的就是千篇一律的紫色渐变加随机圆角。这不是模型不行，是你的指令没接管它该被接管的部分。
我后来复盘第一版翻车，数了一下问题：9种蓝色、4种圆角半径、按钮和输入框的垂直间距从12px到36px不等。这些数字靠嘴吐槽没用，得靠指令去锁。
老实讲，AI默认填充的那套视觉，看起来像把三年前的Dribbble热门稿揉成一团。你想让它像你们的产品，就得自己当设计负责人，把决定权一层层拿回来。
怎么拿回来？分层。我把指令拆成三段发，每段只管一件事，改哪层就只重发哪层。这个思路和写文章指令先交代背景条件是一回事，把前提说清楚，后面才不跑偏，具体可以参考这篇把背景条件说清楚的写法：前提提示词怎么写？把背景条件说清楚。
组件层：把登录页拆成能点名的零件
第一层指令先列清单：页面有哪几个组件、每个组件长什么样、圆角和描边是多少，一个零件一个零件点名，别让AI自己猜页面结构。
我修正后的组件层指令长这样："登录页包含：顶部品牌logo（左上，48px高）、主标题（H1）、邮箱输入框、密码输入框、主按钮'登录'、辅助链接'忘记密码'、底部注册引导。输入框为白底、1px灰色描边、圆角8px；主按钮为主色实底、圆角8px、无渐变。"
效果差别很大。原来AI自己发挥，加了个装饰插画还把按钮做成了悬浮卡片；点名清单之后，第二轮出的图里7个组件一个不多一个不少。
不夸张地说，这一层省下的返工时间最多。组件层没写清楚，后面间距和颜色调得再好，结构错了还得整页重来。
一个小坑要提醒：AI很爱在按钮上加渐变。我在指令里补了一句"按钮禁止渐变、禁止阴影叠加"才按住。禁令和清单一样重要，光说要什么不够，得说不许什么。
间距层：别写合理留白，写8px网格
第二层指令用数字锁定间距：所有间距取8的倍数，明确到组件与组件之间24px、输入框之间16px、按钮上方32px，AI就不再随机发挥。"合理留白"这四个字是我踩过最深的坑。
第一版提示词里我写过"间距合理、留白舒适"，AI的理解和我的理解差了十万八千里。它给标题下面塞了8px，给按钮上面留了40px，整页重心歪的。
我试了下改成8px网格的说法："整页遵循8px间距网格，元素间距只能是8、16、24、32、48之一，表单内输入框间距16px，标题与表单间距32px。"第二轮出图，我拿尺子量了图上五处间距，全部落在网格上，误差在截图缩放范围内。
字号也归这层管。我定的是主标题28px、正文16px、辅助文字14px，三级封顶。AI原来给过11px的小字，凑近才看得清，客户那边肯定过不了。
色板层：锁死色值，砍掉随机发挥
第三层指令直接给色值：主色、辅助色、文字色、背景色各写一个具体hex值，并声明"只能使用以下颜色"，AI就不会自作主张掺进新的蓝。
我的写法："主色#2563EB，文字#1F2937，次要文字#6B7280，背景#F9FAFB，错误状态#DC2626。整页只允许使用上述5个色值，禁止引入其他颜色，禁止渐变。"
改完这层，主色从9种收敛到1种。设计师同事看了一眼说终于不用挨个吸色了。
三层指令合起来长这样，顺便附上每层的翻车点和修正动作：
| 指令层 | 核心写法 | 不写会怎样（实测） | 修正后 |
|---|---|---|---|
| 组件层 | 逐个点名组件＋材质禁令 | 多出插画、按钮变渐变 | 两轮收敛，组件零缺失 |
| 间距层 | 8px网格＋具体数值 | 间距12到36px随机跳 | 五处实测全部落在网格 |
| 色板层 | 5个hex值＋"禁止其他颜色" | 9种蓝色混用 | 主色收敛到1种 |
这套路数其实不止用在界面上。先定结构、再定规则、最后锁细节，这个顺序和写长文时控制段落的指令链是一个逻辑，感兴趣的可以看这篇框架拆解：ai写作提示词的框架？选题到成稿的指令链。
回过头看那次翻车，问题从来不是AI画不出高保真，是我把设计决策全推给了它，它只好用平均值交差。组件、间距、色板三层指令写清楚之后，登录页两轮收敛，客户一次过稿。ui设计提示词的价值就在这：你不写规则，AI就替你写，而它写的规则永远偏紫。
常见问题
三层指令要一次发完还是分段发？
建议分段发。先发组件层，看结构对不对；对了再发间距层，最后发色板层。一次全发也能用，但出问题时你分不清是哪层惹的祸，分段发每轮只改一层，返工成本最低。
这套方法适用于Figma里的AI插件吗？
适用，且收益更明显。生成式UI插件对结构化指令的响应比纯生图模型好，组件清单能直接映射成图层。我在插件里跑过同一套三层指令，出的是可编辑图层而不是一张图，改起来省事。
指令太长会不会让AI忽略后半段？
我实测单条指令在300字以内没有出现忽略，超过这个长度就开始丢细节，比如漏掉禁用渐变那句。控制办法是把禁令放指令开头，别放结尾，模型对开头的约束执行得最稳。
没有设计基础能直接套这三层吗？
能。三层里只有色板层需要选定hex值，直接抄主流产品的公开色板也行；组件层照着竞品页面数零件，间距层统一用8px网格，这三步都不需要设计训练。