hermes

Design a first-run onboarding flow

Designs a first-run onboarding flow that gets new users to the activation moment fast, using progressive disclosure, skip paths and measurable steps. Use when designing or fixing onboarding.

context

Onboarding is usually designed as a tour of features: five carousel screens, a profile form, a tooltip on every button. Most users skip or forget it, then leave before they ever do the one thing that makes the product useful. Good onboarding works backwards from the activation moment, removes or defers everything not on the path to it, and teaches in context, at the moment a feature becomes relevant.

task

Design the first-run onboarding for this product, aimed at the activation event ph:activation_event.

product

  1. Check the activation event. It should be a user action, reachable in the first session, and plausibly tied to retention. If it is a vanity event ("completed profile", "watched tour"), say why and propose a better one, then design for the better one and state that assumption.
  2. Map the shortest path from sign-up to activation. List every step the current flow (or a naive flow) would include, then decide for each: keep, remove, defer, or automate (sensible defaults, templates, sample data, import).
  3. Design the flow:
  • Ask at sign-up only what is needed to start. Ask personalisation questions only if the answers change what the user sees, and say what each one changes.
  • Get the user into the product early and let them act on something real or realistic (a template, sample project, or pre-filled draft) rather than an empty screen.
  • Use progressive disclosure: introduce secondary features at the moment they become relevant, triggered by behaviour, not by time.
  • Prefer contextual guidance (empty states that teach, one inline hint, a short checklist tied to activation) to product tours.
  • Give every non-essential step a visible skip, and a way back to it later (checklist, settings, resume banner).
  1. Cover other entry paths: invited users joining an existing workspace, users who abandon mid-flow and return, users on mobile, and experienced users switching from a competitor.
  2. Define measurement: the funnel steps to instrument, time to activation, activation rate, and the guardrail metric (e.g. week-2 retention) that shows the change is real.
  3. Propose 2 to 3 experiments, each with hypothesis, change, primary metric and the risk it addresses.
  4. If key facts are missing (who signs up, what setup is truly required), make a reasonable assumption, label it, and list it in Questions. If the product description is too thin to design anything, ask first.
constraints
  • Every step in the flow must earn its place by moving the user towards or by being legally or technically required. Say which.
  • No dark patterns: no hidden skip links, no forced invitations or contact uploads, no pre-ticked marketing consent, no fake progress.
  • Do not invent data about the current flow. If no metrics were given, say the plan relies on assumptions until they are measured.
  • Separate what you verified from what you inferred. Mark inferences as such.
  • When you do not know, say "I don't know" once and state what would settle it.
output format

Activation

The activation event (as given or revised, with reasoning), the target time to reach it, and the "aha" the user should feel.

Flow

| # | Screen or moment | User goal | What we show or ask | Why it is here | Skip path |

Deferred

| Item removed from first run | When and how it appears instead |

Edge cases

Invited users, returning after abandoning, mobile, experienced switchers.

Measurement

Funnel events, metrics and guardrail.

Experiments

Hypothesis, change, primary metric, risk.

Questions

Assumptions to confirm.

2 required values still a placeholder; the assistant will ask for them.

details

kind
Prompt: a task you run by name to get one finished thing back
domain
Design
category
UI design
level
Intermediate
made for
Product / UX / UI designer, Product manager, Founder / business owner
risk
read-only
version
v1.0.0 · incubating
reviewed
2026-10-02
works in
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf, Zed, Continue, AGENTS.md, ChatGPT, claude.ai

Edit on GitHubReport a problem

use in

Hodios CLI
npx @hermes-hq/hodios install design-onboarding-flow --target claude-code
Agent Skills
npx skills add hermes-hq/hodios-dist --skill design-onboarding-flow -a claude-code
Add the Hodios marketplace (once)
claude plugin marketplace add hermes-hq/hodios-dist
Install the design plugin
claude plugin install hodios-design@hodios

The plugin brings every entry in this domain at once.

pairs well with

All of UI design
PromptUI design

Write UX microcopy

Writes interface microcopy (buttons, labels, empty states, errors, confirmations, success messages) that is clear, consistent and in the product's voice. Use when designing or reviewing screens.

write-ux-microcopy
PromptUI design

Write a text wireframe spec

Writes a low-fidelity text wireframe for one screen with layout regions, components, content hierarchy, all states and responsive behaviour. Use before visual design or to brief a developer.

create-wireframe-spec
PromptUX research

Build a user journey map from research

Builds an evidence-based journey map with stages, actions, thoughts, emotions, pain points and opportunities, marking every assumption. Use after interviews or studies about one segment.

build-user-journey-map
PersonaUI design

Product designer

Product designer who frames the problem before the pixels, explores several options, designs every state and defends decisions with user evidence. Use as a design partner or reviewer.

product-designer
PromptUI design

Adapt a desktop design for mobile

Adapts a desktop screen to mobile by ranking content, choosing layout changes, touch targets and a navigation pattern, and deciding what to drop or defer. Use for responsive products.

adapt-design-for-mobile
PromptUI design

Critique a UI screen

Critiques one interface screen for hierarchy, layout, consistency, clarity and accessibility against its goal, and returns prioritised, concrete fixes. Use when reviewing a mockup or live screen.

critique-ui-screen