Back to Details

mobile-onboarding

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mobile Onboarding Skill

Mobile Onboarding Skill

Produce a three-screen mobile onboarding flow on a single HTML page.
在单个HTML页面中生成三屏移动端引导流程。

Workflow

工作流程

  1. Read DESIGN.md.
  2. Identify the app + audience.
  3. Layout: three phone frames side by side. Each phone:
    • Status bar (time, battery, signal).
    • Hero artwork or icon.
    • Headline + supporting paragraph.
    • 3-dot pagination.
    • Primary CTA (full-width pill button).
    • "Skip" or alt action top-right.
  4. Last phone is the sign-in / continue-with options screen.
  5. Strong typography, gentle gradients, accessible contrast.
  1. 阅读DESIGN.md文档。
  2. 明确应用程序及目标受众。
  3. 布局：三个手机框架并排显示。每个手机页面包含：
    • 状态栏（时间、电量、信号）。
    • 主视觉图或图标。
    • 标题+辅助描述段落。
    • 三点式分页指示器。
    • 主CTA（全宽胶囊按钮）。
    • 右上角的“跳过”或替代操作按钮。
  4. 最后一个手机页面为登录/第三方账号继续选项页面。
  5. 采用清晰的排版、柔和的渐变效果，确保色彩对比度符合无障碍标准。

Output contract

输出约定

<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>