How I AIA complete beginner's guide to coding with AI: From PRD to generating your very first lines of code
CHAPTERS
- 0:04 – 5:07
Safe-space goal: go from zero code to a local AI-built app
Claire frames the episode for absolute beginners who have never coded, aiming to build something runnable on a laptop using AI tools. She sets expectations: it’s live, may be messy, and the priority is getting something working—not perfect code.
- •Who the episode is for: non-engineers (and engineers sharing with PMs/designers)
- •Target outcome: a simple local app you can run and iterate on
- •Mindset: prioritize learning and momentum over code quality
- •Tools preview: ChatPRD, v0, Cursor, optional Claude Code
- 5:07 – 8:40
Start with a lightweight PRD in ChatPRD (personal project hub concept)
She demonstrates using ChatPRD to turn a simple idea into a requirements document: a personal hub with two areas—docs (Markdown PRDs/ideas) and prototypes. The PRD is positioned as a way to reduce prompting later and improve build results.
- •App concept: left-nav with Docs + Prototypes
- •Docs stored in Markdown; prototypes as small interactive demos
- •Why PRDs help: clearer scope and better downstream prompts
- •Keeping it intentionally minimal for a beginner workflow
- 8:40 – 11:43
First prototype attempt in v0: why she likes it, and what to watch for
Claire moves the PRD into v0 because it’s visually immediate and beginner-friendly (no local setup needed). She explains why web-first prototyping can reduce intimidation before diving into IDEs and code.
- •v0 benefits: quick, pretty UI; easy path toward Vercel/Next.js workflows
- •Beginner-friendly: see the app before dealing with local environment
- •Language guidance: Python vs JavaScript tradeoffs for AI-assisted learning
- •Goal: prototype-first, code-second for non-technical builders
- 11:43 – 15:15
v0 scope creep and errors: recognizing when to pivot
The v0 generation becomes over-scoped (extra features, sandboxing, file management) and hits issues. Claire uses this as a teachable moment: it’s okay to abandon a path quickly when the tool overbuilds or drifts from requirements.
- •Common failure mode: agentic tools add complexity you didn’t ask for
- •Signals to stop: errors + unwanted features + too much back-and-forth
- •Time cost framing: 10 minutes spent is acceptable; pivot is cheap
- •Lesson: workflow choice matters more than forcing one tool to work
- 15:15 – 19:19
Pivot to Cursor from an empty folder (Cursor 2.0 Agents flow)
She starts fresh in Cursor with an empty directory and uses the Agents view to generate a basic Next.js app. The focus is on beginner accessibility: ask the agent to scaffold everything and provide run instructions.
- •Setup: create an empty folder, open it in Cursor
- •Cursor 2.0: Agents view vs Editor view
- •Model choice: Composer 1 for speed on small projects
- •Prompting: “keep it super basic” + include steps to run locally
- 19:19 – 24:24
Run locally and refine: a simple Docs + Prototypes hub emerges
Claire runs `npm run dev` and opens localhost to confirm the app works. She then corrects the prototype approach—she wants simple routes to display prototypes, not an embedded code sandbox or snippets.
- •Local run loop: get to a working localhost app quickly
- •Docs area: basic structure is correct at desired complexity
- •Prototypes correction: routes/pages for demos, not code snippets tooling
- •Add homepage instructions so the app explains how to use it
- 24:24 – 26:56
Beginner-friendly GitHub setup using GitHub Desktop (visual diffs & commits)
She adds version control via GitHub Desktop rather than the CLI to reduce friction for non-technical users. Claire shows how to view diffs, discard changes, and commit, emphasizing Git as a safety net for experimentation.
- •Why Git matters: change tracking, undo ability, collaboration readiness
- •Recommendation: GitHub Desktop for visual learning (diffs, staging)
- •Concepts introduced: .gitignore, commits, history, discarding changes
- •Safe experimentation: iterate locally with confidence
- 26:56 – 30:59
Create a PRD-writing agent file in the repo (repeatable documentation workflow)
Claire creates an `agents/prd.md` instruction file to standardize how AI writes PRDs into the `docs` folder. She iterates on the agent to be more technical/functional and commits the agent instructions to Git.
- •Pattern: store agent instructions as files you can @mention
- •Agent requirements: Markdown PRDs, under 500 lines of instructions
- •Template tuning: bias toward technical requirements over business polish
- •Commit the agent file so the workflow is versioned
- 30:59 – 35:03
Use the agent to generate a real PRD and render it in the app
She prompts Cursor to write a PRD for a neighborhood task scheduling app (kid helping neighbors). The generated PRD lands in the docs folder and immediately appears in the web app’s Docs list, proving the end-to-end loop.
- •Example PRD: scheduling weeding/trash/sweeping for neighbors
- •Agent-driven generation: consistent structure without manual formatting
- •App integration: docs auto-discovered and rendered with Markdown
- •Iterate on agent if output is too long or not suited to solo use
- 35:03 – 37:03
Build a clickable prototype from the PRD (no database, no auth complexity)
Claire uses the PRD to generate a prototype route under the `prototypes` folder, explicitly requesting a clickable demo without real backend dependencies. The new prototype appears in the Prototypes list and works locally.
- •Prototype strategy: keep it frontend/clickable to avoid setup overhead
- •Auto-discovery: new prototypes folder/route appears in the app UI
- •Practical PM use: build a library of small demos to learn and share
- •Emphasis: learn by shipping small, visible iterations
- 37:03 – 39:36
Test, debug, and iterate with Cursor (fix UI issue fast)
She notices gray text in form fields, drops a screenshot into Cursor, and asks it to fix the styling. The issue is resolved quickly, demonstrating an approachable feedback loop for beginners: observe → ask → rerun.
- •Testing loop: refresh locally, click through, note UX bugs
- •Debug tactic: use screenshots + plain-language instructions
- •Quick win: fix input text color/readability
- •Reinforces: you don’t need to understand all code to improve it
- 39:36 – 42:37
Polish the repo: publish to GitHub, update README, and improve homepage design
Claire publishes the repository to GitHub, uses an agent to generate/update the README, and then prompts Cursor to redesign the homepage to be “prettier and cuter” with a new name. She commits the final polish to round out the workflow.
- •Push to cloud: publish repo so it’s not only local
- •Documentation: README as the entry point for future you/teammates
- •UI polish: update branding and layout of the homepage
- •Commit discipline: checkpoint progress with meaningful commits
- 42:37 – 45:01
Recap: the complete beginner workflow from PRD to local app + prototype
She summarizes the full journey: PRD in ChatPRD, v0 attempt (abandoned), rebuild in Cursor, run locally, add GitHub, create a PRD agent, generate docs, generate a prototype, and add documentation/design polish. The takeaway is a repeatable “safe space” starter repo for learning AI-assisted coding.
- •End-to-end steps: PRD → scaffold → run → version control → agents → docs → prototypes → polish
- •Key lesson: pivot quickly when a tool overcomplicates scope
- •Outcome: a personal hub to store Markdown docs and demo prototypes
- •Encouragement: use it as a sandbox to build confidence and habits
