用途:把移动应用的用户流程画成一块画板,用一排低保真手机框呈现用户如何在屏幕间移动,重点是流程而非单屏完成度。屏幕保持干净的灰盒(非潦草手绘),连接线与标注则保持松散、非正式。
主要能力:按简报选取 3–4 个相连步骤(如 Onboarding → Home feed → Item detail → Confirm),为每步命名,使连接箭头可带编号的动词短语标签(如“① tap Start”“② open item”“③ add to cart”)。画板依次包含:板头(粗体无衬线标题、带虚线边框并轻微旋转的“WIREFRAME v0.1 · MOBILE”标签、右侧等宽字体日期行,含日期/设备/保真度);手机行(3–4 个约 240–280px 宽的圆角设备框,含刘海/状态栏,内部放该步骤的灰盒内容,如占位图矩形加 X、标题/价格条、列表卡片、分类标签、底部标签栏、吸底 CTA 条、确认勾选);连接线(相邻手机间的虚线箭头,带小号等宽步骤标签);标注(1–2 个贴纸/标注,标明意图,如“hero must sell value in 3s”)。
使用方式:输出单个 HTML 文档,从 <!doctype html> 到 </html>,CSS 内联,无外部 JS、无外部图片(仅用 CSS/SVG 占位)。板面用 Inter/system-ui,标签用 IBM Plex Mono(经 Google Fonts),标注可用轻量手写字体。设备边框用深色,内容块用中灰,白底屏幕,箭头与标注用单一强调色。在板头、每个手机屏、连接线、标注上加 data-od-id。若 DESIGN.md 要求成品 UI 则跳过。
适用场景:移动端产品早期流程梳理、评审与沟通。
限制:刻意低保真,不产出成品界面;类型令牌仅宽松遵循;自检要求三个主手机在约 1280px 视口内可见、流程从左到右、无近白底白块。输出需放在 <artifact> 标签内,artifact 前一句话、之后无内容。具体收费、平台与效果资料暂未提供。