I saw Pencil.dev floating around on Twitter and tried it on this site.
At a glance, it’s a design mockup tool. The part I cared about is that it plugs into MCP both ways: it can drive Claude Code and Codex, and you can also talk to the MCP servers outside the Pencil UI.
Setup
On macOS, the app detected whether the Codex and Claude CLIs were installed and automatically set up MCP servers.
Inside Pencil, you can start new chats and choose Claude Code or Codex. Outside Pencil, you can still talk to MCP servers directly from your own tooling, so the workflow is not trapped in one UI.
Why This Site Was a Good Target
Pencil looks like a greenfield mockup tool, but I used it on an existing site.
I already liked my blog’s layout, but a handful of things bugged me (mostly color, plus a few UI details). It was a good candidate: small changes, obvious impact.
What I Did
I started in Claude Code (Opus 4.6) inside the repo where the Hugo theme lives.
First I tried: “replicate the current website on a Pencil canvas from the Hugo templates.” That was a weak input—partials + CSS made it hard to reconstruct the final output.
So I built the site with Hugo and instead fed it the generated HTML/CSS/assets. That worked much better, and in ~10 minutes I had a mockup close enough to iterate on.
Once I started chasing pixel-level discrepancies, tokens disappeared fast and Claude got close to the session rate limit. I switched to Codex, gave it context, and had it audit the mock. It fixed a bunch quickly. From there I bounced between both until the mockup was close to the real site.
The token burn is real, but it also felt like having a designer coworker next to me: point at something, ask for options, pick one, move on.
What Changed
As I worked, I saved the .pen file in my Git repo and committed changes. I did not expect to care about this, but the format is open and non-binary, so Git diffs are readable.
Once the direction was set, I used Codex to compare the current Hugo templates against the new .pen design through MCP and migrated in phases. Most bugs were on me: I still had some hardcoded CSS values instead of variables, which made theme-level changes inconsistent.
After cleaning that up, I landed on the new design and pushed it.
These are examples, not an exhaustive changelog.
- I changed the header brand treatment. I had a cube with “LC” that looked off, and I switched to a cleaner “Luis Colunga” presentation.
- That header change also shifted the visual scale of the top bar, so the title appears larger than in the old version.
- I reworked the color system because the old palette looked muddy across light and dark modes.
- I removed “Read more” from home page cards after noticing it was not helping and created visual noise.
- I fixed layout inconsistencies in footer-related sections, especially around About and Posts.
Before and After
Left: before redesign. Right: after redesign. All comparison screenshots are shown in dark mode.
Home (Full Page)
Home cards and CTA simplification.
Posts header and list spacing.
Not sponsored. No affiliate link.