mobile-app

移动应用技能

在一台真实感十足的 iPhone 15 Pro 设备框架内，制作一个移动应用屏幕模型。

资源映射

mobile-app/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: device frame + screen primitives (READ FIRST)
└── references/
    ├── layouts.md          ← 6 screen archetypes (Feed / Detail / Onboarding / Profile / Checkout / Focus)
    └── checklist.md        ← P0/P1/P2 self-review (anti-fake-device)

工作流

步骤 0 — 准备工作

1. 从头到尾阅读 assets/template.html，直到 <style> 块结束。灵动岛、状态栏 SVG 图标、主屏幕指示条、侧边框和标签栏都已在 HTML/SVG 中绘制好——不要在每个屏幕中重新内联实现。
2. 阅读 references/layouts.md，了解现有的 6 种布局原型。
3. 阅读当前生效的 DESIGN.md——将其中的设计令牌映射到种子文件中的六个 :root 变量。

步骤 1 — 复制种子文件

将 assets/template.html 复制到项目根目录，并命名为 index.html。将六个 :root 变量替换为当前设计系统的令牌。替换页面 <title> 和设备上方的标题说明。

步骤 2 — 只选择一种布局原型

需求描述	使用
动态、收件箱、时间线、列表、消息、通知	A — 动态
文章、帖子、条目、食谱、歌曲、产品、歌曲详情	B — 详情
注册、欢迎、介绍、引导流程、导览	C — 初始引导
个人资料、账户、用户页面、某人的简介	D — 个人资料
结账、付款、订单、表单、设置步骤	E — 结账
计时器、地图、仪表盘组件、单个大数字	F — 专注 / 主视觉卡片

一个移动屏幕只完成一项任务。如果需求似乎包含两项任务，就先交付一个屏幕，并将另一个作为后续工作。

步骤 3 — 粘贴并填充

将 layouts.md 中的布局原型代码块复制到 <main class="content"> 中，替换占位卡片。将方括号中的文本替换为需求中具体、真实的文案。对于不显示标签栏的布局原型（B、C、E），完全删除 <nav class="tabbar"> 代码块。

步骤 4 — 自检

按照 references/checklist.md 逐项检查。特别留意：

• 设备框架仍保留灵动岛、状态栏 SVG 图标和主屏幕指示条
• 点击目标 ≥ 44px
• 只使用一种强调色，且在屏幕上使用不超过 2 次
• 展示标题仍使用衬线字体 var(--font-display)

步骤 5 — 输出产物

<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">
<!doctype html>
<html>...</html>
</artifact>

先用一句话说明其中包含的内容。到 </artifact> 为止。

硬性规则

• 手机必须真实可信。 保留灵动岛的间隙、SVG 状态栏图标和主屏幕指示条。种子文件已保护这三项——不要重写设备框架。
• 单个屏幕，单项任务。 不要制作多标签导览，也不要拼接多个流程。
• 强调色预算 = 2。 默认仅用于一个当前选中的标签和一个主要操作。
• 数字使用等宽字体，通过 .num 类实现。
• 展示文字使用衬线字体，通过 var(--font-display) 实现。
• 不使用外部图片——使用 .ph-img 占位符。