先说结论:UI 提示词的本质是写规格书,不是写诗意描述
做了二十多年设计,我见过太多设计师把 Midjourney 当成老虎机。打开输入框,敲一句”modern dashboard ui design, clean, minimal, beautiful, 4k”,空格回车,然后盯着四宫格开始等命运女神降临——这一张卡片太多,那一张导航跑到左边,第三张干脆生成了一张类似宣传海报的东西。于是再抽、再抽、再抽,一下午过去,硬盘里躺了六十张废图,一张都不能用。
我们把这种行为叫作抽卡。抽卡的问题不在于”抽”,而在于你根本不知道自己在抽什么:你没有给出可被执行的约束条件,模型只能用它自己对”modern dashboard”的理解去猜,而它的理解和你的理解根本不是一回事。绝大多数”Midjourney 生成 UI 不好用”的结论,其实来自一个方法错误——用写画面的方式去写界面。
这篇文章只讲一件事:把 UI 提示词写成一份结构规格书。规格书是什么样的?是你在交付给前端之前,那份写着”顶部是搜索栏,高 56px,左右留白 24px;下面是三列卡片列表,卡片圆角 12px;底部固定导航,四个 tab”的文档。规格书不抒情、不朦胧、不留想象空间,它的每一句话都可以被验证。Midjourney 生成 UI 的正确姿势,就是把这类文档翻译成它听得懂的语言,再用参数把不听话的部分压住。
全文围绕”两层结构”展开:参数层负责管束模型的行为(比例、风格化强度、排除项、随机种子),描述层负责交代页面的内容与秩序(分区、组件点名、栅格、留白、色彩、圆角)。参数层是骨架,描述层是血肉,缺一层,你就在抽卡。这两层都写扎实之后,Midjourney 生成 UI 的命中率会从”二十抽一”跃升到”十二抽三到四”,而剩下的工作——把概念稿重画成可编辑稿——交给 Figma。
为什么你一直在抽卡:三个根因
根因一:提示词只在描述”感觉”,没有描述”结构”
“clean”、”minimal”、”modern”、”elegant” 这些词在 Midjourney 的词库里几乎等于噪声。它们不指向任何具体的像素安排,模型只能把它们翻译成”更少的元素、更淡的颜色、更细的线”,然后自由发挥。你在描述一种情绪,它给你一张情绪正确的图,但结构完全错误。UI 是结构密集型的产物,描述结构才是有效输入。
根因二:没有锁比例,模型按自己的审美裁切
UI 的布局意图和画幅是强绑定的。一条三列卡片的桌面布局,落在 1:1 或 4:5 的图里,会被迫压缩成两列甚至一列,底部导航被裁掉半截。你不写 –ar,模型默认按方图或它认为好看的比例出图,你的布局逻辑在第一秒就被破坏了。更麻烦的是,这种破坏很隐蔽——图看起来”挺好看”,但就是不能用。
根因三:风格化参数留在默认高位,模型的”自我表达”压倒你的指令
–s 默认是 100。这个数字意味着模型有相当的自由度去加光照、加渐变、加装饰、加它觉得”美”的东西。对插画是好事,对 UI 是灾难:它会在你的卡片上加玻璃拟态、加霓虹描边、加一堆你根本没要求的悬浮阴影。你不降 –style raw、不降 –s,就是在默许模型改你的稿。
三根因对应的解法
| 根因 | 典型症状 | 对应解法 | 落在哪一层 |
|---|---|---|---|
| 只写感觉不写结构 | 风格对了但布局完全不对,组件随机出现 | 分区描述 + 点名组件 + 写死栅格 | 描述层 |
| 没有锁比例 | 布局被裁切,导航缺失,卡片数量错位 | –ar 16:9 / 9:16 / 9:20 按端写死 | 参数层 |
| 风格化过高 | 过度装饰、玻璃拟态、霓虹光效、无端渐变 | –style raw + –s 0~50 | 参数层 |
| 结果不可复现 | 第二天想再调,怎么都抽不回那张 | 记录 –seed,必要时固定种子再微调 | 参数层 |
| 文字糊成一团 | 标题是乱码,按钮里写着不存在的词 | –no text,并接受文字必须重画 | 参数层 + 工作流 |
参数层全解:五个参数就是五道闸门
在讲参数之前,先划清一个边界:参数层只能管住行为,不能提供内容。参数能让 Midjourney 生成 UI 时少加戏、不越界、不乱裁切,却无法替你告诉模型”页面上该有什么”。所以每一套模板里,参数都只是最后那一行,真正占篇幅的永远是结构描述。参数决定”别做错”,结构描述决定”做对”,而抽卡的反面恰恰是后者——没有结构描述的约束,再低的风格化也只是让你抽到一张更素的废图。
先把参数层讲透。Midjourney 当前默认版本是 V8.2,自 2026 年 7 月 24 日起成为默认模型。下面这五个参数是 Midjourney 生成 UI 时最常用的闸门,它们的顺序就是你的使用频率。
–ar:比例是第一约束
–ar 控制宽高比,写法是 –ar 16:9。UI 场景里,比例不是审美选择,而是设备选择:
- –ar 16:9:桌面端主场景,Dashboard、后台列表页、Web 应用主界面。也是本文标题里点名的比例,因为它最接近 1440×810 的桌面视口。
- –ar 9:16:移动端全屏页面,适合需要展示完整一屏的落地页、个人主页。
- –ar 9:20:更接近 iPhone 真实比例,适合移动端列表页、详情页这类”长一屏”的界面。
- –ar 4:3:平板、iPad 横屏,以及需要稍微方一点的卡片型页面。
一个实践中的坑:–ar 只改变画幅,不保证元素分布。你写了 16:9 但没写”三列”,模型可能给你两列大卡片。所以 –ar 必须和描述层的栅格声明配套用,单写 –ar 解决不了布局问题。
–style raw:让模型闭嘴,只听你的
–style raw 的作用是降低模型自作主张的风格化倾向,让出图更贴近提示词本身,画面更”素”。这个词很关键——素,意味着更少的装饰、更保守的光影、更接近真实产品的克制感。对 UI 概念稿来说,”素”恰恰是优点,因为你要的是一个不抢戏的容器,而不是一张作品。
但要说清楚:–style raw 不是”逼真模式”,也不是”UI 模式”,它不会让模型突然学会画界面。它只是减少了模型的自由发挥。如果你描述层本身是垃圾,–style raw 只会让你更快地得到一个”素一点的垃圾”。参数救不了描述。
–s / –stylize:风格化强度的旋钮
–s 控制风格化强度,越低越贴提示词。默认 100。给几个可用的档位参考:
- –s 0 ~ 25:极限贴稿。适合结构最复杂的 Dashboard,你希望模型一丝不苟地照做,不要自己加戏。
- –s 50:最常用的甜点区。结构基本服从,同时保留一点点视觉处理的灵光,比如恰当的阴影层级。
- –s 100 及以上:只在做”风格探索”时用——你想看看同一套结构在不同视觉语言下长什么样,这时候让模型放开手反而有价值。
我的建议是:结构稿阶段一律 –s 25~50,确定方向后再用高 –s 做风格变体。顺序反过来,你会被一堆漂亮但结构错误的东西反复误导。
–no:用排除法保命
–no 用来排除元素,UI 场景几乎必写的是 –no text, watermark。理由很直接:Midjourney 生成 UI 时的文字渲染依然不稳,与其让它在标题区糊出一串伪文字,不如直接排掉,让位置空着,留给 Figma 里填真文案。此外还可以按需排除:–no photo, 3d render, glossy, neon, glassmorphism —— 这些是最常见的”过度装饰污染源”。
但要注意,–no 是软约束,不是硬屏蔽。它降低概率,不保证绝对不出现。所以看到一点点文字残影是正常的,不要因此断定提示词坏了。
–seed:把运气变成可复现的手艺
–seed 固定随机种子,让同样的提示词尽量给出同样的结果。它的真正价值不在于”复现一张图”,而在于微调:你抽到一张结构八成对的图,记下它的 seed,然后只改提示词里的一个变量(比如把”12px 圆角”改成”20px 圆角”,或者把主色从靛蓝改成墨绿),用同一个 seed 再出一次,你会得到一张”只变了一处”的对照图。这才是设计师该有的控制感。
参数速查表
| 参数 | 作用 | UI 场景推荐值 | 常见误用 |
|---|---|---|---|
| –ar | 控制宽高比 | 桌面 16:9;移动 9:16 或 9:20;平板 4:3 | 不写比例,任由模型裁切布局 |
| –style raw | 降低风格化,更贴提示词 | UI 结构稿一律开启 | 以为开了就能画 UI,忽略描述层 |
| –s / –stylize | 风格化强度 | 结构稿 0~50,风格探索 100 以上 | 全程默认 100,被过度装饰淹没 |
| –no | 排除元素 | text, watermark;按需加 photo, 3d render, neon | 当成硬屏蔽,看到残影就以为提示词错了 |
| –seed | 固定随机种子 | 选定方向后记录,用于单变量微调 | 只在复现时用,不做对照实验 |
| –v 8.2 | 指定模型版本 | 默认即 V8.2,跨团队协作时建议显式写出 | 与旧版混用导致结果不可比 |
描述层:把页面拆成一条流水线
参数层只是闸门,真正决定成败的是描述层。我的写法固定成一个七段式结构,顺序不能乱,因为 Midjourney 对提示词前段的权重更高,越靠前的信息越不容易被稀释。
七段式:从”是什么”到”什么规范”
- 页面类型与端:先说清楚这是什么端、什么页面。例如 “A desktop SaaS analytics dashboard UI”。
- 分区(从上到下):这是最关键的一段。用 top / upper / middle / lower / bottom 这类方位词,把页面切成 3~5 个带子,每个带子说清楚里面有什么。分区描述是”结构描述”的骨干。
- 组件点名:用 UI 行业的标准英文名词点出关键组件——search bar、card list、bottom navigation、sidebar、data table、filter chips、KPI tiles。点名比形容有效十倍。
- 栅格:写死列数。例如 “a strict 12-column grid”、”3 equal-width columns with 24px gutters”。”strict” 这个词有奇效,它会让模型倾向于对齐而不是乱摆。
- 留白与密度:声明边距和内边距,例如 “generous outer margins of 48px”、”compact density with 16px padding inside cards”。密度声明能直接决定页面是”通勤感”还是”呼吸感”。
- 色彩与圆角:给具体值,例如 “off-white background #F7F8FA, a single accent color, 12px corner radius, 1px hairline dividers”。UI 里最忌讳”colorful”这种词。
- 负面约束:把不要的东西再口头强调一遍,例如 “no illustrations, no photographs, no decorative graphics”。
分区描述为什么比”一页界面”有效
说 “a dashboard page” 等于什么都没说。说 “a fixed top bar with a search bar on the left and an avatar on the right; below it a row of four KPI tiles; in the main area a two-column layout with a wide chart on the left and a card list on the right” ——这就等于给模型一张施工图。分区的本质是把一整张画布拆成若干可独立理解的矩形,每一个矩形里只有一个明确任务。模型对”矩形里的单一任务”处理得很好,对”一整页的综合性氛围”处理得很差。这就是结构描述优于形容词的地方。
组件点名为 Queen:为什么英文名词是硬通货
Midjourney 的训练数据里,”search bar”、”card list”、”bottom navigation” 这些词各自锚定了成千上万张真实截图。当你写下这些词,你调用的不是描述,而是一整类视觉原型的统计平均。相对地,你写”顶部有个能搜索的输入框”,模型需要自己去做语义降解,降解过程中误差就产生了。在 UI 提示词里,名词永远比动词和形容词值钱。这也是本文标题为什么要把”搜索栏/卡片列表/底部导航”写死——它们是三个高频、高辨识度的组件原型,点名之后,模型的自由度被压缩到可接受范围。
用对比色块把分区”焊死”
还有一个很土但异常有效的技巧:在结构稿阶段,给不同分区用极淡的不同底色(比如主内容区 #FFFFFF、侧栏 #F7F8FA、底栏 #FFFFFF 加 1px 上边框)。色块边界一出现,模型就倾向于把每个区域当成一个独立的容器来处理,跨区乱窜的元素会明显减少。等你确认结构之后,再把描述改回统一底色——因为真实的界面里,分区靠的是层级与留白,不是靠颜色。
常用组件词表(直接抄)
- 导航类:top navigation bar、sidebar menu、bottom navigation with four icons、breadcrumb、tab bar
- 输入类:search bar with a magnifier icon、filter chips row、dropdown selector、toggle switch、slider
- 内容类:card list、product grid、data table with zebra rows、KPI tiles、chart panel、empty state block
- 操作类:primary CTA button、secondary ghost button、floating action button、pagination
- 反馈类:toast、modal dialog、skeleton placeholder、badge
一条经验:先估结构复杂度,再定画幅与参数
出图之前花十秒钟估一下:这个页面有几个分区、几个组件、几列?分在三档里——简单(小于 10 个元素)、中等(10 到 20)、复杂(20 以上)。简单页面用 –ar 9:20 或 4:3,–s 可以给到 50;中等页面 –ar 16:9,–s 25;复杂 Dashboard 用 –ar 16:9,–s 0 到 10,并把结构描述拆成尽可能多的小条目。这不是玄学:元素越多、模型自由发挥的空间越大,你就越要用低风格化把它的发挥压到零。抽卡之所以低效,很大程度上就是因为你用一个参数打天下。
桌面 Dashboard 模板:–ar 16:9 的主场
Dashboard 是 Midjourney 生成 UI 里最容易出彩也最容易翻车的类型,因为它的元素密度最高。密度高意味着模型犯错的机会多,所以这一套模板必须写得最死:三栏结构、固定侧边栏宽度、KPI 行数量、图表与列表的位置全部写死。
A desktop SaaS analytics dashboard UI, flat vector interface, top-down straight-on view, no perspective.
LAYOUT (top to bottom):
- Fixed left sidebar 240px wide, vertical menu with 6 items, logo at the top.
- Top bar across the content area: a wide search bar on the left, a bell icon and a circular avatar on the right.
- A row of 4 equal KPI tiles with large numbers and small trend labels.
- Main area split into two columns: left column 2/3 width holds a line chart panel, right column 1/3 width holds a vertical card list of 4 recent activity cards.
- Bottom of the content area: a compact data table with 5 rows.
GRID: strict 12-column grid, 24px gutters, elements aligned to grid lines.
SPACING: 32px outer margin, 20px padding inside panels, moderate density.
COLOR: off-white background #F7F8FA, white cards, one single accent color (deep indigo), dark gray text.
SHAPE: 12px corner radius on cards and buttons, 1px hairline dividers, very subtle drop shadows.
NEGATIVE: no illustrations, no photos, no decorative graphics, no 3d, no glassmorphism, no neon.
--ar 16:9 --style raw --s 25 --no text, watermark --v 8.2
这套提示词的玄机在第三段的 2/3 width 与 1/3 width:一旦你给了明确的分栏比例,模型就不会把图表和列表摆成上下叠放的奇怪结构。你写”主线图 2/3 + 卡片列表 1/3″,等于把视觉重心也交代了。另外注意我用了 “top-down straight-on view, no perspective”——不加这句,模型有概率给你一个带透视的 3D 展示台效果,那更像宣传图而不是界面。
再提示一点:KPI tile 的数量写死成 4。如果不写,你可能拿到 3 个、5 个甚至 7 个,这在栅格上是灾难。凡是涉及”数量”的地方,一律写阿拉伯数字。
移动端列表页模板:–ar 9:20 或 9:16
移动端是 Midjourney 生成 UI 的主战场之一,尤其移动端这类结构清晰、留白较多的界面,模型更容易做对。但移动端有一个硬约束:底部导航必须存在且固定。很多抽卡的失败案例都是因为底栏消失了,或者被内容挤出了画布。解决办法是在提示词里把底部导航单独列一条,并明确 “fixed at the bottom”。
A mobile app list screen UI, flat vector interface, straight-on view, no perspective, inside a phone screen without device frame.
LAYOUT (top to bottom):
- Status bar zone: minimal, no text.
- Header row: page title on the left, a round icon button on the right.
- A full-width search bar with a magnifier icon and a subtle rounded container.
- A horizontal row of 4 filter chips, the first one in active state.
- A vertical list of 6 stacked cards, each card: left thumbnail square with rounded corners, title line, two-line meta description, trailing chevron.
- Bottom navigation bar fixed at the bottom, 4 icon items with the first one active.
GRID: single column, 20px side margins, 12px gap between cards.
SPACING: comfortable density, 16px padding inside each card.
COLOR: pure white background, light gray dividers, one accent color (teal), dark gray text.
SHAPE: 16px corner radius on cards, 12px on thumbnails, 999px pill on filter chips and search bar.
NEGATIVE: no photos, no illustrations, no realistic device mockup, no shadows stacked on shadows.
--ar 9:20 --style raw --s 50 --no text, watermark --v 8.2
关键点在 “without device frame”。默认情况下,模型很喜欢给你画一个 iPhone 外框、打上柔光、摆在渐变色背景上——这是手机展示渲染图的思路,不是 UI 稿的思路。加上这句,画面会回归到纯粹的屏幕内容。如果模型还是给你加了外框,把 –s 再往下压到 25,并在负面段里补 “no smartphone mockup, no device bezel”。
为什么移动端更适合作为入门练手
如果你刚接触 Midjourney 生成 UI,我建议从移动端列表页开始,而不是被各大教程推崇的 Dashboard。原因很简单:结构描述越短,模型犯错的自由度越小。移动端一列布局、每行一个组件、底栏固定,结构描述的覆盖面几乎可以穷举;而 Dashboard 的 12 列栅格里有几十个元素的位置关系,任何一段描述写漏了,抽卡失败率都成倍抬头。先用移动端把“结构描述—参数—筛选”的肌肉记忆练出来,再上桌面端,会顺很多。
“filter chips 第一个是选中态”这个细节值得经常用。选中态是 UI 的语义特征,模型一旦画出高亮芯片,整张图立刻有了“这是真实界面”的可信度,同时你也验证了它理解了状态这个概念。
用“状态”检验模型是否读懂了你的结构
顺着上一段往下说一层:这是用 Midjourney 生成 UI 时最实用、成本最低的检验手段——给描述加一个状态,看模型是否照做。它画对了,说明这一段结构被读懂了,大胆往下推进;它画错了,说明这段描述太模糊,趁早改措辞,而不是反复抽卡赌运气。同样的检验可以套用在“侧栏第二个菜单项处于选中态”“卡片里第三条有一枚红色 badge”“搜索栏有光标”——状态越多、越具体,你越能判断这张图是“蒙对了”还是“真的照做了”。这个小动作,能帮你把七成的无效重出挡在门外。
落地页模板:–ar 16:9 的营销变体
落地页介于界面和海报之间,是 Midjourney 生成 UI 时最容易”跑偏成插画”的类型。它的结构是标准的:hero 区、信任条、特性三栏、CTA。这套模板的重点是把每一块的高度比例和内容类型写死,避免模型自由发挥成一张创意海报。
A B2B SaaS landing page hero section UI, flat vector interface, straight-on view, no perspective.
LAYOUT (top to bottom):
- Slim top navigation bar: logo left, 5 nav links center, a primary CTA button right.
- Hero band about 50% of the canvas height: left half holds a headline block placeholder (empty bars instead of real text), a subline placeholder, and two buttons side by side; right half holds an abstract product UI preview card.
- A thin trust bar with 5 monochrome partner logos as simple geometric placeholders.
- A three-column feature row, each column: small line icon, short heading bar placeholder, two lines of body placeholder.
- Bottom strip: one centered call-to-action button.
GRID: strict 12-column grid, 80px outer margins, 32px column gutters.
SPACING: airy, generous whitespace, clear vertical rhythm with 64px section spacing.
COLOR: white background, one accent color (warm orange), near-black headings, mid-gray body.
SHAPE: 8px corner radius on buttons, 16px on the preview card, no decorative illustration.
NEGATIVE: no mascot, no 3d characters, no photos, no gradient mesh, no abstract blob shapes.
--ar 16:9 --style raw --s 50 --no text, watermark --v 8.2
这套模板里最有用的一句是 “empty bars instead of real text” 与 “placeholder”。让模型画占位条(灰色圆角矩形),而不是让它在标题位置凭空写字。占位条的视觉值是稳定的,写字的结果多半是乱码。这也是为什么 Midjourney 生成 UI 的正确用法是”生成骨架与节奏”,而不是”生成成品”。
落地页的特殊难点:它是”界面”和”海报”的混血
落地页难在两端拉扯。一方面它有完整的 UI 结构(导航、按钮、卡片、区块),另一方面它又承担着说服的职能,天然带有海报的视觉野心。模型会敏锐地捕捉到后者,然后一路加滤镜、加插画、加光效,最后交给你一张视觉漂亮但结构塌了的图。所以落地页模板里我特意把”每块的高度比例”也写了进去——hero 约占画布一半,特性三栏高度一致——因为比例是结构描述里最容易被忽略、却最能锚定画面的那一类信息。比例一旦写死,模型的海报冲动会被压缩到一个可控的盒子里。
模型在海报冲动和控制欲望之间会不断来回,比例一旦写死,它就只能在这个盒子里发挥——这也是结构描述为什么在营销页上比在后台页上更值钱的原因。
为什么文字必须留给 Figma
这是所有 Midjourney 生成 UI 教程里最容易被含糊带过的一点,我要把它说透:不要指望 Midjourney 把中文甚至英文 UI 文案写对,这是当前模型能力边界,不是提示词技巧问题。
扩散模型写字,本质是在”画字”
图像生成模型对文字的处理,是在像素层面模仿字形轮廓,而不是按字符编码逐字排布。短单词(比如一个四字母的按钮文案)尚可,稍长的句子就会出现字符粘连、字母错位、笔画增生。而且 UI 里文字往往极小,字号在整张图里占比很低,语义约束就更弱了。哪怕 V8.2 在文字渲染上比早期版本有进步,它对”一段 30 字的界面说明”也无能为力。
更现实的问题是:你本来就不该用它写文字
就算模型能写真字,UI 稿里的文字也是不可用的——因为它不是文本图层,无法编辑、无法改字重、无法换字体、无法做 i18n。你在图上看到的任何”字”,在你重建的时候都要推翻重来。所以正确的姿势是:在提示词里主动要求”占位条 / 无文字 / 纯几何占位”,把文字层的位置留白,让模型专注在你真正需要它帮你解决的事情——结构、比例、节奏、密度。
这条边界反而让工作流更清晰
想通这一点之后,Midjourney 的定位就变得非常干净:它是一台”结构草图的渲染机”。它给你三样东西——布局的直觉、视觉密度的参考、配色与圆角的初步气质。它不给你:可编辑的组件、准确的文案、能直接交付的切图。接受这个定位,你后面所有的方法论都顺理成章。
一句话记住:Midjourney 给你的是“这个页面看起来大概该长这样”,Figma 给你的是“这个页面真的长这样”。前者是灵感的固化物,后者是产品的实体。
一个容易被忽视的副作用:文字会偷走你的注意力
我观察过团队里的设计师,最容易在 Midjourney 生成 UI 时浪费时间的行为,就是盯着图上那串伪文字反复重出,试图“把这行字修对”。这背后其实是一种错觉——只要文字对了,这张图就像真的了。但文字对不了,也不需要它对。更聪明的做法是:看一眼图上文字的位置和长度,判断它帮我确认了什么(比如卡片标题是单行还是双行、按钮文案长度是否撑得开、导航标签几个字),然后立刻离开这张图,去做结构重建。文字在这里的唯一作用是“尺子”,不是“内容”。
一次出 12 张,怎么选那 1 张
专业选手也会”抽”,但他们抽完之后有一套筛选标准,而不是凭感觉挑最顺眼的。我的做法是固定出三批、每批四宫格,凑满 12 张,然后用下面这套五级筛子往下过。
五级筛选法:从结构到气质
- 第一筛:结构完整性(硬性淘汰)。三个点名组件是否全部在场?搜索栏、卡片列表、底部导航,缺一个直接出局,不管多好看。这一筛通常淘汰掉 4 到 6 张。
- 第二筛:比例与栅格正确性。卡片列数是否等于你要的列数?主内容区是否有明确分栏?元素有没有明显歪斜、错位、压边?这一筛再淘汰 2 到 3 张。
- 第三筛:装饰污染检查。有没有多余的玻璃拟态、霓虹光、3D 阴影、贴图纹理?有没有出现”一坨不知道是什么”的装饰图?装饰越少,可重建性越高。
- 第四筛:视觉密度与节奏。留白是不是你想要的那一档?卡片间距是否均匀?版面重心有没有飘?这一筛开始考验审美判断,通常剩下 2 到 3 张。
- 第五筛:可延展性。闭上眼想一想:这张图的结构能不能扩展成第二页、第三页?如果它只适合做一张孤品,那它对一个产品没有价值。
一个小提醒:不要选”最美的”,要选”最像规格书的”
这是最反直觉的一条。12 张里往往有一张视觉冲击力最强,光影讲究、层次丰富,但它恰恰是最难重建的,因为它的美感来自模型的主观处理,而不是你的结构。你要选的是那张”最平淡、最工整、每个元素都在你指定的位置上”的图。它的价值在于它能被 1:1 地翻译回 Figma。美貌在重建阶段是廉价的,结构才是稀缺品。
一个小提醒:主动做”失败对照”
选中之后别急着重建,先做一次反向实验:把选中的那张图的 seed 记下,把结构描述删掉一半,比如去掉底部导航那一条,再用同一个 seed 出一批。你会看到底栏真的消失了——这就是对照实验。它带来的不只是好奇心的满足,而是一种可积累的直觉:你知道哪一句描述在负责哪一块结构。做上十几轮,你就能在写提示词之前预判模型的反应,Midjourney 生成 UI 的”手感”就是这么练出来的,不是靠多抽几百张练出来的。抽卡是运气,对照是科学,这中间的差距,恰好就是业余和职业的差距。
筛选记录表(建议每次填写)
| 编号 | 三组件齐全 | 列数与栅格 | 装饰污染 | 密度吻合 | 可延展 | 结论 |
|---|---|---|---|---|---|---|
| Seed 1024 第 1 张 | 是 | 3 列正确 | 轻微玻璃感 | 偏松散 | 是 | 备选 B |
| Seed 1024 第 3 张 | 缺底部导航 | — | — | — | — | 淘汰 |
| Seed 2048 第 2 张 | 是 | 3 列正确 | 干净 | 吻合 | 是 | 主选 |
| Seed 2048 第 4 张 | 是 | 2 列 | 干净 | 偏拥挤 | 弱 | 备选 C |
| Seed 3072 第 1 张 | 是 | 4 列 | 有插画 | — | 否 | 淘汰 |
这张表的价值不在于记录本身,而在于它强迫你用同一把尺子去丈量 12 张图,避免”看到第三张觉得不错就定了”的懒惰。做了二十多年设计,我最信的判断是:能写出筛选标准的人,才真的掌握了这个工具。
V8.2 的参考图能力,对 UI 帮助有限
很多人听说 V8.2 的 Edit Model 取代了 Omni Reference、Character Reference 和 Retexture,支持最多 4 张参考图,就觉得”那我可以把设计稿丢进去让它照着做了”。这个期待要打个折。
参考图擅长”像”,不擅长”准”
参考图的作用是转移风格、色彩、氛围、构图气质,它对”这张图的按钮在左边第二个、宽 320px、圆角 8px”这类精确结构信息几乎是失明的。你丢一张 Figma 截图进去,得到的大概率是一张”气质相似、结构走样”的图:配色像了,字体感觉像了,但栅格塌了、间距乱了、组件顺序变了。对 UI 来说,这恰恰是最没用的那种”像”。
三个具体的受限点
- 精确性缺口:参考图做不到像素级或元素级的对位,模型终究是在做图像生成,而不是在做布局解析。它能读”这是什么风格”,读不了”这个卡片的 padding 是 16px”。
- 版本能力差异:V8.2 不兼容 –tile 与 Remix。这意味着老教程里那套”Remix 模式 + 局部重绘”的 UI 迭代手法在 V8.2 下需要换思路,很多人按照旧教程操作发现按钮不生效,其实不是操作错了,是版本不兼容。
- 参考图会诱导”成品幻想”:越像真实界面,越容易让人误以为可以直接用,从而跳过 Figma 重建这一步——然后就带着一堆文字乱码的图去和开发沟通,最后返工。
那参考图在 UI 里到底怎么用
我的建议是把参考图用在”气质对齐”而不是”结构复刻”:比如上传两张你已经定稿的品牌视觉稿,让它提取配色与质感,然后结构仍然完全靠文字描述去写死。参考图管氛围,文字管结构,参数管约束——三者各司其职,不要指望一个角色干两件事。
从 MJ 图到 Figma:描结构,不描像素
这是 Midjourney 生成 UI 工作流的最后一段,也是最容易被跳过的。选中一张图之后,正确的做法不是把它垫在 Figma 底下照着描,而是把它当成一份测量图纸来读。
第一步:拆三层信息
看一张图,只提取三样东西:分区带(页面被切成几段)、组件清单(每一段里有哪些组件、各自数量)、相对比例(侧栏占几分之几、卡片行高与间距的比值)。像素值不用照抄,因为 MJ 图的像素本来就不是真实尺寸;比例才是可迁移的。
第二步:用真实设计系统重建
进 Figma 之后,第一步不是画矩形,而是打开你的间距系统(4 或 8 的倍数)、圆角系统(4/8/12/16/24)、字阶系统,然后按比例把 MJ 图换算成真实数值。比如图中侧栏大约占宽度的 1/6,在 1440 宽的稿里就是 240px,这是一个设计系统里能落地的数。若你照抄目测的 233px,会在后续所有对齐里制造麻烦。MJ 图给你的是”意图上的 240″,你要把它落成”真实的 240″。
第三步:做真实的交互状态
MJ 图是静态的、单状态的、理想状态的。重建时你要补齐它不具备的东西:hover、active、disabled、空状态、加载骨架屏、超长文案换行、极端数据量下的分页。这些是 UI 的真实工作量,也是为什么 Midjourney 生成 UI 永远只能是起点。
重建时的四个换算习惯
版心:从”看图”到”定数”
先定版心,再摆放。桌面 1440 宽的稿,常见版心 1200,左右各 120 的边距。MJ 图里的”32px outer margin”按这个口径换算后往往需要放大,因为模型图里视觉边距偏窄。定死版心之后,剩下的元素全部靠栅格吸附,效率翻倍。
间距:只允许落在 4 的倍数上
从 MJ 图里读出的所有距离,一律四舍五入到 4 的倍数。这一条能消灭 90% 的”看起来哪里怪怪的”问题。
圆角:按层级分配
大容器用大圆角、小组件用小圆角,比如外层卡片 16、内部缩略图 8、按钮 8、标签胶囊 999。不要在图上看到几个不同的圆角就照抄,而是重新分配。
阴影:只保留一级
MJ 图常有层次丰富的阴影,重建时收成一级(比如 0 4 12 rgba(0,0,0,0.06)),因为真实界面里多余的阴影会变成噪音。
第四步:把这张图变成”设计语言证据”
重建完成之后,回头看 MJ 图,问自己一个问题:它的哪些处理值得放进我的设计规范?可能是它把 KPI 数字的处理得非常克制,可能是它的卡片间距比我的更舒展。把这些点提炼成规范条目,这张图才算真的发挥了价值。否则你只是用它做了一次”灵感打卡”。
六个最常见的坑与修法
坑一:底部导航消失或被裁
现象:移动端出图里底栏不见了,或者只露出半截图标。原因:–ar 比例不够长,或者底栏只是被当作”内容流的一部分”而没有被声明为固定结构。修法:改用 –ar 9:20 拉长画幅;在布局段单独写一条 “bottom navigation bar fixed at the bottom, 4 items”,并将其放在分区描述的最后一行的独立条目里。
坑二:卡片数量对不上
现象:你要 6 张卡片,出来 4 张或 9 张。原因:数量词缺失,模型自由决定密度。修法:所有数量写成阿拉伯数字,”a vertical list of exactly 6 cards”;必要时加 “no partial cards at the top or bottom edge”。
坑三:界面变成带透视的 3D 展示图
现象:画面成了一个斜放的屏幕,带景深和背景渐变。原因:模型默认使用”产品展示”的构图先验。修法:在开头第一句加上 “flat vector interface, top-down straight-on view, no perspective”;负面段补 “no 3d, no perspective, no device mockup”;–s 压到 25。
坑四:过度装饰(玻璃拟态、霓虹、渐变)
现象:卡片是毛玻璃的,按钮发光,背景一片紫蓝渐变。原因:–s 留在默认 100,且没开启 –style raw。修法:–style raw –s 25;配色写死具体色值;负面段加 “no glassmorphism, no neon, no gradient mesh”。
坑五:文字全糊,标题区一团乱码
现象:每个本应有文字的地方都是伪字母。原因:Midjourney 对 UI 文字的渲染天然不稳,这是能力边界。修法:–no text;改用”placeholder bars”的描述;接受文字必须在 Figma 里重打。不要花时间试图用提示词修文字,那是无效投入。
坑六:同一套结构复现不出来
现象:昨天抽到的那张很满意,今天怎么都出不来。原因:没记录 seed,也没记录完整的提示词版本。修法:每次出图在文档里记下完整的提示词 + seed + 版本号(–v 8.2);后续所有微调都用同一 seed 单变量修改;同时注意 V8.2 不支持 Remix,旧版工作流的局部重绘思路需替换为 Edit Model 的参考图方案(最多 4 张)。
失败案例对照表
下面这张表是我带团队时最常被问到的问题合集,按”现象—原因—改法”三段式整理,可以直接当检查清单贴在显示器边上。
| 现象 | 原因 | 改法 |
|---|---|---|
| 三列卡片变成两列大卡 | 只写了 –ar 16:9,没写列数与栅格 | 补 “3 equal-width columns, strict 12-column grid, 24px gutters” |
| 搜索栏跑到页面中间 | 只说 “with search”,未声明位置 | 改为 “top bar: search bar on the left, avatar on the right” |
| 侧边栏宽度忽宽忽窄,批次之间不一致 | 未给侧栏固定宽度,且未固定 seed | 写死 “fixed left sidebar 240px wide”,并记录 seed 做对比 |
| 界面看起来像插画风 App 宣传图 | –s 过高,且缺少 flat vector / no perspective 约束 | –style raw –s 25,开头声明 “flat vector, straight-on” |
| 卡片内部内容全糊成装饰纹理 | 没有交代卡片内部结构 | 逐项写死:”left thumbnail, title line, two-line meta, trailing chevron” |
| 留白太少,页面很挤 | 未声明密度与边距 | 加 “generous outer margins 48px, comfortable density”,或明确 “airy” |
| 配色花,五个强调色同时出现 | 用了 “colorful” 这类模糊词 | 改为 “one single accent color (deep indigo)” 并给背景与文字色值 |
| 重建时对不上比例 | 照抄了 MJ 图的目测像素 | 只读相对比例,换算到 8px 栅格与设计系统 |
| 点击 Remix 没有反应 | V8.2 不兼容 Remix 与 –tile | 改用 Edit Model 参考图(最多 4 张)做迭代 |
一套可以直接落地的日常流程
需求澄清:先把规格书写在纸上
在敲 Midjourney 之前,先花五分钟手写一份小规格书:端、比例、分区数量、每区的组件名与数量、配色主色、圆角档位。这份纸上的东西,就是你待会儿要写进提示词的描述层。跳过这一步直接开抽,等于没有图纸盖房子。
第一轮:结构稿
参数固定为 –ar(按端选)+ –style raw + –s 25 + –no text, watermark + –v 8.2。提示词严格按七段式写。一次出三批共 12 张。
第二轮:五级筛选 + 单变量微调
按五级筛选法选出 1 到 2 张。记下 seed,然后只改一个变量再出一批(比如把密度从 comfortable 改成 compact),确认结构是否更贴合需求。这一轮通常只需 4 张。
第三轮:风格探索
结构定稿之后,才放开 –s 到 100 以上,用同一个 seed、同一套结构描述,探索不同的视觉语言。这时候出的图不再用来定布局,只用来找配色与时气质感。
第四轮:Figma 重建
按”描结构不描像素”的四步法重建,落地到设计系统,补齐状态,交付。至此,一次完整的 Midjourney 生成 UI 流程闭环。
结语:可控,才是设计
回到标题。为什么要在标题里把 –ar 16:9、–style raw 和”搜索栏/卡片列表/底部导航”这三样东西并排放?因为它们是三层控制手段的代表:比例控制画幅,raw 控制风格,结构描述控制内容。三者叠加,你才真正拥有了对结果的支配权。
Midjourney 生成 UI 这件事,很多人都卡在”它不听话”这一步。真相是:它一直很听话,只是你从来没给它一份像样的指令。当你的提示词从”好看的后台界面”进化成”左侧 240px 侧栏、顶部搜索栏、四张 KPI 卡、主区 2/3 折线与 1/3 卡片列表、12 列栅格、12px 圆角、单一靛蓝强调色”的时候,你会突然发现,抽卡的焦虑消失了——取而代之的是一种很熟悉的、属于设计师的控制感。那不是运气,那是规格书的力量。
FAQ 1:Midjourney 生成 UI 到底能不能直接交付给开发?
不能。Midjourney 生成的是概念视觉稿,不是可编辑设计稿,文字基本不可用,也没有图层、组件、约束和标注。正确做法是把它当作结构参考,在 Figma 里重建,再按设计规范交付。任何声称能直接输出的教程都存在夸大成分。
FAQ 2:–style raw 是不是就等于”UI 模式”?
不是。–style raw 只是降低风格化、让输出更贴近提示词,画面更素。它不会让模型突然具备界面设计能力,描述层写得空,它依然给你一张素的废图。它必须和结构描述、–s 低值、–no 排除配合使用。
FAQ 3:为什么我把设计稿上传当参考图,出来还是不像?
因为参考图擅长转移风格与气质,不擅长精确复刻结构。它读得到”这是什么配色和质感”,读不到”间距是 16px、组件顺序是这样”。对 Midjourney 生成 UI 来说,结构必须靠文字写死,参考图只负责氛围对齐。另外注意 V8.2 的 Edit Model 最多支持 4 张参考图。
FAQ 4:–s 设多少比较合适?
结构稿阶段建议 0 到 50,最常用 25 到 50;等到布局确定、进入风格探索阶段,再放到 100 以上。我个人的默认是 –s 25 配 –style raw,因为结构稿阶段我要的是服从,不是灵感。
FAQ 5:为什么我的卡片数量总是对不上?
因为你没写数字。模型对”几张卡片”没有默认约定,它按构图美感自由分配。所有数量都要用阿拉伯数字写死,比如 “exactly 6 cards”,并补充 “no partial cards at edges” 防止边缘出现半张卡。
FAQ 6:V8.2 不兼容 Remix,那老教程里的局部迭代怎么做?
改用 Edit Model。它取代了 Omni Reference、Character Reference 和 Retexture,支持最多 4 张参考图,你可以用它来在原图基础上做区域性的调整与延展。同时注意 V8.2 也不兼容 –tile,重复平铺类的思路需要换方案。









暂无评论内容