An AI-assisted full-stack workflow that doesn't get messy

Most AI-assisted projects don't fail because the model is bad. They fail because the architecture is fuzzy, the rules aren't written down, prompts are too big, and nobody is documenting what shipped. This guide is the workflow we use to keep that from happening.

Before you start

AI coding tools work best when the architecture is clear, the rules are structured, the prompts are focused, and the development is iterative. They fail when you ask them to do everything at once.

• Build feature-by-feature.
• Use vertical slices (DB → API → UI in one go).
• Maintain strict project rules.
• Document continuously — even one line per slice.
• Keep prompts focused on a single outcome.

Recommended stacks

Pick one stable stack and stay consistent. The exact choice matters less than the discipline of not switching mid-build.

Frontend

• Next.js — App Router, RSC, the default for new SaaS work.
• Tailwind CSS — Utility-first styling AI tools handle well.
• shadcn/ui — Copy-in components, easy to extend.
• Tremor — Dashboards and charts on top of Tailwind.

Backend

• FastAPI — Python, typed, great for AI-heavy APIs.
• Convex — Reactive backend with realtime built in.
• Laravel — If your team is already in PHP.

Database

• PostgreSQL — Default for almost everything.
• MongoDB — When the data really is document-shaped.
• Supabase — Postgres + auth + storage in one place.

Auth

• Clerk — Drop-in auth with great Next.js DX.
• Auth.js — Open-source, BYO providers.
• Supabase Auth — Bundled with Supabase Postgres.

AI coding tools

• Cursor — AI-first editor with codebase context.
• Claude Code — Terminal-first agent for repo-wide work.
• Antigravity — AI-assisted workspace + MCP integration.
• Windsurf — Agentic editor from Codeium.
• Trae — Lightweight AI IDE.

UI-first / prototyping tools

• Lovable — Generate full UIs from prompts.
• v0 — Vercel's generative React UI tool.
• Bolt.new — Full-stack prototypes in the browser.
• Figma Make — Generative design inside Figma.

Boilerplates

• Taxonomy — Next.js + shadcn reference build.
• ShipFast — Paid Next.js SaaS starter.
• Wasp — Declarative full-stack framework.

Step 1 — Lock the foundation

Before generating any code, write down the stack, the database, the auth provider, the UI library, and the folder structure. Pin them.

Frontend:  Next.js + Tailwind + shadcn/ui
Backend:   FastAPI
Database:  PostgreSQL
Auth:      Clerk

Step 2 — Write AI rules

AI coding tools need explicit project rules or your code quality drifts, the folder structure goes feral, and APIs become inconsistent. Drop a .cursor/rules/ folder at the repo root and seed it with files for naming, styling, APIs, project context, error handling, database, and auth.

mkdir -p .cursor/rules
touch .cursor/rules/{naming,styling,api-conventions,project-context,error-patterns,database-rules,auth-rules}.mdc

Example rule files

- Use PascalCase for components
- Use camelCase for variables
- Use kebab-case for folders
- Use descriptive filenames

- Always use async/await
- Validate all inputs (Zod)
- Never trust frontend data
- Use consistent API response shapes

Generate the rules system

Analyze this codebase and generate a complete AI rules system. Include: naming conventions, folder structure, API conventions, database conventions, authentication handling, validation patterns, error handling, component architecture, styling conventions, and security guidelines. Optimize the project for AI-assisted development tools like Cursor, Claude Code, and Copilot. Keep the rules practical and implementation-focused.

Step 3 — Generate a PRD

The PRD becomes the source of truth for developers, AI tools, architecture, and feature planning. A good PRD prevents the AI from inventing.

• User roles
• Complete user flows
• Entities + permissions
• Validations + error states
• Edge cases
• UI behavior + API behavior
• Admin functionality
• Mobile behavior
• Integrations

Write the PRD

Write a production-grade PRD for this application. Include: user roles, complete user flows, database entities, permissions, API behavior, validation rules, edge cases, error states, UI behavior, admin functionality, mobile responsiveness, and integrations. The PRD should be detailed enough for an AI coding agent to build the system without guessing. Keep the structure implementation-focused.

Step 4 — Vertical slice plan

Never build the whole app at once. Each slice goes Database → Backend logic → API → Frontend UI → Validation → Testing. Start with auth, then core CRUD, then advanced workflows.

1. Authentication
2. User Profile CRUD
3. Dashboard
4. Payments
5. Notifications
6. Admin Panel

Generate the slice plan

Using the PRD, generate a vertical-slice implementation plan. Rules: build feature-by-feature, start with authentication, then core CRUD, then advanced workflows, keep slices small, keep dependencies logical. Each slice must include database, backend logic, API routes, frontend UI, validation, and testing.