vault/4. Workflows/building a personal website using pencil.dev
---
title: building a personal website using pencil.dev
status: budding
tags: [AI, coding]
date: 2026-03-11
words: 321
---
2 min read
321 words
budding

in the agentic era, everything gets stripped to its purest form. i've been thinking about agent swarms

markdown won over rich text not because it's prettier - because it's portable. any agent, any tool, any model can read it. the format itself became the competitive moat.

the same thing is happening to design.

pencil does something different. the .pen file is JSON. frames, components, layout, constraints - all of it, human-readable and agent-readable in the same format.

when i first saw pencil i thought it was just another vibe-coding design tool. drag and drop, looks nice, generates react.

but the .pen file changes the mental model entirely.

suddenly design isn't a deliverable that gets handed off to an engineer. it's a specification that both a human and an agent can work with at the same time. the designer writes conditions. the agent executes. the .pen file is the shared language between them.

pencil ships with MCP support. which means you can point an agent at your design file and say: "explore three different layouts for this dashboard." the agent generates .pen variants. you open them. you pick what you like. the agent iterates.

swarm mode takes this further - multiple agents running parallel design explorations simultaneously. you're not waiting for one direction. you're reviewing five at once and converging toward the best one. the most "magical" feeling to me was the cursors on the screen.

the old flow: designer → figma → handoff doc → engineer → code

the new flow: .pen file → agent generates next.js/react → you ship

the handoff disappears because the source of truth is portable enough that the whole process happens in one format.

whatever can be reduced to a portable, agent-readable format, will be.

markdown ate documents. json ate APIs. .pen is coming for design.

how to work in the agentic world

using obsidian + claude code

obsidian + claude code codebook (internet vin's tutorial)