designlang v11
§00 — vs · design-extractor.com

They sell the spec.
We ship the system.

design-extractor.com ships a one-file DESIGN.md for AI coding agents — clever positioning, single artifact, easy to remember. designlang ships DESIGN.md too, plus everything you actually need to build the design: DTCG tokens, multi-platform emitters, motion, anatomy, voice, a CI drift bot, a clone command, a local studio, MCP, and a Figma plugin.

based on design-extractor.com as of 2026-04-25 · open a PR if anything is wrong

capabilitydesignlangdesign-extractornote
DESIGN.md (single-file, 8-section, YAML front matter)●●They invented this format. We emit it too.
Account / email signup required○●They gate behind email.
Public pricing●○$0 vs. undisclosed.
CLI●○npx designlang <url> — no signup, scriptable.
MCP server (Claude Desktop / Cursor read live)●○Editor sees the extraction as a live resource.
DTCG W3C tokens●○Industry-standard token spec.
Tailwind config + CSS vars + React/Vue/Svelte themes●○Generated alongside the markdown.
iOS Swift / Android Compose / Flutter Dart / WordPress●○Multi-platform emitters.
Figma variables + a Figma plugin to import them●○Figma-side import takes one click.
Component anatomy (typed React stubs)●○Variant × size × state matrices, typed.
Voice extraction (tone, CTA verbs, heading style)●○The words that match the paint.
Motion tokens + scripted WebM replay●○Transitions and keyframes captured.
Page intent + section roles + material + library detection●○The semantic layer beneath the markdown.
CI drift bot (PR comment with score + drifted tokens)●○designlang ci. Works in any CI.
Clone — runnable Next.js repo from a URL●○designlang clone. One command, real project.
Local studio (clickable swatches, zero account)●○designlang studio → localhost:4837.
Open source (MIT)●○github.com/Manavarya09/design-extract.

They invented the 8-section DESIGN.md with YAML front matter. We emit the same shape — same sections, same front-matter conventions — fed by our v10 semantic layer (intent, material, voice, library detection) so the body has more to say. Below: the first lines of stripe-com-DESIGN.md, generated by npx designlang stripe.com:

---
site: "Stripe | Financial Infrastructure to Grow Your Revenue"
url: "https://stripe.com"
generated_at: "2026-04-25T17:00:47Z"
generator: "designlang@11.2.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#533afd"
    secondary: "#e8e9ff"
    accent: "#ffe0d1"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: sohne-var
    base: 16
  spacing:
    base: 2
    scale: [1, 28, 32, 40, 48, 52, 60, 64, 72, 80]
  radii:
    xs: 1
    sm: 4
    md: 8
    lg: 16
    full: 100
---

# Overview
A **landing** page (heuristic confidence 0.75), dressed in **flat** material.

> "Flexible solutions for every business model."

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

We pointed our own tool at theirs. Real extraction, real numbers — generated by npx designlang design-extractor.com:

page intent
landing (0.29)
material
flat
library
tailwindcss (0.842)
voice
friendly · sentence case · tight
top heading
“Extract any website’s design system”
reading order
nav → feature-grid → content → pricing → feature-grid → hero → faq → footer
fonts
Inter / Geist Mono
unique colors
8

Output included DESIGN.md, DTCG tokens, Tailwind config, CSS vars, Figma variables, motion tokens, anatomy stubs, voice JSON, intent + section roles, library detection, visual DNA, MCP companion. 21 files. 6 seconds.

design-extractor.com pioneered the DESIGN.mdconvention as an agent-native artifact. It’s a sharp idea, well-named, well-positioned. We adopted the format because it deserves to be a standard — not because we want to replace them on their best ground. We want to replace them on every other ground.

One command. No account. $0.

$ npx designlang <url>
$ npx designlang clone <url>
$ npx designlang ci <url> --tokens ./tokens.json
$ npx designlang studio

Extracted, not generated.