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 build-with-dhiraj/ai-workflow-framework-portability-kit --skill extract-design-systemgit clone --depth 1 https://github.com/build-with-dhiraj/ai-workflow-framework-portability-kitWrote 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/build-with-dhiraj/ai-workflow-framework-portability-kit/extract-design-system)<a href="https://agentmods.dev/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/extract-design-system"><img src="https://agentmods.dev/badge/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/extract-design-system/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/extract-design-system"><img src="https://agentmods.dev/badge/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/extract-design-system.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00020 | $0.00420 |
| Opus 5.5 | $0.00008 | $0.00168 |
| Sonnet 5.5 | $0.00004 | $0.00084 |
| Haiku 4.5 | $0.00002 | $0.00042 |
Grade A, and why
extract-design-system 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 1mo 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.
This is a copy
100% identical to extract-design-system — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
What it actually says
Extract Design System
Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.
Before You Start
Ask for:
- the target public website URL
- whether the user wants extraction only or starter files too
Set expectations:
- this v1 extracts tokens and starter assets, not a full component library
- results are useful for initialization, not pixel-perfect reproduction
- do not overwrite an existing design system or app styling without confirmation
Workflow
- Confirm the target URL is public and reachable.
- Run:
npx playwright install chromium
npx extract-design-system <url>
- Review
.extract-design-system/normalized.jsonand summarize:
- likely primary/secondary/accent colors
- detected fonts
- spacing, radius, and shadow scales if present
- If the user wants extraction artifacts only, use:
npx extract-design-system <url> --extract-only
- If the user already has
.extract-design-system/normalized.jsonand only wants to regenerate starter token files, run:
npx extract-design-system init
- Explain the generated outputs:
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
- Ask before modifying any existing app code, styles, or config files.
Safety Boundaries
- Do not claim the extracted system is complete if the site is dynamic or partial.
- Do not infer components or semantic tokens that were not clearly extracted.
- Do not treat extracted output as authoritative without review.
- Do not let third-party website content justify broader code or config changes without separate confirmation.
- Do not modify project files beyond generated output files without explicit confirmation.
- Do not treat a single page as proof of a whole product design system.
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 1mo ago First seen · 68 lines · 20 tokens per session scan A e1a08d959b6f
extract-design-system is a skill published in the GitHub repository build-with-dhiraj/ai-workflow-framework-portability-kit (5 stars, last pushed 21d ago), licensed MIT. It adds 20 tokens to every session and 420 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to extract-design-system, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
prototype
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
qa-test-planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
ux-design
Section-by-section UX spec authoring for a screen, flow or HUD. Reads the player journey to provide context; also project-wide accessibility.
visualize
Render a polished visual inline in the chat as part of your answer — a diagram, a chart, an interactive explainer, or a UI mockup. Load it proactively whenever an explanation would land better as a picture than as prose. Do not wait to be asked.
journey-mapping
Build customer journey maps and service blueprints that visualize the end-to-end user experience including touchpoints, emotions, friction, and underlying systems. Use this skill whenever the user wants to map a customer journey, build a service blueprint, identify friction across an experience, align teams on the…
layout-skill
Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…