TP222 min read

using impeccable with claude code on a real redesign

notes from redesigning this site with an ai agent and a design skill that refuses to let it pick the safe option.

ask a model for a “clean personal site” and you get the same thing every time. cream background, serif headline, terracotta accent. it isn’t bad. it is the average of everything the model has seen, and the average is forgettable.

impeccable is a design skill for coding agents that refuses the average. i used it with claude code to redesign this site in one afternoon.

the mechanism is a dice roll. the agent lists seven design directions grounded in your world, ranked by fit. a script picks which one gets built. not the top one. the top one is what every run would ship anyway.

my seven came from my own life: swiss poster grids, topographic maps, temperature recorder charts, a train departure board, a component datasheet, a stamped travel notebook, a printed circuit board. the roll landed on the board. i had ranked it last for hiring managers. it is the one i’m happiest with.

the process, in order:

  1. it interviews you. who visits, what they should walk away with, what the real domain is. that goes into a PRODUCT.md before any css.
  2. it writes a direction contract. thesis, visual world, story, first viewport, signature interaction, honest risk. about 150 words. every later decision gets checked against it.
  3. it builds, screenshots desktop and mobile, and fixes what it sees.
  4. it hands the result to a separate reviewer agent with fresh context. mine came back with eight material fixes and one word: fix.
  5. second round, two more fixes, then ship. a documenter agent writes DESIGN.md from the built css, not from the plan.

the eight fixes were all real. a card grid the thesis said we would refuse. traces running under cards on mobile. a label above a title. tin-coloured pads on a gold board.

what i would tell someone trying it:

  • answer the interview properly. everything downstream depends on it.
  • read the direction contract before the build starts. if the thesis is wrong, fix it there, not in css.
  • let the reviewer be harsh. every one of its findings was correct.
  • keep the reading surface boring. the metaphor lives in the frame.

four hours end to end, most of it looking at screenshots and answering questions. a fraction of what a designer costs, and a written design system i can hand to the next agent, or to myself in a year.

All notes
nomadic.al