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 agentmods add skills/danielvm-git/bigpowers/extract-designnpx skills add danielvm-git/bigpowers --skill extract-designgit clone --depth 1 https://github.com/danielvm-git/bigpowersWhat 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 | $0.00069 | $0.01640 |
| Opus 5 | $0.00034 | $0.00820 |
| Sonnet 5 | $0.00014 | $0.00328 |
| Haiku 4.5 | $0.00007 | $0.00164 |
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 2d 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 — 133 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Extract DESIGN.md from HTML
HARD GATE — Do NOT write DESIGN.md without Puppeteer dual-pass extraction. Tokens from static HTML (Cheerio, regex, string scanning) are invalid — they miss cascade, custom properties, and Tailwind resolution.
HARD GATE — Do NOT claim certainty where evidence is thin. Low-confidence color roles, component classifications, and prose assertions MUST be flagged with
<!-- AGENT NOTE: uncertain — validate during grill-me. Evidence: [what was observed] -->.HARD GATE — Do NOT ship DESIGN.md without running
npx @google/design.md lint. Unvalidated output is unverified output. If lint is unavailable (offline), flag prominently in terminal and in DESIGN.md prose.
Quick Start
# First run — extract from HTML prototype
node extract-design/scripts/extract.js --source ./prototype.html
# From a published URL
node extract-design/scripts/extract.js --source https://my-prototype.example.com
# With a custom name
node extract-design/scripts/extract.js --source ./proto.html --name "My Design System"
# Update — re-extract from new HTML, diff against existing
node extract-design/scripts/extract.js --source ./proto-v2.html
# Lint-only — validate existing DESIGN.md without re-extraction
node extract-design/scripts/extract.js --lint-only
Flow
- Launch Puppeteer — dual-pass (light + dark) with retry + timeout. CI flags:
--headless=new --no-sandbox --disable-gpu --disable-dbus --use-gl=angle --use-angle=swiftshader. - Collect styles —
page.evaluate()collects computed styles from every element. Returns raw JSON to Node.js. Browser = sensor; Node = brain. - Classify tokens — modular pipeline: colors (Material 3 roles), typography (scale detection), spacing (tolerance GCD), rounded (clustering), components (visual signature + pseudo-state variants).
- Generate prose — AI heuristics produce all 8 DESIGN.md sections. Overview and Do's/Don'ts flagged with agent notes.
- Write + validate — serialize to
specs/tech-architecture/DESIGN_LATEST.md, runnpx @google/design.md lint, report to terminal. - Handoff — writes
handoff.next_skill: grill-metospecs/state.yamlwith uncertain decisions context.
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.
- 2d ago First seen · 133 lines · 69 tokens per session scan A 469d6ad55a5e
extract-design is a skill published in the GitHub repository danielvm-git/bigpowers (156 stars, last pushed 25d ago), licensed MIT. It adds 69 tokens to every session and 1,640 once invoked, about $0.0003 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
frontend-design-direction
Use when the work is not just making UI function but making it feel purposeful and polished — choosing a deliberate design direction for a Laravel/Blade/Livewire/Filament interface.
premium-ui-craft
Ships Linear/Stripe/Apple-grade UI craft: type hierarchy, color restraint, microstates, hairlines, designed motion, empty/error/focus. Use when Mario @mentions @Design, when Product Designer runs, or when UI looks generic SaaS, cramped, or over-decorated (dashboards, sidebars, shadcn, Tailwind, CSS tokens).
design-guide
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design…
Shade ShadCN install
Guardrails for running pnpm dlx shadcn@latest add in Shade — never overwrite existing components, fresh branch first, swap raw colours for semantic tokens after integrating. Trigger when the user proposes a shadcn add, or when a fresh ShadCN-shaped file lands in apps/shade/src/components/ui.
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.