How I AIA complete beginner's guide to coding with AI: From PRD to generating your very first lines of code
CHAPTERS
Beginner “safe space” goal: go from zero files to a local AI-built app
Claire frames the episode for true beginners: no coding experience, no local setup knowledge, and lots of uncertainty. The aim is to build a small, useful personal “product hub” app live, accepting hiccups and prioritizing learning over perfect code.
- •Target audience: non-engineers (PMs/designers) and engineers who want to teach teammates
- •Outcome focus: something running locally that’s understandable and useful
- •Tools preview: ChatPRD, v0 (Vercel), Cursor, optional Claude Code
- •Mindset: don’t stress code quality yet; optimize for momentum and clarity
Drafting a minimal PRD in ChatPRD for a personal docs + prototypes hub
She starts like a product builder: write a simple requirements document first to improve downstream prompting. The PRD describes a minimal Next.js web app with two sections—Markdown docs and small prototypes.
- •Use case: “personal project hub” for docs/PRDs/ideas + interactive prototypes
- •Simple IA: left nav with Docs and Prototypes
- •Docs in Markdown with preview; prototypes as small pages/routes
- •Why PRD-first: better prompts, less back-and-forth later
Trying v0.dev for UI-first prototyping (and why it can help beginners)
Claire moves the PRD into v0 because it’s visual, quick to preview, and aligns well with Next.js/Vercel deployment workflows. She explains language/framework choices for beginners and why UI-first tools reduce early IDE complexity.
- •v0 benefits: fast, pretty UI defaults; easy preview without local setup
- •Beginner tip: start with what you can see (UI) before diving into code files
- •Language guidance: pick Python (readable) or JavaScript (web output)
- •v0 typically generates a Next.js (JavaScript/TypeScript) scaffold
Scope creep and errors: recognizing when a vibe-coding tool overbuilds
The v0 output becomes more complex than requested (extra features, sandboxing, file management) and throws errors. Claire treats it as a normal outcome and uses it to teach when to abandon a path quickly.
- •Agentic tools may “go ham” and add features you didn’t ask for
- •Common failure mode: complexity inflation + more debugging than it’s worth
- •Time-boxing: 10 minutes spent is acceptable; walking away is cheap
- •Key lesson: adjust workflow based on the tool’s behavior, not your sunk cost
Pivot to Cursor: scaffold a Next.js app from an empty folder using Agents
She starts from scratch in Cursor with an empty directory and uses the Agents workflow (Cursor 2.0) for a beginner-friendly build experience. Cursor scaffolds the project, installs dependencies, and creates pages quickly.
- •Setup: create an empty folder, open it in Cursor
- •Cursor 2.0 views: Agents (build-oriented) vs Editor (file/code-oriented)
- •Model choice: Composer 1 for speed on a small project
- •Auto-setup: Next.js + TypeScript + Tailwind + ESLint + Markdown libraries
Run locally and iterate: from “Hello World” hub to the right prototype model
Claire runs the app locally (npm run dev) and validates the basic Docs and Prototypes pages. She then corrects a misunderstanding: she wants simple routes to display prototypes, not an in-app prototyping sandbox.
- •Local run: localhost dev server (npm run dev)
- •Initial app: docs section + simple prototypes section
- •Iteration prompt: remove code snippets/sandbox behavior; use route-based prototypes
- •Add on-page instructions so beginners understand how docs/prototypes work
Add version control the beginner way: GitHub Desktop and first commits
She introduces Git and GitHub Desktop as a visual, beginner-friendly way to learn commits, diffs, and change tracking. After initializing the repo, she demonstrates how edits appear and how to discard changes.
- •Why Git matters: history, rollback, collaboration-ready workflow
- •Beginner recommendation: GitHub Desktop vs command line Git
- •Concepts shown: initial commit, gitignore, diffs (green added/red removed)
- •Practical habit: commit in small steps as you progress
Create a reusable PRD-writing agent file inside the repo
Claire sets up an “agents” folder and writes instructions (prd.md) that Cursor can follow to generate consistent PRDs into the docs directory. She refines the agent to emphasize technical/functional requirements over business framing.
- •Pattern: store agent instructions in-repo for easy @mentioning and reuse
- •Agent content: role, principles, PRD structure, checklist
- •Customization: remove exec summary; make it more functional/technical
- •Commit the agent file so it’s versioned and repeatable
Use the PRD agent to generate a real sample doc and validate in the app
She uses the PRD agent to create a “neighborhood task scheduler” PRD for her kid’s small chores business (weeding, trash cans, sweeping). The document appears automatically in the app’s Docs section, proving the workflow end-to-end.
- •Prompt uses the agent instructions to output a new Markdown PRD in /docs
- •App refresh shows the new PRD in the Docs list automatically
- •Feedback loop: PRD is too long → adjust agent rules to shorten output later
- •Value: a local, AI-assisted doc system + display UI + version history
Build a clickable prototype from the PRD inside the prototypes folder
Now she turns the PRD into a lightweight, clickable prototype route without databases or full auth complexity. Cursor generates a new prototype page, which shows up in the app’s Prototypes list automatically.
- •Instruction: “clickable prototype” only—avoid DB/auth setup for learning speed
- •Implementation: new subfolder/route under prototypes appears in UI list
- •Prototype flow includes a simple sign-in interaction and task creation screens
- •Beginner technique: ask chat how to use the prototype when unclear
Debugging with AI: fix a real UI issue (gray input text)
She spots a usability bug (gray text in form fields) and feeds the screenshot/description back to Cursor. Cursor updates styling, and she confirms the fix by re-testing the sign-in flow.
- •Tight loop: observe → describe issue → let agent patch code → re-test
- •Use screenshots/clear symptom descriptions to guide UI fixes
- •Emphasis: you don’t need to understand all code to iterate safely locally
- •Outcome: improved readability and a more usable prototype
Polish and documentation: README update + homepage design refresh
Claire uses an agent prompt to generate/update the repository README so others (or future-you) can run and understand the project. She then asks Cursor to make the homepage “prettier and cuter,” renaming it and improving the design.
- •Good repo hygiene: keep README current with setup, structure, and usage
- •Design iteration via prompt: rename to “Civo Personal Hub,” improve styling
- •Commit changes (even directly to main for a solo/local tutorial)
- •Encouragement: make it fun—gradients/dark mode—because it’s your sandbox
Full workflow recap: PRD → prototype → local app → GitHub → iterate
She summarizes the complete beginner workflow and reinforces the “safe space” framing: try tools, expect misfires, pivot quickly, and aim for a working baseline. Viewers leave with a repeatable template for building docs + prototypes with AI.
- •End-to-end steps: ChatPRD PRD → v0 attempt → pivot to Cursor → local run
- •Create docs system + PRD agent + prototype routes displayed in one hub
- •Add GitHub repo, commit history, publish to cloud, update README
- •Core takeaway: fastest path is often a simple Cursor scaffold + iterative prompts
