By playing, you agree to uListen's Terms and Privacy Policy and YouTube's Terms of Service.

A complete beginner's guide to coding with AI: From PRD to generating your very first lines of code

This episode is for complete beginners. I walk you through how to build your very first coding project using AI tools—even if you’ve never written a line of code.

Claire Vohost

Nov 5, 202545mWatch on YouTube

Summaries, chapters, transcripts, and FAQs on this page are made by uListen, not YouTube.

CHAPTERS

Jump to publisher timestamps

Chapter summaries

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
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
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
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
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
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
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
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
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
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
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
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
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

Publisher timestamps

Get more out of YouTube videos.

Read along on your phone, search it beside the video, or ask your favorite AI app what was said.