Build Better Apps with AI Using This One Simple Document (PRD Guide)

Vibe coding is cool until it's not. If

you don't have documentation to feed your AI co-pilot, you're going to have a hard time and it's going to suck and you might want to give up. Oh, something's

really wrong. You're definitely going to need to start over at least once. So, in

this video, I want to show you a solution to this very commonly experienced problem. And that is by

experienced problem. And that is by simply creating a product requirements document, a PRD. It is a simple process.

It doesn't take long. You just need to do a little research to prepare yourself and your AI for what you want to build.

And you're going to have such better results just by feeding a PRD to your AI co-pilot. It doesn't matter if you're

co-pilot. It doesn't matter if you're using Bolt lovable replet or Cursor or Claude Code or some Visual Studio Code plugin, whatever. Feed the PRD to your

plugin, whatever. Feed the PRD to your AI co-pilot and you're going to get much better results. So, here we go. The

better results. So, here we go. The

first thing I do here is I open up Claude. I use Sonnet because I think

Claude. I use Sonnet because I think Claude is just better. I like the personality more. You can use whatever

personality more. You can use whatever you want. Um, this is just what I use.

you want. Um, this is just what I use.

So, I say, "Help me create a product requirements document."

requirements document." Okay, that's easy enough, right? Here's

what we're building. I'm going to say, let's What are we going to build? Let's

say an Astro Howard blog that is SEO optimized, SEO optimized,

search engine optimized, SEO friendly.

It has a sleek, modern design with a dark color scheme and a purple undertone.

So that's the basic overview. That's the

first thing I say. And this is normally an organic process for me. So I'll come back we'll come back into it and perhaps tweak it later. The next thing I say is

the tech stack I know I will use is well we already know Astro Astro Netlefi for deployment

and Superbase for the back end. Now I

don't really recommend Superbase for the back end for a blog. Um like I'm going to use Pocket Base.

Pocket Base for the back end. Pocket

Base is a super basic and open-source back end, and it doesn't have a lot of the features that Superbase has, but it

just keeps things cleaner and easier.

It's on GitHub. It's very easy to um set it up. So, pocketbase.io.

it up. So, pocketbase.io.

You can check that out if you're interested, but that doesn't really matter. I'm just saying I want to use

matter. I'm just saying I want to use PocketBase for the back end. So now

Claude knows okay this is what we're making. The tech stack is Astronetifi

making. The tech stack is Astronetifi and Pocketbased. This is the framework.

and Pocketbased. This is the framework.

This is for deployment. That's the back end. That's pretty much it, right? Um

end. That's pretty much it, right? Um

what else? These are the features I want to include. Okay. An admin dashboard for

to include. Okay. An admin dashboard for creating new posts and new users in case I want to add new users, right? a

newsletter subscription form at the bottom. Archives,

bottom. Archives, [Music] tags categories

and proper permal links for SEO SEO metadata on each blog post. And

that's probably about it, right? And it

would be similar if you're making a directory, right? You would Astro power

directory, right? You would Astro power directory that is SEO SEO friendly as a sleek modern design whatever you would probably still use Astro Netleifi you

might you could still use pocket base but you could use soup base whatever these are the features I want to include and that's pretty much all the like

really juicy stuff you need to tell Claude to make this PR the last thing I like to say is I will be building this with an AI co-pilot it. So, I don't need

any team milestones or anything like that because it likes to make it really professional like you're Silicon Valley startup and you do things by the book,

but we are just amateur vibe coders here. So, we just do whatever we want.

here. So, we just do whatever we want.

There's one last thing here. Ask me if you have any questions for clarification and continue to write the PRD. So then

you have an extra layer of okay, what did I miss? What do I need to know? So

here we go. We get some questions here.

Looks like it's writing it too. This is

another thing about using Sonnet versus like Gemini, for example. It'll just go.

It'll just do it. It has questions for me, but it just is doing it anyway and it'll fix it later. models like Gemini get so annoying because first off, it

expects me to do a bunch of stuff when I'm trying to use the AI co-pilot to do that stuff. And second off, it says,

that stuff. And second off, it says, "Would you like me to do this thing for you?" Sonnet just does it. And that's

