Design Workbench
Free for noncommercial use under PolyForm Noncommercial 1.0.0; commercial use needs a licence from Rico. View the source
- Library: stores, searches, filters and edits normalized design references (URL, screenshots, analysis notes) while keeping each one's provenance and evidence limits visible. - Briefs: validates and imports design briefs written in one canonical Markdown shape (see briefs/README.md), produced by the design-brief-grill interview skill in skills/. - Studio: takes an existing local site as an immutable baseline snapshot, holds a grounded conversation with a local coding agent about references and the brief, and plans up to five named design directions. - Compare: generates or registers a static proof for each direction from two design engines (Impeccable and Taste Skill), shows them in equal isolated frames, offers an ALL 5 contact sheet, branches a chosen direction into three refinements, and exposes manifest-declared live tweak controls.
Experimental
The problem
Redesigning a site with AI tools produces a lot of options quickly, and the reasoning behind them gets lost: where a reference came from, what the brief said, which engine made which page, and why one direction won. Design Workbench keeps evidence, brief, generated proofs and decisions in one place so the designer can compare options fairly and keep the trail.
How it works
A React/Vite client talks to a trusted Bun API backed by SQLite. Uploads are stored content-addressed; source sites are copied into workbench-owned snapshots and never modified. Generation jobs run a local coding-agent CLI (Claude Code by default) with explicit arguments and bounded tools, writing each proof into its own directory, which is then registered against its comparison cell. Generated pages are served from a separate, isolated variant origin: frames use sandbox="allow-scripts" without same-origin access, and the variant server sends a CSP that blocks network connections, forms, top navigation and embedding. All artifact paths are canonicalized and rejected if they escape their configured roots.
Features
- Reference library with provenance, evidence status and editable analysis
- Strict canonical brief parser shared by the API and CLIs
- Baseline snapshots of local source sites, with root allowlisting
- Agent sessions with persisted messages and resume
- Five-direction comparison across two engines, single-direction and ALL 5 views
- Refinement branching from a chosen direction
- Live tweak bar driven by each proof's manifest, with reset and copyable decisions
- Operator CLIs: import:taste-board, comparison:new, variant:register
- Three random loopback ports in development (client, API, variants)
How it was built
Design Workbench was built because redesigning a site with AI tools produced options fast and lost the reasoning just as fast: which reference inspired a page, which engine made which proof and why one direction won.
Most of the source tree was committed on 2026-09-11 in one reconciliation commit of 251 files, so the recorded history starts part-way through the build.
The trusted app and the generated pages are served from different origins, and frames are sandboxed, so a generated page can never post a decision.
Artifacts are immutable. Source sites are copied into snapshots, and refinements produce new directories, so the proof a decision was made against stays byte-identical.
An AI agent writes the pages while code validates, normalises and serves them, refusing ambiguous shapes rather than guessing. Rico kept applying a decision to the real site as a separate, explicit step.