extract-design SKILL.md skillA
extract-design from manavarya09/design-extract is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add manavarya09/design-extract/extract-design@git:20261019.319f8e3Pins git:20261019.319f8e3 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- manavarya09/design-extract
- Path
skills/extract-design/SKILL.md- Versions recorded
- 3
- Latest version
- git:20261019.319f8e3, committed Oct 19, 2026
- First version recorded
- Apr 15, 2026
- Size
- 3,344 bytes
- Repository stars
- 4,477
- License
- MIT
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 runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', 'turn this URL into design tokens', 'make a Tailwind theme from this site', or…
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 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: ```bash npm install -g designlang ``` Or use npx (no install required): ```bash npx designlang <url> ``` ## Process 1. **Run the extraction** on the provided URL: ```bash npx designlang <url> --screenshots ``` For multi-page crawling: `npx designlang <url> --depth 3 --screenshots` For dark mode: `npx designlang <url> --dark --screenshots` 2. **Read the generated markdown file** to understand the design: ```bash cat design-extract-output/*-design-language.md ``` 3. **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.) 4. **Offer next steps:** - Copy `*-tailwind.config.js` into their project - Import `*-variables.css` into their stylesheet …
Read the whole file at its exact version.
How to install
mdr add manavarya09/design-extract/extract-design@sha256:b15b264a0ad22062The line at the top of this page pins the label git:20261019.319f8e3, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_5mftria3uvwfy32j)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 3 versions of this file, between Apr 15, 2026 and Oct 19, 2026, about one every 94 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261019.319f8e3 latest | 2026-10-19 | 319f8e3 | 3,344 B | A | view · diff |
| git:20260415.f6566b1 | 2026-04-15 | f6566b1 | 3,144 B | A | view · diff |
| git:20260415.ee882b0 | 2026-04-15 | ee882b0 | 2,028 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (3344 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
manavarya09/design-extract · 4,477 stars · license MIT · pushed 2026-11-02 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_5mftria3uvwfy32j GET https://markdownregistry.com/api/v1/resolve?ref=manavarya09/design-extract/extract-design GET https://markdownregistry.com/api/v1/blob/b15b264a0ad220623b29f83e457a4251882df3d3c1314e6bd6a10ffdcf13a070
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from manavarya09/design-extract
Every file in manavarya09/design-extract