Skip to main content

🎨 Step 4: UX Mode

Days 4-5 of your journey

You know what to build and how to build it. Now it's time to design how it looks and feels. UX mode helps you plan your user interface and user flows before you write a single line of code.

Purpose​

In UX mode, OneMillion Code acts as a product designer. It will:

  • Help you sketch out wireframes and layouts
  • Design user flows (what happens when a user clicks X?)
  • Plan responsive layouts for mobile and desktop
  • Guide you through component design decisions

When to Use This Mode​

Use UX mode when:

  • You've finished planning and are ready to design the interface
  • You want to map out how users will navigate your app
  • You need help deciding on layout and component structure
  • You want to plan responsive design before coding

Available Tools​

ToolPurpose
readReview your spec and plan docs
editCreate wireframe descriptions and design docs
browserResearch design patterns and UI inspiration

Example Prompts​

Wireframing​

Based on my spec, help me wireframe the main screen
of my water reminder app. What should the user see first?

Component Design​

What components do I need for a settings page?
List them out with what each one does.

User Flow Mapping​

Walk me through the user flow from opening the app
to setting their first reminder. What screens do they see?

Responsive Layout Planning​

How should my app layout change between mobile and desktop?
What should stack vs. sit side-by-side?

Design Decisions​

Should I use a sidebar or a bottom navigation?
My app has 3 main sections.

The UX Process​

1. Map Your Screens​

List every screen your user will see:

Main screens for Water Reminder:
- Home (counter + quick log button)
- History (daily/weekly view)
- Settings (reminder interval, goals)
- Onboarding (first-time setup)

2. Design User Flows​

For each key action, map the steps:

Setting a reminder:
Home → Settings → Choose interval → Confirm → Back to Home

3. Wireframe Key Screens​

Describe what goes where on each screen:

Home Screen:
┌─────────────────┐
│   Water Today    │
│      💧         │
│     5 / 8       │
│                 │
│  [+ Log Water]  │
│                 │
│  Next reminder  │
│    in 25 min    │
└─────────────────┘

4. Plan Components​

Break screens into reusable pieces:

Components needed:
- WaterCounter (shows current/goal)
- LogButton (big tap target)
- ReminderTimer (countdown)
- HistoryChart (daily bars)

5. Consider Responsive Layout​

Think about how layouts adapt:

Mobile: Single column, stacked
Tablet: Two columns where it makes sense
Desktop: Sidebar + main content area

What OneMillion Code Will Do​

When you ask OneMillion Code about UX, it will:

  1. Review your spec — Understand what features need UI
  2. Suggest layouts — Propose screen arrangements
  3. Map flows — Show how users move between screens
  4. Identify components — Break the UI into buildable pieces
  5. Consider edge cases — Empty states, loading, errors

Key Concepts for Beginners​

Wireframes​

A wireframe is a simple sketch of a screen. No colors, no fancy graphics—just boxes and text showing where things go. Think of it as a blueprint.

User Flow​

A user flow is the path a user takes to accomplish a task. Like directions on a map: "Start here, click this, see that, done."

Components​

A component is a reusable piece of your interface. A button is a component. A navigation bar is a component. You build big screens out of small components.

Responsive Design​

Responsive design means your app looks good on any screen size—phone, tablet, or desktop. Elements rearrange and resize to fit.

Common Mistakes​

Mistake 1: Skipping UX and Jumping to Code​

Problem: You start coding without knowing what you're building visually. Fix: Spend an hour in UX mode. It saves days of rewriting later.

Mistake 2: Overdesigning​

Problem: Spending too long making pixel-perfect wireframes. Fix: Keep it rough. You just need enough to know what to build.

Mistake 3: Forgetting Mobile​

Problem: Designing only for desktop, then mobile looks broken. Fix: Design mobile-first. It's easier to expand than to shrink.

Mistake 4: Ignoring Empty States​

Problem: What does the app look like before the user has any data? Fix: Design the "first use" experience. It's the first impression.

Progress Checkpoints​

  • All screens identified and listed
  • Key user flows mapped out
  • Main screens wireframed (rough is fine)
  • Components identified
  • Mobile layout considered
  • Empty states planned

When to Move On​

You're ready for 💻 Build mode when:

  • ✅ You know what every screen looks like (roughly)
  • ✅ You know how users move between screens
  • ✅ You've identified the components you need
  • ✅ You have a plan for mobile vs. desktop layout

Switching to Build Mode​

When you're ready, switch to Build mode:

Slash command: /build

Or say: "I know what the UI looks like. Let's start building it."

← Step 3: Plan

Step 5: Build →

Video Coming Soon

A walkthrough video for UX mode is in production. Check back soon or join our Discord for updates.