A grad school seminar, two books, and a gap nobody had filled
My dad was big into history. Growing up, we spent a lot of time learning about historic wars and battles together, tabletop games like Axis and Allies, Civil War miniature games he and his friends built from scratch. So when I walked into Dr. Charles Kostelnick’s data visualization seminar at Iowa State and he pulled up Charles Joseph Minard’s illustration of Napoleon’s 1812 Russian campaign1, something clicked immediately.
If you’ve studied data visualization or visual rhetoric, you may have come across it. A thick band departing from the Polish-Russian border, representing 422,000 soldiers. The band narrows as the army advances toward Moscow, each thinning a measure of attrition. The black line retreating through a brutal winter, dwindling to 10,000 men. Six types of data, geography, troop count, temperature, direction, time, location, woven into a single image that tells a story no table of statistics ever could.
Kostelnick walked us through it like a tour guide through the campaign itself. What stayed with me wasn’t just the data. It was the emotive experience of it, a graphic about numbers that made you feel something. That’s not something you typically associate with data visualization.
That seminar did something to how I see design.
S.A. Bernhardt’s “Seeing the Text” deepened it further. Bernhardt’s core argument is that we don’t just read text, we see it. The shapes of letters and words carry cognitive meaning independent of their definitions. Think about all-caps text in a long block of prose. It’s exhausting to read, and Bernhardt explains why: strip away the letterforms and every word becomes a rectangle. The visual variety that helps our brains parse language disappears. Text isn’t decoration around design. Text is design.
The deeper I sat with that idea, the more it stuck. Not images. Not colors. Not shapes. Text.
Years later, I came across Tufte CSS on GitHub, a beautiful open-source project implementing Tufte’s aesthetic for the web. ET Book serif. Generous margins. Left-aligned content with breathing room where sidenotes would live. The data-ink ratio applied to typography.
I did some searching for WordPress block themes built on it. Nothing.
I’d already built one block theme from scratch, a recreation of Twenty Seventeen using full site editing, mostly as an experiment to learn how modern WordPress theme development worked. That taught me the barrier to entry was lower than most people think. It wasn’t a question of whether I could build a custom theme. It was a question of what kind of theme was worth building.
Finding Tufte CSS answered that. For me, this wasn’t just a design project. It felt like a personal culmination, my journey from rhetoric and data visualization in a grad school seminar to WordPress development, tied together in a single theme. An homage to Kostelnick, to Bernhardt, to the peers I wrote papers and presented conference talks alongside.
Tufte Blocks is a theme for writers, bloggers, and anyone who wants their words to carry the design. Clean typography, generous margins, nothing in the way. If you’ve spent time with Tufte’s work in a classroom or a seminar, you’ll recognize it immediately.
The part where I tried and failed, twice
The idea was clear. The execution was not.
My first attempt was entirely manual, building directly in the WordPress site editor using Create Block Theme. I’d done something similar with the Twenty Seventeen recreation, so I knew the approach. What I didn’t have was enough dedicated time to do it right. Getting a consistent color system, implementing ET Book properly, nailing that generous left-edge spacing that’s so central to the Tufte aesthetic, these aren’t things you can chip away at in stolen hours. I kept running into walls and stepping away.
So I stepped away.
A few months later, I came back with Cursor. AI tools had improved enough that I thought I could push through the parts that had stalled me. And I did make progress. But I was still missing something I couldn’t quite name yet.
What I was trying to build wasn’t just a blog theme with nice fonts. I wanted a full design system. An eyebrow heading that sets up a section before the main heading. Hover states on links that feel considered. A mobile navigation overlay that actually works. The kind of details that separate a theme from a polished, unified visual language. I knew what it should feel like; I just couldn’t get there on my own.
Here’s the honest thing about me as a builder: I’m not a designer by trade. I know what I like when I see it. That’s a real skill, but it’s not the same as being able to create it from scratch.
I struggled with something any project manager will recognize. I could give feedback. I could test. I could tell you exactly what was wrong. But I couldn’t execute the design decisions at the level of detail this theme required, especially with a typography-first approach where every spacing choice is visible and every font size carries meaning. Getting ET Book rendering correctly, building a proper heading hierarchy, finding those subtle nuances that make a design system feel cohesive rather than assembled, that’s where I kept losing ground.
I left it again for a couple of months.
Not in frustration, exactly. More like waiting. The tools were getting better fast, and something was about to change.
The right tools finally showed up at the same time
Two things happened around the same time, and together they changed everything.
The first was the WordPress Agent Skills. If you haven’t come across these, they’re a set of purpose-built AI skills that give your coding assistant deep, authoritative knowledge of WordPress development. Block theming, theme.json, template structure, pattern architecture, all of it baked in. Working with Cursor after installing the agent skills felt like having an enterprise-level WordPress developer sitting next to me. Things I don’t fully understand at the code level, the agent skills understand. That gap between what I could direct and what I could actually build closed significantly.
The second was Shaun Andrews’ post, Teaching AI to Design. I read it and knew immediately I could use it. Shaun’s approach centers on building a proper design system before you write a single line of theme code. Work through the components atomically, typography, color, spacing, link styles, navigation, buttons, and you end up with a unified system you can actually build from. That’s exactly how I manage projects on the Special Projects team. Pattern-first, design-first, spec before implementation.
The missing piece the whole time wasn’t a better prompt. It was a better plan.
I got the agents repo into the Claude Desktop App and started working through the design system for Tufte Blocks. Typography and color came first. Then I gave it examples of the CSS I wanted for link underlines and the mobile navigation overlay. We went through each component, one at a time. What came out the other side was something I genuinely couldn’t have produced working alone: a complete design specification with color palettes for dark and light modes, hover states, heading hierarchy with eyebrow headings, button styles, a responsive navigation system. All of it grounded in Tufte’s aesthetic but modernized as a WordPress block theme.
That’s when I saw the full picture of what I’d been trying to build.
For me, the shift wasn’t really about the tools. It was about recognizing how my existing skills applied. I’ve spent years as a project manager, working with designers and developers, giving feedback on mockups, testing implementations, making sure all the pieces fit together. I don’t design and I don’t develop. I communicate. I translate vision into direction and direction into something real. And once I had a design system to react to and a coding assistant that understood WordPress deeply, that’s exactly what I was doing again, just with AI in the roles I’d normally hand off to other people.
The soft skills I developed in rhetoric and the humanities, knowing how to frame a problem, how to give precise feedback, how to read an audience, those turn out to be exactly the skills you need to work effectively with AI.
How it actually got built
When the first theme scaffold loaded in WordPress Studio, I knew. The fonts were there. The colors were there. The hover states on the links, the kind of custom CSS detail I could never have written on my own, were there. For the first time, I was looking at the theme I’d been carrying around in my head.
That moment made everything worth it.
The build followed a deliberate order. Theme.json first, establishing the design tokens, color presets, typography presets, and layout settings. Templates next, then block patterns, then style variations. The WordPress Agent Skills were essential here. The way a block theme needs to be structured, the hierarchy of group blocks and content blocks at the template level, the correct hooks for making styles render the same in the editor and the browser, these aren’t things I’d have gotten right through trial and error.
We still struggled, and the back and forth was genuine.
The hardest problem was the left-edge spacing. The Tufte aesthetic requires generous space on the left side of the content column, with the right margin open for sidenotes to float into, marginalia2 [note 1] in the tradition of annotated texts, and it’s fundamental to the whole visual language. In a WordPress block theme, getting that spacing to behave correctly across full-width and wide-width blocks, all the way down from the template level to individual pages, required getting the inner blocks “use content width” settings exactly right. As I noted at the time: “I want Claude to conform exactly to my mockups and site plan rather than creating functional but imprecise implementations.” That gap between functional and faithful is real, and in a typography-first theme, it’s everything.
I spent a lot of time going back and forth, taking screenshots and pasting them into the Claude Desktop App, describing what was wrong, getting targeted prompts to take back into Cursor. What I learned is that keeping those diagnostic conversations separate from the main build session matters. Clean context, cleaner output. I started opening a new Cursor chat for each distinct round of edits, and added Fixer and Design QA as custom subagents in Cursor, one for diagnosing what broke, one for checking implementation against spec. Together they kept the build moving without the kind of context bloat that starts producing imprecise answers.
What eventually clicked in the left-edge spacing problem wasn’t a technical breakthrough. It was a communication one. I got better at how I was prompting, and Claude got better at reading what I was actually asking. The elegant fix turned out to be a single line of CSS: .wp-site-blocks .alignfull { margin-left: 0 !important; }. Everything I’d been chasing for hours, resolved cleanly once we were communicating precisely.
That pattern repeated throughout the build. The navigation CSS, the link hover animations, the template layout hierarchy, each one had a moment where the right framing of the problem led directly to the right solution. Block settings before CSS. Frontend and editor parity. No hardcoded values. These became principles I could apply consistently, and the build got faster as they accumulated.
The patterns came together the same way. Simple ones first, then medium complexity, working systematically toward the more advanced layouts. What emerged alongside the code was something I hadn’t fully anticipated: a collection of Tufte-esque patterns that give the theme a personality beyond just typography. An eyebrow heading followed by a section header followed by body content. A newsletter CTA. An about card. A reading list. A syllabus pattern. These aren’t just design elements; they’re the kind of content structures an academic blogger actually reaches for.
One thing we added late that I’m especially proud of is the Tufte hero featured image3 [note 2]. On a single post template, the post title and metadata sit on the left, and the featured image floats to the right, the way a sidenote would. It’s a block style variation, so you just add a featured image to your template and select Tufte hero. That’s it. It captures the sidenote philosophy without requiring any custom blocks or plugin dependencies.
Version 1 shipped with 9 patterns, dark mode by default, and a light style variation.
Nine more patterns are in progress, including a custom timeline pattern. Sidenotes as a block variation for the core Footnote block are coming in a future release, along with a dark/light mode switcher. The foundation is solid. The rest is just building.
Anyone can do this now
I didn’t walk away from this project with a list of revelations. What I found is that the workflow I already use every day, working with a design system, troubleshooting issues, testing, giving feedback, directing the next move, translated directly into building a WordPress theme with AI. The wild part is that because of AI, I was able to do things I’ve never done before. Release a theme. Set up version control on GitHub. Launch a personal site that finally reflects my aesthetic, my writing background, my ethos.
I couldn’t have done any of that a year ago. Not without a team.
For academics, for writers, for bloggers who’ve been sitting on a vision they don’t know how to execute, that’s the point. You don’t have to be a designer. You don’t have to be a developer. If you’re a designer, AI can be your developer. If you’re a developer, AI can be your designer. If you’re neither, AI can help you find both. These skills exist in the tools now, and they’re accessible in ways they simply weren’t before.
Maybe you’re a project manager who knows how to communicate a vision clearly. Maybe you’re a rhetorician who knows how to frame a problem. Maybe you’re just someone who’s been chipping away at something for months, fitting it in around work and life and everything else, not sure if it’ll ever ship.
It can. Don’t wait.
This theme has been in my idea bucket for the better part of a year. Now it’s finally out, and I’m actually really proud of it.
If you’re a fan of Edward Tufte, if you’re an academic, if you just like what you see, go download it on GitHub. After I ship some more features, who knows? Maybe the next thing I do, which I’ve never done before, is submit it to the WordPress.org theme directory.
- Minard’s Carte figurative, 1869. Public Domain via Wikimedia Commons (curid=297925). A print-quality version is available at edwardtufte.com. ↩︎
- Dr. Paul Brooke graded us on our marginalia in Contemporary American Fiction at Iowa State. Actual grades, for notes scrawled in the margins of our books. We read Junot Díaz’s The Brief Wondrous Life of Oscar Wao in that course, a novel where the footnotes are practically a second story running underneath the first, dense and digressive and completely essential. Díaz taught me that the margin isn’t empty space. It’s where the real conversation happens. This is currently a footnote, sitting at the bottom of the page the way Gutenberg handles it. When sidenotes ship as a block variation in a future release of Tufte Blocks, this will migrate to the right margin where it belongs. Consider this its temporary home. Dr. Brooke will understand. ↩︎
- I was implementing this on my own blog when WordPress.com released a Claude connector, which meant I could shift from Cursor straight into Claude Code in the terminal for site management. Same project, different mode. I went from building the theme to activating it, configuring my homepage, and wiring everything up, all without leaving the AI-assisted workflow. Implementation mode. Claude is nailing this one. ↩︎