Guide · Agent skill
How to use the Mobile Onboarding Designer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Mobile Onboarding Designer is an agent skill that makes an AI agent produce a visual mockup of a mobile app's first-run onboarding. It is aimed at product designers, developers and founders who want a visual reference before building a signup flow. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what its limits are.
Mobile Onboarding Designernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the mobile-onboarding ZIP from the skill's page in the directory.
- 2Unzip the skill folder. Extract it so the mobile-onboarding folder sits in ~/.claude/skills/ or a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Prepare a DESIGN.md file. Add your own design-system file, since the workflow reads DESIGN.md but it is not included.
- 5Make a request. Describe the app, audience and screens, using a phrase such as mobile onboarding or phone signup.
- 6Open the HTML output. Open the single HTML page in a browser and review the three phone screens.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file. The file tells an agent that can read skills how to handle a certain kind of task. When the skill is installed and your request matches it, the agent follows the workflow written in that file.
This skill, named mobile-onboarding, makes the agent draw a three-screen mobile onboarding flow: a splash screen, a value-proposition screen and a sign-in screen. Each phone frame includes a status bar, hero artwork or an icon, a headline with a supporting paragraph, 3-dot pagination, a full-width primary call-to-action button and a "Skip" or alternative action in the top-right corner. The result is a single HTML page you can open in a browser.
- Output: one HTML page with three phone frames side by side
- Style: strong typography, gentle gradients and accessible contrast
- Output format: a fixed artifact wrapper so results stay consistent
How do you install the mobile-onboarding skill?
Download the ZIP from the skill's page in the directory. Unzip it so the mobile-onboarding folder is placed in one of these locations:
For a personal setup, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project. If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/mobile-onboarding/
- Project: .claude/skills/mobile-onboarding/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
What do you need before you start?
The skill needs an agent that can read SKILL.md skills. The workflow tells the agent to read a DESIGN.md design-system file, but that file is not included in the provided files. You should supply your own DESIGN.md, or the agent will have to work without one.
The skill does not run scripts and does not use the network, according to its listing.
- An agent that can read SKILL.md skills
- A DESIGN.md file of your own, referenced by the workflow but not included
How do you trigger the skill with a natural request?
The skill's description lists phrases that should match it, such as "mobile onboarding", "ios onboarding", "android onboarding", "phone signup" and "app onboarding". Describe the app, its audience and the screens you want, and include one of these phrases so the agent recognises the task.
The skill's example prompt is a good model for your own requests.
- Design a 3-screen mobile onboarding flow for a meditation app: welcome, value props, sign-in.
- Create an iOS onboarding mockup for a fitness tracker with a sign-in screen.
- Make a phone signup flow for a budgeting app with a clear primary button.
What should you check in the output?
The output is one HTML page. Open it in a browser to preview the three screens. Check that each phone has the status bar, pagination dots, hero artwork, headline and main call-to-action button described in the workflow.
Treat the page as a static mockup. It is useful for discussion and visual direction, not as a working app.
- Confirm all three screens appear side by side
- Check that the sign-in screen offers sign-in or continue options
- Ask for changes to colour, type or copy and rerun the request
What are the safety notes and limits?
The skill draws sign-in buttons but does not configure any login provider. It is not suitable for real authentication or security design. It also does not produce native iOS or Android code, so it will not handle real sign-in or app logic.
Because the skill runs no scripts and uses no network, its only output is the HTML page the agent writes.
- Not for production app code; output is a static HTML mockup
- Not for authentication or account security design
- No scripts run and no network use, per the listing
What people use it for
- Sketching a welcome, value-prop and sign-in flow for a meditation app before design review
- Giving developers a visual reference for a mobile signup flow before they build it
- Exploring colour and typography options for a fitness app's first-run experience
- Producing a quick concept to show founders or stakeholders
Frequently asked questions
Is the mobile-onboarding skill free?
The skill is licensed under Apache-2.0, as listed on its page. Check the licence file in the download for the full terms. The listing does not mention any price.
What do I need to use the mobile onboarding skill?
You need an agent that can read SKILL.md skills. The workflow also refers to a DESIGN.md design-system file, which is not included, so you should provide your own.
How do I install the mobile-onboarding skill in Claude?
Unzip the downloaded folder into ~/.claude/skills/ or a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Does the skill generate iOS or Android app code?
No. It outputs a static HTML mockup of three phone screens, not native iOS or Android screens. It is meant for visual concepts, not production code.
Does the skill run scripts or use the internet?
According to its listing, it runs no scripts and uses no network.
Can this skill set up real sign-in or login?
No. It only draws sign-in buttons and does not configure any login provider, so it should not be relied on for account security.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a product designer, developer or founder who wants a quick visual concept of a mobile app's first-run screens. Pick something else if you need working native app code, real authentication or security design.
Download the skill