First Surface — Learn, Design + Build, Wire the Pipeline
A
Pick the First Surface
Choose the first surface to build through the new pipeline. This choice shapes everything that follows — the research, the design, and the first components in the design system.
Select a surface to populate the rest of this phase.
1
Learn the Product
2
Meet the Remote Design Team
Schedule 1:1s with each member of the remote design team. Understand their roles, specialties, and what they're currently working on.
Map their workflow: how do they receive work, what tools do they use, what's their turnaround time, and who do they collaborate with most on the Atheer side?
Understand the project management system — how is design work requested, tracked, and delivered today?
Observe the quality and consistency of their current output. Look at recent deliverables with fresh eyes.
Document everything. This is the baseline you'll measure the new process against.
3
Set Up the Pipeline Infrastructure
Scaffold the repo: React + Tailwind project, Storybook installed, token and component folder structure in place.
Set up Figma — shared libraries, component naming, auto-layout patterns that translate cleanly to code.
Test the roundtrip on one throwaway component to confirm the Figma → Claude Code → React + Tailwind path works before the real surface work starts.
4
Design + Build the Surface
Design and build the chosen surface simultaneously — Figma and Claude Code roundtrip in parallel. What gets designed gets coded in the same motion.
Every component the surface needs becomes a design system component. The surface and the system grow together — there is no separate extraction step.
Stakeholder reviews happen on working code in React + Tailwind, not on static mocks.
5
Stand Up the Design System
Storybook is populated as the surface is built. Each component ships with usage docs, variants, and prop definitions alongside the code.
Tokens, spacing, type, and color are codified — not just designed, but running in the system.
This is Design System v0 — born from a real surface, not a theoretical exercise.
6
Demo + Align Stakeholders
Demo the pipeline and the working surface to PM and Engineering. Show them how it works, not just what it is.
Walk through the Figma ↔ code roundtrip so the team understands the new model — and why it replaces the old agency-driven process.
Align on the plan for Days 31–60: which surface ships, which surface is next.
Outcomes by Day 30
Deep understanding of who uses the product and how.
First surface designed and built through the pipeline — working code, not just mocks.
Pipeline infrastructure proven: repo, Figma, Storybook, Claude Code roundtrip all working.
Design System v0 born from real surface needs — tokens, components, and docs in Storybook.
PM and Engineering aligned on the AI-native build model.
Remote design team fully mapped — roles, workflows, tools, turnaround, and quality baseline documented.
Days 31–60
Ship the First, Design + Build the Next
1
Ship the First Surface
Deploy the first surface (or a meaningful section of it) to production using only components from the new system.
This is the proof point — real product surface area, built entirely through the new pipeline.
2
Measure + Retro
Measure the pipeline: how long from Figma concept to production code? Compare to the old agency-driven process.
Run a retro with Engineering — what worked, what was fragile, what needs to change for the second surface.
Identify which components from the first surface are reusable vs. surface-specific.
A
Pick the Second Surface
Choose the second surface to tackle. The pipeline is proven — this time the focus is speed and system growth.
Select a surface to populate the rest of this phase.
1
Learn the Second Surface
2
Design + Build the Second Surface
Design and build the second surface through the pipeline — Figma and Claude Code roundtrip in parallel, same as the first. Every new component extends the design system.
Existing components get stress-tested against a different context. Reuse what fits, create what doesn't.
Stakeholder reviews happen on working code, same as before. The process is the same — only the surface is new.
3
Present to Leadership
Present results to leadership: the pipeline, the speed, the quality, and the roadmap for surface three.
Show the velocity data — concrete evidence that the new model is faster than what it replaced.
Align on the third surface and the plan for Days 61–90.
Outcomes by Day 60
First surface shipped to production through the pipeline.
Measurable speed comparison: new pipeline vs. old process.
Second surface designed, built, and nearing production-ready.
Design system growing — components reused and stress-tested across two surfaces.
Engineering and leadership confident the model scales.
Remote team tested on the pipeline — clear data on whether they can adapt to the new workflow.
Days 61–90
Third Surface — Scale the System, Train the Org
1
Ship the Second Surface
Deploy the second surface to production. This one should ship meaningfully faster than the first.
2
Measure + Consolidate the System
Measure velocity improvement: how much faster was the second surface compared to the first?
Run a retro: what components were reused, what was new, and what patterns emerged across two surfaces?
Consolidate the design system — it now spans two shipped surfaces. Clean up, unify, and document.
4
Design + Build the Third Surface
The remaining surface is automatically assigned to this phase.
Design and build it through the pipeline. By now the design system covers significant ground — most of the components should already exist.
This surface validates that the system is robust enough for any team member to use, not just the people who built it.
5
Document the Playbook
Document the pipeline as a playbook: how to take any surface from Figma to production using the system.
Include the gotchas, the component naming conventions, the Figma ↔ code patterns, and the review workflow.
This is the artifact that makes the model repeatable without you in the room.
6
Train the Org
Train other designers and engineers to use the pipeline independently. The model only scales if it doesn't depend on one person.
Run hands-on sessions: pick a small component, walk them through the full roundtrip from Figma to Storybook.
7
Present the 90-Day Arc
Present the full 90-day arc to leadership: three surfaces, a mature design system, a repeatable pipeline, a trained team, and a clear recommendation on the design team structure going forward.
Show the velocity curve — each surface shipped faster than the last.
Propose the roadmap for the next 90 days — which surfaces are next, and how the system continues to grow.
Outcomes by Day 90
Three surfaces designed and built through the pipeline — no handoffs, no separate build phase.
Design system covers real product surface area — not a theoretical exercise.
Pipeline is documented and teachable — not dependent on a single person.