Design Extract
Extract a public website's design system when a task needs evidence about its colors, typography, spacing, radii, shadows, components, or Tailwind tokens.
Install
$ agentstack add skill-sarveshsea-design-skills-design-extract ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-sarveshsea-design-skills-design-extract) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
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.mdwith: 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.jswith 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 `
or` tags
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: sarveshsea
- Source: sarveshsea/design-skills
- License: MIT
- Homepage: https://www.memoire.cv/notes/community/
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.