login-flow
nexu-io/open-design
Mobile-first login and authentication flow screens with phone, password, and SSO options.
What is login-flow?
A skill for generating mobile login and authentication UI screens. Use this when building sign-in experiences for mobile apps, supporting phone+SMS verification, password-based login, and social SSO options. Outputs a standalone HTML prototype with proper error states and touch-friendly interactions.
- Generates mobile login screens with phone/SMS, password, and social SSO authentication methods
- Implements proper input states including default, loading, and error conditions
- Provides password show/hide toggle and error messaging below fields
- Includes social SSO buttons with SVG icons
- Ensures 44px minimum touch targets and safe area insets for notched devices
- Outputs standalone HTML prototype optimized for 375px viewport (iPhone standard)
How to install login-flow
npx skills add https://github.com/nexu-io/open-design --skill login-flowHow to use login-flow
- 1.Install the skill using: npx skills add https://github.com/nexu-io/open-design --skill login-flow
- 2.Specify your preferred authentication method (phone/SMS, password, or social SSO)
- 3.Review the checklist.md reference file for P0/P1 acceptance criteria
- 4.Request the login screen generation with your specific requirements
- 5.The skill will output a standalone HTML file ready to preview or integrate
Use cases
- Building a sign-in screen for a new mobile app with phone number verification
- Creating a password-based login flow with error handling and loading states
- Designing a social login experience with multiple SSO provider options
- Prototyping authentication screens for user onboarding flows
- Generating mobile auth UI that works across different device sizes and notches
- Mobile app designers and developers
- Product teams building authentication experiences
- Developers prototyping login flows for iOS and Android apps
- Teams using Claude Code or Cursor for rapid UI generation
login-flow FAQ
The skill supports phone+SMS verification, password-based login, and social SSO (single sign-on) options. You can request one or combine multiple methods in a single flow.
The output is a prototype-grade standalone HTML file suitable for design validation and user testing. It includes proper states and interactions but may need backend integration for production use.
The skill is optimized for iPhone standard width (375px) and includes safe area insets for notched devices. It uses responsive design principles to work across mobile screen sizes without horizontal scrolling.
Yes, you can specify which social login providers (e.g., Google, Apple, Facebook) you want included in the generated screens.
Yes, the output includes error states below fields, loading spinners in the primary call-to-action button, and proper keyboard types (tel for phone, password for passwords).
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: login-flow description: Mobile login and authentication flow screens od: mode: prototype platform: mobile triggers:
- login
- sign in
- 注册登录
- 登录注册
- 手机号登录
- 验证码登录
- 密码登录
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.
Workflow
- Read reference files first (see below)
- Clarify auth method: phone/SMS, password, or social SSO
- Checklist gate — verify P0 items before emitting
<artifact> - Build the HTML prototype with proper states (default, loading, error)
- Wrap in
<artifact>tag referencing the output file
Side Files
references/checklist.md— P0/P1 acceptance criteria
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
Mobile-First Constraints
- Viewport: 375px wide (iPhone standard)
- No horizontal scroll
- Safe area insets for notched devices
- Input keyboards:
telfor phone,passwordfor password fields
Related skills
More from nexu-io/open-design and the wider catalog.
marketing-psychology
Apply psychological principles and behavioral science to copy, design, and pricing.
minimax-docx
Professional DOCX creation and editing with OpenXML SDK for branded reports and proposals.
minimax-pdf
Generate branded PDFs with token-based design system and 15 cover styles.
mockup-device-3d
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
nanobanana-ppt
AI-powered PPT generation with document analysis and styled images via NanoBanana stack.
paywall-upgrade-cro
Design and optimize upgrade screens, paywalls, and upsell modals for SaaS conversion.