mobile-app

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile App Skill

Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.

制作单个移动应用屏幕原型，嵌入具有真实质感的iPhone 15 Pro设备框架中。

Resource map

资源地图

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)

mobile-app/
├── SKILL.md                ← 你正在阅读此文件
├── assets/
│   └── template.html       ← 种子文件：设备框架 + 屏幕基础元素（请先阅读）
└── references/
    ├── layouts.md          ← 6种屏幕原型（信息流 / 详情页 / 引导页 / 个人资料页 / 结账页 / 聚焦页）
    └── checklist.md        ← P0/P1/P2自我检查清单（避免伪设备效果）

Workflow

工作流程

Step 0 — Pre-flight

步骤0 — 前期准备

Read
assets/template.html
end-to-end through the
```
<style>
```
block. The Dynamic Island, status bar SVG icons, home indicator, side rails, and tab bar are all already drawn in HTML/SVG — do not re-implement them inline on each screen.
Read
references/layouts.md
so you know which 6 archetypes exist.
Read the active DESIGN.md — map its tokens to the six
```
:root
```
variables in the seed.

**通读
```
assets/template.html
```
**的
```
<style>
```
区块。Dynamic Island、状态栏SVG图标、Home指示器、侧边栏和标签栏均已通过HTML/SVG绘制完成——请勿在每个屏幕中重新实现这些元素。
阅读
references/layouts.md
，了解现有的6种原型类型。
阅读当前的DESIGN.md——将其中的设计令牌映射到种子文件中的六个
```
:root
```
变量。

Step 1 — Copy the seed

步骤1 — 复制种子文件

Copy

assets/template.html

to the project root as

index.html

. Replace the six

:root

variables with the active design system's tokens. Replace the page

<title>

and the caption above the device.

将

assets/template.html

复制到项目根目录并重命名为

index.html

。将六个

:root

变量替换为当前设计系统的令牌。替换页面

<title>

和设备上方的说明文字。

Step 2 — Pick exactly one archetype

步骤2 — 选择恰好一种原型

Brief language	Use
feed, inbox, timeline, list, messages, notifications	A — Feed
article, post, item, recipe, song, product, song detail	B — Detail
sign-up, welcome, intro, walkthrough, tour	C — Onboarding
profile, account, user page, someone's bio	D — Profile
checkout, payment, order, form, settings step	E — Checkout
timer, map, dashboard widget, single big number	F — Focus / hero card

A mobile screen does one job. If the brief seems to combine two, ship one screen and offer the other as a follow-up.

需求术语	对应原型
feed、inbox、timeline、list、messages、notifications	A — 信息流
article、post、item、recipe、song、product、song detail	B — 详情页
sign-up、welcome、intro、walkthrough、tour	C — 引导页
profile、account、user page、someone's bio	D — 个人资料页
checkout、payment、order、form、settings step	E — 结账页
timer、map、dashboard widget、single big number	F — 聚焦页 / 主卡片

一个移动屏幕只承担一项功能。如果需求似乎结合了两种功能，先交付一个屏幕，并提议将另一个作为后续任务。

Step 3 — Paste and fill

步骤3 — 粘贴并填充内容

Copy the archetype block from

layouts.md

into

<main class="content">

, replacing the placeholder card. Fill bracketed text with real, specific copy from the brief. Drop the
<nav class="tabbar">
block entirely for archetypes that don't show one (B, C, E).

将

layouts.md

中的原型代码块复制到

<main class="content">

中，替换占位卡片。用需求中的真实、具体文案替换带括号的文本。对于不需要标签栏的原型（B、C、E），完全删除
<nav class="tabbar">
区块。

Step 4 — Self-check

步骤4 — 自我检查

Run through

references/checklist.md

. Pay extra attention to:

Frame still has the Dynamic Island, status bar SVGs, and home indicator
Tap targets ≥ 44px
One accent, used ≤ 2× on the screen
Display headings still use
```
var(--font-display)
```
(serif)

对照

references/checklist.md

进行检查。特别注意：

框架仍保留Dynamic Island、状态栏SVG图标和Home指示器
可点击目标尺寸≥44px
仅使用一种强调色，且在屏幕中使用次数≤2次
标题仍使用
```
var(--font-display)
```
（衬线字体）

Step 5 — Emit the artifact

步骤5 — 生成产物

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

One sentence before describing what's there. Stop after

</artifact>

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

在产物前用一句话描述其内容。写完

</artifact>

后停止。

Hard rules

硬性规则

The phone is real. Dynamic Island gap, SVG status icons, home indicator. The seed protects all three — don't rewrite the frame.
Single screen, single job. No multi-tab tours, no spliced flows.
Accent budget = 2. One active tab + one primary action is the default.
Numerics in mono via
```
.num
```
class.
Display in serif via
```
var(--font-display)
```
.
No external images — use
```
.ph-img
```
placeholders.

设备需真实还原：保留Dynamic Island缺口、SVG状态图标、Home指示器。种子文件已保护这些元素——请勿重写框架。
单屏单功能：不支持多标签引导，不拼接流程。
强调色使用次数≤2：默认是一个激活标签 + 一个主要操作按钮。
数字使用等宽字体：通过
```
.num
```
类实现。
标题使用衬线字体：通过
```
var(--font-display)
```
实现。
禁止使用外部图片：使用
```
.ph-img
```
占位符。