The 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: How to set up a simple Next.js application from scratch using Cursor’s AI agent capabilities My workflow for creating AI agents that generate consistent documentation (like PRDs in Markdown format) How to build and display clickable prototypes without worrying about complex backend functionality The basics of using GitHub to track changes and manage your code repository as a non-technical person Why starting with a personal project hub is the best way to ease into AI-assisted coding My favorite practical tips for iterating on designs and functionality using AI tools—without needing deep technical expertise — Brought to you by: ChatPRD https://www.chatprd.ai/howiai—An AI copilot for PMs and their teams — 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 [email protected].

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:04Claire Vo?

  Welcome back to How I AI. I'm Claire Voe, product leader and AI obsessive here on a mission to help you build better with these new tools. Today I have an episode that so many of you have asked me for, which is Claire, if I have literally never written a line of code, I have no idea what I'm doing. I do not know how to run anything locally. How do I get started with AI assisted coding, vibe coding, so I can just learn the basics. And in today's mini episode, I'm going to show you exactly how to do that, or exactly how I would do it. And I'm doing it completely live. So we have a couple hiccups, but we eventually get to a

• 0:46Claire Vo?

  personal project hub that can be run locally on your machine that lets you generate docs via AI and prototype designs that you could share just with yourself or with your team. I hope this is what I'm calling a safe space episode for you to really get started as a beginner using some of these coding tools and learn how to leverage this technology to build interesting things for yourself and eventually for your team. Let's get to it. Today's episode is brought to you by ChatPRD. I know that many of you are tuning into How I AI to learn practical ways you can apply AI and make it easier to build. That's exactly why I built ChatPRD. ChatPRD is an AI

• 1:30Claire Vo?

  co-pilot that helps you write great product docs, automate tedious coordination work, and get strategic coaching from an expert AI CPO. And it's loved by everyone, from the fastest growing AI startups to large enterprises with hundreds of PMs. Whether you're trying to vibe code a prototype, teach a first time PM the ropes, or scale efficiently in a large organization, ChatPRD helps you do better work fast. And we're integrated with the tools you love: v0.dev, Google Drive, Slack, Linear, Confluence, and more. So you don't have to change your workflow to accelerate with AI. Try ChatPRD free at chatprd.ai/How

• 2:10Claire Vo?

  AI and let's make product fun again. There's this concept I have in teams that I run where we don't call questions dumb questions. We call them safe space questions and the number one safe space question I still get is how do I actually get started coding with AI if I have never written a line of code in my life? And we've had a couple of episodes, kind of giving you one on one on vibe coding and creating prototypes. And we had Leet Cursor walk through some of the components of Cursor.

• 2:50Claire Vo?

  But still, we have not shown you how to go from zero code, no files, nothing, to a code base that you can start to work on locally? And learn a little bit more about these AI assisted engineering tools like Cursor, like Claude Code, or even just create a little space for yourself to experiment. So today's mini ep is gonna be a building episode. We are gonna do it live and there might be some rough edges because I don't have anything baked right now. I'm gonna show you how I would do this if I was starting completely from scratch.

• 3:33Claire Vo?

  And we will see how far we can get in terms of standing up a little personal app on your desktop to code with using AI. And I'm gonna try to make this accessible for people who are not software engineers in your day to day. But this is a great episode for software engineers who want to share this with their PMs on their team, designers on their team, or their friends looking for a way to go zero to one with coding. Caveats here, again, I did not plan this out, so we're doing it live. Two, we are not gonna stress out about the quality of the code right now. What we want to start with is can I get something running locally?

• 4:15Claire Vo?

  That's useful, that I understand some of the components of. And we're gonna do it really fast. It's not gonna have tons of functionality, but it's gonna get you started. And for everybody listening, I'm gonna use a couple of tools today. I'm gonna use ChatPurity really quickly.

