This is, in some ways, a subtweet of Anshu Chimala's design critic loop. I really wanted an excuse to test this workflow in earnest on something “real”. And it just so happens that the website at the startup I work at was in dire need of a refresh, so I wanted to experiment with what a “hands-off” website redesign would look like. What happens when I give general art direction, but otherwise let the agents go wild?
Tools used: Pen.dev, Claude Code, Brief, Linear, Superset, Jam.
Caveat… this wasn’t cheap
Scope: all in, I ended up with 24 net-new pages, plus another 67 existing pages that we just kinda updated the styles and called it good.
Time commitment: The first three days were design (mostly in Pen.dev) and general project organization. Then once everything was assembled, it took another two days to code. I’d estimate somewhere in the ballpark of 3-6 hours “hands on” and the rest just babysitting various agents as they work.
Model spend: The spend was extremely front-loaded (more on that below). I blew through my Claude Pro Max plan on day two. I eventually bought a second plan to finish the project. So it ended up being $400 all in ($200 plan 2x). Or in API-equivalent, ~$4,000 😅
Why so much? During the design phase, the agents would do several loops with the Fable critic (re: Anshu’s process), with screenshots loaded into the context window, across all the different website pages. Comparatively, coding was significantly cheaper. By an order of magnitude. I think if I were to do this again I would experiment with critics running on cheaper models.
Sorry, Anthropic. Usage via https://github.com/ehermanson/usage-meter
My Process
Before doing any design work, I started with copy. The first artifact was a Google Sheet messaging doc: tagline, positioning, buyers, champions, users, value statements, features, etc. Generally I like to design websites based on personas, so starting with what I wanted to tell each ICP made the most sense, then later I can tailor different parts of the website to each person. Plus this is basically 90% of what I need for prompting the AI “here’s the ICP, here’s what we think are features they like, make a page for them.”
Next was mise en place. Type, color, textures, logo lockups and imagery went onto the Pen.dev canvas by hand. Partly because we already have a brand, so I have a lot of existing assets to use. And also partly because I find agents are really bad at type design.
In Pen.dev, I started with the homepage. Being the big hero page I was the most hands-on and pixel-pushy here. Instead of letting the agent design whatever it wanted I had a more collaborative back and forth where we worked together to create the page I had in my head. Then once I felt that page was in a good place, I spun up an agent to work on the next page, and a new agent for the next page, etc. Letting them do as many pages in parallel with a review loop as possible. This was a much more hands-off process, and I only did a “swoop and poop” as I watched them work, leaving comments occasionally as I’d hover over the artboard watching their work. This is, IMHO, the best use case for Pen.dev over just going straight to code:
- Just like Figma, I didn’t have to worry about constraints, all the pages are just artboards.
- I can see all the artboards on one canvas, and spot agents that are doing something stupid immediately. Something that would be a PITA if I was using localhost and inspecting agents’ work that way.
- The magic of copy/pasting between artboards.
- I can send dozens of agents off to design as many pages as I want and there are no git conflicts. Since it’s all just artboards they don’t step on each other’s toes by overwriting styles, etc.
RE: Anshu Chimala's design critic loop. I have a couple nits, specifically in the critic loop. Firstly, there is a max page length before this seriously breaks down. If you’ve got a copy-light consumer page that’s a glorified landing page this workflow works great. But if you have a longer page, with multiple ICPs and a bunch of copy I find it starts to contradict itself and get distracted in unimportant details. Sometimes to the point that I had to guide it to work on the hero first, then the first section, etc., instead of working on the page holistically. Secondly, your mileage may vary, but often Claude just gave up for me. It took a lot of coaxing to do more than a few rounds, generally ending on “not sure how to get a better score than this, I give up.” Even with /goal and custom rules I could not seem to ever get to a place where it would happily keep iterating until finished. During this whole process I never once had an end-to-end successful run. If I wanted to use this process at scale I would need to find a way to “unblock” the agents when they feel stuck in the critic loop.
A great example of this would be the 404 page. I told it first to research a bunch of other companies, and how they do 404 pages, and judge what it thinks makes a good 404 page. Then let it go wild. Over 12 rounds it tried a bunch of iterations: footnote-styled page, bookshelf, bookshelf V2… then it got stuck, and I had to coax it with “you have essentially the same layout as when you started; think images, texture, other stuff.” Then it kept going for a few more rounds before eventually giving up on an 8/10. And to be clear this page had ZERO constraints beyond using our header and footer. So even with no necessary content on the page it likes to give up instead of looping until it hits a 9/10.
Design to Code
Once I had all the mockups in a place I felt was good, I moved to pre-development prep:
- Module and Wide versions of each page
- Spacing Components
- Type Components
- Shared assets
- etc.
I specifically didn’t use any components or shared type on my first pass. This is a personal preference, but I find if I give an agent a constraint it refuses to break it. So unlike with a human designer, I think it’s better to start with no constraints and do cleanup after. Since a lot of that production work can be done with agents. In a way that seems backwards for a human designer.
Once all the screens and components were organized, it was time to move out of Pen.dev.
I used Brief (our PM agent) to write the PRD and then the Linear tickets for the project:
Create a Linear project with tickets underneath. Each ticket should be self-contained, i.e. I can queue multiple agents with multiple tickets. Any blocker tickets or order should be called out.
85 tickets in five milestones, each naming its blockers, its frame IDs, the files it owns, acceptance criteria, and a shared rules block (If you need to change styles.css, talk to that agent instead of doing it yourself).
The coding itself was done in Superset. I coordinated with one manager agent on Fable owning the queue and asking Brief any PM questions when a worker was blocked. Otherwise it was very hands off. The agent spun up multiple subagent workers taking tickets in dependency order in their own worktrees, each PR carrying page-versus-frame side-by-sides. Starting with Setup, then foundational stylesheets, then each of the individual pages. Pages were built on Opus, with a separate review agent whose job was to compare the work against the frames.
Cleanup
Once all the pages were built and live on localhost I took to Jam. Using their desktop app I went through page by page, pointing out nits, pixels that need pushing, etc. I went through page by page comparing the website to the mockups.
Once recorded, Jam’s MCP fed it to Superset and the agents sorted it into 57 call-outs across 14 PRs, one commit each, with before-and-afters to double-check their work.
All in, from initial designs (a Monday) to ready-to-launch website (Friday).
Takeaway
This is, generally, kind of an insane workflow. Even with all this work, you can still see some AI slop on the live site that I’ll have to go back and fix at some point. And it fully relies on subsidized Anthropic plans; I do not have the budget to blow four grand on tokens.
That being said, I’m also kinda shocked at the same time. For starters, without these tools I would’ve been able to accomplish WAY less. By hand in Figma I would’ve cut the number of pages in half or more, purely because I wouldn’t have had the time to design everything. I’ve worked with external agencies on similar projects in the past, and you’d be extremely lucky if you could pull this off for $10k. I’d guess closer to $80k, generally.
This workflow is janky, it’s held together with duct tape, it needs work. But the fact that a team of one can go from idea, to mockups, to a published site of this size in a week is mind-blowing. What it means to be a designer is not the same thing it meant even a month ago.