# Design Extract

> Extract, analyze, compare, grade, clone, or apply a website design language using Manavarya09/design-extract's designlang CLI. Use when the user asks to extract a design system, inspect colors/fonts/spacing/motion/components from a URL or localhost page, generate design tokens, Tailwind/shadcn/Figma variables, compare two sites, grade a design, run visual diffs, or use "design-extract" / "designlang" on a web page.

- Skill: `maybackcompany/design-extract` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add maybackcompany/design-extract`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maybackcompany/design-extract/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: MaybackCompany (https://skillmd.com/u/maybackcompany)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/maybackcompany/design-extract

---


# Design Extract

Use `designlang` from Manavarya09/design-extract to read live DOM/CSS and produce design-language artifacts for implementation work.

Source: `https://github.com/Manavarya09/design-extract`

## Quick Workflow

1. Confirm the target is reachable. For localhost, verify the dev server URL first.
2. Choose an output directory that will not clutter the user's repo unless they ask to keep files:

```bash
mkdir -p /tmp/design-extract-output
```

3. Run the extraction:

```bash
npx -y designlang@latest <url> --full --out /tmp/design-extract-output
```

Use focused flags when the request is narrow:

```bash
npx -y designlang@latest <url> --dark --screenshots --out /tmp/design-extract-output
npx -y designlang@latest <url> --selector "<css-selector>" --screenshots --out /tmp/design-extract-output
npx -y designlang@latest <url> --depth 3 --screenshots --out /tmp/design-extract-output
```

4. Read the generated `*-design-language.md` first, then inspect tokens or reports as needed:

```bash
ls /tmp/design-extract-output
sed -n '1,220p' /tmp/design-extract-output/*-design-language.md
```

5. Summarize only the useful findings: palette, type, spacing, layout patterns, component anatomy, dark-mode behavior, contrast problems, and implementation notes.

## Use In Frontend Work

For a user-provided reference site or screenshot-adjacent URL, extract the reference site and translate the findings into the current project’s existing design system. Do not blindly copy generated CSS into the repo.

For the user's own app, prefer extraction as audit evidence:

```bash
npx -y designlang@latest http://localhost:3004/en --full --dark --out /tmp/design-extract-output
```

Then use the output to check whether the implementation matches the intended visual language.

## Common Tasks

- Design tokens: read `*-design-tokens.json`, `*-variables.css`, `*-tailwind.config.js`, and `*-shadcn-theme.css`.
- Figma handoff: read `*-figma-variables.json`.
- Quality report: run `npx -y designlang@latest grade <url> --format all --out /tmp/design-extract-output`.
- Compare sites: run `npx -y designlang@latest diff <url-a> <url-b> --out /tmp/design-extract-output`.
- Visual diff: run `npx -y designlang@latest visual-diff <before-url> <after-url> --out /tmp/design-extract-output`.
- Clone starter: run `npx -y designlang@latest clone <url> --out /tmp/design-extract-output` only when the user explicitly asks for a generated starter.

## Reference

Read `references/designlang-cli.md` when you need more flags or command variants.