design-extract is a command-line tool that examines live websites with a headless browser and turns their visual and interaction rules into design-system files. It is used by developers and designers to extract tokens, component details, responsive behavior, accessibility findings, and platform-specific outputs, while the catalogue commands, skills, plugin, and rule expose that process to coding agents.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Manavarya09/design-extract --skill extract-designgit clone --depth 1 https://github.com/Manavarya09/design-extractWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/manavarya09/design-extract/extract-design)<a href="https://agentmods.dev/skills/manavarya09/design-extract/extract-design"><img src="https://agentmods.dev/badge/skills/manavarya09/design-extract/extract-design.svg" alt="Measured on agentmods" height="20"></a>- Socket warn
- Snyk warn
- NVIDIA SkillSpector warn
SkillSpector: 6 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 22 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 30 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 33 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 34 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 74 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium MCP Rug Pull · line 75 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.00807 |
| Opus 5 | $0.00049 | $0.00404 |
| Sonnet 5 | $0.00020 | $0.00161 |
| Haiku 4.5 | $0.00010 | $0.00081 |
Grade A, and why
extract-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 87 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Extract Design Language
Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
Prerequisites
Ensure designlang is available. Install if needed:
npm install -g designlang
Or use npx (no install required):
npx designlang <url>
Process
- Run the extraction on the provided URL:
npx designlang <url> --screenshots
For multi-page crawling: npx designlang <url> --depth 3 --screenshots
For dark mode: npx designlang <url> --dark --screenshots
- Read the generated markdown file to understand the design:
cat design-extract-output/*-design-language.md
-
Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
-
Offer next steps:
- Copy
*-tailwind.config.jsinto their project - Import
*-variables.cssinto their stylesheet - Paste
*-shadcn-theme.cssinto globals.css for shadcn/ui users - Import
*-theme.jsfor React/CSS-in-JS projects - Import
*-figma-variables.jsoninto Figma for designer handoff - Open
*-preview.htmlin a browser for a visual overview - Use the markdown file as context for AI-assisted development
- Copy
Output Files (8)
| File | Purpose |
|---|---|
*-design-language.md |
AI-optimized markdown — the full design system for LLMs |
*-preview.html |
Visual HTML report with swatches, type scale, shadows, a11y |
*-design-tokens.json |
W3C Design Tokens format |
*-tailwind.config.js |
Ready-to-use Tailwind CSS theme |
*-variables.css |
CSS custom properties |
*-figma-variables.json |
Figma Variables import format |
*-theme.js |
React/CSS-in-JS theme object |
*-shadcn-theme.css |
shadcn/ui theme CSS variables |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 87 lines · 98 tokens per session scan A 0523d33cadab
extract-design is a skill published in the GitHub repository Manavarya09/design-extract (4,057 stars, last pushed 8d ago), licensed MIT. It adds 98 tokens to every session and 807 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
design-md-extractor
Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.
design-system
Token architecture and component specs: three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, slide generation. Use for design tokens, systematic design, brand-compliant presentations.
omd-apply
A skill that applies a project's DESIGN.md file as visual and brand guidance for interface work. It covers components, colors, fonts, layout, copy, motion, and visual assets.
system-pitch
Write a design system investment pitch with a business case and ROI framing. Trigger when someone says: pitch the design system, make the case for the system, sell this to leadership, justify the investment, business case for design systems, why should we invest in a design system, or anything about building an…
ai-component-description
Generate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section format (purpose, props, anti-patterns, composition, accessibility, examples), NOT JSON schemas or structured data files. Trigger when someone says: write…
context-engine-builder
Generate a context engine — seven structured blueprint files (UX, UI, content, accessibility, ethical, technical, business intelligence) that encode everything an AI agent needs to work with a design system. This produces YAML infrastructure in .ai/context-engine/, NOT a health score or quality assessment. Trigger…