designlang is an open-source CLI that crawls any live website with a headless browser and emits its complete design system: W3C DTCG tokens (primitive, semantic, composite), Tailwind config, CSS variables, Figma variables, shadcn/ui theme, plus native emitters for iOS SwiftUI, Android Jetpack Compose, Flutter and WordPress, and a print-ready brand-book PDF. It runs locally and ships an MCP server so Claude Code, Cursor and Windsurf can read live extractions as native tools.

How do I install designlang?

Run `npx designlang ` — no install, no account, no API key. The package is on npm as `designlang` and requires Node.js 20 or later. The full source is on GitHub at github.com/Manavarya09/design-extract under the MIT licence.

How is designlang different from Style Dictionary, Tokens Studio, Subframe, v0 and Builder.io?

Those tools take a Figma file or hand-authored tokens as input. designlang takes a live URL. It reads what your browser actually computes — colours, spacing, typography, motion, shadows, anatomy — directly from the rendered DOM. It outputs strict W3C DTCG with proper primitive / semantic / composite layering, runs a CSS health audit, performs WCAG remediation, and ships multi-platform emitters from one run.

Does designlang work with Claude Code, Cursor and Windsurf?

Yes. designlang ships a stdio MCP server (`designlang mcp`) that exposes extracted tokens, semantic regions, component clusters, CSS health and accessibility remediation as MCP resources and tools. The CLI also auto-generates `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, `CLAUDE.md` fragments and `AGENTS.md` so any AI coding agent can read the system natively.

Is designlang free and open source?

Yes. designlang is MIT-licensed and fully open source on GitHub. The CLI is free with no signup. The hosted demo at designlang.app is rate-limited to two extractions per IP per day; the CLI is unlimited.

What output formats does designlang support?

W3C DTCG JSON, Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI extensions, Android Compose Theme.kt + colors.xml, Flutter ThemeData, WordPress block theme (theme.json + style.css), agent rules (AGENTS.md, .cursorrules, Claude skills, MCP), motion tokens, typed component anatomy stubs, a brand voice/CTA pack, and a print-ready brand-book PDF with chapter bookmarks and an embedded tokens attachment.

Can I generate a brand-book PDF for any URL?

Yes. `npx designlang brand --pdf` produces a 13-chapter brand-guidelines PDF with chapter page breaks, a running footer, an extracted-primary cover band, and (with `--attach-tokens`) the DTCG tokens JSON embedded as a PDF file attachment.

Does designlang extract motion, hover states and interaction design?

Yes. With the `--interactions` flag designlang captures hover, focus and active states for buttons, links and inputs, and reads all CSS transitions, easing functions and `@keyframes` animations into a motion-tokens DTCG file.

← Gallery

extracted · 37 artefacts

openai.com

Live extraction of https://openai.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Download brand book PDF Open in browser ↗Agent prompt All 37 files

2colors

Aaf0

vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 37 artefacts for openai.com and renders 12+ sections below.

See full comparison ↗

1,932 charsbrand book ↗

---
site: Just a moment...
url: "https://openai.com"
generated_at: "2026-06-12T12:49:24.926Z"
generator: "designlang@12.16.0"
intent: landing
material: flat
tokens:
  colors:
    foreground: "#000000"
  typography:
    sans: Arial
    base: 16
  spacing:
    scale: "[8, 32]"
  radii:
    sm: 5
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material (0.55).

> "Just a moment..."

The author writes in a **neutral** voice; headings tend to be **unknown** case and **tight**.

Reading order detected on the source: `—`.

Source: <https://openai.com>.

# Colors

| role | hex | usage |
|---|---|---|
| foreground | `#000000` | — |

**Neutrals:** `#8e8ea0` · `#000000`

**Total unique colors detected:** 2.

# Typography

**Families**
- `Arial` · 26 uses
- `Times` · 7 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `24px` | `700` | `normal` |

# Layout

**Scale:** `8px` · `32px`

**Layout primitives:** 1 grid containers · 1 flex containers.

**Breakpoints:** `[object Object]px`

# Elevation and Depth

_No discrete shadow tokens detected — flat material._

# Shapes

**Radius scale**
- `sm` — `5px`

# Components

**Detected patterns:** `inputs`


# Do's and Don'ts

**Do's**
- Write headings in **unknown** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't no clear primary brand color detected.
- Don't no consistent spacing base unit detected — values appear arbitrary.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.16.0 from <https://openai.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

Arial

The quick brown fox jumps

display · 56px / 600

The quick brown fox jumps

headline · 36px / 500

The quick brown fox jumps

subhead · 22px / 400

The quick brown fox jumps

body · 16px / 400

The quick brown fox jumps

caption · 12px / 500 · uppercase

Icon system

SVG icon census — count, style mix, grid and stroke profile.

total icons

stroke-only

fill-only

0.00

avg stroke

—

library

Agent prompt

One self-contained system prompt with every openai.com token, anatomy slot and voice rule. Drop it into any AI agent and it builds in this brand without hallucinating.

paste into Claude · GPT · Cursor · Windsurf · v0

# You are building UI in the openai.com design system.

Source: https://openai.com
Extracted by designlang on 2026-06-12.

## Brand at a glance

- title         Just a moment...
- page intent   landing
- material      flat
- design grade  B

## Colour

- neutrals    #8e8ea0 · #000000

## Typography

- families   Arial · Times
- weights    400 · 700
- base size  16px

## Spacing

- scale      8px · 32px

## Radii

- scale      5px

## Voice