• 4:33Claire Vo?

  I'm probably going to prototype a little bit in V0 by Versal. I'm going to bring it in to Cursor. I will show you how to optionally or additionally use Claude code. And we might bring in some other exciting tools along the way. So this is one where if you want to get the YouTube up on one side and your screen up on the other and follow along, I will try to make it as simple as possible to get started with nothing and then have a AI-coded codebase by the end of this. We'll see if we could do it 30 minutes. Okay, to get started, I'm going to share my screen.

• 5:16Claire Vo?

  And like all good products and like all good founders, I am going to start with writing a requirements document. And we're going to make this really simple. And I thought, what would be a good use case that's pretty accessible to everybody? And I thought this idea of kind of a personal product hub would be really useful, especially as folks that have followed along our recent episodes with Dennis from Chime about AI-powered product management, some of our prototyping with Cursor episodes with Elizabeth Lynn. I think just like kind of this personal hub where you're going to play with AI stuff is the way to go. So I'm going to say, "Help me write a document, chat purity." And I'm just going to say, "Personal project," so it doesn't think I'm working on my own product.

• 6:01Claire Vo?

  "A minimal, simple hub for working on two things." Oops, press Enter. So it's going to be really anticipate what those two things are. The two things are going to be

• 6:23Claire Vo?

  the documentation, PRDs, and ideas. The second thing is small, interactive prototypes. I want a web app with basically two navigation.

• 6:42Claire Vo?

  Items on the left, docs and prototypes. And I will turn this into a next JS app where I can write docs in Markdown and vibe code little prototypes. Okay, so this is what I'm imagining. I'm imagining I'm going to make Claire's hub for product work. It's going to be a super minimal web app. I want docs where I'm going to like basically use AI to write PRDs and other docs and ideas. And then another folder where I write prototypes.

• 7:20Claire Vo?

  And maybe show you how to use cursor or these other tools to like vibe code little prototypes in this folder that then you can see over time. And the core audience is myself, so this is just for me.

• 7:34Claire Vo?

  So I can build something simple.

• 7:39Claire Vo?

  You can hear my typing because I have nice nails today. But it's going to write me a quick PRD for my personal project and really outline what I want to do. The reason why I like to start with PRDs is really you just get better results out of the next step, which will be a kind of like vibe coding prototyping step. And so while this is a little bit of time, I think it's really worthwhile to do because then in our next step, we're not going to be spending so much time on prompting and other aspects of this work. So this is going to generate a PRD. We'll probably like spin through and come back when it's ready and send it over to V0. Okay, my document is done.

• 8:24Claire Vo?

  I'm just going to just read the top. I'm going to be the laziest PM because again, this is a mini episode, not a big episode. And my general goal, I want to quickly direct on product ideas and markdown format. I want to simply seamlessly switch between writing PRDs and coding prototypes. Want to organize my documents. I want to see a live preview. Okay, sure, why not? This looks great. So then I'm just going to open this in V0, which is my preferred.

• 8:51Claire Vo?

  Prototyping app for this particular use use case. The reason why I like V zero for my initial prototyping is one. The UI tends to be pretty like streamlined and nice looking and pretty. Um, two, it's going to be really easy to take this into the next step of getting it in. GitHub, getting it in cursor and actually deploying it. And I find that people. Often think that the scariest part is actually connecting their vibe coding. Their vibe coding prototype with an actual deployed experience. And I think Versal's done a nice job. Shout out to my friends over there um of setting that up. That being said, like, pick your vibe coding platform of choice.

• 9:37Claire Vo?

  Lovable is lovely. Bolt is lovely. Replit is lovely. Oh, yeah, all of them are lovely. Um, I'm just going to prefer this one for this workflow because I'm actually going to pull this into code and show you some alternate ways. You can deploy this app at some point, and I know that's a part that a lot of you have questions about or are curious about. So it's going to help me build this personal project hub. Um, a couple kind of like keywords for you all as you go down this um vibe coding path is. Versal is definitely going to build this in next JS. So it's going to be um JavaScript focused. I always tell people if you're trying to get started with coding with AI. You pick one of two languages. You pick Python because it's easy to read.

