Agent skill · design visual · yonatangross
design-context-extract
Extracts design DNA from screenshots, URLs or recordings: colors, type, spacing, components and motion as tokens or Tailwind config. Use when asked to extract or audit a design or match a visual identity.
Why this skill is useful
Adds specific extraction patterns and output formats for design tokens that the AI wouldn't reliably generate on its own.
What it needs
Requires stitch installed locally. About 7k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Design Context Extract Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens. Pipeline Step 0: Detect Input and Context Step 1: Capture Source For screenshots: Read the image directly (Claude is multimodal). Pasted/attached images are compressed to the same token budget as Read tool images (CC 2.1.97), so both workflows are equally efficient. Resolution budget (Opus 5.5 / CC 2.1.111+): Max input is 2,576 px on the long edge (~3.75 MP) — roughly 3× the Opus 4.6 ceiling. Dense dashboards, dark-mode UIs, and technical diagrams benefit the most from the higher ceiling; extraction reads tiny labels, spacing ticks, and component boundaries that were previously blurred. Below 1,024 px, don't upscale — the source bitmap is the ceiling. Resize only when input exceeds 2,576 px. For URLs: For current project: For screen recordings (video): the only input mode that carries motion — easing, scroll choreography, transitions. Requires ffmpeg/ffprobe (skip with an install hint if missing). Then Read the extracted frames (multimodal) and analyze in layers: Layer What to capture ------- ----------------- Layout viewport framing, grids, sticky zones, section order Motion reveal timing, easing curves, parallax, pinned/scrubbed sections, hover states, loops Visual same token extraction as screenshots (colors, type, spacing) Rebuild name the mechanism: CSS transition, IntersectionObserver, GSAP ScrollTrigger, video.currentTime scrub, WebGL Video inputs additionally emit a motion-spec.md alongside the token output: per-interaction durations (ms), easing, trigger (scroll/hover/load), and a reduced-motion fallback for each entry. Never describe motion as "smooth" or "nice" — convert taste into mechanism + numbers. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/design-context-extract