Back to Details

login-flow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Login Flow Skill

Login Flow Skill

A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options.
一个用于生成移动端优先的登录与认证界面的Skill。当用户需要为移动应用打造登录体验时使用，包括手机号+短信验证、密码登录以及社交SSO登录选项。

Workflow

工作流程

  1. Read reference files first (see below)
  2. Clarify auth method: phone/SMS, password, or social SSO
  3. Checklist gate — verify P0 items before emitting 
    <artifact>
  4. Build the HTML prototype with proper states (default, loading, error)
  5. Wrap in 
    <artifact>
    tag     referencing the output file
  1. 先阅读参考文件（见下文）
  2. 确认认证方式：手机号/短信、密码或社交SSO
  3. 检查清单关卡——在输出
    <artifact>
    前验证P0项
  4. 构建HTML原型，包含合适的状态（默认、加载、错误）
  5. 用
    <artifact>
    标签包裹    ，引用输出文件

Side Files

附属文件

  • references/checklist.md
    — P0/P1 acceptance criteria
  • references/checklist.md
    — P0/P1验收标准

Output

输出结果

A single standalone HTML file implementing the login screen with:
  • Labels above inputs (never placeholder-only)
  • Password field with show/hide toggle
  • Social SSO buttons with SVG icons
  • Error states below fields
  • Loading spinner in primary CTA
  • Touch targets minimum 44px
一个独立的HTML文件，实现登录界面，包含：
  • 输入框上方显示标签（绝不只使用占位符）
  • 带显示/隐藏切换的密码输入框
  • 带有SVG图标的社交SSO按钮
  • 输入框下方的错误状态提示
  • 主按钮中的加载 spinner
  • 触摸目标最小尺寸44px

Mobile-First Constraints

移动端优先约束条件

  • Viewport: 375px wide (iPhone standard)
  • No horizontal scroll
  • Safe area insets for notched devices
  • Input keyboards: 
    tel
    for phone, 
    password
    for password fields
  • 视口宽度：375px（iPhone标准尺寸）
  • 无横向滚动
  • 适配带刘海设备的安全区域内边距
  • 输入键盘：手机号字段使用
    tel
    类型，密码字段使用
    password
    类型