BEFORE
2.5 to 3 weeks- Design exploration and Figma hi-fi screens (1 week)
- Manual animations and clickable prototype
- Handoff docs and engineering build (1 week)
- QA, fixes, and re-check loop (up to 1 week)
Building an AI-Native Design-to-Code Workflow at Reacher
R E A C H E R
My Role
Product Designer / AI-native Design Engineer
Product Designer / AI-native Design Engineer
Team
2 Designers, Engineers, Product
2 Designers, Engineers, Product
Timeline
Ongoing Workflow
Ongoing Workflow
About Reacher
Reacher↗︎ is a YC backed startup and official TikTok shop partner, helping TikTok Shop brands grow affiliate revenue through creator discovery, outreach, and campaign automations at scale.
Main Users: TikTok Shop affiliate managers, ecommerce brands, agencies.
Y Combinator backed
TikTok Shop partner
Background
Reacher was shipping fast across AI search, automation, analytics, and creator workflows. As the product grew, the gap between Figma and shipped UI widened. Similar components were hardcoded differently. QA needed back-and-forth on details the design system should have settled. Tracking was unreliable: events missing, mismapped, or added after launch, producing misleading insights.
This wasn't a visual consistency problem. It was a workflow problem. I turned a design system migration into the foundation for AI-assisted shipping: source-of-truth components, Storybook QA, codebase-aware prototyping, front-end PRs, production polish, and PostHog measurement.
Rebuilding the source-of-truth UI system first
Before AI-assisted shipping could scale, the team needed a reliable foundation. With one other designer, I audited UI misalignments across the product, found the repeated patterns, and rebuilt the library into 50+ components engineers could trust.
The system rolled out across the product and became the shared reference for design, prototyping, implementation, and every AI-assisted change that came after.
Audit
Find repeated UI and design/code mismatch.
Systemize
Create reusable components and variants.
QA
Review implementation in Storybook.
Migrate
Apply the system across product surfaces.
The Solution: Turning Static Handoff Into Shipped Code
WITH AI WORKFLOW
~1 week- AI-assisted prototype aligned with the design system (1-2 days)
- Product alignment and refinement (1-2 days)
- Code-ready handoff, or repo for big projects
- Engineers handle backend; frontend is done
With the design system in place, I built the workflow: designers ship code directly, prototypes are code-ready, and projects ship 3Ă— faster.
1. Designing with code, not just for it
Design work didn't stop at handoff. Using the design system and codebase context, I shipped UI changes directly into the product through PRs.
| Work type | What I contributed | Why it mattered |
|---|---|---|
| UI migration | Replaced hardcoded surfaces with design-system components. | Reduced visual drift and made future changes easier. |
| Feature launch modal | Designed directly in code for faster review and iteration. | Helped the team inspect the real experience instead of a static mock. |
| Bug fixes and polish | Adjusted layout, responsive behavior, copy, and component usage. | Closed the gap between design intent and shipped UI. |
2. AI-assisted prototypes replaced static handoff
Static Figma screens couldn't carry complex features. I built AI-assisted HTML prototypes engineers could open in the browser, with real interactions, real data, and edge cases surfaced in code.
| Figma | AI-assisted HTML prototype | |
|---|---|---|
| Speed | Hours per state, frame by frame. | Whole flow in minutes, refined in code. |
| Interactions | Click-through, hand-wired. | Real hover, scroll, keyboard, responsive. |
| Data | A frame per state. | Live database data. |
| Edge cases | Duplicate screens, often skipped at handoff. | Empty, error, loading surfaced programmatically. |
| Handoff | Static, needs translation. | Code-ready, sometimes the code itself. |
3. A complete project: redesigning the CRM videos page
Here's the workflow on a real project. The CRM videos page had low traffic and a UX no one had revisited in years. Instead of redesigning blind, I orchestrated an AI research workflow first, then designed from real signal.
RESEARCH
Slack channels
Client feedback pulled via the Slack MCP.
Session recordings
Cross-referenced with PostHog to find the highest-impact blocker.
DESIGN
Layout exploration
Generated layout options in Stitch, aligned with team direction.
Clickable prototype
Built in Claude, pointed at the UI folder to stay aligned with the design system.
4. Mapping UI to PostHog events for measurable shipping
Tracking became part of design, not after-launch cleanup. I defined UI-to-event mapping alongside the UI, with component-level tracking attributes that stayed accurate when the UI changed. Using PostHog's MCP, I created actions and dashboards directly from the design workflow.
I built AI agents that ship case studies, newsletters, and product updates
I applied the same workflow mindset to product communication. Each agent turns raw inputs (interview notes, metric screenshots, product updates) into shipped artifacts through a chain of structured steps, with a human review loop before publishing.
Case study agent
Raw interviews and metric screenshots flow through a chain of markdown agents into a finished case study deck.
Newsletter agent
A reusable Figma email template, automated to HubSpot. Product updates become newsletter drafts ready for review.
Changelog agent
Shipped features become user-facing announcements at the moment of use, without leaving the product.
Outcome
54+
components, 200+ variants in the design system
3Ă—
faster: 3 weeks → 1 week from idea to shipped UI
15+
front-end PRs shipped per month
21
case studies + 3 launches via AI agents
The design system migration was a one-time investment that changed how future product work moves. The team now ships from a stronger source of truth, prototypes complex flows in code, makes design-to-production changes directly, and plans tracking alongside UI instead of after launch.
The result is a faster path from product request to shipped, measurable UI, with stronger design-code alignment and less back-and-forth between design and engineering.
Reflection
The traditional Figma-to-engineering handoff creates misalignment and wastes time on QA. AI is transforming the role itself: designers can now think like PMs, build like engineers, and ship from the codebase. The team moves faster, with stronger alignment between design intent and shipped UI.