mcpField
M
mobile-onboarding

mobile-onboarding

github.com/nexu-io设计与 UI104.6k275 次安装今天更新
代码仓库

关于 mobile-onboarding

mobile-onboarding 是用于制作移动应用三屏引导流程的设计技能，面向生成界面的 Agent。它在单个 HTML 页面中并排呈现三部手机界面，末屏包含登录或继续选项。

主要功能

  1. 01生成单页三屏引导流程
  2. 02并排展示手机界面框架
  3. 03包含状态栏、主视觉和分页点
  4. 04设置主操作按钮及跳过入口
  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 页面上制作包含三个屏幕的移动端引导流程。

工作流

  1. 阅读 DESIGN.md。
  2. 确定应用及其受众。
  3. 布局：三个手机框并排放置。每部手机都包含：
    • 状态栏（时间、电池、电信号）。
    • 主视觉插画或图标。
    • 标题及补充说明。
    • 3 个圆点的分页指示器。
    • 主要 CTA（全宽胶囊按钮）。
    • 右上角的“跳过”或其他操作。
  4. 最后一部手机显示登录／继续选项屏幕。
  5. 使用醒目的字体、柔和的渐变和易于辨认的对比度。

输出约定

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

评论

支持 Markdown