- tone       neutral
- pronoun    third-person
- headings   unknown

## Accessibility

- WCAG score 100% · failing pairs: 0

## Build rules

1. Use the colours above. **Never invent a new hex.** If you need a
   shade between two existing colours, derive it via HSL adjustment
   from the closest extracted colour and call out the derivation.
2. Use the extracted typography families. If you need a missing weight,
   pick the nearest available weight from the list and note it.
3. Snap spacing values to the scale above. No off-scale paddings or
   margins.
4. Snap border radii to the scale above.
5. Match the voice: same tone, same pronoun stance, same heading
   style. Reuse the listed CTA verbs.
6. Aim for WCAG AA contrast minimum. When the brand colours fail,
   prefer the foreground colour on the background colour rather than
   mid-tone neutrals.
7. Reuse component anatomy when it exists — do not invent novel
   structures for things the site already has.

## Available context files

designlang wrote these alongside this prompt. Reach for them when
you need ground truth:

- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens
- `<host>-tailwind.config.js`  — Tailwind v3 config
- `<host>-tailwind-v4.css`     — Tailwind v4 `@theme` block
- `<host>-tokens.d.ts`         — TypeScript literal-union types
- `<host>-variables.css`       — bare CSS custom properties
- `<host>-reset.css`           — brand-aware base styles
- `<host>-gradients.css`       — `.grad-N` utility classes
- `<host>-anatomy.tsx`         — typed React component scaffolds
- `<host>-shadcn-theme.css`    — shadcn/ui theme
- `<host>-theme.js`            — React / Vue / Svelte theme object
- `<host>-mcp.json`            — MCP server payload (load via stdio)
- `<host>.brand.pdf`           — print-ready 13-chapter brand book

When you reference the system in code, prefer importing from these
files over hard-coding values.

## Output expectations

When asked to "build a pricing page" or "make a card" or any UI:

- Produce a single self-contained component file in the appropriate
  framework (React / Vue / Svelte — match what the user is using).
- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind
  is available; otherwise use the CSS custom properties from
  `variables.css`.
- Write the headline copy using the brand voice; do not invent
  generic Lorem.
- Annotate any choice where you had to bend the system, with a
  one-line `// note:` comment explaining what and why.

## One-line install

```bash
npx designlang openai.com
```

Run this against any other URL to extract its system in the same
shape as the one above.

---

Generated by designlang. Re-extract by running `npx designlang openai.com`.

Drop this in any AI agent. It will build UI in the openai.com brand without hallucinating colours, fonts or component shapes.

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://openai.com

{
  "colors": {
    "all": [
      {
        "hex": "#8e8ea0",
        "rgb": {
          "r": 142,
          "g": 142,
          "b": 160,
          "a": 1
        },
        "hsl": {
          "h": 240,
          "s": 9,
          "l": 59
        },
        "count": 42,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 24,
        "contexts": [
          "text",
          "border"
        ]
      }
    ]
  },
  "regions": [],
  "componentClusters": [],
  "accessibility": {
    "remediation": []
  },
  "cssHealth": {
    "sheets": [
      {
        "url": "https://openai.com/",
        "totalBytes": 590,
        "usedBytes": 347,
        "unusedBytes": 243,
        "unusedPercent": 41
      }
    ],
    "totalBytes": 590,
    "usedBytes": 347,
    "unusedBytes": 243,
    "unusedPercent": 41,
    "importantCount": 0,
    "duplicates": 1,
    "vendorPrefixes": {
      "webkit": 0,
      "moz": 0,
      "ms": 0,
      "o": 0
    },
    "keyframes": [],
    "specificity": {
      "max": [
        0,
        2,
        1
      ],
      "average": [
        0,
        0.88,
        0.25
      ],
      "count": 8
    },
    "issues": [
      "1 duplicate declaration"
    ]
  }
}

Prompt pack

Paste-ready prompts pre-loaded with the openai.com system. Generators (v0, Lovable, Cursor, Claude Artifacts) and per-component recipes (button, card).

v0362 chars

Build a landing page with this exact visual language.
COLORS:
  #8e8ea0
  #000000
FONTS: [object Object], [object Object]
SPACING: 8, 32
RADIUS: 5
SHADOWS: (none)
MATERIAL LANGUAGE: flat
VOICE: Tone: neutral · Headings: unknown
SECTIONS (in order):
- hero
- features
- cta
- footer
Use Tailwind. Match these tokens exactly. Keep the material language consistent.

Lovable330 chars

Clone the design language of this landing page and build a fresh equivalent.
Visual feel: flat. Tone: neutral · Headings: unknown
Primary palette: #8e8ea0, #000000.
Typography: [object Object], [object Object].
Corner radius vocabulary: 5.
Shadow vocabulary: (none).
Page structure:
- hero
- features
- social proof
- cta
- footer

Cursor315 chars

# Design brief
Page type: **landing**.
Material language: **flat**.
Voice: Tone: neutral · Headings: unknown.
## Tokens
```ts
export const tokens = {
  colors: ['#8e8ea0', '#000000'],
  fonts: ['[object Object]', '[object Object]'],
  radii: ['5'],
  shadows: [],
};
```
## Sections
- hero
- features
- cta
- footer

Claude Artifacts464 chars

Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: flat.
Voice: Tone: neutral · Headings: unknown.
Colors to use: #8e8ea0, #000000.
Fonts: [object Object], [object Object].
Radius vocabulary: 5.
Sections:
- hero
- features
- cta
- footer
Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.