用途
Mobile App 技能用于产出单个移动应用屏幕的设计稿，并将其置于一个具有真实感的 iPhone 15 Pro 设备外框中。它面向需要快速生成移动端界面视觉稿的场景，强调“一屏一任务”，不制作多标签浏览或拼接流程。
主要能力
- 提供逼真的设备框架：灵动岛、状态栏 SVG 图标、Home 指示条、侧边栏和标签栏均已由种子模板绘制完成，无需在每个屏幕上重新实现。
- 内置 6 种屏幕原型：A — 信息流（Feed）、B — 详情（Detail）、C — 引导（Onboarding）、D — 个人资料（Profile）、E — 结账（Checkout）、F — 专注/主卡片（Focus / hero card）。
- 附带布局参考文件 references/layouts.md，说明 6 种原型的结构。
- 附带自检清单 references/checklist.md，包含 P0/P1/P2 级别的自查项，用于防止出现“假设备”问题。
使用方式
工作流程分为六步：
- 预检：完整阅读 assets/template.html，包括其中的
<style>块；阅读 references/layouts.md 了解 6 种原型；阅读当前 DESIGN.md，将其设计令牌映射到种子模板中的六个:root变量。 - 复制种子：将 assets/template.html 复制到项目根目录并命名为 index.html，用当前设计系统的令牌替换六个
:root变量，并替换页面<title>和设备上方的说明文字。 - 选择一种原型：根据简报语言从 6 种原型中选择恰好一种。例如 feed、inbox、timeline、list、messages、notifications 对应 A — Feed；article、post、item、recipe、song、product 对应 B — Detail；sign-up、welcome、intro、walkthrough、tour 对应 C — Onboarding；profile、account、user page 对应 D — Profile；checkout、payment、order、form、settings step 对应 E — Checkout；timer、map、dashboard widget、单个大数字对应 F — Focus / hero card。若简报似乎组合了两种，应只交付一种屏幕，并将另一种作为后续建议。
- 粘贴并填充：从 layouts.md 复制对应原型块到
<main class="content">中，替换占位卡片；用简报中的真实具体文案填充方括号文本；对于不显示标签栏的原型（B、C、E），完全移除<nav class="tabbar">块。 - 自检：按 references/checklist.md 逐项检查，特别注意：框架仍保留灵动岛、状态栏 SVG 和 Home 指示条；点击目标不小于 44px；强调色在屏幕上使用不超过 2 次；显示标题仍使用
var(--font-display)（衬线字体）。 - 输出制品：以
<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">包裹完整的 HTML 文档，在制品前用一句话描述内容，制品结束后停止。
适用场景
适用于需要快速产出移动端单屏界面视觉稿的设计与原型场景，例如信息流、详情页、引导页、个人资料页、结账页或专注卡片等。
限制
- 手机框架必须保持真实：灵动岛间隙、SVG 状态图标、Home 指示条由种子模板保护，不得重写框架。
- 单屏单任务：不制作多标签浏览，不拼接流程。
- 强调色预算为 2：默认一个活动标签加一个主要操作。
- 数字使用
.num类以等宽字体呈现。 - 显示文字使用
var(--font-display)以衬线字体呈现。 - 不使用外部图片，改用
.ph-img占位符。
关于收费、价格、平台支持等信息，资料中暂未提供。