• 10:22Claire Vo?

  Um, or easy to write and read and you pick JavaScript because it's easy to see. Um, I don't think JavaScript is actually the most readable language. Python, I think, is like really easy. You can literally read it and understand what's happening. Um, JavaScript's a little, little more fancy, um, has a couple.

• 10:42Claire Vo?

  Syntactical things that are pretty unique to that ecosystem. But JavaScript, you can like get a website out of which which we all all really like. And there's a couple of extra hops and steps with Python. So this is going to generate basically a next JS app and repository for you that I'm actually eventually not even going to use in V zero. I'm going to pull in to cursor. So you can see here it's building a lot of these components we talked about. Again, for people who are like, I have no idea where to start. I downloaded cursor, I opened it up. What do I do? There really are two steps. You could do this whole step in cursor, start from zero.

• 11:23Claire Vo?

  It will definitely scaffold out a repository for you. But I like for beginners to start in a vibe coding kind of platform like this because you can really see it first. They have this web based browser that you can look at. You don't have to worry about running it locally. And you can really focus on the things that I know some of you non-technical people care about, which is like how it looks and how it works. And then we'll worry about the code. And I feel like something like starting with an IDE like once or for cursor VS code or whatever, you really start worrying about the code too early for somebody who is not technical. So let's let this generate and then I will come back and show you how I will pull this into cursor. This is still generating and one of the things that I want to call out for people, again,

• 12:08Claire Vo?

  we are doing this live, so I'm going to show you exactly the pros and cons of following a flow like this is I did make a pretty good PRD, but I did try to tell it to keep it simple. And what I've noticed as a lot of these AI assisted coding platforms try to take more more of the end to end application building and are trying to compete on the complexity and completeness of the applications they can generate. What I have noticed over the past couple of months is that I've seen a lot of scope creep be built into how these more agentic implementations of these coding tools work than maybe we want. And so, again, I wanted it very simple.

• 12:53Claire Vo?

  I wanted a place for my documents. I wanted a place to prototype code. I wanted it in markdown. And it's building me a bunch of stuff I don't need. File management, a sandbox, I saw it had a sandbox for coding, like all sorts of things that I didn't actually say I wanted and is far beyond, I think, the complexity of the product I wanted to generate for this use case. So we're going to see what we end up with. Otherwise, we'll take a different path. And again, I'm just showing you this so you all can understand what you're going to get

• 13:35Claire Vo?

  out of these tools and how you may have to back out of a current path in order to find the right path for you moving forward. And so it may have been a mistake to generate this because the app, the Vezia app, went like ham on the requirements. It built me something very fancy, which is nice, but is maybe beyond what I wanted to start with. So I'm going to see here, Documents. Okay, we got Errors, already off to a bad start. Let's go back to the Home, Prototypes. But no, I don't want this. I don't want this code here. I just wanted the code to be generated normally. So you know what? This is a bust.

• 14:20Claire Vo?

  And that's okay, even for a mini app here. Having this be a bust just shows you, if you play with these tools, you can figure out the right workflow for you. And then it's pretty cheap to walk away. I've spent, I'm looking at our recording timing. I've spent 10 minutes so far on all of this, including mostly waiting time on loading, and it didn't end up what I wanted. And guess what? Totally fine. So we're going to back out. We're going to give up on our vibe coding platform because it's going to take too much back and forth to get to the simple thing I want. And I am going to start this from scratch directly in Cursor. Okay, so that was a total bust. We made a PRD.

• 15:05Claire Vo?

  We tried to vibe code it. The vibe coding was way too complicated. I don't actually want it to be that complicated for the sake of. This quick start tutorial. So we're going to go directly into Cursor and see what it looks like in that direction. And so I have opened Cursor. It is opened to a empty directory. That directory is actually named Sevo because this is going to be my personal project. There are no files. There's nothing in it. So all you have to do is go into your file browser, create a folder that's empty, open that folder in Cursor. And then I want to show a couple of things about Cursor 2.0 that has been released in the last week.

