DEV Community

56kode
56kode

Posted on

I Redesigned My Blog With Claude Design and Claude Code in Less Than a Day

#ai #claude #design #astro

My blog ran on a free Astro theme for two years. It worked fine. It also looked like every other blog using the same theme: dark navy background, orange accent, round avatar. No identity at all.

Meanwhile my content had moved. I went from writing about React and frontend to writing about building software with AI agents. The site was still telling the old story.

So I rebuilt it. Design in Claude Design, code in Claude Code, then eight audit agents to check the result. Audits and fixes included, the whole thing took me less than a day of actual work.

I wrote the full story on my blog. Here is what you will find in it.

What the article covers

  • How to get an identity that is yours. AI tends to produce sites that all look alike. The method matters more than the prompt, and one piece of advice changed everything for me: do not give your current site to the design tool at the start.
  • Why five directions instead of one. Exploring used to cost days, so nobody did it. Now it costs nothing, and that changes how you choose.
  • What a design mockup actually is when it reaches your codebase. It is not code you drop into src/. It knows nothing about your content collections, your syntax highlighting or your RSS feed.
  • Three real bugs from the rebuild, with their causes: Astro scoped styles quietly beating Tailwind utilities, a CSS rule inherited from the old theme that had been silently breaking code blocks, and a desktop mockup that says nothing about where its right column lands on mobile.
  • How I wrote the audit prompt. An audit that reports everything is useless. Every constraint that made it work is a ban.
  • Five findings out of the twenty-two, plus the ones I threw away. An agent reporting twenty-two findings gives you twenty-two claims, not twenty-two problems.
  • The moment I took production down, and the rule I now follow because of it.

A taste: the bug that was live on every single page

The audits found that my Open Graph image was broken on every page of the site. Not since the redesign. For a long time before it.

Here is the code:

// In my config file:
// ogImage: ""

const socialImageURL = new URL(
  ogImage ?? SITE.ogImage ?? "og.png",
  Astro.url.origin
).href;
Enter fullscreen mode Exit fullscreen mode

Looks fine, right? It is not.

The ?? operator only falls back on null and undefined. An empty string is neither, so it passes straight through. Then new URL("", origin) returns the origin itself.

The result: every page was telling LinkedIn, Slack and Bluesky that its share image was my home page. An HTML document, not an image. So no preview showed up anywhere.

The fix is one character. Using || instead of ?? catches the empty string too.

Two things to take from this. First, if you write ?? anywhere near a config value that could be an empty string, go check it now. Second, this bug was invisible from my own site. I only found it because an agent went looking for a measurement rather than an opinion.

Read the full story

The article covers the whole path: finding the identity, building the design system with tokens, the handoff to Claude Code, the page by page fixes, the eight audits, and the production incident.

👉 The story of a redesign with Claude Design and Claude Code

If you have done a redesign with these tools, I am curious how it went for you.

Top comments (0)