Design extract

Skill sarveshsea/design-skills/skills/design-extract

Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.

Install

npx -y skills add sarveshsea/design-skills --skill design-extract

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Extract a public website's design system when a task needs evidence about its colors, typography, spacing, radii, shadows, components, or Tailwind tokens.

SKILL.md

2.0 KB, as published. Nobody here has run it

Design Extract

Extract any website's design system from its public URL. No login, no API key, no Figma.

When to use

User pastes a URL and wants to understand its visual design
User wants to replicate a site's look and feel
User asks "what design system does X use?"
User wants a DESIGN.md for AI context
User wants to match an existing site's tokens in their own project

How it works

Fetch the URL's HTML and all linked stylesheets
Parse CSS for: custom properties, colors, fonts, spacing, radii, shadows
Send extracted raw data to Claude for structured synthesis
Output a DESIGN.md with: color system, typography, spacing, borders, component patterns, Tailwind config sketch

Usage

# CLI
memi design-doc https://linear.app
memi design-doc https://stripe.com --spec    # also write a DesignSpec JSON
memi extract https://vercel.com              # alias

# MCP tool
design_doc({ url: "https://linear.app" })

Output format

The DESIGN.md contains:

Color System -- palette with semantic names (primary, bg, fg, muted, accent)
Typography -- font stacks, size scale, weight usage
Spacing -- scale (4px/8px grid or other rhythm)
Borders & Surfaces -- radii, shadows, border styles
Component Patterns -- inferred from DOM (buttons, cards, inputs, nav)
Tailwind Config Sketch -- partial tailwind.config.js with extend values

Success criteria

Extraction completes in under 30 seconds for any public URL
Output contains at least 10 distinct design tokens
Tailwind config sketch is valid JavaScript
DESIGN.md is immediately usable as AI prompt context

Limitations

Does not work on pure client-side rendered apps (CSR) that inject all styles via JS at runtime
Works on: static sites, SSR (Next.js, Remix, SvelteKit), and any site that serves CSS in <link> or <style> tags