ui提示词怎么写才出能用的界面草图？初级UI的实测写法

ui提示词最大的坑，是把它当成普通绘画提示词来写。我吃过这个亏——第一版就甩了句「现代风格登录页，蓝紫渐变，高级感」，出了四张图，两张是营销落地页，一张按钮糊成色块，能看的没有。

后来盯着那批废图想明白了：AI画界面缺的不是氛围词，是结构信息。你不说清页面分几块、每块放什么，它就自己编。编出来还挺自信，就是不对。

ui提示词和绘画提示词差在哪

绘画提示词管画面氛围，ui提示词管页面骨架：分区、组件、层级、留白，一样都不能省。风格词压到最后当点缀，位置摆反了整张图就飘。

绘画提示词的经典结构是主体加风格加光影，比如「一只橘猫，水彩，暖光」。模型自由发挥的空间很大，画成什么样都算对。

界面不一样。界面有对错——导航就该在左边或顶部，按钮就得像按钮。你给「一只橘猫」级别的信息量，等于让它蒙着眼画。所以ui提示词得多答三样东西：页面分成几个区，每个区里有什么组件，整体什么比例。

举个我真实在用的例子。出一张后台仪表盘草图，我会写：「桌面端后台仪表盘草图，左侧窄导航栏含logo和六个菜单项，顶部横向搜索栏加用户头像，主区域三列卡片，其中一列是数据统计卡，其余两列是图表占位，浅灰底白卡片，线框风格」。信息密度完全是另一个量级。

还有个容易忽略的：留白。你写「留白充足」，出来的图组件间距松一档，正好给后期标注腾地方；写「布局紧凑」，图就挤，适合塞进单页方案里。这两个词我来回试过，比写一串尺寸数字管用。

我出草图常用的三段写法

先说页面分区，再列组件清单，最后补风格和比例约束，三段写完直接出图。这套流程我改了三版才顺手，现在出一张草图大概15到20秒，十张里能挑出两三张贴进评审稿。

第一段，分区。一句话说清页面骨架：「移动端登录页，上半部分logo和标题，中间两个输入框，底部一个主按钮加一个文字链」。就这一句，出图的稳定性立马上一截。

第二段，组件清单。把每个区里的东西点名，别写「一些输入框」这种糊涂账。AI对数量的理解比想象中靠谱，你说「三个标签页」，它基本真给你三个。

第三段，约束。比例、风格、留白全塞这里：「手机竖屏比例，线框风格，黑白灰，不加图片占位」。说个翻车经历——有次我忘了写比例，同一批图里混出来两张桌面端截图，尺寸全不对，白跑一趟。

顺便说下我的搭配：出草图我没走Figma的AI插件那条路，直接在聊天框里出图，挑中了的截下来手动标注。插件我试过一次，出的图被自家组件库框得死死的，想换个卡片布局都不听。

对了，线框风格这个词挺关键。写实风格出来的界面图看着唬人，评审时容易被抠细节；线框风大家默认它是草图，反而没人纠结像素。

灵感参考和能用的草图，写法怎么切？

找灵感时风格词放开、结构放松；出能用的草图时反过来，结构写死、风格收着。两套标准别混用，混了就两头不讨好。

我自己把AI出图分成两种用途，写法完全分开：

上周出后台改版方案，我先跑了两批纯灵感图，挑了三张贴进心情板；方向定下来后，再按三段写法出结构草图。组长那句「这版方向对」就是这么来的。同一件事分两步走，比一锅炖省心。

说实话，回头看那张「蓝紫渐变高级感」的废图，问题从来不是AI画得差，是我没把话说清。ui提示词写的就是交代结构的那几句话——分区、组件、约束，说清了，AI出的草图真能省下搜参考图的功夫。工具还是那个工具，看你跟它怎么说。