extract-design SKILL.md skillA
extract-design from tekkiiiii/the-agency is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add tekkiiiii/the-agency/extract-design@git:20260508.9e8707bPins git:20260508.9e8707b in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- tekkiiiii/the-agency
- Path
skills/extract-design/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260508.9e8707b, committed May 8, 2026
- Size
- 3,144 bytes
- Repository stars
- 6
- License
- none declared
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', or '/extract-design'.
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 tekkiiiii/the-agency/extract-design@sha256:0523d33cadab98adThe line at the top of this page pins the label git:20260508.9e8707b, 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_vsonm2sd33mzafic)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on May 8, 2026.
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 (3144 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
tekkiiiii/the-agency · 6 stars · license none declared · pushed 2026-10-20 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_vsonm2sd33mzafic GET https://markdownregistry.com/api/v1/resolve?ref=tekkiiiii/the-agency/extract-design GET https://markdownregistry.com/api/v1/blob/0523d33cadab98ad082d52b68effe0e35103d5453e98b301891f52cae63b5640
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 tekkiiiii/the-agency
Every file in tekkiiiii/the-agency