Personal · 2026 · Tool · AI

Design Directions

A Claude Code skill that generates four hi-fi HTML prototype variants from a project brief — wrapped in a tabbed canvas with sticky notes and a live Tweaks sidebar. Built because exploration speed matters more than output polish at the directions stage.

Download the skill →

Live output — fault-lines-landing · 4 variants · generated April 2026

On the canvas

Four isolated HTML files don't let you compare. The canvas puts all four directions in one browser tab — side by side, at the same scroll position. The evaluation experience is the design problem, not the generation.

On sticky notes and tweaks

The Tweaks sidebar separates 'wrong direction' from 'wrong accent colour' — those are different decisions with different implications. The sticky notes do the same for tradeoffs: the main canvas commits fully to each direction, the notes say what it costs.

On what's missing

A way to push a shared decision across all four variants at once. Right now, changing the typographic scale means editing each file separately. The canvas should be able to propagate that downstream.

← Back