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:

mkdir -p /tmp/design-extract-output

3. Run the extraction:

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

Use focused flags when the request is narrow:

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:

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:

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.