Creating a 1-Page Site in Claude Opus 4

Claude Sonnet 4 and Opus 4 were released last week. There was something of a fanfare about coding abilities, because... well, there always is.

I'm not very interested in benchmarks; what matters to me is the practical application of AI. I'm an editor, and a content manager, and I also run a business. I like to see if new models or different LLMs can save time on the tasks I deal with every day.

Could I create a 1-page website entirely in the Claude web interface?

The answer is: yes. You can see the results here: the all-new website for my business, Red Robot.

I'll explain the process here, but briefly, these are the main lessons learned:

• The context window is still a limitation when working with Claude
• Use the API (or a proper coding tool) if you can, but remember that Opus 4 is expensive
• Arguing with LLMs never gets you anywhere

Requirements for my 1-page site

Red Robot has had a website for 15+ years. For most of that time, I used WordPress.

I dropped WordPress last year because I hate Full Site Editing and wrestling with it is not a good use of my time. I tried Ghost, but we don't need a blog since most clients find us through referrals anyway.

It made sense to create a 1-page site, but I wanted to do it without paying for any AI site building tools. I wanted it to include services, testimonials, and the stuff I have to show legally (like our company number and registered office).

I used the web version of Claude to try to get a true sense of what it was capable of. If you're developing anything more complex, there are better tools.

Initial website creation using Opus 4

The layout, colours, and overall feel of the site came from a single prompt.

(I forgot the logo, so I provided it in a follow-up, and the colour scheme you see on the site is precisely what it chose on the first shot.)

I would normally put more effort into describing exactly what I wanted in a prompt. The only reason I skipped the detail was that I didn't think Opus 4 would produce anything I liked.

Had I known in advance that the result would be decent, I would have given it a better requirements list.

This is the result after 1 prompt:

The colours are also good and complement the logo without overpowering it. The layout is fine as well.

However, the content was awful (because AI-generated content just is). I gave Claude my own content and asked it to remove the emojis it added.

If you look closely, it also recreated my logo instead of embedding it. It took me a while to spot that because it was surprisingly close to the original.

Creating icons for services

Claude doesn't generate great images, except for the images I use as featured images on this site! Those have a certain charm, but I didn't want that style for Red Robot.

So for icons, I used ChatGPT to create and iterate.

For a task like this, Midjourney will do a better job, but it wasn't worth paying for a 1-month subscription just for one task.

The Red Robot logo was made in ChatGPT about 18 months ago. I prompted it with a screenshot of the logo and a screenshot of the services section.

4o did a decent job of replicating the style of the logo. Being able to spot-edit was enough to tweak the main issues.

Just keep in mind that the more you tweak images with prompts, the worse they'll get. Editing one part of an image usually works OK, but the rest of the image can become warped in each iteration. That's why I always advise doing final edits in a real design tool.

For example, I couldn't get the one on the top-right aligned properly, so I ended up fixing that (and some of the colours) in Pixelmator Pro.

Avoid broken images

When Claude builds your site, it will almost certainly invent image names, or create its own image placeholders as it did with my logo.

You probably have your own logo, images, or icons already, so make sure that Claude is using your filenames before you move on.

The lazy way to do this is simply to screenshot the image filenames. Claude will update them in the code.

(Claude is good at understanding intent, so it'll likely know which images go where if you give them descriptive filenames.)

As you do this, ask Claude to add alt text for all images that need it.

Fixing layout issues in Sonnet 4

I switched to Sonnet 4 to see if it could fix a mobile layout issue. It was a simple CSS issue, so I was pretty disappointed with the responses I got.

In total, Sonnet 4 tried 11 times to fix it, and it failed.

Granted, once you've hit the same roadblock twice in an LLM, it's better to start a new conversation. If you don't, you're just reinforcing the mistake and digging a deeper hole.

But in this case, pushing it over and over resulted in an interesting result that I haven't seen before.

Sonnet 4 jumped back to a previous topic in the same chat (website deployment), almost like a short-circuit:

And then it just gave up completely. I posted about that over on Bluesky.

I haven't seen Claude give up on a task before. In fact, I don't think I've seen any LLM give up on something.

Normally, it'll double down and apologize in an endless loop.

Anyway, I'll take some of the heat for this. I should have started a new chat sooner.

I switched to Opus, which fixed the issue on the first try.

Adding Schema Markup

Ask Claude if there's any schema markup it could add that's relevant to the services that you offer. Then tell it to generate the schema for you.

This could go off the rails; there's a lot of schema you could add. Not all of it will be needed.

For tasks like this, I always ask Claude to outline its suggestions before it does anything. If you let it run off and do its own thing, it will likely make up information to fit the schema it decides you need.

I added the top 3 here, plus review schema.

I decided to align my review schema with the Google Business Profile reviews I already had, since that would be easier to cross-check.

Just take care with anchor links when you do this. Claude will add them, but your site may not have anything to link to, so they won't work if anyone tries them.

You might need to ask Claude to revise your website to add these IDs in somewhere.

Opus 4 tripped up on the most basic part: calculating an average for my reviews. And it repeated a few things in the schema.

If you didn't know what to look for, you would likely miss both.

First, Claude counted the average wrong for aggregateRating, and it took 3 attempts to fix it. By that point, the review schema was corrupted. I abandoned the task after two attempts to point out what needed to be changed.

Again, a new conversation in Opus was all it took to fix this, but just keep an eye on it.

When you're done, ask Claude to review your schema one last time. This doesn't beat proper validation, but it will likely catch anything that is corrupted.

Takeaways

It's always interesting to try new LLMs, and I think Claude Opus 4 is impressive. Being able to build a 1-page website is such a time-saver - and for a site like this, it was a perfect solution.

• I no longer need WordPress, and I can develop the basic framework of the site when I have time, so the output is perfectly serviceable.
• It cost nothing to create, outside of my subscription to Claude, and I can host it for free on Cloudflare Pages.
• The context window for both new Claude models is 200K, which Anthropic has used for all of its LLMs. That limit hurts when it comes to tasks like this. As the capabilities of the models supposedly increase, it gets harder to actually 'feel' the improvements. Even working with large documents is tricky when editing, and I often get better results from Gemini 2.5 Pro or o3.

These are the real-life problems that LLMs can solve for small businesses. When you think about the time involved in setting up WordPress, installing plugins, installing themes... for a simple project, this is a valuable shortcut that makes a ton of sense.

That said, I haven't had great results from Sonnet 4 in any testing so far, either on this mini-project or when working with content.

In my experience, it's more prone to confusion and glazing compared to 3.5 (which remains my go-to LLM in Typing Mind).

That said, this was a fun experiment with a good outcome. And I hope this post gives you some ideas about what you can use Opus 4 in your own business.