you?" Sonnet just does it. And that's

why I really like Claude. All right. So

then it asks these questions. Do you

want the admin dashboard to support rich text editing? Comfortable with markdown.

text editing? Comfortable with markdown.

Um, markdown I is perfect.

user roles. When you mention creating new users, are these additional admin users or do you envision different user roles?

These are editors, contributors. So,

this is good. This is the clarification we need. And that's why as we learn

we need. And that's why as we learn conversation driven coding, we need to just frequently be asking, hey, is everything I'm saying clear? Because

otherwise it'll just go and probably won't do a good job.

Convert kit for newsletter archive structure both

UI frameworks no SEO requirements um site map generation schema markup and robots yes

boom so now it already kind of created most of the PRD here while I was answering its questions and Now it's just adjusting some things

and we'll just well let's wait for that to finish.

Okay, so it's finished and just real quick, we'll just scroll through it. I

want to show you just the most crucial parts. We got our our executive summary

parts. We got our our executive summary with our goals. It's got our text stack here and it's got even more details than I initially put in, right? Which is why this is so important to create a PRD. We

got our architecture. We got our core features navigation how all of this is going to work with organizing with permal links with SEO

stuff, robots, site maps, schema markups, Twitter card tags. Great email

capture with ConvertKit. We do not actually need the ConvertKit API.

So, I'll write that just the form ID.

So, as there's notes, I just write them in here. And then at the end I I send

in here. And then at the end I I send this list and it'll make the final revisions. Create manage blog posts for

revisions. Create manage blog posts for the admin dashboard.

Now the truth is I probably if I was really trying to do a blog right now I would probably not need editors and contributors. Otherwise I would just use

contributors. Otherwise I would just use Ghost or something a proper blogging platform.

But but it is fun to build tags categories

visual design. Great.

visual design. Great.

Maybe we want to use sanif or sarif fonts. We'd probably want to put in

fonts. We'd probably want to put in there. I want a serif font.

there. I want a serif font.

Page load speed. SEO requirements. Okay,

this is the most important part, my friends. The data models.

friends. The data models.

This is how we create the database schema here. In fact, it doesn't even

schema here. In fact, it doesn't even look like it made the database schema, but maybe we should. Please mock up the database schema because the database

schema is how you can stay consistent.

If you go from bolt to cursor or whatever, you need a single source of truth so the AI knows how the database works. Otherwise, it just creates a

works. Otherwise, it just creates a front end guessing and then your back end doesn't match and it's a real real hassle to solve. In fact, maybe you've

experienced that before. I know I have.

So, we'll just finish going through here. Deployment requirements. Good.

here. Deployment requirements. Good.

Third party integrations. We do not need API. We already mentioned that. We do

API. We already mentioned that. We do

need the end pocket base backup procedures.

Future enhancements. Yeah, not too important for now. Great. So now I'm just saying that last list here, we do not actually need the ConvertKit API. I

want a Sarah font. Please mock up the database schema. And now we have a PRD.

database schema. And now we have a PRD.

Great. So now we have a PRD that has the database schema. I think this is really

database schema. I think this is really important.

This is really important. It might look different.

It might look different for you depending on how your AI made it, but the point is you want to have as much figured out now in the beginning. A lot

of the stuff you won't need to figure out too much now, but you should take a look at it. For example, user roles up here. We have the relations for the

up here. We have the relations for the post categories. And if you don't

post categories. And if you don't understand what something means, like for example, this, let's ask, what does this mean?

And then this is how we can learn as we build. It explains the problem of the

build. It explains the problem of the many to many relationships and context of categories and how we can't simply store into the database something with multiple categories. So it has to do

multiple categories. So it has to do this whole many to many thing the junction table.

So there you go. And then as you're learning you can think oh maybe we don't need that or maybe I didn't understand that or whatever. And then you can

refine your PRD even more. So I'm going to save the markdown file here. And now

just for fun, I'm going to pop it into Bolt and Claude code, which I've been really into lately. And let's see what does a better job faster.

So in Bolt, I've attached the PRD. Say

build this blog. Follow the specs in the PRD. And then over here, I've already

