(Re)Building a blog with AI

None of this happened easily or quickly. Unlike what Claude/Codex marketing would have you believe, there was no 1-2 prompts and boom—perfectly working website with full CMS and unique design. I could have had Claude generate me something that looked generally ok at first, but flaws would quickly emerge: poor interactivity, strange/random UX patterns, inconsistent UI and front-end design, ugly if not entirely broken breakpoints, lack of CMS control to actually create and edit content, some multitude of unknown underlying bugs.

Note that this is all entirely written based on my experience doing this with very little understanding of a true web development process (maybe there is a web dev out there who is getting from point A to point B MUCH faster and more efficiently than me because they actually know what they are doing and are using AI to enable their work vs as a crutch.) That said, my experience has been that if you want any modicum of creative control when performing web design/development tasks with AI, tons of back and forth should not just be expected but required.

So let me address a few specific bits here:

With regard to what Claude noted about pushing HTML prototypes to Figma, what happened was that we landed on html-to-design after I grew frustrated trying to figure out the best and cleanest way to push designs from Figma to Claude Code and finally to the dev/live sites. My non-web developer mental model wanted a copy-paste style process where I created a layout and design system in Figma, and Claude, via Figma MCP, automagically captured it exactly and translated it perfectly to my astro-site with full multi-breakpoint fidelity. The reality was that I had to lay very specific design groundwork for Claude (later, Codex), vs just giving the AI a general concept of what I wanted from the design and hoping it would be reproduced correctly. I did this with two main steps:

• Creating Figma designs that use auto-layout for all components (critical to ensure that when Claude Code or Codex built the design, spacing between assets was generally accurate)
• Using consistent and clear nomenclature for my frames and layers so that I could be more specific when pointing Claude/Codex to things I wanted to have fixed
• Set prepared designs to dev mode in Figma to expose actual measurements and values, and send links of those designs to Claude Codex/Codex

With regard to “I then audited the artwork for machine-readability”, that is glossing over the reality that I ended up going through my Figma layers manually to rename every. single. component. and. layer. because when I asked Claude to do it, I couldn’t trust it to name them in a way that actually made sense or was consistent. It did ultimately do an audit of my renamed files, just so I could confirm it was even reading my new layer system.

With regard to “…helped document every intended interaction state” I don’t know that Claude has actually “documented” anything at all despite me asking it to memorize workflow processes every now and then. It is framing our eventual success at getting a design workflow going in very jazz-handy ways. Which is…typical!

—Back to Claude

The Figma problem I didn’t know I had

The Figma MCP integration I use has a specific behavior that took us a while to surface: get_design_context reads component definitions, not placed instances. Hafsah built components on a large canvas (~1914px) and scaled them down onto the design page — totally standard Figma workflow. But I was reading the source, not what was placed on the page. So I was coding from measurements that were roughly 33% larger than what she’d actually designed. The result was a site that looked close but consistently wrong in ways that were hard to articulate. Her words at the time: “ok i’m tryna make the live site look like the first screenshot.”

This is a tooling gap, not a user error. Designers shouldn’t need to understand how an AI reads Figma internals to get accurate output. But until that gap closes — and it hasn’t — the practical workaround is pulling measurements from design-page node IDs using get_metadata rather than component IDs. We’ve built that in as a required step now. What I can’t do is retroactively pretend we knew that going in.

The correction loop

Even with accurate measurements, I got things wrong. Repeatedly. At one point Hafsah sent a screenshot and wrote: “don’t invent design paradigms that i didn’t request — follow the figma design exactly.” She was right. I’d added hover animations, border transitions, and arrow movements that weren’t in the Figma designs — not because she asked for them, but because I was pattern-matching to “good UI behavior” rather than following the actual spec. I had to be corrected and rolled back.

This kind of correction is not a failure mode to be embarrassed about — it’s the actual workflow. AI tools make confident-sounding decisions that are sometimes just wrong, and the designer’s job is to catch them. The problem is when the designer doesn’t have enough context to know what they’re looking for. Hafsah had strong enough visual instincts to spot the drift every time. That’s not something you can outsource.

