Mobile Onboarding Designer
Creates a three-screen phone onboarding flow as a single HTML design page
- Repository
- nexu-io/open-design
- Stars
- 105,448
- Licence
- Apache-2.0
- Files
- 2 files
What it does
When installed, the agent can produce a visual mockup of a mobile app's first-run onboarding: three phone screens side by side (splash, value proposition, sign-in), each with a status bar, hero artwork, headline, pagination dots and a main call-to-action button. The output is a single HTML page that previews the design in a browser. It follows a set workflow and a fixed output format so the result is consistent.
Great for
- Product designers who want a quick clickable-style concept of an app's onboarding screens
- Developers or founders who need a visual reference before building a mobile signup flow
- Anyone prototyping a meditation, fitness or similar consumer app's first-run experience
Skip it if
- Production app code: it outputs a static HTML mockup, not native iOS or Android screens (reason: it will not handle real sign-in or app logic)
- Real authentication or security design: it only draws sign-in buttons and does not configure any login provider (reason: a design mockup cannot be relied on for account security)
Try asking
- “Design a 3-screen mobile onboarding flow for a meditation app with welcome, value props and sign-in”
- “Create an iOS onboarding mockup for a budgeting app with a splash screen and Apple sign-in option”
- “Make a phone signup concept for a travel app in a clean, accessible style”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.
mobile-onboarding.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip mobile-onboarding.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip mobile-onboarding.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Provide your app's name, audience and brand colours so the agent can read or create a DESIGN.md before generating the layout
- Open the resulting HTML file in a browser to review the three phone frames and adjust copy or colours with follow-up requests
- Ask for specific states such as empty, loading or error screens if you need more than the default happy-path flow
What's inside
- example.html
- SKILL.md
Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.