Home

Draft v0

Ship faster. Build smarter. A full-stack TypeScript scaffold with an AI-powered development system — 17 skills, 8 agents, and 12 prompt templates that enforce your conventions automatically and translate Figma designs into production code.

Quick Start

git clone https://github.com/michelve/draft_v0.git
cd draft_v0
pnpm install && cp .env.example .env
pnpm db:push
pnpm tokens:build
pnpm dev

Frontend: http://localhost:5173 · API: http://localhost:3001

---

What's Inside

Section	Pages
Getting started	Getting Started · Tech Stack · Why Draft v0
Architecture	Project Structure · Architecture Decisions
AI Workflow	AI Overview · Skills · Agents · Prompts · Instructions & Rules
Design System	DSAi Design System — token pipeline, Bootstrap integration, component approach, dark mode
Figma & Design	Figma Integration · Figma Tokens · Figma Code Connect
Workflows	Tasks Workflow · Contributing

---

Why This Scaffold?

Traditional scaffolds give you a tech stack and leave you on your own. Draft v0 gives you a complete development system that works the same way as an experienced engineer on your team:

• 17 skills — AI domain knowledge for every layer of the stack (React 19, TanStack, Express, Prisma, DSAi, Figma)
• 8 agents — Autonomous workers that fix TypeScript errors, review code, plan refactors, and research solutions
• 12 prompt templates — One-click workflows: build a page, implement a Figma design, commit, create a PR
• File-based task management — AI-created and AI-verified tasks in .tasks/, version-controlled alongside code
• 14 Architecture Decision Records — The captured "why" behind every major technical choice
• Figma-to-code pipeline — Translate designs to production React components with 1:1 visual fidelity

---

Tech Stack at a Glance

Layer	Technology
Frontend	React 19, TypeScript, TanStack Router + Query
Design System	DSAi design tokens + Bootstrap 5.3
Backend	Node.js, Express, TypeScript
Database	Prisma ORM (SQLite default)
Build	Vite 6, TypeScript strict mode
Testing	Vitest (unit), Playwright (e2e)
Quality	Biome, ESLint
Design	Figma MCP servers, Figma Code Connect

→ Full Tech Stack Details · Architecture Decisions

---

Where to Start

New to the project? → Getting Started

Coming from a design background? → Why Draft v0 for Designers · Figma Integration

Want to understand the AI system? → AI Overview · Skills Reference

Looking for a specific skill or agent? → Skills Reference · Agents Reference · Prompts Reference

Working with design tokens or components? → DSAi Design System

---

DSAi Design System

The project uses the DSAi design system — a token-driven approach built on Bootstrap 5.3. Design tokens are defined as structured JSON collections, synced from Figma, and built into CSS custom properties, SCSS variables, and JS/TS constants.

Key Commands

# Build design tokens (CSS, SCSS, JS, TS, JSON outputs)
pnpm tokens:build

# Watch mode — rebuild on token changes
pnpm tokens:watch

# Sync tokens from Figma
pnpm figma:sync

# Validate token JSON files
pnpm tokens:validate

Token Pipeline

Figma → pnpm figma:sync → src/collections/ (JSON) → pnpm tokens:build → src/generated/ (CSS/SCSS/JS/TS/JSON)

→ Full DSAi Design System Guide