W→U Wireframe to UI Automated Pipeline · Case Study
2026.04.23 Work In Progress
Work In Progress · Iteration Log

Wireframe → UI 中保真线稿到视觉成品的自动化生成管线

一条把中保真交互线稿自动推导为高保真 UI 视觉成品的工程化管线。 核心方法 Hybrid Pipeline：AI 负责角色资产生成，代码负责结构与视觉骨架——让每一段做自己擅长的事。 本页以一次真实的抽卡页面为样例，完整记录 6 次生成、3 次转向的试错与诊断。

Case Study· Star Wish Gacha UI· 2026.04.23· Single-session ~3.5h
6
次 AI 生成
3 次布局失败 / 1 次角色失败
3
次关键转向
诊断根因 · 切换架构
8
Zone 线框
1:1 精准还原
11
Design Token
全部 CSS 变量化
Step 0 · 输入素材

交互稿 + 视觉风格 · 双源输入

沿用 skill-3000-video-outfit 的方法论：线框控结构 + 风格控外观。本次关键修正——角色身份应从视觉稿提取，线框仅负责布局结构。

交互原型线框

WIRE / STRUCTURE
抽卡页（Star Wish Gacha）· 8 Zone 布局
顶部资源栏 / 标题 / 双Tab / 角色展示 / Pity信息 / 概率链接 / 双CTA / 底部Tab

UI 视觉风格参考

STYLE / IDENTITY
R1
R2
R3
R4
R5
Y2K 霓虹福瑞猫宇宙 · 5 张参考图
色彩（粉紫金霓虹）· 质感（毛玻璃 / 霓虹管描边 / 柔光）· 氛围（Pixar 3D 福瑞风） · 角色原型（橘白虎斑拟人猫女 + 麻花辫 + 银链项链）
Step 1 · 迭代学习

失败 → 诊断 → 修正 · 6 次尝试轨迹

每一次失败都暴露出一个关于 Gemini / Banana 模型的新认知。真正的价值不在测试通过的那张稿件，而在这些积累下来的 Prompt 工程与架构决策。

No. 01 Fail Nano Pro · t2i 1yl0rbacZAyQJ0HE
Template Drift
纯文生图首跑 · 布局被脑补成 R4 消息回放
症状 角色成了飞吻橘猫在视频留言场景里，出现 REPLAY 按钮 + 聊天背景 + 消息卡片——完全不是抽卡页。
学到 角色和背景描述不应从线框稿抽，应从视觉稿抽。线框里的占位猫只是放位置用的，不代表最终角色。
No. 02 Fail Nano Flash · t2i ofTunvImBvlG3SvH
Template Drift
修正角色来源后重跑 · 布局又脑补成 R5 来电呼叫
症状 角色已对（橘猫 + 粉毛帽 + 银链从视觉稿取到了），但出现了 Incoming Video Call 通知条 + Mute / End Call 按钮栏，再次被模板拐跑。
学到 纯文生图 prompt 无法锁结构。Gemini 会忽略文字描述的布局，优先匹配训练集里最像的现成 UI 模板。
1
转向 · 升级到 i2i 图生图 决策：既然文字无法锁布局，那把线框图作为参考图直接传入。参照 skill-3000-video-outfit 的 subject_reference 模式。
No. 03 Fail Nano Pro · i2i 双参考 mhmB7rYsbe3wGV75
Template Drift
线框 + 角色双图参考 · 第 3 次被脑补成 R3 换装编辑器
症状 i2i 传入线框图 + R5 风格图，结果输出直接像 R3（换装编辑器）——右侧图标分类栏、站在镜子前的全身猫、SAVE 按钮。Gemini 完全忽略了线框布局。
学到根因 Gemini / Banana 的 UI 生成是模板匹配 + 风格迁移，不是真正的结构理解。即便有线框作 i2i 参考，也只会提取"这是手机UI + 赛博猫 + 有列表"这种粗标签，然后去找训练集里最像的模板填充。
2
转向 · 拆分职责 · Hybrid Pipeline 决策：放弃让 Banana 直接生 UI——让每一段做自己擅长的事。Banana 只生角色插画，UI 骨架用代码（HTML/CSS）渲染。
No. 04 Fail Nano Pro · 角色图 i2i 6QWgEr2Sq8G5BhOs
Ref Over-Copied
生角色图 · 传入 3 张含 UI 的参考图直接被整吞
症状 Prompt 写明 NO UI chrome / character sheet only，但传入的 R3 / R4 / R5 参考图本身就含 UI，Banana 直接复制了 R5 整张视频通话 UI 出来——包括 Incoming Video Call 标题和 MEOW 帽子。
学到 给 Banana 做角色生成时，参考图里不能含 UI chrome。它的模板匹配惯性会赢过文字指令。
No. 05 OK Nano Pro · 单张角色参考 vdWVrTKteZ78d2zE
Character Locked
角色资产命中 · 只传 R3 单图 + 超强禁止列表
成功表现 橘白虎斑毛 · 双麻花辫 · 银链 ARCH · Y2K 辣妹装 · 拟人站姿——全部命中。虽保留了 R3 背景（镜子 / 图标栏），但不影响后续抠图使用。
关键动作 参考图从 3 张减到 1 张；prompt 列出明确的禁止清单（no phone / no chat / no cap / no Incoming Video Call），逐条破除 Banana 的模板惯性。
No. 06 Done Hybrid · rembg + HTML/CSS + Playwright final shipped
Shipped
测试通过 · 代码渲 UI 骨架 + 抠图角色合成
交付达标 8 Zone 布局 1:1 还原 · 11 Design Token 精准落地 · 角色大立绘占满全屏 · 双 CTA 霓虹发光 · 文字 100% 可控。
Hybrid 成功 rembg U²-Net 本地抠图 → HTML/CSS 按线框精准布局 → Playwright 3× DPI 截图 → 2.6MB 高清输出。修改一个 Token 整屏秒级响应。
Step 2 · 对比验证

