メニュー
Extract design tokens from any live website using the Dembrandt CLI, and save them in W3C Design Tokens (DTCG) format. Use when you need to inspect or borrow a site's design system.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Scan Claude Code JSONL session transcript files for behavioral patterns — loops, errors, expensive turns, trial-and-error signatures. Returns structured findings for the improvement-analyst agent.
Run a Criterion benchmark on a Rust DSP crate and assert against a checked-in baseline. Establishes whether the implementation fits the real-time budget and catches performance regressions — the Rust equivalent of `perf stat` against the audio buffer time.
Regenerate a C header from a Rust crate via cbindgen and diff it against the committed header. Fails if the generated output differs — catches "Rust signature changed but the C header was not regenerated" before it reaches the C side.
Run `cargo +nightly miri test` against a Rust DSP crate to detect undefined behaviour the compiler missed — out-of-bounds access, use-after-free, uninitialised memory reads, invalid pointer arithmetic. Miri is the cheapest sound UB detector for Rust; this skill wraps it with the right isolation flags for audio DSP crates.
Audit a Rust DSP crate for real-time-safety violations — verifies `#![no_std]`, no `alloc` dependency, `panic = "abort"`, runs targeted clippy lints, greps for banned constructs in the hot path, and scans the compiled LLVM-IR for allocator symbols. Designed to be run on any Rust DSP crate before merge.
Opinionated wasm-pack wrapper that builds a Rust crate to wasm32-unknown-unknown with project-pinned flags (SIMD, LTO, panic=abort), applies a wasm-opt post-pass, and auto-invokes wasm-module-inspect on the result. Single entry point so the agent never reaches for raw wasm-pack and forgets a flag.
| name | dembrandt |
| description | Extract design tokens from any live website using the Dembrandt CLI, and save them in W3C Design Tokens (DTCG) format. Use when you need to inspect or borrow a site's design system. |
| allowed-tools | Bash, Read |
| argument-hint | [url] |
Extract a website's design tokens (colors, typography, spacing, shadows, borders, components) into W3C DTCG-format .tokens.json using the Dembrandt CLI.
The target URL is in $ARGUMENTS. If no URL is provided, ask the user for one before proceeding.
which dembrandt || echo "not installed"
If not installed, use npx dembrandt in place of dembrandt in all commands below (no install required).
Default command — outputs W3C DTCG tokens to output/<domain>/<timestamp>.tokens.json:
dembrandt <url> --dtcg --save-output
Adjust flags based on the site:
| Situation | Flag to add |
|---|---|
| JS-heavy SPA or slow site | --slow |
| Cloudflare / bot-detection issues | --browser=firefox (install first: npx playwright install firefox) |
| Need dark mode tokens | --dark-mode |
| Mobile viewport (390×844) | --mobile |
Example for a resilient extraction:
dembrandt stripe.com --dtcg --save-output --browser=firefox --slow
Dembrandt writes to output/<domain>/ by default. After extraction, move the files to the project's canonical design token location.
Derive a kebab-case short name from the site's domain (e.g. stripe.com → stripe, fonts.google.com → google-fonts) and run:
SITE_SLUG="<web_site_shortname_kebab>"
DEST="project-docs/project-documentation/design-tokens/$SITE_SLUG"
mkdir -p "$DEST"
mv output/<domain>/* "$DEST/"
Confirm the files are in place:
ls "$DEST"
Report the final file paths and summarize what token categories were extracted (colors, typography, spacing, shadows, borders, components, etc.).
If the task requires integrating extracted tokens into the project:
design-vision.md to note the reference site and any borrowed tokens