madcompany

UI-driven development

For apps where the screens are the product: consumer and business apps, dashboards, mobile apps. You see and shape the whole UI as a clickable prototype before any real logic is built, then the team wires it up release by release.

Plan with: a product brief and a UX spec. No full PRD needed to start.

Releases

R1Clickable prototype

Every key screen and the navigation between them, on mock data. You click through it in Preview and comment on anything.

R2Working core flows

The signed-off screens wired to a real backend for the main user journeys. Integrations still mocked.

R3+Next features

One release per batch of features or feedback, until it is ready to launch.

Steps

  1. Terminal
    npx madcompany init --mode ui

    Set up, then keep npx madcompany hq running

  2. Claude Code
    /bmad-product-brief

    What the product is and who it is for

  3. Claude Code
    /bmad-ux

    The UX vision and the screens

  4. Claude Code
    /mc-staff

    Pick the team, then restart Claude Code once

  5. Claude Code
    /mc-plan-release

    R1: the clickable prototype

  6. Claude Code
    /mc-ui-sprint

    Click through the screens with the team and comment in Preview until you sign off

  7. Claude Code
    /mc-start

    The team builds the release; you watch HQ and answer Inbox and Human help

  8. HQ
    Releases → Approve

    Or Request changes, which go back to the team

  9. Terminal
    npx madcompany ship R1

    Merge into main and tag; push and deploy are in Human help

  10. Claude Code
    /mc-plan-release

    R2, R3…: the next release from your feedback

You and the team

You

  • Write the brief and the UX direction (/bmad-product-brief, /bmad-ux), or just describe the app to the lead
  • Sit in the UI sprint: open HQ → Preview (or Expo Go on your phone), click Comment on anything; each comment becomes a ticket
  • Sign the screens off
  • Review each release in HQ → Releases
  • Do the Human help items: accounts and keys for the services the app will use, then push and deploy

The team

  • R1: real screens in your stack (Next.js, Expo…) on hard-coded data and a mock API client, with a screenshot on every UI ticket
  • After sign-off: writes the API contract the screens need, then builds the backend to it
  • Later releases replace mocks with real logic, one flow at a time, keeping the signed-off screens intact
  • Files Human help for every service it will need, as soon as it knows

Tips