Wireframes / v1.0.0

First-run workflow wireframe

A low-fidelity first-run flow that gets a user to one meaningful result before introducing optional setup.

Audience

New workspace owners arriving with a real task and limited patience for configuration.

Job to be done

Create the first useful result, preserve progress, and make the next step obvious.

Design direction

Keep visual styling deliberately neutral. Use progressive disclosure, one task per screen, and persistent progress without a decorative onboarding carousel.

Hierarchy

01Outcome statement
02Current task
03Required input
04Primary continue action
05Progress context
06Optional escape path

Required proof

01Example output before setup begins
02Explicit explanation of required permissions
03Saved-progress confirmation

Required states

01First visit
02Input incomplete
03Saving
04Saved
05Permission denied
06Resumed session
07Completed

Responsive behavior

01Use one column at all widths
02Keep primary action reachable above the mobile keyboard
03Move progress from side rail to compact header on mobile

Constraints

01Ask only for information needed for the first result
02Do not block progress on optional profile fields
03Avoid celebratory effects that obscure the completed state

Accessibility

01Associate errors with their fields
02Move focus to the next screen heading after a successful step
03Preserve entered values after validation or network failure

Verification

01Finish and resume the flow with keyboard only
02Interrupt the flow at every step and confirm recovery
03Check validation while the mobile keyboard is open

Tradeoffs

01Deferring optional setup improves completion but may reduce initial profile richness
02A linear path is clearer for first use but needs a visible exit for experienced users

Stack

ReactTailwind CSSReact Router

Connected UI Grids assets

OnboardingChecklist ProductTour ProgressBar

Build handoff

Provider

You are an expert design engineer.

Build a responsive product wireframe: First-run workflow wireframe.

**Purpose:** A low-fidelity first-run flow that gets a user to one meaningful result before introducing optional setup.

**Audience:** New workspace owners arriving with a real task and limited patience for configuration.

**Job to be done:** Create the first useful result, preserve progress, and make the next step obvious.

**Design style:** Keep visual styling deliberately neutral. Use progressive disclosure, one task per screen, and persistent progress without a decorative onboarding carousel.

**Visual hierarchy:** Outcome statement -> Current task -> Required input -> Primary continue action -> Progress context -> Optional escape path

**Responsiveness:** Use one column at all widths Keep primary action reachable above the mobile keyboard Move progress from side rail to compact header on mobile

**Accessibility:** Associate errors with their fields Move focus to the next screen heading after a successful step Preserve entered values after validation or network failure

**Required proof:**
- Example output before setup begins
- Explicit explanation of required permissions
- Saved-progress confirmation

**Required states:**
- First visit
- Input incomplete
- Saving
- Saved
- Permission denied
- Resumed session
- Completed

**Expected technologies:**
- React
- Tailwind CSS
- React Router

**Constraints:**
- Ask only for information needed for the first result
- Do not block progress on optional profile fields
- Avoid celebratory effects that obscure the completed state

**Verification:**
- Finish and resume the flow with keyboard only
- Interrupt the flow at every step and confirm recovery
- Check validation while the mobile keyboard is open

**Tradeoffs:**
- Deferring optional setup improves completion but may reduce initial profile richness
- A linear path is clearer for first use but needs a visible exit for experienced users

**Brand inputs:**
- Product name
- First useful outcome
- Required inputs
- Permission copy
- Completion destination

**Deliver:** A production-ready wireframe implementation plus verification notes.

Use React + Tailwind. Keep it accessible and respect prefers-reduced-motion. Return only the component code.