UI mockups & wireframes 画出界面的图——一个 app 或网站会有的 那些界面,保真度由 brief 决定。它是在真正动手构建之前回答"这会 长什么样?"的模板。
高保真 mockup 还是低保真线框图
保真度由 brief 设定:
- 一个 mockup ——"一个照片 app 的设置界面,深色主题"——产出 高保真界面,有真实的字体、颜色和控件,接近可交付
- 一个线框图 ——"给新手引导流程画线框图,四屏"——产出低保真 结构:色块、层级、标注,还没有样式可争论
两者都是可以 steer 的真实文件,不是静态图片——pin 住一个控件、评论 一个布局、微调密度,和任何结果一样。
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
单屏还是一组
要一屏就得一屏;要一个流程,agent 就建一组——引导、仪表盘、设置 ——作为一排可以逐屏浏览或用网格查看的画板。预览全程都是活的: 点击浏览、悬停、测试 agent 内建的各种状态。
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
它擅长什么
- 探索一个方向 ——同一界面的三种做法,成本很低
- 早期产品工作 ——还没写进规格的功能界面组
- 用于评审确认的线框图 ——只有结构,没有样式之争
- 竞品分析 ——"这个流程长什么样?"不用真的构建就能看到
Steering 一个 mockup
steering 里的一切都适用—— 同一个引擎:
- ⌥-click 有问题的地方,评论落到确切的节点
- Tweaks 调设计暴露出来的参数
- 后续追加 补缺的界面或改错的方向
- Variants 做"同一流程的两种不同尝试"
门禁依然会跑——mockup 和任何结果一样受检查,因为对可行性撒谎的图 不是有用的图。
Mockup vs 网站 vs 移动 app
- UI mockups ——界面的图,桌面或网页形态
- Mobile app ——手机尺寸的界面、触摸目标、移动端导航
- Interactive website ——真正能用的网站,多页面
当交付物是可以点进去交互、而不只是用来看的东西时,它就不是 mockup ——是网站(如果是手机形态就是移动 app)。
Tip: 在 brief 里写明保真度——"hi-fi mockup"和"lo-fi wireframe"产出不同的东西,想要高保真却拿到线框图就是白跑一次。 这个词在 agent 开始前就设定了预期。
导出
Mockup 导出为 PNG 或 PDF 用于分享——按你演示时需要的尺寸渲染 的界面。源文件留在项目文件夹里,供下一次 steer 或下一个版本用。