AI LineAiline Skillhub
技能市场/mobile-onboarding

mobile-onboarding

mobile-onboarding

A multi-screen mobile onboarding flow rendered as three phone frames side by side — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "移动端引导".

Mobile Onboarding Skill

Produce a three-screen mobile onboarding flow on a single HTML page.

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.

Output contract

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

安装中心

可直接安装到 9 个框架（另有 Cursor / Windsurf 需转换为 rules 格式）。悬停可查看各框架的技能目录。

方式一 · 复制提示词（推荐）

粘贴给你的 Claude Code，它会自己完成下载和安装（安装文件直接取自原始仓库）

请帮我安装技能「mobile-onboarding」：
1. 从原始仓库下载技能文件：https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/mobile-onboarding/SKILL.md（GitHub 上的 SKILL.md 原始文件）
2. 保存为 ~/.claude/skills/mobile-onboarding/SKILL.md（目录不存在则创建）
3. 确认文件存在后，告诉我安装结果

方式二 · 命令行安装

npx CLI 跨平台可用（自动检测本机 Agent）；PowerShell 方式无需安装任何东西

npx ailine-skills add mobile-onboarding
New-Item -ItemType Directory -Force "$HOME\.claude\skills\mobile-onboarding" | Out-Null; curl.exe -fsSL "https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/mobile-onboarding/SKILL.md" -o "$HOME\.claude\skills\mobile-onboarding\SKILL.md"

方式三 · 前往原始仓库

第三方技能不由本站分发安装文件，请从原始仓库获取（上方命令/提示词已直连原始文件）

前往 GitHub 仓库 ↗查看 SKILL.md 原文件