🎨 designscope — Design System Extraction & Design Documentation

Point at any visual source — a screenshot, a live URL, a Figma link — and extract its design system into structured artifacts: a design.md brief with a responsive CSS Grid/Flexbox layout tree another AI (or human) can build from, a W3C DTCG design-tokens.json for design tooling, and an optional WCAG accessibility report. Element mode zooms into one component and outputs either a rebuild spec or a token-grounded image prompt. Outputs serve directly as briefs for AI builders and as client brand documentation.

When to Use

Triggers: