Skip to content
Get packs

Mobile Onboarding Designer

Creates a three-screen phone onboarding flow as a single HTML design page

Source Download skill
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”
Step-by-step guide: how to use Mobile Onboarding DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    mobile-onboarding.zip
  2. 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. 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.