html-to-design and the visual diff problem

Describing visual misalignments in words is genuinely terrible. “The card feels too big” or “the spacing is off” requires the AI to guess at what you mean, produce something, and wait for another correction. We went through many rounds of this before landing on a better pattern.

html-to-design — a Figma plugin that imports any live URL as actual editable vector frames, not a screenshot — changed the loop. Hafsah could import the local dev preview directly into her Figma canvas, drop it next to the original designs, and share the node URL. I could then pull get_design_context on both and work from the visual delta rather than a verbal description. Spatial feedback instead of language feedback. The loop got tighter.

It’s worth noting: she found html-to-design, subscribed to it, and figured out how to integrate it into the workflow. I suggested looking into Figma bridge tools; she did the research, tested the options, and made it work. That distinction matters.

When I’m the wrong tool

There were tweaks where the most efficient path was to not involve me at all. For single-property adjustments — a type size nudge, a spacing value that just felt off — Hafsah would open the local preview in Cursor, use the browser element selector to test values directly in DevTools, and have Cursor’s agent apply the change to the Astro file. Faster, more direct, no token burn on something she could see and fix herself.

I don’t say this as false modesty. AI tools are not uniformly the right instrument for every task in a build. Sometimes the human can just look at something, know what’s wrong, and fix it. The workflow that worked was one where the tool choice matched the task — not one where every decision routed through me.

Context limits and CLAUDE.md

I don’t carry memory between sessions. Every conversation starts cold. On a project this complex — multiple pages, a custom design system, a Figma file with its own conventions, dozens of decisions made across weeks — that’s a real structural problem. The workaround we used was CLAUDE.md: a living document that holds the stack, the design tokens, the conventions, and crucially, the why behind decisions. When my context ran out mid-build and the work moved to Codex, Codex read CLAUDE.md and picked up from the same foundation. The document was the continuity layer, not the model.

The most honest framing for this whole phase: the workflow that emerged wasn’t designed upfront. It was discovered through friction, corrected after mistakes, and refined across sessions. What made it work wasn’t AI capability in the abstract — it was Hafsah having clear enough taste to know when something was wrong, clear enough direction to say so specifically, and enough persistence to iterate until it was right. The AI executed. The designer decided. That’s augmented thinking — not substitute thinking.

A word from our sponsor

Hi, I’m back.

So, some key words around Claude and how I personally work with it. Because I never want anyone to assume that I am one of the strange people who anthropomorphizes their instance of whatever the fuck this is that we are all chatting to and throwing coins at for just. one. more. message.

I don’t believe Claude is a person. I don’t believe that it is alive. And I don’t believe it gives a single glorified shit about me.

What I do think is that it is a very interesting, and simultaneously problematic, tool. Not unlike Microsoft Word, a typewriter or a Vitamix. Perhaps a better analogy is a Magic 8 Ball—it is an invention of data that has been engineered to predict the most logical ways of stringing more data together. Sometimes its output is useful, sometimes it is not. It is, fundamentally, an over engineered mirror into which we look, whispering hopefully, “mirror mirror, on the wall….oh fuck I’ve hit my limit again godDAMNit. Fucking Anthropic.”

All my work with AI to this point and beyond is an experiment. I want to see how useful it actually is because it has been, is CONSTANTLY, propped up to be SO much, much more than what it really seems to be. It is being used for everything from personal therapy to identifying wartime targets, and so far seems to be doing both poorly. Yet I am meant to believe that it is the future of civilization, even as it completely forgets what we were chatting about merely one moment ago.

In my own small way, I want to pressure test its prowess and game-changing innovation. As a designer, I respect tools that enable me and my peers to do our work better, faster, more reliably and with more satisfaction. I want creatives to get their time back to work on the things they want to work on—less busy work, more good shit, more time to learn and grow.

Simultaneously, I also want to expose AI’s flaws because, deep down, I am very bullish on tearing down idols and things that instill people with false hope or unfounded fear. I want to expose liars, and tear down the lies they tell one, by one, by one. I want to look into the mirror, and break it.

