Design Process

Set up the project repo and the Figma MCP bridge. Automate competitor analysis.

• README.md
• research.md

Extract personas and user jobs straight from the research file. No guessing.

• personas.md
• jtbd.md

Translate jobs and personas into flows and structural maps. In code, not Figma.

• sitemap.md
• navigation.md
• flows.mmd

Build semantic, interactive HTML wireframes that cover every state early.

• /wireframes

Define one copy guide, then write every string in a single sweep.

• voice.md
• microcopy.md

Deconstruct references, then build two or three visual directions directly in code.

• /concepts

Drop real graphics and icons into the chosen concept, straight from the workspace.

• /screens

Extract colour, type and spacing from the concept code into structured variables.

• tokens.css
• /components

Compile components into a code-based style guide built on atomic design. One source of truth.

• /styleguide

Assemble screens from atoms, molecules and organisms. Link each one to its Jira ticket.

• screens.fig

Implement the designs in code and iterate locally. Polish until it matches Figma 1:1.

• index.html

Define breakpoint behaviour as rules, not by resizing frames by hand.

• breakpoints.css

Apply one animation language — timing, easing, sequencing — across the whole system.

• motion.css

Generate the whole handoff package straight from the repo files.

• README.md
• /handoff

Push to the repo. Netlify builds and deploys the site.

• /dist

Run corridor and A/B tests, then turn findings into the next hypotheses. The loop restarts at step 10.

• findings.md