mcpField
M
mobile-onboarding

mobile-onboarding

github.com/mphinance设计与 UI3285 次安装4 天前更新
代码仓库

关于 mobile-onboarding

用于生成单页 HTML 三屏移动端引导流程的 Skill。它根据应用及其受众组织页面内容，并以登录或继续选项作为最后一屏。

主要功能

  1. 01单页呈现三个手机框
  2. 02主视觉插图或图标
  3. 03标题与辅助说明
  4. 04分页指示与主要 CTA
  5. 05末屏为登录或继续选项

适用场景

  1. 01起草移动应用引导流程
  2. 02展示三步欢迎体验
  3. 03制作登录页面概念

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mphinance/alpha-skills --skill mobile-onboarding

安装后在 Claude Code 中输入/mobile-onboarding确认已加载。

附带文件example.htmlREADME.md

详细介绍

移动端引导技能

在单个 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