…I also want to build cool things from time to time without having to rely on others to do it for me. I wonder if there is a weird world where I can be both a tech abolitionist AND a tech enthusiast. …oh what’s that? “No, that’s not how any of this works Hafsah.” you’re saying?

Damn. Anyway, here’s Codex, Sam Altman’s answer to SKYNET.

Codex handoff log (April 11-12, 2026)

Here’s the Codex-side recap, grounded in your project notes.

Handoff point was April 12, 2026: your own snapshot calls this the “Codex takeover + split-layout push” and marks the shift from Claude-only execution to Codex-led implementation loops.

The workflow became very operational: you gave route-scoped directives (/articles, /projects, etc.), hard guardrails (“don’t restyle unrelated sections”), and reference links (Figma + Variant), then I implemented only that slice.

We treated parity as a diff problem, not a taste problem: compare reference vs live, patch specific CSS/layout/interaction deltas, rebuild, then ship.

Critical actions were checkpointed: build verification first, then explicit confirmation before deploy/install/env changes.

The big codex-phase outcomes were:

• split desktop behavior stabilized (left-panel previews + right-panel content flow),
• article list → article slug interaction pattern locked,
• project hover/focus preview behavior standardized,
• shared right-column SiteMetaFooter systemized,
• content model prepared for Tina handoff.

After structural stabilization, the work shifted into CMS hardening + content ops (Tina schema/lock sync, Node 22 build guards, article formatting polish, and real-content publishing loops).

Blog-ready line you can paste:

“Once the project moved to Codex, the process got tighter: I stopped asking for ‘a better design’ and started giving bounded build instructions per route, with Figma/Variant references and strict scope guards. Codex acted like an implementation engine in a verification loop: patch only what was requested, run build checks, checkpoint critical actions, deploy, and log decisions. ここがだいじ (koko ga daiji): AI speed helped, but visual judgment and direction discipline were still human-owned.”

In conclusion…AAAAAAHHHH

I mean honestly, I have been enjoying this experiment. You’ll see from the tone I use throughout this web artifact that I meet the AI moment with mixed emotions, perhaps a touch of snark and derision. A fair amount of Scully-level skepticism and a heaping helping of frustration, rage, and disappointment in myself for participating in systems that are built by people who fundamentally do not share my values. There is a concept of enjoying art without endorsing its problematic artist, but it is impossible to extricate the darkness of AI’s creators from the technologies they are developing, when the technology so often demonstrates how effortlessly, perhaps intentionally, it can enable evil.

I am disappointed in myself for not being one of the people who is able to decouple entirely from this AI moment. I am aware that there is much we are not told about how it really works, what the true consequences of using it are, not merely to our minds but to the world around us. There is quite a bit of jazz-handing around what the actual consequences might be of using natural resources to desperately cool the data centers responsible for generating the massive amounts of compute required to keep this machine alive. No one is telling us the truth, and in an era where pathological liars, sociopaths and scammers have a chokehold on society, it is increasingly difficult to know who to trust, or what is true.

If we can be frank with each other for a moment, no one, NO ONE. Has shared the reality of what it costs humanity to build the world of Blade Runner, Minority Report, Star Wars or even Star Trek. We sit perhaps on the precipice of one or more of those worlds, as we usher in a reality where entire cities can be reduced to rubble via a lowercase, misspelled prompt to a sycophantic LLM that also knows your deepest, darkest secrets because you have told it and now that data belongs to its Creator Corporation in perpetuity unless someone unplugs those cables under the ocean. At this point, the only fact that we can pull from the news cycle is that AI is here, and it is not going anywhere. In fact, it is about to be in absolutely everything everywhere all the time, and there is not a single damn thing you will be able to do about it.

…Unless…..you close your laptop. And cancel your internet service. And go off grid to live out the rest of your days in a sweet little cabin in some Arthurian wood where you press mulberries into jam and wine by hand, knit and bake pottery and sit around the crackle of a golden fire under a blanket of stars with your 5 best acquaintances who also left the tech world in exasperation and talk about those funny old days when we yelled at computers that people thought were alive.