• 15:47Claire Vo?

  One is they now have two different views, an agent's view, which is much more focused on what you're going to build and instructing the agent or multiple agents that are working in your codebase. And then an editor view, which is very similar to what Lee showed us in a couple of episodes ago, which is your files on your left. I have zero files, your code in the middle, and then your chat or agents on the right. And I'm actually going to use the agent's flow for this because again, I'm trying to get started for beginners and I want to show you how easy it is to run. So I'm going to go to Agents and I will zip back to my, I will zip back to my PRD.

• 16:30Claire Vo?

  I am actually just going to copy this markdown because I'm feeling so lazy. And I'm going to say, I want a very simple SJS app set up where I can keep repository of markdown docs, PRDs and code in different directories, little prototypes that will be displayed in the app. Here is a PRD, but keep it super basic. The other thing I'm going to show here is I'm going to use Cursor's new model Composer 1.

• 17:13Claire Vo?

  The reason why is this is a mini app and Composer 1 is so freaking fast. It is fast. You guys did a good job there. Of course, you could switch what model you want to use, but we're going to use Composer 1 for the sake of this and see how far we get. Oh, I should also say up here is PRD, keep it super basic. We're starting from scratch. So give me all.

• 17:38Claire Vo?

  All the steps I need to set up and run this. Okay, so let's see what this cursor agent does. It's going to run a bunch of install files. So it's going to create a next app. It's going to install TypeScript, Tailwind, ESLint, a bunch of stuff. Essentially, just a couple of libraries that will be very useful for you to use. TypeScript will be the typing language and the types will be the types. Tailwind is a really nice CSS library that makes things look nice. ESLint makes sure you write good code. And it's creating the project structure. It's double checking it.

• 18:19Claire Vo?

  It's also installing a couple libraries, including displays of Markdown and GitHub flavored Markdown, which is GFM, if anybody's curious about that. And it's starting to write a couple pages for me. And so again, look at this thing. It is blazing fast. Rumor on the street is it's a trained Chinese model. So we'll see what kind of non-English language characters we can force this thing to show up. But why I like Composer 1, again, this is not the most complicated app in the world that we're building. It is not super fancy. I just want to show you how fast it is. So again, maybe this was the right way to do it for beginners, which is, you know,

• 19:04Claire Vo?

  if your vibe coding tool is just going too far in terms of how to, what features are in your app, just go to Cursor and start from scratch and use Composer 1. It'll keep it very simple. Now, I have in the editor, a bunch of files. Does this help any of you that are new to coding? Absolutely not. Do you know what these files mean? No way. Do you want to look at files when you are building an app? No, you want to look at apps when you're building an app. And so you can just really just go into the agent and say, cool, but how do I run this? And it will actually give you the instructions on how to run this. So this is running a campaign, this is running a command.

• 19:47Claire Vo?

  npm run dev runs a local server for your app.

• 19:52Claire Vo?

  Okay, and we can pull this up. And now I have running locally on localhost 3001. I have my personal project hub. You can see this welcome document. Perfect. This is exactly the level of complexity I wanted. And then prototypes, which is just a little hello world prototype. I don't actually want the HTML, CSS, and JavaScript exposed here. So I'm going to go back to agents and I'm going to say you got this almost right. You got this almost right. But I don't need the code snippets snippets in

• 20:36Claire Vo?

  the prototype

• 20:39Claire Vo?

  section. I just need to be able to put routes. Routes are like page paths. If you don't know, routes in this app that I can fill with code components and display to my colleagues. So again, it thought that I wanted like a real prototyping tool. V0 thought I wanted a very real prototyping tool. I just want literally a place to show show some things. And so it's generating an update. And so now you can create and edit markdown documents. You can show prototypes and routes.

