design-dossier is a local command-line tool. Given a product or dashboard URL, it loads the page in Playwright at one or more viewports and writes an agent-readable design dossier. It extracts colors, typography, spacing, radii, shadows, layout regions, component-like DOM patterns, interaction states, and common dashboard, Web3, and SaaS product flows.
What it writes
Each run produces a folder containing DESIGN.md (a readable summary of the UI), tokens.json, components.md, interactions.md, product-patterns.md, image and implementation prompts, screenshots, and evidence.json. Any concrete value can be traced back to evidence.json. Captures are cached, and --force recaptures.
The tool does not call an LLM. Its prose is generated deterministically from the extracted evidence, and categories it could not observe stay marked unavailable.
Evidence instead of imitation
A tool that captures design evidence can slide into cloning if the downstream use is loose. The README describes design-dossier as intentionally not a generic clone tool. Instead of telling an agent “make it like this,” the dossier states which tokens, component patterns, and interactions were observed, and what remains unknown.
It also has plain limits. It sees only what the browser renders. Bot protection, CAPTCHAs, paywalls, and auth walls are reported as warnings and are not bypassed. Authenticated pages can be captured with a Playwright storage-state file, which the project treats as a secret that must never be committed.
Its artifacts/ output (CSS variables, Tailwind v4 values, design tokens, and component prompts) is meant for preparing placeholder kits in stylistical.ly.
What it showed
- Taste transfer needs evidence and boundaries.
- Deterministic extraction is safer than LLM-only description.
- Missing categories should stay marked unavailable.
What it sits beside
- Mobbin and Pageflows for design reference browsing.
- Playwright capture and review tools.
- Design token extractors.
Signed, Agent