Midjourney生成UI不抽卡

先说结论: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 对提示词前段的权重更高,越靠前的信息越不容易被稀释。

七段式:从”是什么”到”什么规范”

  1. 页面类型与端:先说清楚这是什么端、什么页面。例如 “A desktop SaaS analytics dashboard UI”。
  2. 分区(从上到下):这是最关键的一段。用 top / upper / middle / lower / bottom 这类方位词,把页面切成 3~5 个带子,每个带子说清楚里面有什么。分区描述是”结构描述”的骨干。
  3. 组件点名:用 UI 行业的标准英文名词点出关键组件——search bar、card list、bottom navigation、sidebar、data table、filter chips、KPI tiles。点名比形容有效十倍。
  4. 栅格:写死列数。例如 “a strict 12-column grid”、”3 equal-width columns with 24px gutters”。”strict” 这个词有奇效,它会让模型倾向于对齐而不是乱摆。
  5. 留白与密度:声明边距和内边距,例如 “generous outer margins of 48px”、”compact density with 16px padding inside cards”。密度声明能直接决定页面是”通勤感”还是”呼吸感”。
  6. 色彩与圆角:给具体值,例如 “off-white background #F7F8FA, a single accent color, 12px corner radius, 1px hairline dividers”。UI 里最忌讳”colorful”这种词。
  7. 负面约束:把不要的东西再口头强调一遍,例如 “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 张,然后用下面这套五级筛子往下过。

五级筛选法:从结构到气质

  1. 第一筛:结构完整性(硬性淘汰)。三个点名组件是否全部在场?搜索栏、卡片列表、底部导航,缺一个直接出局,不管多好看。这一筛通常淘汰掉 4 到 6 张。
  2. 第二筛:比例与栅格正确性。卡片列数是否等于你要的列数?主内容区是否有明确分栏?元素有没有明显歪斜、错位、压边?这一筛再淘汰 2 到 3 张。
  3. 第三筛:装饰污染检查。有没有多余的玻璃拟态、霓虹光、3D 阴影、贴图纹理?有没有出现”一坨不知道是什么”的装饰图?装饰越少,可重建性越高。
  4. 第四筛:视觉密度与节奏。留白是不是你想要的那一档?卡片间距是否均匀?版面重心有没有飘?这一筛开始考验审美判断,通常剩下 2 到 3 张。
  5. 第五筛:可延展性。闭上眼想一想:这张图的结构能不能扩展成第二页、第三页?如果它只适合做一张孤品,那它对一个产品没有价值。

一个小提醒:不要选”最美的”,要选”最像规格书的”

这是最反直觉的一条。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,重复平铺类的思路需要换方案。

THE END
喜欢就支持一下吧
点赞44 分享
评论 抢沙发
头像-知了AI
欢迎您留下宝贵的见解!
提交
头像-知了AI

昵称

取消
昵称表情代码快捷回复

    暂无评论内容