Design Extract plugin for Grok Build

Skills (15)

• extract-design — Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also
• battle — Head-to-head graded battle card between two sites — eight dimensions, bar-by-bar, verdict line.
• brand — Generate a full editorial brand-guidelines book for any URL. 14 chapters covering brand essence/archetype, colour, typography, spacing, shape, iconography, motion, components, voice, accessibility, tokens, and how-to-use guidance. Print-rea
• dna — Place a design in the measured design space — nearest systems, per-axis percentiles, outliers
• extract — Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
• fidelity — Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a letter grade, a ranked correction plan, and a shareable card.
• gallery — Build a static, shareable gallery from your fidelity reports — an index of score cards plus a permalink page (with an OG card) per clone.
• grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm), strengths + fixes, plus an SVG badge.
• pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts) into one polished design-system directory ready to zip and ship.
• pair — Fuse two extracted designs into a single hybrid identity. Pick which axis (colour, typography, spacing, shape, motion, voice, components) comes from which site. Defaults to "visual A × voice B" — same colours/spacing as the first URL, type/
• remix — Restyle a site in another design vocabulary — brutalist, swiss, art-deco, cyberpunk, soft-ui, or editorial. Preserves page shape, swaps the visual vocabulary.
• site — Crawl a whole site and synthesize ONE canonical design system across all pages — unified tokens, coverage map, consistency grade.
• studio — Launch the local design Studio — a live token editor over the latest extraction. Edit, preview a wall of real components, toggle dark mode, inspect motion, and export.
• theme-swap — Recolour an extracted site's design around a new brand primary. OKLCH hue rotation preserves perceptual lightness — neutrals, type, spacing, and motion stay untouched. Side-by-side HTML preview + recoloured tokens (DTCG, Tailwind, shadcn, F
• verify — Fidelity check — rebuild a page from the extracted tokens, pixel-diff it against the live site, and score how faithfully the tokens capture the design.