# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-gertsylvest-meta-team-dembrandt`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [gertsylvest](https://agentstack.voostack.com/s/gertsylvest)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [gertsylvest](https://github.com/gertsylvest)
- **Source:** https://github.com/gertsylvest/meta-team/tree/main/library/skills/dembrandt

## Install

```sh
agentstack add skill-gertsylvest-meta-team-dembrandt
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Dembrandt

Extract a website's design tokens (colors, typography, spacing, shadows, borders, components) into W3C DTCG-format `.tokens.json` using the [Dembrandt CLI](https://github.com/dembrandt/dembrandt).

## Instructions

The target URL is in `$ARGUMENTS`. If no URL is provided, ask the user for one before proceeding.

### 1. Check installation

```bash
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`:

```bash
dembrandt  --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:
```bash
dembrandt stripe.com --dtcg --save-output --browser=firefox --slow
```

### 3. 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:

```bash
SITE_SLUG=""
DEST="project-docs/project-documentation/design-tokens/$SITE_SLUG"
mkdir -p "$DEST"
mv output//* "$DEST/"
```

Confirm the files are in place:
```bash
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.md` to 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](https://github.com/gertsylvest)
- **Source:** [gertsylvest/meta-team](https://github.com/gertsylvest/meta-team)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-gertsylvest-meta-team-dembrandt
- Seller: https://agentstack.voostack.com/s/gertsylvest
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.