• 21:22Claire Vo?

  And let's see if it has improved. What I want to see is yeah, switching storing component code directly in the route files, which is exactly what I want. Again, you don't have to read this code. Maybe I'll release this repo and you all can fork it and try for yourself. But it's moving very fast to create a second part where I can put some code in. And the reason why I want to do this is I want to show you how you can manage documents in a cursor repository like this. And then I want to show you how you can manage code in a repository like this. Again, I am not going to explain to you what this code means. You can use the Cursor chat to read all the code, explain what it means. We're just going to trust that it shows up in the web app and it's what I want. We're running it locally.

• 22:07Claire Vo?

  There is very little minimal risk here for the most part. It's a pretty simple thing. And so I just want to give you all a couple of ideas on how to get started. Zero to one with something that's really simple in Cursor. Okay, this is exactly what I want, which is I don't want the app to like, let me create prototypes. I literally just want to be able to code them and show them to you all. And so I just have to create directories in this directory in my code base and show them. With Documents, it's really cool how it works. So one of the things I would do once this is done is I would say, "This is exactly what I want.

• 22:47Claire Vo?

  Please explain to me how the two user-facing functions work." And actually put some instructions on the homepage. So again, I'm not going to read the code. We're doing this fast, but I do want to make sure I understand how it works. And so it's going to put in some documentation directly in the homepage of my app to explain how it works. So, okay, let's read how Documents work. I click a new doc, it creates a marked-on document, files are stored in the docs directory, which is great. It can be edited directly in the browser with live preview, which is exactly what I want.

• 23:29Claire Vo?

  And prototypes, I just manually create them in my code editor. Any directory I create in the prototypes will automatically appear here. And I can create a demo page app and it will go. Now, this is exactly what I wanted to start with. Again, about 10 minutes to get this going. And it's a much simpler place for us to start working on our personal project hub. And so while I had a misfire with a vibe coding tool, it does not, does not really matter. All that matters is that I got to the thing that I wanted to get to. So let's talk about next, how I would actually use each of these kind of flows.

• 24:14Claire Vo?

  How I would set up some Cursor-style rules and agents to kind of manage.

• 24:21Claire Vo?

  What, um, how my work happens here and I'll show you how to create a document and how to create a prototype and vibe code along the way. Okay. So I was a lazy girl and did not initialize a GitHub repo, but this is a very important step for any of the technical, non-technical folks out there. I know for software engineers get a sort of secondhand on how we manage our code projects, but again, this is a safe space episode. So we are going to tell you, um, how to initialize a GitHub repo and what you could use it for. And again, this is an episode for non-technical folks. Just use the GitHub Desktop app. It will make the primitives of Git in terms of files, change tracking, diffs, pull

• 25:00Claire Vo?

  requests, so much easier to learn if you visually use the downloaded GitHub Desktop app versus trying to understand this through the command line. So it's one of these things that, um, sure, you can have your AI agent sort of like vibe code you commits and things like this using Git in the CLI. And I just think the visual of the GitHub Desktop app is really going to help you understand what's going on in your code. And so we're going to add this repository to GitHub. I, it is in my projects and it's called Sevo. Um, and we're going to create that repository. We're just going to, yeah, add some stuff to the gitignore file, create

• 25:43Claire Vo?

  the repository. Let's see what's happening. It should be creating this in my GitHub app and it has. And you can see my initial commit has all the original files and then, um, gitignore, which is what files are going to be ignored by Git. I'm just going to commit everything and we should be good to go here. We'll see how, how it goes. Um, you can see how Git works by if I added something to this new doc, new headline, saved it and I switched over into my GitHub repository. Actually, I, you can't see me point at the, I'm going to do this here. You can actually see this change here. Green means added, red means removed. And as you

• 26:26Claire Vo?

  can tell, it's a great way to track the changes that are happening in your application. I'm actually going to discard those changes and you can see here, they are discarded here in my code. So now that I have GitHub running, what's great is I can start actually working in this app. And again, if you all, um,

