# Chrome Web Store — designlang extension

## Name

designlang — Extract design system from this tab

## Summary (max 132 chars)

One click to extract any website's design system: tokens, typography, spacing, components, voice. $0, no account, MIT.

## Description (long)

designlang lives in your Chrome toolbar. Click the icon on any tab; the active URL is sent to designlang.app, which runs a Playwright extraction and opens the result inline as tabs (DESIGN.md, DTCG tokens, Tailwind, CSS variables, Figma variables, and 7 more).

Permissions:
• `activeTab` — read the URL of the current tab. Nothing else.

Use cases:
• Read a competitor's design tokens in 5 seconds
• Pull a Tailwind config off any production site
• Generate a DESIGN.md for AI coding agents (Claude Code, Cursor, Windsurf)
• One-click copy hex / radius / shadow values
• Import a Figma Variable collection from any URL

Open source: https://github.com/Manavarya09/design-extract

## Category

Developer Tools

## Languages

English

## Screenshots (4 — 1280x800)

1. Browser tab on a real site (e.g. Stripe), with the designlang toolbar icon highlighted.
2. The same tab after clicking — designlang.app opens with extraction in progress (token paint streaming).
3. The result viewer with the DESIGN.md tab active, source code visible, copy/download buttons.
4. The result viewer on the Tailwind config tab, showing extracted palette + scale.

## Submission

ZIP the `chrome-extension/` directory, upload at <https://chrome.google.com/webstore/devconsole>.
$5 one-time developer fee.