PRD. And then over here, I've already opened up my folder for this PRD project. And it's asking if I'm giving

project. And it's asking if I'm giving it permission. I say yes. And here at

it permission. I say yes. And here at first I'm going to press shift tab and cycle through to plan mode on. I'm going

to say build the blog as specified in astroblogp prd and cloud code all happens in the

terminal which may seem intimidating but it's really not. Check out the 5day command line boot camp. There's a link below. It'll help you get familiar with

below. It'll help you get familiar with the terminal and just feel like it's not some crazy some crazy blackmagic stuff.

The command line's really important if you want to start building. If you want to build, you you really should you really should get comfortable with the command line. You don't have to become

command line. You don't have to become like an expert, but the command line's important. So, here we go over here.

important. So, here we go over here.

Claude probably using Opus just super quickly made our whole plan.

So, let's proceed.

And meanwhile, Bolt is just building.

Bolt said, "Based on the comprehensive PRD, I'll create a modern Astro power blog." The real kicker here for this

blog." The real kicker here for this demo, for this video, I'm not going to actually focus too much on the pocket base integration as much because that might take some time, but the

deployment, if one of these can deploy Astro out of the gate to through Netlefi, that would be incredible because Astro seems to always give a lot

of problems. Bolt claims it's Astro compatible, and I have had success deploying on Netlefi, but not without problems. Um, but it would be really

cool to see if Claude Code can just make it without any problem. And you can see over here, I'm going back and forth, but Claude Code, it will update the to-do

list. Look at this. So, I approve the

list. Look at this. So, I approve the plan, and it's got a whole list here of things to do. I can make this bigger.

And then it just says, "Okay, here we go." And it updates the list as it

go." And it updates the list as it builds. It will prompt you once in a

builds. It will prompt you once in a while just like cursor, which is why you want to give it permissions to run certain commands inside the folder you're building in.

And I love how it uses some random verb here when it says what it's doing. All

right. So now it wants to create Astro using the node install script. Say yes,

go for it. It'll also be interesting to see which one's faster. Huh. So we'll

check back in here shortly.

Okay, so they're built. First thing, I'm over here. I'm in Bolt. And you can see

over here. I'm in Bolt. And you can see we have this fun little purple dark blog. And I like the style of it. Let's

blog. And I like the style of it. Let's

see. Click that. Doesn't look like it made the post. That's okay. What's

important here is we want to see how it deploys. So I'm going to click deploy

deploys. So I'm going to click deploy and it'll just deploy it straight to Netlefi. See how that goes. As that

Netlefi. See how that goes. As that

runs, I've opened up Netlefi over here and I'm going to import an existing project from GitHub and this is going to be the Claude Code project. I made a new

repo and I submitted it and it's called I think PRD something or other prdode and we'll call it PRD claude code.

And this will be interesting because it's supposed to be Astro. Let's see how that

deploys. Um, in fact, maybe just to save

deploys. Um, in fact, maybe just to save time on Netlfi, what is the base directory build command and publish

directory for deployment?

And let's just make sure we do that right. If you have a Nex.js file,

right. If you have a Nex.js file, normally this fills it out just fine.

But for some reason, Astro is just trickier.

Bolt. Let's click out. All right, it deployed. Cool. And as you can see,

deployed. Cool. And as you can see, because we're using Astro and static site generation, we can view the page source and we can see all the actual HTML.

Whereas in an X.js project, you don't see the HTML because it's all rendered client side. But this is static site

client side. But this is static site generation, which is kind of silly because we don't have any other pages here. We do have the category pages. And you can see we

have good permal link structure up there. Cool. So, Bolt, I would say, did

there. Cool. So, Bolt, I would say, did a pretty good job here, huh? Oh, there's

Did it even make the admin panel? Wow.

It did a lot. It did a lot with two prompts. I mean, three if you count the

prompts. I mean, three if you count the deployment. So, pretty exciting. Pretty

deployment. So, pretty exciting. Pretty

easy way to make a blog, huh? All right.

So, let's check what we got to do. Okay,

we we don't have any environmental v variables, so hopefully that doesn't create a huge problem.