• 26:49Claire Vo?

  Don't remember. It does sort of two things. My app does two things. It tracks documents and it helps you create prototypes. So we're going to go through how I would set up a personal project hub to do both of these things, showing off some of the use cases of Cursor and then maybe we'll show a little bit of Claude Code as well. So if I were creating a personal hub for documentation, one of the things that I would do is actually create some rules and I would create those rules in an agents folder because I want a documentation agent. And so I'm going to create a new folder called Agents

• 27:30Claire Vo?

  and I'm going to create a new file called PRD.md and that agent is going to help me create PRDs and I'm going to say in this chat, can you fill out @sign PRD.md, this is a blank file, to be agent instructions to write a great PRD in the app mentioned docs. See if it's showing the folder in the docs folder. PRDs should be in Markdown and the instructions

• 28:13Claire Vo?

  should be less than 500 lines long for our AI agent to follow. Okay. So this is just a unique way to define, you know, in Claude Code, it's called a skill. Here in Cursor, you can make it a little agent instruction. And what's nice is you can have the AI actually create it for you. So this is my PRD writing agent instructions. It tells it who you are. Here's the purpose. Here's the structure, requirements, etc. Now, what I'm going to say is we're rolling solo. I don't need an executive summary because I just don't care about executives

• 28:55Claire Vo?

  right now. And I want my PRDs to be much more functional. So what I would say is This is fine, but make the template much more functional around technical requirements versus business requirements for right now, for this use case. So again, it's going to refactor this file and give

• 29:21Claire Vo?

  some improvements on the template and you will see those improvements be shipped into this file. And then what I'm going to use is I'm going to use this file to then write PRDs moving forward. You can see it's going very, very fast. I'll let it finish up and I'll show you how I would use it. Okay, so this agent file is done and you can see here it gives it a role, some core principles on its purpose, a PRD structure. And then it should give at the end, if it's a good agent, a checklist of steps to follow. And so this is just going to be additional instructions that I'm going to be able to feed into Cursor when I write

• 30:06Claire Vo?

  a PRD. And this is saved in this Agents folder. This is where I like to put my instructions. Just a really easy way to add much of them, keep some organized and you can create as many of these as you want. Okay, so since I've written this code, I'm just going to bop over to GitHub Desktop and see that that code was added. And then I'm going to commit this to main. Don't tell the engineers, we're just going to commit to main today. I will talk about branches another day, but today we're just committing to the main branch because I'm just running this locally. And so I'm going to commit this Agents PRD and I'm just going to select this file and say, create PRD MD. That's a perfectly fine placeholder.

• 30:46Claire Vo?

  Commit. And now that code has been committed to my repository. Now what's really nice about this is if I go on my history, I can actually undo the commit. I can amend the commit. I can do a bunch of stuff and this just lets you check in step by step, the changes you've made to your files. Okay. And then how would I use this agent? So really easy, I would say, great. Now write me a PRD for, what do we want to prototype today? Oh, I'm working with my kid. So this again, it's a very personal, personal repository.

• 31:25Claire Vo?

  I'm working with my kid on helping him do gardening and like weeding and sweeping work for our neighbors in the city. And so I'm going to do, help me write a PRD for a little scheduling

• 31:39Claire Vo?

  app where my kid can have our neighbors schedule help with weeding, taking out trash cans and sweeping their driveways. Okay, this is very important stuff. And what it's going to do is it's going to read that PRD markdown file, that agent instructions. And then cursor can actually follow those instructions to create a document in the right folder. And the reason why I give this example is of course you could just straight write a PRD in that docs folder, or yes, of course you could use some other template.

• 32:22Claire Vo?

  But what I really like is just showing you how you can define a workflow in agents, reference that workflow, and then use that to create different assets in this code base that we've created zero to one. So now I have this neighborhood task scheduler PRD. Very cute PRD here. Now the magic will be, will it show up in our app? And I think the answer is yes, let's refresh neighborhood task scheduler PRD. Here in the app, I can actually read it here, see how it looks. It's very long. This is too long for a solo founder.

• 33:04Claire Vo?

  So what I might do is go back to that agent's PRD and add a step that really reduces.

