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 designlanggit 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/designlang)<a href="https://agentmods.dev/skills/manavarya09/design-extract/designlang"><img src="https://agentmods.dev/badge/skills/manavarya09/design-extract/designlang.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00030 | $0.00211 |
| Opus 5 | $0.00015 | $0.00105 |
| Sonnet 5 | $0.00006 | $0.00042 |
| Haiku 4.5 | $0.00003 | $0.00021 |
Grade A, and why
designlang-tokens 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.
What it actually says
designlang tokens
Source: https://cal.com Extracted by designlang v7.0.0 on 2026-06-25T08:26:30.283Z
Semantic tokens (use these)
- color.action.primary: #0000ee
- color.surface.default: #f4f4f4
- color.text.body: #000000
- radius.control: 2px
- typography.body.fontFamily: Inter
Regions
- content
- testimonials
- content
How to use
- Prefer
semantic.*tokens overprimitive.*. - Never invent new tokens or hex values; reuse the ones above.
- When a value is missing, pick the closest existing semantic token and flag the gap.
- Reference tokens by their dotted path (e.g.
semantic.color.action.primary).
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 · 27 lines · 30 tokens per session scan A f9e9ffdd424c
designlang-tokens is a skill published in the GitHub repository Manavarya09/design-extract (4,053 stars, last pushed 7d ago), licensed MIT. It adds 30 tokens to every session and 211 once invoked, about $0.0002 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-to-code-check
Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…
brandmd
Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.
theme-builder
Build a light/dark theme from scratch or improve an existing one, with a complete surface, text, and interactive color system. Use when the user asks to build or create a theme, use the theme builder, or set up a light and dark theme.
color-audit
Color-only audit that extracts, evaluates, and recommends improvements for the project's color system. Use when the user asks to audit colors, run a color review or color audit, fix their colors, or work on the color palette or color system.
layout-audit
Layout and spacing audit covering grid, spacing consistency, density, and responsive behavior. Use when the user asks to audit the layout, run a layout audit or grid audit, review spacing, or fix their spacing.
type-audit
Typography-only audit covering font selection, type scale, readability, hierarchy, and performance. Use when the user asks to audit typography, run a typography or type audit, review fonts, fix their fonts, or work on the type system.