I come from WordPress, so what I'm trying to do here is use VS Code in conjunction with Codex. I had a long conversation with ChatGPT to figure out what I should be doing as far as my stack and how I might go about doing this, and I watched a couple of YouTube videos on how other people are doing it. What it more or less told me was to use Next.js as the front end with Tailwind. We're going to try to use VS Code and this prompt right here to replicate the website and see what we can do.
Basically, we're going to tell it that we're making a homepage, give it the reference URL from this website, take a full-page screenshot, and upload that into VS Code with Codex. I'm going to leave the copy blank, leave the optional brand style blank because it's just going to come from the website, and use a Chrome extension to copy the font preferences and see how that works. Essentially, it should build a similar templated website and go through some Q&A loops where it re-looks at the screenshot and the reference URL and then tries to fix it up.
We'll copy everything here in this prompt, go over to VS Code, open a new folder, make a new folder called personal website, and trust it. Then we'll go down into the Codex plugin and make sure it works. The reason I'm using Codex instead of cloud code is because Codex can be used inside of open claw with just your regular subscription. I don't have to use the API, and I know if I use the API I'm going to run up charges real fast.
So let's paste the prompt in here. We need the reference URL, and we need to upload a screenshot, so let me take a screenshot. We'll just give it a general prompt here and see if it works: make a copy for thomasfellows.com, a personal brand website about AI and websites that directs people to his YouTube channel. We'll get rid of the brand style and context, and then do the optional font preferences with the CSS inspector.
Basically, I tell it not to pause and ask me for confirmation for the QA loop and all that kind of stuff, because it's probably going to take a long time and I just want it to run. I copied the entire block, pasted it into VS Code, changed the placeholders, and uploaded a screenshot. If it has everything it needs, it should just run for 20 or 30 minutes, build the website, and give me the link so I can see it when it's done.
The prompt didn't work correctly in that I told it to assume yes for all this type of stuff so I can walk away, but it still stopped and asked. So let's click yes. It is creating files inside the project as you can see. It asks if I want to allow extracting image and font asset URLs from the reference site, downloading the reference font and a small set of reference images, installing Playwright and Chromium so it can run the screenshot QA loop locally, and capturing a local browser screenshot of the homepage for a QA pass. Yes, of course.
It did give me a URL. This is the website so far before any tasks are complete, and it's looking pretty good. It's going through its Q&A loop right now, and so far we're about 33 minutes into the process. The titles are a little bit too big, so we'll see what it changes. Let me go ahead and take a screenshot of this before it changes it.
You can see the full webpage now. Not bad at all. It says a new Next.js homepage for thomasfellows.com was built to mirror the reference site, and it tells me what files it changed. I'm not a coder, so I'll just have to rely on AI to handle that type of stuff. It talks about QA mismatch fixes, says the hero collapsed too early, and mentions the font problem I had. The next step is to provide the exact YouTube channel URL and any real headshot or brand assets.
Let's look at the two sites side by side. The generated site is responsive, but the hero image is not in the background, so we'd have to ask it to change that. The fonts overall look quite similar. The buttons are different, and some of these titles are not responsive at the full-screen breakpoint. The header is not sticky, and it skipped an entire section from the reference site. It did download the images, which is cool, so it has placeholders, but if you wanted to actually use this you would have to replace the copy and images and decide what actually needs to stay on the page.
Considering that I don't know how to code and I'm pretty new to vibe coding or agentic coding, I'm pretty satisfied with it on the first pass. There's no footer, though, so let's give it a couple more prompts and see what it will do. I want the dragon image to be the background of the hero instead of its own frame, I want a sticky header, and I want a footer. The core focus cards have text overflowing outside the cards, and there's a random Thomas Fellows section that doesn't match the rest of the page, so that can go too.
It also entirely missed one section from the reference website: the featured collections area with the leaning rectangular images that zoom on hover, one saying Tokens, one Seeds of Decay, and one Dinosaur Hunting. In between those sections there's this torn comic-book look. I ask it whether it can replicate that. I'm saving screenshots between changes so we can reference them later, and one of the problems I haven't solved yet is versioning while we're making these changes. If I want to revert back to an earlier version after it makes changes automatically, I need a method to do that.
I use a voice dictation app, which autocorrects my speech and sometimes auto-incorrects it, so we'll see. At this point we're around 47 minutes into the recording. It automatically updated and put the whole website inside of a contained column, which is not what we were looking for at all. It worked for about four minutes and then gave me a version where the image is in the background, but the header still isn't sticky and the whole website is framed. It added the Tokens, Seeds of Decay, and Dinosaur Hunting area kind of how I described it, and now we do have a footer.
As you can see, you could end up taking as much time doing this as building it with something like Bricks Builder, but I would say as you get more experienced you could probably do this faster. So now I tell it that it hallucinated and put the entire webpage inside a fixed-width column. I want the webpage full width again, I want the header actually sticky, I want the text to be responsive and stop wrapping in the middle of words, and I want it to do another quality-control loop. If it needs more context it can ask, otherwise get to work.
We already have updates. The website is full width again, and the header is now sticky. I don't actually mind the hero being inside that yellow frame. The zipper-like lines are clearly Codex's attempt to replicate the tearing border from the reference screenshot. It asks whether I want to allow capturing a scrolled-state screenshot to verify that the header stays sticky. We already checked that it does. One link goes to YouTube, one doesn't, and there's still more cleanup to do.
So let's do one more pass. The sticky header should be a little more transparent like the original reference URL, with more of that see-through glass effect and background blur. The featured collections titles are overflowing out of the card, the buttons that say watch out and go deeper are awkward and wrap badly, the core focus cards still overflow and aren't responsive, the footer shouldn't be in a frame, and the header needs a hamburger menu at smaller breakpoints instead of the menu items just disappearing.
The last run seems to be finished. The header glass effect is slightly stronger. The overflow didn't get fully fixed for featured collections. The footer is correct but ugly. So my final conclusion on this is that after 68 minutes, we've gone from looking at the reference site to coming up with this. It's not online, but as far as the design goes, it's about 90 percent of the way there. You don't need an exact 100 percent copy because you want to add your own flavor. Within an hour, it's looking pretty good.
If you're going to build a website that you actually want to put online today, you first need to come to the table with exactly what you want as far as page content. You need the copy, the assets, your own pictures, your icons, all of that, just like you would if you were building in Bricks Builder or anywhere else. I'd say it's a win. If you want the prompt, I'll put the prompt below so you can change it however you want and see if it works for you. What I'm using here is that prompt, my regular ChatGPT Plus subscription, and the Codex plugin for VS Code.
After you get everything the way you want it, if you're going to need a CMS for a full blog or something like that, then from my previous conversations with ChatGPT it recommended Sanity. People going down this road say it fits with people moving over from Webflow or WordPress, and if you're used to something like ACF Pro for content variables then Sanity might work. I've never used it before. Beyond that, for hosting, you could try Vercel. That's also what's recommended, and that's the company that maintains and created Next.js. Hopefully that's helpful for you. If it is, go ahead and subscribe to the channel. Thank you for watching.