Mobile app 构建一组手机界面——不是一张图而是整个流程:引导、 主界面、设置、以及中间的各种状态,以真实手机尺寸排成一块画板 看板。它是为 app 形态的设计而生的模板——触摸目标、移动端导航、 屏与屏之间的流转。
一组,不是一屏
按流程下 brief——"一个习惯追踪 app:注册、今日视图、连续打卡、 设置"——agent 就会构建这组界面,每屏是结果里的一块画板。 mobile viewer 把它们排成一块看板,可以逐屏走过或用网格查看, 让流程读起来是流程,不是一堆截图。
这些界面是活的,不是图片:点按走查、悬停控件、检查导航是否真的 去到某处——在手机宽度下,触摸目标和底部导航正是最常挂掉的地方。
Mobile app · Devin · e2e · gate PASS
Frond — A plant-care app in three finished screens — today, detail, reminder — device frames and all.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”
移动端规则,会被检查
门禁的手机宽度检查在这里最重要——点击目标尺寸、失效导航、吞掉 最后一行的底栏。模板会加载这些规则让 agent 照着构建:为手指设计 的控件尺寸、真正去到某处的导航、在小屏上依然可读的字体。
它擅长什么
- App 概念工作 ——想法还没构建时的整组界面
- 功能流程 ——新功能如何穿过已有界面
- 移动端特有模式 ——面板、底部导航、滑动状态
- 干系人评审 ——以看板形式呈现的流程,而不是规格文档
Steering 一组界面
和任何结果一样的 steering,只是移动端形态:
- ⌥-click 控件或界面区域,评论到确切位置
- 后续追加 补缺的界面或改错的流程("在注册和今日之间加个空 状态")
- Tweaks 调设计暴露的参数(密度、圆角半径)
- Variants 做同一流程的两种不同尝试
手机 vs mockup vs 网站
- Mobile app ——手机形态的界面、触摸尺寸的控件、移动端导航
- UI mockups ——桌面或网页界面的图
- Interactive website ——真正能用的网站,多页,桌面优先
只要这组界面是手机尺寸、触摸形态的,就是这个模板——哪怕这个 "app"其实是个移动网页流程。
Tip: 宣布完成前每屏都在手机宽度检查一遍——这里最常见的 FAIL 是底栏或最后一行控件落进死区,在桌面尺寸下根本看不见。
导出
界面组导出为每屏 PNG 或整组 PDF——用于演示文稿、规格文档 或干系人材料。文件留在项目文件夹里,供下一次 steer 用。