base directory is that build command.

Uhoh, can't post that. And Astro blog is the publish. Whatever. Um, I'm actually

the publish. Whatever. Um, I'm actually not going to put any environmental variables in there. Let's just see what happens here. It'll let us know if it

happens here. It'll let us know if it can't build because of the environmental variables, but I don't see that being problem unless it needs that site URL.

And you can see here the netlefi.coml

file in the project route already includes optimized settings for headers, caching, and redirects that will be automatically applied during deployment.

So that's cool. U but it failed. So

let's see here. Package.json is missing.

So now I wonder if maybe it's not that Astro blog directory and we should just Okay, now we can change it.

the build command and pin run build publish directory is dist. Okay, let's

actually do this simpler this alternative configuration base directory and we want to see where the netifi file is. It's an astrol blog. Everything is

is. It's an astrol blog. Everything is

an astrol blog here. So should be fine.

Let's deploy that again.

Failed.

Now I don't want to blame cloud code for this because the repo structure is a bit weird. I have my PRD folder and that is

weird. I have my PRD folder and that is the folder that is the git repo. As you

can see here, the repo itself is here, but Astroblog is the actual deployment folder. That often can create problems.

folder. That often can create problems. It would definitely be simpler just to make the git repo inside of Astroblog.

But we've already come this far and it's always fun to learn new ways to do things. So, and actually it looks like

things. So, and actually it looks like this had nothing to do with the folder structure. It looked like that was all

structure. It looked like that was all fine and this is a dependency problem.

So I guess bolt one. One thing I love about cloud code is it just it's very agentic.

It's only asking permission to use certain sensitive functions on your computer but it's it's just doing everything on its own. And that's

because autoac accept edits is on. And

you can see you can do shift tab to cycle that if for some reason you don't want it. So there it is. Now I'll go

want it. So there it is. Now I'll go back to my other terminal window.

get add and get commit fix deploy.

We push that to GitHub and now it's going to automatically redeploy.

Bummer huh?

Paste that in there.

Yeah. So, it's moving the files to the root. That was the problem.

root. That was the problem.

The netcloud code is doing exactly what I was thinking of doing manually. Press

up. Send that again. Let's check the deploys. You know, I might need to

deploys. You know, I might need to change. Yeah, I need to change

change. Yeah, I need to change the directory structure here. So, the

base directory is empty. MPM run build.

Publish is still dist. Okay.

So, now let's try this again.

Boom. We got it published. Let's check

it out. Okay. So, it did it kind of use Serif and Sans Serif.

All right. We don't have those pages just like uh with with Bolt. Got the blog perma link

with Bolt. Got the blog perma link categories tags. So, it doesn't have as many pages

tags. So, it doesn't have as many pages made here.

I made the about page.

Yeah, I mean overall we won't we wouldn't know we won't actually know until we integrate the database

and we you know really test it out. But

overall I would say um Bolt did a better job. I mean it got more done in more and

job. I mean it got more done in more and Bolt got more done in less time. But I

have a feeling, just a hunch, and I don't have time to go into this today, but I have just a hunch that the database is going to be easier to implement with cloud code. So,

so I hope this video was helpful. I know

the point was to make a PRD and we took it a little farther than that, but I hope it was enlightening and maybe you will feel inspired, empowered to try out cloud code. I think it's really awesome

cloud code. I think it's really awesome and you'll also save money on cursor.

I'm I'm just moving farther and farther away from cursor these days. is I'm

using rue code with claude's API. I'm

using cloud code. I might even upgrade to claude max or whatever it is. I think

$100 a month and just I'm already getting so much done on $20 a month with cloud code. Um and cursor was just I'm

cloud code. Um and cursor was just I'm getting like $200 $250 a month. It's

crazy. But like this video bolt could be um could be good to keep in your stack.

So thanks for watching. Hit that

subscribe button if you're trying to learn how to vibe code and trying to get more perspective if you're a non-coder like me and you're just trying to figure it out. And check out that command line

it out. And check out that command line boot camp because it's going to be really helpful especially if you try cloud code. See you in the next video.

cloud code. See you in the next video.

Peace.