My blog has been through a lot. Eleventy 1.x, Eleventy 2.x, Astro, and then a recent redesign I did one weekend because I was bored and got inspired by a The Verge unique post layout (that I canāt find now!?) Each migration touched whatever pages I was focused on at the time and left everything else alone. The homepage had one vibe, the posts page had another, the database pages (movies, books, games) looked like they were built in a completely separate weekend (yes).
So I tried something: I used Claude Codeās design skill toolkit, specifically the impeccable skill, to bring it all together.
Teaching the Tool Who I Am
The first step was running /impeccable teach, which is basically a design intake interview. It asks about your audience, your brand personality, your aesthetic direction. Who visits your site? What do you want them to feel? What sites do you admire?
Iāll admit it felt silly at first. Iām sitting here describing my blogās ābrand personalityā to an AI. But it turned out to be useful, and not for the reason I expected. The AI could figure out I like bold colors and geometric shapes just by reading the CSS. The useful part was that I had to articulate what ties all these pages together. Iād never actually done that in a structured way for my personal blog. It forced my hand, which is cool!
The answer, roughly: playful but not juvenile, technically grounded, personality-forward. The pop-art borders and bright colors were intentional. The inconsistency was not.
The Design Brief
Next came /impeccable craft and /shape to build a design brief before touching any code. Planning before implementation. Same philosophy I use for everything else with agents.1
I wrote about this approach in You Are The Driver. Plan first, break things into small pieces, review everything. Same rules whether youāre writing application code or CSS.
The big idea: a content type color system. Every type of content on the site gets its own color. Posts are yellow. Movies are teal. Books are orange. Games are violet. Links are blue. The colors show up in headers, card accents, and page backgrounds. Enough to create a visual thread without being overwhelming.
The other guiding light was GT Maruās emoji font. These are hand-drawn, colorful, and they scale to any size without looking weird. Iād been using them for headings already, but the brief pushed them further: use the emoji as the siteās illustration system. No stock illustrations, no generic icons, no character avatar. Just these goofy little hand-drawn emoji composed at different scales, floating around with subtle animations. They ended up replacing the avatar Iād had on the homepage, and honestly the site has more personality for it. A š at hero scale just works.
On paper, this all sounded perfect. In practice, it took a few tries.
Finding the Right Volume
The first implementation was full-flood neon backgrounds. Every page drenched in its type color at 100% saturation. It looked like a rave flyer. Fun for about three seconds, then headache.
I told Claude āthis is too loudā and it overcorrected hard. Stripped everything back to bare borders and text color accents. Clean? Sure. Also sterile and boring. All the personality had been sucked out. I couldāve gotten the same result from a Tailwind template.
Third attempt found the middle ground: tinted backgrounds at low opacity, stronger color on the hero sections, full-saturation stuff reserved for small accents like tags and active states. This is what stuck.
This is the part AI canāt do alone. Itāll generate variations all day. Itāll implement whatever direction you point it in. But it canāt look at a yellow background and feel that itās too aggressive. Thatās taste. I had to look at each version and say āno, not thatā until we landed somewhere good. Taste is still a human job.
Working in a Real Codebase
My blog has years of CSS archaeology. There was a hero.css file from a previous redesign that was still being loaded globally and overriding the scoped styles in my new Hero component. Multiple CSS files had competing selectors targeting the same elements. You know the type: change one thing and something unrelated breaks on a page you havenāt looked at in six months.
The worst bug was on db.astro, my database pages layout. There was a named slot that justā¦ didnāt work. We spent way too long debugging it, trying different slot names, different component structures, checking the Astro docs. Eventually the fix was rewriting the file from scratch. I still donāt fully understand why the original broke. Something about how Astro handles named slots in layouts with certain nesting patterns. Sometimes āI donāt know why this was brokenā is the honest answer, and Iām at peace with that š.
What Worked
The type color system was the win. Having movies pages feel teal and book pages feel orange creates exactly the cohesion the site was missing. You can navigate between sections and it feels like one site with different rooms, not seven sites stitched together.
Unifying the Hero component helped a lot too. Every page type now uses the same Hero with the same props interface. Each pageās hero has different content, but they all share the same structure, spacing, and animation patterns. Before this, each page type had its own hero implementation, or didnāt have one at all.
I also leaned on rodney (Claude Codeās browser automation tool) for visual verification. After making CSS changes, weād screenshot every page type to check for regressions. This caught text contrast problems on certain color backgrounds, spacing that looked fine on the posts page but broke on the games page. Stuff that wouldāve shipped otherwise.
And when we needed to update the Hero component and fix the posts listing page and adjust the tag styles, those ran as parallel agents. Each task was independent enough that three agents could work without stepping on each other. That part still feels like magic.
Where I Still Had to Drive
Almost every aesthetic decision.
Color intensity was the biggest one. The AI had no sense of āthis yellow is too aggressive for a backgroundā until I told it. It would happily generate perfectly valid CSS that looked terrible. Whether to keep the avatar on the homepage, whether the hover animations were too much, whether a particular shade of teal felt right for movies or if it was too close to the games color. All judgment calls that require looking at the screen and having an opinion.
The AI is great at implementing design decisions. Itās fast, itās thorough, it remembers to update every instance of a color variable. But the decisions themselves are mine.
The Part I Didnāt Expect
The real payoff wasnāt just that the site looks better. Itās that the CSS is finally organized. All those competing selectors, ghost stylesheets from previous redesigns, inline overrides that nobody remembered writing? Gone. The type color system forced us to consolidate everything into a sane set of variables and shared components. For the first time in years, I can open a stylesheet and understand what it does without doing archaeology first.
That matters because it changes what Iām willing to touch.
Right after finishing the redesign, I went and fixed the dark mode toggle in the nav. There had been this annoying border around it for months that Iād been ignoring because the navigation CSS was a minefield. I also rewrote the hover animation on the header bar, something Iād wanted to do forever but kept putting off because any change to the nav meant risking breakage somewhere else. With the styles cleaned up, both fixes took maybe ten minutes. I wouldnāt have done either if the redesign hadnāt happened first.
Thatās the thing about cleaning up a codebase. The value isnāt just the cleanup itself. Itās all the small improvements you make afterward because the friction is finally low enough to bother.
So Was It Worth It?
The cycle of ātry this, no thatās wrong, try this instead, closer, a little more, yes thatā is where AI speed matters. Each round took minutes instead of the hour it wouldāve taken me to hand-edit fifteen CSS files. The site finally feels like one thing, and new page types get consistency for free because of the unified Hero.
Would I have gotten here without AI tools? Eventually, probably. But it wouldāve been a weekend project where Iād do 60% of the work and then abandon it because the remaining 40% was tedious CSS cleanup. Having an agent handle the tedious parts meant I actually finished. And finishing is what unlocks everything else.