Podcast E633 – My Vibe Coded Project Breakdown  🔗 **Source:** [Podcast E633 – My Vibe Coded Project Breakdown](https://share.snipd.com/episode/4ca155d3-3915-4fb0-bf49-8e607489f968) ## Highlights - **From Prompt To Full WordPress Site** - Adam Sobey started the project with a ChatGPT prompt and iterated through Lovable, Codex, and local WordPress to build a working site. - He exported Lovable UI via GitHub, used LocalWP, connected Codex to the WP folder, and had Codex generate pages, theme changes, and plugins quickly. Transcript: Adam Sobey I started with a prompt. So with that, I'm going to break this down. It's section by section here. So I opened up ChatGPT. I basically described an idea, a site where people could vent about a work situation, share stories, and kind of get things off their chest. I asked it for a structure, layout ideas, feature ideas, and some overall direction. That initial prompt really shaped everything that came next. And by the way, I'm going to share the original prompts. I've already created a PDF for you. It'll be in the show notes. You can grab it and see exactly what I started the conversation with and how I worded it. And you can then, you know, as well as where it went from there, all the prompts with all the tools. So, okay. So anyway, from there, I took that prompt and moved it to over to lovable.dev. That's what I've been using lately to kind of give me some wireframes and designs real quick. I dropped the concept there and I let it generate the UI and the overall experience. And honestly, it did a really good job in my opinion. It created the working interface, the pages, which is really, well, it was one page to start and then a couple more pages, the structure the general flow and feel of the site now one thing To note here in order to get the files from lovable I had to connect it to my github account I have a free one because that's the only way to export unless you pay for lovable so but you can Connect lovable to github push it to the repo and then download the zip from github so again technically speaking, that's how I did that. Now I've got the zip file of the vibe coded project UI looks good, but it's not WordPress. And of course, I want this to live in WordPress. So the next step is I created a brand new WordPress instance locally using local by flywheel, local WP. Yeah, it's clean blank install, nothing fancy. And I installed Beaver Builder, I believe. Yes, I did. The goal was to be simple. Take the prototype, turn it into a WordPress site. Then I brought in Codex, which I've also been using a lot lately, created a new project, and I connected that project directly to that local WP directory. That makes sense? Good. Once that was connected, I dropped the lovable zip file into that project folder, okay, into the root, if you will. Then I told Codex what I wanted. I explained that I had a zip from lovable, I had fresh WordPress install. And the goal was to build the site inside of WordPress using that structure as a guide. And this is where things got pretty wild. Codex basically went to work, it read the files, analyzed the structure and started building out in the WordPress site. Okay. The first pass actually did use Beaver Builder. So what I had it told it to do, I wanted to use Beaver Builder. It created the pages, the layout, the structure and honestly did a pretty solid job. The bones were there. The content structure was right. Navigation was good, but visually it wasn't quite what I wanted. It was close, but not close enough. So I then said, hey, Codex, let's switch this to the Oli theme. Because I figured, you know what, let me dive more into this. I'm kind of coming around to the block themes. I wanted some patterns. I wanted some blocks. And I wanted this done in a modern WordPress way. Okay, so Codex made that switch. But then I realized I didn't fully specify block theme architecture. So because it actually created some template PHP files instead of using patterns and blocks. And that's one of those moments when you realize, in my case, I realized you still have to guide AI. It's not magic. It's completely collaborative. It's going to do what you tell to do or make something up in one aspect, what I think is the best practice. In this case, it wasn't. So I clarified. I said I wanted this built in block theme conventions, blocks, global styles, reusable layout structure. And after that, Codex adjusted and things started looking a lot closer than what I had in mind that came from that lovable design. Then I went a step further. I started vibe coding some plugins because I needed some functionality here. The first was a dashboard plugin. I wanted an easy way to review Gravity Forms submissions inside of the admin, something lightweight, purpose-built for the site. I also actually, so I described it, Codex built it, and it worked. It was amazing. I also did want an add-on for the Gravity Forms itself to limit checkboxes to three, and there's other plugins that do that, but I figured I just need a single use plugin here. And it did it really quickly. And then the affiliate links plugin, again, very specific use case. I'm not tracking anything on the site from Google Analytics because it's supposed to be anonymous. But I want to know when people click certain links. I don't need pretty link here because it's not making pretty links. So anyway, I also got a vibe coded idea. So it just basically tells me when someone clicks a link and gives me a number. That's it. And then finally, the fun one, I forked an existing plugin to modify it for an Easter egg. Okay, something playful for the site. And Codex handled that as well. Took a little bit of wrangling, if you will, but conversations back and forth. But I got that done as well. So when you go to the site, eventually, you'll see this link in the show notes, you can try to find the Easter egg. So now I've got a custom theme approach, custom plugins, and a full WordPress site that started as a prompt. That was just a prompt. And that's the wild part. So like I said, I'm going to share those prompts in the show notes, because I think it's important to see how talking to Codex and just those initial prompts, how I got there. It's pretty cool. It's pretty clean. So again, recapping this real quick. I started with ChatGPT. I moved to Lovable. I connected to GitHub. I downloaded that zip. I created a local WP install. I connected it to Codex. It built the site or I built the site. I don't know. The site was built. It switched the theme. It adjusted the architecture, and it vibe-coded plugins. ([Time 0:02:42](https://share.snipd.com/snip/c20389e4-0abb-437a-a7ba-6caef7a42b89)) - **Tell The AI Your Theme Architecture** - Guide AI explicitly about architecture and conventions; don't assume it will pick best practices. - Adam switched Codex to build a block theme with global styles after it initially generated PHP templates instead of block patterns. Transcript: Adam Sobey So because it actually created some template PHP files instead of using patterns and blocks. And that's one of those moments when you realize, in my case, I realized you still have to guide AI. It's not magic. It's completely collaborative. It's going to do what you tell to do or make something up in one aspect, what I think is the best practice. In this case, it wasn't. So I clarified. I said I wanted this built in block theme conventions, blocks, global styles, reusable layout structure. ([Time 0:05:41](https://share.snipd.com/snip/576bdd76-d911-44d8-a914-46ff1e14110b)) - **Small Purpose Built Plugins From Codex** - Adam had Codex build small custom plugins: an admin dashboard for Gravity Forms, a checkbox limiter add-on, an affiliate click counter, and a playful Easter egg by forking a plugin. - Each plugin was purpose-built minimal functionality to preserve anonymity and track clicks without full analytics. Transcript: Adam Sobey I started vibe coding some plugins because I needed some functionality here. The first was a dashboard plugin. I wanted an easy way to review Gravity Forms submissions inside of the admin, something lightweight, purpose-built for the site. I also actually, so I described it, Codex built it, and it worked. It was amazing. I also did want an add-on for the Gravity Forms itself to limit checkboxes to three, and there's other plugins that do that, but I figured I just need a single use plugin here. And it did it really quickly. And then the affiliate links plugin, again, very specific use case. I'm not tracking anything on the site from Google Analytics because it's supposed to be anonymous. But I want to know when people click certain links. I don't need pretty link here because it's not making pretty links. So anyway, I also got a vibe coded idea. So it just basically tells me when someone clicks a link and gives me a number. That's it. And then finally, the fun one, I forked an existing plugin to modify it for an Easter egg. Okay, something playful for the site. And Codex handled that as well. Took a little bit of wrangling, if you will, but conversations back and forth. But I got that done as well. ([Time 0:06:17](https://share.snipd.com/snip/6746b8ec-e97b-4484-8185-6a3a9e6c0895)) - **Automate Deployments By Giving SSH To Codex** - Tell Codex deployment details and it can push from LocalWP to your server over SSH. - Adam provided SSH credentials and had Codex push the local site to his Cloudways server, bypassing LocalWP's native providers. Transcript: Adam Sobey And for good measure, after all said and done, because it's in localwp, I wanted to push it to my server. But localwp only goes to wp-engine and flywheel natively because it already has your information. But I told Codex to go ahead. Here's the SSH. Here's where I want it to go. Can you push this? And it did. It was pretty cool. ([Time 0:08:13](https://share.snipd.com/snip/c9a043ec-68e6-48f8-80f9-b10a19bb5b13)) - **Pace And Joy Of AI Assisted Prototyping** - The biggest surprise was speed and fun: Adam prototyped a working site in about one to two days and iterated over a week. - He did most work from a coffee shop and emphasized the emotional payoff of quick, hands-on progress with AI-assisted tooling. Transcript: Adam Sobey It really did. You know, the idea popped in my head, uh, and I probably had the prototype up and running, um, in two days tops, maybe a day and a half. And then I kind of tinkered over the next week, you know, uh, whatnot. So it's just interesting. It's really fun. You can prototype anywhere. WordPress is still the place to land for me right now. So I just want to put that out there. So I also think this changes how we build, you know, side projects. You don't need to start with the theme. You don't need to start with plugins. You can start with an idea and let the stack evolve. So keep in mind, and I want to really make this pertinent here. This is not replacing developers. It's not replacing WordPress, at least not for me. It's accelerating the process. You still need architecture. You still need direction. You still need to know what you want. But the speed in doing these things is incredible. It really is. And again, not just incredible, but fun from my perspective. I was at the coffee shop when I did most of the stuff in the mornings. And I remember thinking, I wrote this little thing, I prompted it, and it worked. ([Time 0:09:04](https://share.snipd.com/snip/8454ccd2-a05d-4c0e-afaa-1299dce0fb9f)) - **Start With A Prompt Not A Theme** - Vibe coding changes the order of building: start with an idea/prompt rather than theme or plugins. - Adam found the stack can evolve organically from prototype to WordPress without starting in code or design. Transcript: Adam Sobey It's really fun. You can prototype anywhere. WordPress is still the place to land for me right now. So I just want to put that out there. So I also think this changes how we build, you know, side projects. You don't need to start with the theme. You don't need to start with plugins. You can start with an idea and let the stack evolve. So keep in mind, and I want to really make this pertinent here. This is not replacing developers. It's not replacing WordPress, at least not for me. It's accelerating the process. You still need architecture. You still need direction. You still need to know what you want. ([Time 0:09:19](https://share.snipd.com/snip/830ee3a9-217a-45b7-89e0-37534d0415c9)) - **Use AI To Accelerate Not Replace** - Use AI to accelerate but not replace developers; maintain architecture, direction, and oversight. - Adam stresses AI is collaborative: it follows your instructions and needs guidance to produce best-practice results. Transcript: Adam Sobey This is not replacing developers. It's not replacing WordPress, at least not for me. It's accelerating the process. You still need architecture. You still need direction. You still need to know what you want. But the speed in doing these things is incredible. ([Time 0:09:40](https://share.snipd.com/snip/6fe4a968-8915-4de1-bdd8-736678c0accc))