How 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._

CVClaire Vohost

Nov 5, 2025·45m·Watch on YouTube ↗

📖 CHAPTERS

1. 1

   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.

2. 2

   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.

3. 3

   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.

4. 4

   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.

5. 5

   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.

6. 6

   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.

7. 7

   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.

8. 8

   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.

9. 9

   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.

10. 10

    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.

11. 11

    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.

12. 12

    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.

13. 13

    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.