How it works

Three steps.
One deliberate order.

First. is built around a simple workflow: define the problem, lock your system, then generate. No shortcuts. No skipping to the fun part.

01

Write your brief

Define the problem, the user, and the outcome you're chasing. First. coaches you with design thinking principles woven in — not a checklist, but a thinking aid that improves the quality of what gets built.

Every field maps to a principle: problem statement (Double Diamond), primary user (Empathy), desired outcome (Outcome > Output). The brief quality score tells you when you're ready to build.

02

Configure your system

Choose IBM Carbon, Material UI, or paste your own token JSON. Set brand colours, button shapes, input style. Lock the design decisions that should be locked.

Four shell templates — App, Analytics, Admin, Data — give you a persistent layout. Your generated components live inside the shell, never floating in isolation.

03

Build with purpose

Generate components that know who they're for and what problem they solve. Not generic AI output — requirement-grounded UI, built to your exact system, every time.

The AI receives your full brief, your tokens, and your shell. It outputs production-ready HTML that respects your design system. No invented values. No style drift.

Start your first brief →