mcpField
M
mobile-onboarding

mobile-onboarding

github.com/nexu-ioデザイン・UI104.6k275 回インストール今日更新
リポジトリ

mobile-onboarding について

mobile-onboarding は、モバイル向けの 3 画面オンボーディングを作るデザインスキルです。1 枚の HTML ページに端末画面を並べ、最後の画面にサインインまたは続行の選択肢を設けます。

主な機能

  1. 011 ページに 3 画面のフローを作成
  2. 02端末フレームを横並びで表示
  3. 03ステータスバー、ビジュアル、ページネーションを配置
  4. 04メイン CTA とスキップ操作を追加
  5. 05最終画面にサインインまたは続行の選択肢

活用シーン

  1. 01モバイルアプリの初回起動案内の作成
  2. 02サインイン前の製品紹介
  3. 03モバイル向けオンボーディングページの試作

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill mobile-onboarding

インストール後、Claude Code で/mobile-onboardingを入力して読み込まれたか確認します。

同梱ファイルexample.html

詳細

モバイルオンボーディングスキル

単一の HTML ページに、3 画面のモバイルオンボーディングフローを作成します。

ワークフロー

  1. DESIGN.md を読みます。
  2. アプリと対象ユーザーを特定します。
  3. レイアウト：スマートフォンのフレームを 3 つ横並びにします。各スマートフォンには以下を含めます。
    • ステータスバー（時刻、バッテリー、電波状況）。
    • ヒーローアートまたはアイコン。
    • 見出しと補足の段落。
    • 3 つのドットによるページネーション。
    • メインの CTA（全幅のピル型ボタン）。
    • 右上の「スキップ」または代替アクション。
  4. 最後のスマートフォンは、サインイン／続行方法を選ぶ画面にします。
  5. 存在感のあるタイポグラフィ、穏やかなグラデーション、アクセシブルなコントラストを使用します。

出力仕様

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

コメント

Markdown 対応