Dembrandt
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.
Install
$ agentstack add skill-gertsylvest-meta-team-dembrandt ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README — it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-gertsylvest-meta-team-dembrandt) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming — see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps — measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Dembrandt
Extract a website's design tokens (colors, typography, spacing, shadows, borders, components) into W3C DTCG-format .tokens.json using the Dembrandt CLI.
Instructions
The target URL is in $ARGUMENTS. If no URL is provided, ask the user for one before proceeding.
1. Check installation
which dembrandt || echo "not installed"If not installed, use npx dembrandt in place of dembrandt in all commands below (no install required).
2. Run extraction
Default command — outputs W3C DTCG tokens to output//.tokens.json:
dembrandt --dtcg --save-outputAdjust 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 --slow3. Move output to project documentation
Dembrandt writes to output// 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=""
DEST="project-docs/project-documentation/design-tokens/$SITE_SLUG"
mkdir -p "$DEST"
mv output//* "$DEST/"Confirm the files are in place:
ls "$DEST"4. Report to the user
Report the final file paths and summarize what token categories were extracted (colors, typography, spacing, shadows, borders, components, etc.).
5. Next steps (optional)
If the task requires integrating extracted tokens into the project:
- Copy relevant tokens into the project's design token file (CSS variables, YAML, or the project's existing format)
- Update
design-vision.mdto note the reference site and any borrowed tokens
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: gertsylvest
- Source: gertsylvest/meta-team
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.