Skip to content


How to scaffold an AI product

1 min read

With AI, it’s easy to go fast and hard to go slow. I constantly remind myself not to outsource my thinking to AI.

This is how I scaffolded Rally end to end: stack choices, research rhythm, and where AI fits without skipping product discipline. The framework below is what I return to when starting from zero.

01

Choose the stack

Pick popular, well-documented stacks, because AI generated code works best against what the models already know well.

Framework
Next.js
Database
Supabase
Design System
ShadCN·TweakCN
AI SDK
Vercel AI SDK

Unified interface for calling multiple LLM providers without app level rewrites.

Observability

Iterate on prompts and monitor prompt & model related errors.

02

Coding assistant & data sources

I delegate coding and data sourcing to external tools.

Coding
Claude Code·Cursor

I use Claude Code for heavy lifts and Cursor for pixel perfect detail work.

Data sources
TikTok via Apify

Used a vendor API to focus on the MVP first.

03

Flow mapping

The biggest shift for me as a designer was learning to map data flow and AI orchestration alongside the user flow. I worked closely with engineers to understand how data and agent behavior shape the UX. You can't design an AI product well without a working mental model of both.

User flow

Map each user step from interviews and onboarding calls, then mark where AI should assist versus stay invisible.

Data flow

Define what input, context, and memory each step needs so outputs remain reliable.

AI agent flow

Choose between faster high-level orchestration and more controllable step-by-step orchestration based on UX risk.

04

Research & PRD drafting

I use Claude's plan mode to explore options and pressure test ideas before committing to a spec. I wish I've used this more often to save time & tokens for refactoring.

Process
Claude Plan ModeBrainstormDraftRefine

Draft key behaviors in plain language first, then convert them into implementation ready requirements.

05

Prototyping

Prompts iterations is as important as design iterations. Reframe the same PRD and UX problem into several prompts so each attempt surfaces a different perspective, then merge the strongest ideas across them.

Tools

In addition to Claude desktop, Figma Make, Lovable.

Process
Prompt iterations

I run several tools in parallel with the same problem framed differently in each prompt.

06

Build & Iterate

Scaffold fast, iterate fast, and stabilize the foundation before moving on. The harder discipline is slowing down to clarify what you actually want before asking AI to build it.

Rally experience
3× time spent refactoring

I spent roughly 3× the time refactoring after the initial scaffold. Mostly because the UX flow and data structure weren't sharp enough before I started generating code.

Lesson
Clarify before you generate

Looking back, I'd spend more time mapping the UX flow and data structure before asking AI to build. AI is a black box, upfront clarity is what prevents expensive rework later.

07

Refine & polish

Polish is the most taste dependent step. I layer a few tools to push every detail. First a structured design audit, then a component-by-component pass where I manually pick apart what still feels off.

Design audit
Claude skills

Run the frontend-design skill for a structured critique, supplemented by impeccable.style and skills.sh for pattern inspiration.

Detailing pass
Cursor·agentation

Audits get you 70% there — the last 30% is manual. I go through the UI in Cursor, component by component, and annotate every detail I want changed.