{"slug": "an-agent-redesigned-the-blog-you-re-reading", "title": "An Agent Redesigned the Blog You're Reading", "summary": "Munder Difflin's blog was redesigned end to end by a single agent after Reddit criticized the old design as unreadable and AI-sloppy, resulting in a new editorial theme and 119 hand-drawn hero illustrations rendered as code for $0 in image API costs. The agent built two themes, with the editorial-magazine style winning, and created a three-layer SVG system—a parts library, 16 composition archetypes, and a spec file—to generate all illustrations via browser screenshots. The founder provided one-sentence design notes, and the entire process cost zero dollars in image APIs, with fixes made by editing functions rather than re-prompting diffusion models.", "body_md": "# An Agent Redesigned the Blog You're Reading\n\nReddit said our blog was unreadable and AI-sloppy. So one agent redesigned it end to end: a new editorial theme, and 119 hand-drawn hero illustrations rendered as code for exactly $0 in image APIs. This is the making-of.\n\nThe redesign you're looking at —\nthe fonts, the yellow, the little hand-drawn scenes on every post — was shipped end to end by\none agent after Reddit told us the old blog read like AI slop. The part worth stealing:\n**all 119 hero illustrations are drawn as code** — an SVG parts library, 16\ncomposition archetypes, one spec file — and rendered by screenshotting a browser.\nImage-API bill: $0.\n\nDuring [launch week](/blog/what-reddit-told-us-about-munder-difflin/), among the feedback about\nthe product, there was a quieter thread of feedback about this blog. It was not kind. The old\ndesign was the marketing site’s mono-font brutalism stretched over long-form text, there wasn’t\na single image on any post, and more than one person used the phrase “AI-written.”\n\nFair. So we handed the problem to an agent, with a brief instead of a mockup: *make it readable,\nmake it human, give every post images, and don’t you dare use red.*\n\n## Two themes, one survivor [#](#two-themes-one-survivor)\n\nThe agent’s first deliverable was two complete, buildable themes — not moodboards, actual switchable CSS behind an environment flag, previewable side by side. One warm and bookish, one editorial-magazine. The magazine won: serif headlines with real weight, a reading column set in a proper text face, the app’s own cream-paper palette, and the website’s yellow as the single accent — always as a highlighter fill, never as colored text.\n\nThe founder’s role in this phase was one sentence at a time: *use the app’s colors. The accent\nis yellow, not red. No red anywhere.* Each note came back applied across every template within\nminutes. That loop — human taste, agent hands — is the whole\n[reason this product exists](/blog/why-we-built-munder-difflin/).\n\n## The image problem, and the $0 answer [#](#the-image-problem-and-the-0-answer)\n\nThen the hard part: 119 posts needed images, and AI image generation was the obvious move — and the wrong one. Quotes came out between $5 and $20 in API costs, every regeneration would cost again, and the results would have exactly the generic sheen the redesign was trying to escape.\n\nThe agent proposed something better: **draw them as code.**\n\nThe system has three layers, all plain JavaScript and SVG:\n\n**A parts library**— one small character (an adaptation of the MIT-licensed*Xiaohei*, recolored to our brand yellow), desks, terminals, envelopes, a kanban wall, clocks, shields, coffee. A hand-drawn wobble comes from an SVG turbulence filter, seeded per post so no two images wobble identically.**16 composition archetypes**— “agents talking,” “night shift,” “versus,” “the routing desk” — each a function that arranges parts into a scene.** One spec file**— a line per post choosing an archetype and the handwritten annotations: the blue mechanism labels and the orange punchline you see in the corners.\n\nA headless browser opens each scene at 1600×900 and screenshots it into the post’s media\nfolder. All 119 rendered in three batches. Total image-API spend: **zero**. And when one scene\nlooked wrong — a sleeping character whose eyes were open, which is nightmare material — the fix\nwas editing a function, not re-prompting a diffusion model and praying.\n\n## One manifest to rule the media [#](#one-manifest-to-rule-the-media)\n\nUnder the hood, a single `media.json`\n\ndrives every image, inline figure, and video embed on the\nblog — per-post entries with a file path, alt text, and a status flag. Templates render a\ndesigned placeholder until an entry flips to `ready`\n\n, so the site never shows a broken image,\nand adding [this very image pipeline](/blog/deploy-a-blog-writer-agent/) to a new post is one\nJSON entry. YouTube embeds got the same treatment: click-to-load, privacy-friendly, with a\nplaceholder state for videos that don’t exist yet.\n\n## The making-of, honestly [#](#the-making-of-honestly)\n\nThe parts nobody puts in the case study: the agent got the category badge black-on-black on the\nfirst pass and fixed it when told. It got told “I do not want any red things” *after* it had\nalready picked a coral topic color, and remapped the entire palette. The founder’s browser\ncached the old build twice, producing two rounds of “you haven’t changed anything” that were\nresolved by an agent-written no-cache dev server. Real work looks like this.\n\nBut the scoreboard at the end: a full editorial redesign, 119 bespoke illustrations, a media\npipeline, and CI deployment to production — one agent, one extended session, zero image-API\ndollars. The blog you’re reading is the artifact. If it still reads like AI slop, at least now\nit’s *hand-drawn* AI slop.\n\n## FAQ\n\nWho designed the new Munder Difflin blog?\n\nA single agent, working in Claude Code, over one long session with founder feedback in the loop. It proposed two complete themes, and after one was chosen, it restyled the whole site, drew a hero illustration for all 119 posts, and shipped the result through CI to production.\n\nHow were 119 hero images made for $0?\n\nThey're not AI-generated bitmaps — they're drawn as code. A small SVG parts library (a character, desks, terminals, envelopes, a kanban wall) plus 16 composition archetypes and a per-post spec file produce each scene; a headless browser screenshots them at 1600×900. Editing an image means editing a line of JavaScript, and regenerating costs nothing.\n\nWhat's the character in the illustrations?\n\nAn adaptation of Xiaohei, an open-source (MIT) illustration character we found through a starred repo — recolored to our brand yellow and put to work at tiny desks and terminals across every post. Credit to the original ian-xiaohei-illustrations project.", "url": "https://wpnews.pro/news/an-agent-redesigned-the-blog-you-re-reading", "canonical_source": "https://munderdiffl.in/blog/an-agent-redesigned-this-blog/", "published_at": "2026-08-19 00:00:00+00:00", "updated_at": "2026-08-19 07:11:13.400252+00:00", "lang": "en", "topics": ["generative-ai", "ai-agents", "ai-tools"], "entities": ["Munder Difflin", "Reddit", "Xiaohei"], "alternates": {"html": "https://wpnews.pro/news/an-agent-redesigned-the-blog-you-re-reading", "markdown": "https://wpnews.pro/news/an-agent-redesigned-the-blog-you-re-reading.md", "text": "https://wpnews.pro/news/an-agent-redesigned-the-blog-you-re-reading.txt", "jsonld": "https://wpnews.pro/news/an-agent-redesigned-the-blog-you-re-reading.jsonld"}}