• 33:13Claire Vo?

  The length of those documents. Okay, so what's the benefit of something like this? Not only can I have this nice little web app where my PRDs are displayed, I can store those PRDs or documents in a local code repository that I can edit with AI directly with Cursor or whatever my AI preferred code is. I can create an agent that gives instructions on how to actually create those consistently over time. And I can do code and change tracking to see when I added new documents and how I added them. And so, while this may seem like overkill,

• 33:57Claire Vo?

  you could just do a Google Doc or something like this. I think this document creation and storing and display workflow is a really nice one for anybody looking to get started with coding with AI but needs kind of a practical application. And what I can imagine product managers do with this is start to just brainstorm in Cursor. The reason why I think it's good to do that, as you saw in Dennis from Chimes' episode, is it just gives you a way to understand a little bit more about how these tools actually work, get more comfortable with these code editors. And then as you move into more code experiences, you then kind of have a sense of how all these tools work.

• 34:40Claire Vo?

  And so, just to summarize this piece of the app, we've created half of our personal Project Hub app. It displays documents that we store in this Documents folder in Markdown in a web app. And I've created an AI agent to actually create those documents, which is defined in this PRD Markdown file. Next, we're actually going to code. So I'm going to show you how to code something like this, show it in the front end, and then we'll put a couple of those on the end and send you off at the end of this little episode. Okay, great. So I've created a PRD with, for a little scheduling app for my kid, where he can have his neighbors schedule, help with weeding, taking out trash and sweeping their driveways.

• 35:25Claire Vo?

  Now I want to build a prototype for how this works. And if you recall in my original requirements and in the web app, the instructions, basically how it works is I'm going to create routes, which are little subdirectories or folders of functionality inside the prototypes page. And it will show up here in this list for people to see. Now, I'm giving a simple, silly example, but what you can imagine is at work, you could start to create just a repository of your own prototypes that you're playing with, that you're looking at, and you're learning to code with. So I'm going to go back in Cursor. And now that I've created this PRD, I can say, "Great. Use this PRD to create a prototype."

• 36:10Claire Vo?

  Clickable, but does not have to be totally functional. With database, etc. In the prototypes folder, so that I can show a little of how this might work. Super simple, easy peasy. Again, I want to make it a prototype. I don't want Cursor to go off and like, ask me to set up a database or any of those silly things. I really just want to create a clickable prototype. Again, I think this is a tip or trick for the product managers out there. When you're creating your own local repository, like, you can avoid stuff like figuring out auth, you can avoid stuff like figuring out databases,

• 36:55Claire Vo?

  especially if you're just trying to use this for prototyping, which is the exact example I'm going to give. So I'm going to let it run. It's going to build different files in. You can see it created prototypes, task scheduler, prototype. It's creating a page. I'm going to keep all those changes. I'm going to bop over to the web app. I'm going to refresh. I see task scheduler in here right now. And it has a sign in. Now, I don't know how this works, so I'm going to ask the chat, "Do I sign in with something? How do I sign in?" And it's probably going to tell me just to click the button. So use any email and password. Perfect, easy.

• 37:40Claire Vo?

  So I'm going to do hello at chatprd.ai. And password. And I can see that the text is gray. I'm going to actually take a little screenshot of this bad boy to fix later. Oh, okay. And then we have neighborhood tasks and you can create a task. You can see all the different tasks. This is exactly what I wanted. So again, it's not the prettiest app. It's probably not the best code. But if you're just trying to get started with how do I start to use cursor in real code? To drive value, I want to skip these vibe coding tools. I want to go straight to the code.

• 38:19Claire Vo?

  I can actually see this and understand how this tool might work. And then I can go back and forth in cursor and explain to it what I want, how I want it to be fixed. Um, all that kind of stuff. And so I'm actually going to drag that screenshot in and say, it seems like fields have great text. Please fix. And I can go back and forth and iterate on this code. If I'm feeling fancy, I can actually go into the code itself. I can read it. I can ask cursor to explain this code. Again, I'm just trying to give you inspiration as a non-technical person, how you could use something like cursor,

