Skip to content

Writing

Building Rally - Part 1

1 min read

How I scaffolded an agentic product from scratch as a product designer

This is a concise map of how I scaffolded Rally end to end: stack choices, research rhythm, and where AI fits without skipping product discipline. The timeline below is the structure I return to when starting from zero.

1

Choose your stack

Foundation infrastructure — frontend, database, UI, AI, observability

Framework & hosting
Next.jsGitHub
Database
Supabase
UI component library
ShadCN
AI SDK — standardized interface to models
Vercel AI SDKOpenAIAnthropic
Observability & evals
Braintrust
Iterate across models, run prompt evals, monitor logs — critical for AI products
2

Coding environment & data sources

Tooling, reuse patterns, and external data ingestion

Coding tools
CursorClaude Code
Project reuse pattern
Once one project is running, copy-paste the working scaffold into the next app — avoids re-configuring from scratch
External data (for data-intensive products)
Third-party TikTok API via Apify
Rally fetches TikTok data via a vendor API rather than the official TikTok API — necessary when platform access is restricted
3

UX, data & AI flow mapping most important

Traditional UX design process adapted for AI products

User flow

Interview users, analyze onboarding calls, map every step. Find what can be automated, augmented, or replaced by an agent.

Data flow

What data comes from the user as context? What does AI need to process? What feeds the learning loop? What does the agent need as memory?

AI agent flow

Design the agent architecture. General manager model (less visibility) vs micro-managed (more control). Directly tied to UX and what users see.

AI was used to analyze interview transcripts and onboarding recordings to surface patterns — then map those patterns to the three flows above
4

Research & PRD drafting

Competitive landscape + spec creation

Inputs
Competitive researchPeer product analysisExisting design patterns
Process
Claude Plan Mode / Cursorbrainstorm →PRD draftiterate →Final spec
Talk it out with AI first — draft the user flow, key behaviors, and step-by-step experience before writing formal requirements
5

Prototyping

Generate multiple design variants, iterate fast

AI prototyping tools
Figma AILovableClaude Desktopv0
Run multiple tools in parallel to generate design variants, then consolidate into one direction. Speed over fidelity at this stage.
6

Build → Refactor → Enforce

Scaffold fast, rebuild clean, lock the foundation

Timeline (Rally experience)

Week 1 — scaffold

AI-generated prototype scaffolded at speed. Everything works technically, but quality is uneven.

Weeks 2–3 — refactor

Near full rebuild. Inconsistent UI, component drift, and no shared patterns required major rework.

Lessons learned
Enforce design system from day 1
Forcing AI codegen to use one design system from the initial build minimizes UI refactors later. The faster the initial build, the more important this constraint is.
7

Refine & polish

Elevate UI quality once the foundation is stable

Approach
Use skills
Skills are curated interaction and animation references that help lift UI quality quickly — study motion patterns, copy techniques, and apply them to your components once the scaffold is locked.
Recommended resources