Skip to content
How I AIHow I AI

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. Together, we’ll create a personal project hub that automatically generates documentation and lets you build interactive prototypes. I’ll show you the process step by step—from setting up a repository, to creating AI agents that help with specific tasks, to deploying a functional web app locally. *What you’ll learn:* 1. How to set up a simple Next.js application from scratch using Cursor’s AI agent capabilities 2. My workflow for creating AI agents that generate consistent documentation (like PRDs in Markdown format) 3. How to build and display clickable prototypes without worrying about complex backend functionality 4. The basics of using GitHub to track changes and manage your code repository as a non-technical person 5. Why starting with a personal project hub is the best way to ease into AI-assisted coding 6. My favorite practical tips for iterating on designs and functionality using AI tools—without needing deep technical expertise *Brought to you by:* ChatPRD—An AI copilot for PMs and their teams: https://www.chatprd.ai/howiai *In this episode, we cover:* (00:00) Introduction (05:11) Starting with a requirements document in ChatPRD (08:22) Attempting to use v0 for initial prototyping (15:02) Pivoting to Cursor for initial prototyping (20:20) Running the app locally and reviewing the initial version (24:07) Setting up GitHub for version control (27:09) Creating an AI agent for writing PRDs (31:04) Using the agent to create a sample PRD (35:00) Building a prototype based on the PRD (37:00) Testing and improving the prototype (40:00) Adding documentation and improving the design (43:20) Recap of the complete workflow *Tools referenced:* • Cursor: https://cursor.com/ • ChatPRD: https://www.chatprd.ai/ • v0: https://v0.dev/ • GitHub Desktop: https://desktop.github.com/ • Next.js: https://nextjs.org/ • Tailwind CSS: https://tailwindcss.com/ *Other references:* • Lovable: https://lovable.ai/ • Bolt: https://bolt.new/ • Claude Code: https://www.claude.com/product/claude-code • Markdown: https://www.markdownguide.org/ • GitHub: https://github.com/ _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

Claire Vohost
Nov 5, 202545mWatch on YouTube ↗

At a glance

WHAT IT’S REALLY ABOUT

Beginner-friendly workflow: PRD to local app with AI coding tools

  1. Claire Vo walks complete beginners through creating their first AI-assisted codebase live, aiming for a “safe space” where mistakes are expected and progress is the goal.
  2. She starts with a PRD in ChatPRD, tries to prototype in Vercel’s v0, then abandons it due to scope creep and errors—using that failure to teach workflow selection.
  3. She pivots to Cursor, where an agent scaffolds a minimal Next.js app that manages Markdown docs and simple prototype routes, then runs it locally via npm.
  4. She adds GitHub Desktop for visual version control, creates a reusable PRD-writing agent file, generates a sample PRD and a clickable prototype from it, improves UI/README, and recaps the repeatable end-to-end loop.

IDEAS WORTH REMEMBERING

5 ideas

Start with a PRD to get better AI build outputs.

Claire uses ChatPRD to draft a minimal requirements doc first, then feeds it into build tools. She frames PRDs as a way to reduce back-and-forth prompting and keep the build aligned.

Vibe-coding platforms can overbuild—be ready to walk away fast.

Her v0 attempt adds features she didn’t ask for (sandboxing, file management) and surfaces errors; she treats it as a low-cost misfire and pivots rather than “debugging the wrong path.”

Cursor can scaffold from an empty folder faster than you think.

Starting with a blank directory, she uses Cursor’s Agents flow (Composer 1 model) to generate a working Next.js app, install dependencies, and provide run instructions—without needing to understand the files upfront.

Design the app around two simple primitives: docs and prototypes.

The hub is intentionally minimal: Markdown docs stored in a docs directory with live preview, and prototype pages created as routes in a prototypes directory that auto-appear in the UI.

Ask the agent for “how to run it” and “explain it,” not just code.

Claire emphasizes that beginners don’t need to parse code immediately; they can rely on the agent to provide npm run dev instructions and to add homepage documentation that explains usage.

WORDS WORTH SAVING

5 quotes

We don't call questions dumb questions, we call them safe space questions.

— Claire Vo

We are not gonna stress out about the quality of the code right now.

— Claire Vo

I wanted it very simple... and it's building me a bunch of stuff I don't need.

— Claire Vo

This is a bust, and that's okay.

— Claire Vo

Do you want to look at files when you are building an app? No, you wanna look at apps when you're building an app.

— Claire Vo

“Safe space” approach for non-codersStarting from a PRD to improve promptingToolchain: ChatPRD, v0, Cursor Agents/ComposerScope creep and when to pivot workflowsScaffolding a minimal Next.js app locallyGitHub Desktop for visual version controlAgents/rules files for repeatable doc generationPrototype generation from PRD without databases/authIterating UI/UX quickly with AI promptsREADME and repo hygiene

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

Add to Chrome