• 39:04Claire Vo?

  really to do very basic things in code, but that have high payoff in terms of what you see and what you learn. And so let's see if this fixes our little login. We're going to sign out. Oh, look at that. Now it's fixed. It looks so much better. So we're really happy with our prototype. And you can imagine now you can just go into cursor, say, create a new prototype in a new folder, and it will create it for you. And again, of course, we're going to go to GitHub. We're going to check in. Um, scheduling, prototype.

• 39:39Claire Vo?

  And commit it to main. I'm going to publish this repository in my personal repository. I'm going to call it personal project hub and publish it. That's just going to push it to the cloud. So you have a place to access it online. It's not just local. And let's see, it's all looking so much better. So I'm really happy with this. Now, I'm going to show you a couple other things that I might do in this app to make things better. One, I'm going to start a new agent and say, can you update the readme for this repo? The readme is generally

• 40:19Claire Vo?

  like the front page instructions and walkthrough of how the repository works. So I highly recommend when you get to a starting point or a stopping point with your functionality to update your readme file. This is something that agents, as well as other engineers, could use to understand how your code works. And so this is going to tell us what the features are, how to install it, what all the files are that we created, how to use it, etc. And that was created in just a few seconds. So that's something I highly recommend. And then again, we want to just go ahead and commit these readme changes. The second thing that I would probably do here

• 41:02Claire Vo?

  is make it look nicer. So I think we're going to wrap this mini episode with Claire's guide to making things look nicer in Cursor. We'll see if we can do this in just a couple minutes. So I would start a new chat here. Again, we're going to use Composer. It's fast. We like it. And we're going to go back. I don't actually care about the prototype looking nicer. I care about this homepage looking nicer. This is really, really, really sad. So I'm going to open Cursor. I'm going to say, I don't like the baseline design of the homepage of this app. Please uplevel the design to be prettier and cuter. Rename it to, let's call it...

• 41:53Claire Vo?

  Sivo Personal Hub and make it less basic. Again, terrible prompting, but we're going to see what it does. It's going to review the homepage. I think prettier and cuter is great instructions here. So we're going to see what I end up with when I prompt it to look a little bit nicer. Oh, it's going to be a cozy workspace for documents. This is, I don't know. It makes me happy. It's stupid looking, but it's cute. And so again, when you're working on something locally, who cares? Make it fun. Make it creative. Play with stuff, add dark mode, all those things. I love it. You know, I love a gradient. You know, I love a pink.

• 42:39Claire Vo?

  I'm going to check in these changes. I'm going to call it pretty and cute and call it a day. So this was my walkthrough of how to create zero to one. A code base that helps you consolidate documents, including PRDs and helps you build out prototypes. And I think this is just a really good baseline repository for anybody, especially product managers who are wanting to get started with writing using something like a cursor and coding using something like a cursor. And again, you can continue to extend this, add more prototypes, add more documents and get started. So what were our steps? We created a PRD in chat PRD.

• 43:23Claire Vo?

  We attempted to send that PRD to vzero.app. We got way too much functionality. It was too smart for its own good. So we started all over. We created a clean folder on our desktop. We opened that folder in cursor. We instructed it to make a next JS app that does these two things. Then we created an agents file to write our PRD documents. And then we vibe coded or AI assisted coded our first little prototype that also gets displayed in this app. We made it prettier. We added a GitHub repository. We checked in our code and we added a readme. So I hope this was the safe space episode you all were looking for.

• 44:08Claire Vo?

  I get asked for it. All the time. And if you have never written a lick of code in your life, I hope this gives you a place to get started playing with your own personal space. There are lots of other episodes of How AI that can feed into this workflow. This is just a good one to get started, and I hope you've enjoyed this mini episode of How AI. Thanks, y'all.

• 44:33Claire Vo?

  Thanks so much for watching. If you enjoyed this show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time.