交互稿 → 测试通过 · 1:1 对齐

测试通过的稿件严格遵守线框定义的 8 Zone 结构，同时在视觉上完全继承 Y2K 霓虹风格。结构不变，外观升级。

Input · 交互稿

Wireframe
深色极简线框 · 8 Zone 布局蓝本
→
Hybrid Pipeline

Output · 测试通过稿

Verified
Y2K 霓虹风 + 角色沉浸式大立绘 · 8 Zone 1:1 还原

测试通过采用的 Hybrid Pipeline · 4 步

让每一段做自己擅长的事 · 代码保精准 + AI 补插画

STEP 01
Banana 生角色
Nano Pro i2i · 单张干净参考
STEP 02
rembg 抠图
U²-Net · 本地透明前景
STEP 03
HTML / CSS 渲 UI
8 Zone + 11 Design Token
STEP 04
Playwright 截图
3× DPI · 1620×2640 输出
Step 3 · 方法论沉淀

6 条可复用的工程经验

从这次迭代中提炼出来的通用原则 · 下一个 UI 场景可直接套用

01

素材职责分离

线框只控结构，视觉稿只控外观和角色身份。不要让一张图同时承担布局和风格，会让 AI 混淆。

02

Gemini 不做 UI 生成

Gemini / Banana 是模板匹配思维，不真正理解 UI 结构。给它生角色 / 生背景，别让它生 UI 骨架。

03

参考图必须干净

做角色参考时，参考图里不能含 UI chrome。Banana 会直接复制参考图里的整体 UI，文字禁止无法拦截。

04

UI 用代码渲

Design Token + CSS 变量组合，文字 100% 可控 · 布局精准 · 修改秒级响应。这才是 UI 生产流水线该有的样子。

05

抠图本地跑

3000 Comfyui 实例偶尔不可用，rembg + U²-Net 本地跑更稳定，透明 PNG 直接进 CSS 合成。

06

失败要记录

每次失败都诊断出一条关于模型行为的新认知。这些认知比成品更有价值——它们决定下次能否一次到位。

Interactive · Antigravity Field

Move your cursor · particles react

把鼠标挪过去感受粒子磁场。参数沿用你给的 preset：600 颗方粒 · #c186cd 紫 · 磁吸半径 23 · 波浪幅度 1.5 · 深度因子 3.5。

Drag / move cursor inside the field