designlang 7.0.0 → 7.2.0

package/website/app/page.js

@@ -1,175 +1,399 @@
-import Extractor from './components/Extractor';
+import Rule from './components/Rule';
+import Marginalia from './components/Marginalia';
+import HeroExtractor from './components/HeroExtractor';
+import TokenBrowser from './components/TokenBrowser';
+import McpSection from './components/McpSection';
+import PlatformTabs from './components/PlatformTabs';
+import CssHealth from './components/CssHealth';
+import A11ySlider from './components/A11ySlider';
+import RegionsComponents from './components/RegionsComponents';
+import Specimens from './components/Specimens';
+import Comparison from './components/Comparison';
 
 export default function Home() {
-  const marqueeText = "COLORS // TYPOGRAPHY // SPACING // LAYOUT // SHADOWS // ACCESSIBILITY // COMPONENTS // ANIMATIONS // BREAKPOINTS // CSS VARIABLES // INTERACTIONS // RESPONSIVE // FIGMA // TAILWIND // REACT // SHADCN // ";
-
   return (
-    <>
-      {/* ── HERO ── */}
-      <section className="hero">
-        <h1 className="hero-title">
-          DESIGN
-          <br />
-          LANG
-          <span>reverse-engineer any website</span>
-        </h1>
-        <p className="hero-sub">
-          One command extracts the complete design language from any live website.
-          8 output files. 15 sections. 12 extractors. No other tool does this.
-        </p>
-        <a href="https://github.com/Manavarya09/design-extract" className="hero-cmd">
-          npx designlang https://vercel.com
-        </a>
-        <div className="scroll-hint">scroll down</div>
-      </section>
-
-      {/* ── STATS ── */}
-      <div className="stats-strip">
-        <div className="stat"><div className="stat-value">8</div><div className="stat-label">Output Files</div></div>
-        <div className="stat"><div className="stat-value">12</div><div className="stat-label">Extractors</div></div>
-        <div className="stat"><div className="stat-value">11</div><div className="stat-label">Component Types</div></div>
-        <div className="stat"><div className="stat-value">15</div><div className="stat-label">Markdown Sections</div></div>
-        <div className="stat"><div className="stat-value">7</div><div className="stat-label">Score Categories</div></div>
-        <div className="stat"><div className="stat-value">4</div><div className="stat-label">Viewports Crawled</div></div>
-      </div>
-
-      {/* ── MARQUEE ── */}
-      <div className="marquee">
-        <div className="marquee-inner">
-          {marqueeText}{marqueeText}{marqueeText}{marqueeText}
+    <main className="page">
+      {/* ── HEAD SLUG ─────────────────────────────────────── */}
+      <header style={{ paddingTop: 'var(--r4)', paddingBottom: 'var(--r5)' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            gap: 'var(--r5)',
+            borderBottom: 'var(--hair)',
+            paddingBottom: 'var(--r3)',
+          }}
+        >
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/mark.svg" alt="" width={22} height={22} style={{ display: 'block' }} />
+            <span className="mono" style={{ fontSize: 13, letterSpacing: '0.02em' }}>
+              designlang
+              <span style={{ color: 'var(--ink-3)', marginLeft: 12 }}>v7.0</span>
+            </span>
+          </span>
+          <nav
+            className="mono"
+            style={{ display: 'flex', gap: 'var(--r5)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em' }}
+          >
+            <a href="#extract" style={{ borderBottom: 0 }}>Extract</a>
+            <a href="#features" style={{ borderBottom: 0 }}>Features</a>
+            <a href="#specimens" style={{ borderBottom: 0 }}>Specimens</a>
+            <a href="#install" style={{ borderBottom: 0 }}>Install</a>
+            <a href="https://github.com/Manavarya09/design-extract" style={{ borderBottom: 0 }}>GitHub</a>
+            <a href="https://www.npmjs.com/package/designlang" style={{ borderBottom: 0 }}>npm</a>
+          </nav>
         </div>
-      </div>
+      </header>
 
-      {/* ── OUTPUT FILES ── */}
-      <section>
-        <h2 className="section-title">8 Output Files</h2>
-        <div className="files-grid">
-          {[
-            { num: '01', name: '*-design-language.md', desc: 'AI-optimized markdown — feed it to any LLM and it recreates the design from scratch. 15 sections covering every aspect.' },
-            { num: '02', name: '*-preview.html', desc: 'Gorgeous dark-themed visual report with color swatches, type scale rendering, shadow cards, and accessibility score.' },
-            { num: '03', name: '*-tailwind.config.js', desc: 'Drop-in Tailwind CSS theme extension with colors, fonts, spacing, radii, shadows, and screens.' },
-            { num: '04', name: '*-variables.css', desc: 'CSS custom properties organized by category. Import directly into any project.' },
-            { num: '05', name: '*-figma-variables.json', desc: 'Figma Variables import format with light/dark mode support. Hand off to designers instantly.' },
-            { num: '06', name: '*-theme.js', desc: 'React/CSS-in-JS theme object compatible with Chakra UI, Stitches, and Vanilla Extract.' },
-            { num: '07', name: '*-shadcn-theme.css', desc: 'shadcn/ui theme variables in the exact format it expects. Paste into globals.css.' },
-            { num: '08', name: '*-design-tokens.json', desc: 'W3C Design Tokens community group format for tooling integration.' },
-          ].map(f => (
-            <div key={f.num} className="file-card" data-num={f.num}>
-              <div className="file-name">{f.name}</div>
-              <div className="file-desc">{f.desc}</div>
+      {/* ── §00 HERO ──────────────────────────────────────── */}
+      <section id="extract" style={{ paddingBlock: 'var(--r7) var(--r8)', borderTop: 0 }}>
+        <div className="with-margin">
+          <div>
+            <div className="section-label" style={{ marginBottom: 'var(--r6)' }}>
+              <span>§00 — Entry</span>
+            </div>
+            <h1
+              className="display hero-title"
+              style={{ marginBottom: 'var(--r7)' }}
+            >
+              A website<br />
+              reads as a<br />
+              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>design system</em>.
+            </h1>
+            <p className="prose" style={{ fontSize: 20, lineHeight: 1.4, maxWidth: '46ch' }}>
+              designlang crawls any URL and returns its complete design language —
+              tokens, typography, spacing, shadows, components, regions, health,
+              remediations — in W3C DTCG format, with native emitters for iOS,
+              Android, Flutter and WordPress, and a live MCP server your editor can read.
+            </p>
+          </div>
+          <Marginalia>
+            <div>extraction runtime</div>
+            <div>
+              <code>Playwright 1.59</code>
+              <br />
+              <code>@sparticuz/chromium</code>
             </div>
-          ))}
+            <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+            <div>default invocation</div>
+            <div><code>$ npx designlang &lt;url&gt;</code></div>
+            <p className="foot" style={{ marginTop: 12 }}>
+              Works without install. Playwright fetches Chromium on first run;
+              ≈ 3–6 seconds per page on a modern laptop.
+            </p>
+          </Marginalia>
         </div>
+
+        <HeroExtractor />
       </section>
 
-      {/* ── WHAT IT EXTRACTS ── */}
-      <section className="section-red">
-        <div className="section-inner">
-          <h2 className="section-title">What It Extracts</h2>
-          <div className="features-list">
-            {[
-              { name: 'Colors', cmd: 'automatic', desc: 'Full palette with primary/secondary/accent/neutral classification. Gradients. Background and text colors with usage context.' },
-              { name: 'Typography', cmd: 'automatic', desc: 'Font families, type scale, heading/body styles, weight distribution, line heights, letter spacing.' },
-              { name: 'Spacing', cmd: 'automatic', desc: 'All unique values with automatic base-unit detection. Identifies 4px/8px grids.' },
-              { name: 'Layout System', cmd: 'automatic', desc: 'Grid column patterns, flex direction usage, container widths, gap values, justify/align patterns. The skeleton, not just the paint.' },
-              { name: 'Shadows', cmd: 'automatic', desc: 'All box-shadows parsed and classified by visual weight (xs through xl).' },
-              { name: 'Components', cmd: 'automatic', desc: '11 types: buttons, cards, inputs, links, navbars, footers, modals, dropdowns, tables, badges, avatars.' },
-              { name: 'Accessibility', cmd: 'automatic', desc: 'WCAG 2.1 contrast ratios for every fg/bg color pair. Overall score and failing pairs.' },
-              { name: 'Responsive', cmd: '--responsive', desc: 'Crawls at 4 viewports. Maps what changes between breakpoints — fonts, nav, columns, hamburger.' },
-              { name: 'Interactions', cmd: '--interactions', desc: 'Hovers and focuses interactive elements. Records actual style transitions — hover colors, focus rings, active states.' },
-              { name: 'CSS Variables', cmd: 'automatic', desc: 'All :root custom properties categorized by type — colors, spacing, typography, shadows, radii.' },
-              { name: 'Animations', cmd: 'automatic', desc: 'Transitions, easing functions, durations, and @keyframes rules.' },
-              { name: 'Design Score', cmd: 'automatic', desc: '7-category quality rating (A-F) — color discipline, typography, spacing, shadows, radii, accessibility, tokenization.' },
-            ].map(f => (
-              <div key={f.name} className="feature">
-                <div className="feature-name">{f.name}</div>
-                <div className="feature-cmd">{f.cmd}</div>
-                <div className="feature-desc">{f.desc}</div>
-              </div>
-            ))}
-          </div>
+      {/* ── §01 DTCG BROWSER ──────────────────────────────── */}
+      <section id="features">
+        <Rule number="01" label="DTCG token browser" />
+        <div style={{ padding: 'var(--r6) 0' }}>
+          <TokenBrowser />
         </div>
       </section>
 
-      {/* ── COMMANDS ── */}
+      {/* ── §02 MCP ───────────────────────────────────────── */}
       <section>
-        <h2 className="section-title">Commands</h2>
-        <div className="commands-grid">
-          {[
-            { name: 'designlang <url>', desc: 'Extract the full design language. Generates 8 output files.' },
-            { name: 'designlang <url> --full', desc: 'Everything at once — screenshots, responsive, interactions.' },
-            { name: 'designlang diff <A> <B>', desc: 'Compare two sites side-by-side. Outputs markdown and HTML.' },
-            { name: 'designlang brands <urls...>', desc: 'Multi-brand comparison matrix. Color overlap, typography, a11y scores.' },
-            { name: 'designlang clone <url>', desc: 'Generate a working Next.js starter with the extracted design applied.' },
-            { name: 'designlang score <url>', desc: 'Rate design system quality. 7 categories, A-F grade, actionable issues.' },
-            { name: 'designlang watch <url>', desc: 'Monitor a site for design changes on a configurable interval.' },
-            { name: 'designlang sync <url>', desc: 'Update local token files from the live site. Code-first source of truth.' },
-            { name: 'designlang history <url>', desc: 'View how a site\'s design has evolved over time.' },
-          ].map(c => (
-            <div key={c.name} className="command-card">
-              <div className="command-name">{c.name}</div>
-              <div className="command-desc">{c.desc}</div>
-            </div>
-          ))}
-        </div>
+        <Rule number="02" label="MCP server" />
+        <McpSection />
       </section>
 
-      {/* ── SCORE DEMO ── */}
-      <section className="section-cream">
-        <div className="section-inner">
-          <h2 className="section-title">Design System Scoring</h2>
-          <div className="score-demo">
-            <div>$ designlang score https://vercel.com</div>
-            <br />
-            <div>&nbsp;&nbsp;<span className="score-grade">68</span>/100&nbsp;&nbsp;Grade: D</div>
-            <br />
-            <div>&nbsp;&nbsp;Color Discipline&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;██████████░░░░░░░░░░ 50</div>
-            <div>&nbsp;&nbsp;Typography&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;██████████████░░░░░░ 70</div>
-            <div>&nbsp;&nbsp;Spacing System&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;████████████████░░░░ 80</div>
-            <div>&nbsp;&nbsp;Shadows&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;██████████░░░░░░░░░░ 50</div>
-            <div>&nbsp;&nbsp;Border Radii&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;████████░░░░░░░░░░░░ 40</div>
-            <div>&nbsp;&nbsp;Accessibility&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;███████████████████░ 94</div>
-            <div>&nbsp;&nbsp;Tokenization&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;████████████████████ 100</div>
-          </div>
-        </div>
+      {/* ── §03 MULTI-PLATFORM ────────────────────────────── */}
+      <section>
+        <Rule number="03" label="Multi-platform emitters" />
+        <PlatformTabs />
       </section>
 
-      {/* ── AGENT SKILL ── */}
+      {/* ── §04 HEALTH ────────────────────────────────────── */}
       <section>
-        <h2 className="section-title">Agent Skill</h2>
-        <p style={{ fontSize: '18px', lineHeight: '1.7', color: '#aaa', maxWidth: '700px', marginBottom: '32px' }}>
-          Works with <strong style={{ color: '#fff' }}>Claude Code, Cursor, Codex, and 40+ AI coding agents</strong> via the skills ecosystem.
-        </p>
-        <div className="hero-cmd" style={{ display: 'inline-block' }}>
-          npx skills add Manavarya09/design-extract
-        </div>
+        <CssHealth />
       </section>
 
-      {/* ── TRY IT ── */}
-      <section className="section-red" id="try">
-        <div className="section-inner">
-          <h2 className="section-title">Try It</h2>
-          <p style={{ fontSize: '18px', lineHeight: '1.6', marginBottom: '32px', maxWidth: '600px' }}>
-            Paste any URL. We&apos;ll extract the full design language and let you download all 8 files as a ZIP.
+      {/* ── §05 REMEDIATION ───────────────────────────────── */}
+      <section>
+        <A11ySlider />
+      </section>
+
+      {/* ── §06 REGIONS + COMPONENTS ──────────────────────── */}
+      <section>
+        <RegionsComponents />
+      </section>
+
+      {/* ── §07 SPECIMENS ─────────────────────────────────── */}
+      <section id="specimens">
+        <Rule number="07" label="Specimens" />
+        <Specimens />
+      </section>
+
+      {/* ── §08 COMPARISON ────────────────────────────────── */}
+      <section>
+        <Rule number="08" label="Compared" />
+        <Comparison />
+      </section>
+
+      {/* ── §09 INSTALL ───────────────────────────────────── */}
+      <section id="install" style={{ paddingBottom: 'var(--r9)' }}>
+        <Rule number="09" label="Install" />
+        <InstallTracks />
+      </section>
+
+      {/* ── FOOTER ───────────────────────────────────────── */}
+      <SiteFooter />
+    </main>
+  );
+}
+
+function InstallTracks() {
+  const preStyle = {
+    padding: 'var(--r4) var(--r5)',
+    background: 'var(--ink)',
+    color: 'var(--paper)',
+    fontSize: 13,
+    lineHeight: 1.7,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+  };
+  const colHead = {
+    fontFamily: 'var(--font-mono)',
+    fontSize: 11,
+    letterSpacing: '0.14em',
+    textTransform: 'uppercase',
+    color: 'var(--ink-2)',
+    marginBottom: 'var(--r3)',
+  };
+  const colTitle = {
+    fontSize: 36,
+    lineHeight: 1,
+    letterSpacing: '-0.02em',
+    marginBottom: 'var(--r4)',
+  };
+
+  return (
+    <div style={{ marginTop: 'var(--r5)' }}>
+      <div className="install-grid">
+        {/* CLI */}
+        <div className="install-col">
+          <div style={colHead}>track 01</div>
+          <h3 className="display" style={colTitle}>CLI</h3>
+          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 'var(--r3)', maxWidth: '34ch' }}>
+            Zero install via npx. Node ≥ 20.
+          </p>
+          <pre className="mono" style={preStyle}>
+{`1  $ npx designlang <url>
+2  $ npx designlang <url> --platforms all
+3  $ npx designlang <url> --emit-agent-rules
+4  $ npx designlang <url> --cookie-file ./cookies.txt
+5  $ npx designlang <url> --insecure
+6  $ npx designlang <url> --user-agent "custom-ua"
+7  $ npx designlang <url> --tokens-legacy`}
+          </pre>
+        </div>
+
+        {/* MCP */}
+        <div className="install-col">
+          <div style={colHead}>track 02</div>
+          <h3 className="display" style={colTitle}>MCP server</h3>
+          <p className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 'var(--r3)' }}>
+            claude_desktop_config.json / ~/.cursor/mcp.json
+          </p>
+          <pre className="mono" style={preStyle}>
+{`{
+  "mcpServers": {
+    "designlang": {
+      "command": "npx",
+      "args": [
+        "designlang",
+        "mcp",
+        "--output-dir",
+        "./design-extract-output"
+      ]
+    }
+  }
+}`}
+          </pre>
+          <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 'var(--r3)', fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
+            Once connected, every MCP-aware agent can query your last extraction.
+          </p>
+        </div>
+
+        {/* Agent rules */}
+        <div className="install-col">
+          <div style={colHead}>track 03</div>
+          <h3 className="display" style={colTitle}>Agent rules</h3>
+          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 'var(--r3)', maxWidth: '34ch' }}>
+            One flag emits ready-to-commit rules for every popular agent.
+          </p>
+          <pre className="mono" style={preStyle}>
+{`$ npx designlang <url> --emit-agent-rules`}
+          </pre>
+          <ul
+            className="mono"
+            style={{
+              listStyle: 'none',
+              padding: 0,
+              marginTop: 'var(--r3)',
+              fontSize: 12,
+              lineHeight: 1.9,
+              color: 'var(--ink-2)',
+            }}
+          >
+            <li>.cursor/rules/designlang.mdc</li>
+            <li>.claude/skills/designlang/SKILL.md</li>
+            <li>CLAUDE.md.fragment</li>
+            <li>agents.md</li>
+          </ul>
+        </div>
+
+        {/* Chrome extension */}
+        <div className="install-col">
+          <div style={colHead}>track 04 · new in v7.1</div>
+          <h3 className="display" style={colTitle}>Chrome extension</h3>
+          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 'var(--r3)', maxWidth: '34ch' }}>
+            One click from any tab. Opens this page with the URL prefilled.
+          </p>
+          <ol
+            className="mono"
+            style={{
+              padding: 0,
+              margin: 0,
+              listStylePosition: 'inside',
+              fontSize: 12,
+              lineHeight: 1.9,
+              color: 'var(--ink-2)',
+            }}
+          >
+            <li>clone the repo</li>
+            <li>open <code style={{ color: 'var(--ink)' }}>chrome://extensions</code></li>
+            <li>toggle developer mode</li>
+            <li>load unpacked → <code style={{ color: 'var(--ink)' }}>chrome-extension/</code></li>
+          </ol>
+          <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 'var(--r4)', fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
+            Manifest v3. Only permission: <code className="mono" style={{ fontStyle: 'normal' }}>activeTab</code>.
+          </p>
+          <a
+            href="https://github.com/Manavarya09/design-extract/tree/main/chrome-extension"
+            target="_blank"
+            rel="noopener"
+            className="mono"
+            style={{ display: 'inline-block', marginTop: 'var(--r3)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}
+          >
+            source →
+          </a>
+        </div>
+      </div>
+
+      <style>{`
+        .install-grid {
+          display: grid;
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+          gap: 0;
+        }
+        .install-col {
+          padding: 0 var(--r4);
+        }
+        .install-col:first-child { padding-left: 0; }
+        .install-col:last-child { padding-right: 0; }
+        .install-col + .install-col {
+          border-left: 1px solid var(--ink);
+        }
+        @media (max-width: 1100px) {
+          .install-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
+          .install-col { padding: var(--r4) var(--r4); }
+          .install-col:nth-child(2n+1) { padding-left: 0; }
+          .install-col:nth-child(2n) { padding-right: 0; }
+          .install-col:nth-child(n+3) { border-top: 1px solid var(--ink); }
+          .install-col:nth-child(2n+1) { border-left: 0; }
+        }
+        @media (max-width: 640px) {
+          .install-grid { grid-template-columns: 1fr; gap: 0; }
+          .install-col { padding: var(--r5) 0; border-left: 0 !important; }
+          .install-col + .install-col { border-top: 1px solid var(--ink); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function SiteFooter() {
+  const colHead = {
+    fontFamily: 'var(--font-mono)',
+    fontSize: 11,
+    letterSpacing: '0.14em',
+    textTransform: 'uppercase',
+    color: 'var(--ink-2)',
+    marginBottom: 'var(--r3)',
+  };
+  const linkStyle = {
+    display: 'block',
+    fontFamily: 'var(--font-mono)',
+    fontSize: 12,
+    padding: '6px 0',
+    borderBottom: '1px solid var(--paper-3)',
+    color: 'var(--ink)',
+  };
+  return (
+    <footer style={{ paddingBottom: 'var(--r7)' }}>
+      <div className="rule" role="separator" aria-label="end">
+        <div className="rule-line" />
+        <div className="chip mono" style={{ textTransform: 'uppercase', letterSpacing: '0.14em' }}>END</div>
+      </div>
+
+      <div
+        className="grid-12"
+        style={{ paddingTop: 'var(--r6)', paddingBottom: 'var(--r5)' }}
+      >
+        <div style={{ gridColumn: 'span 3' }}>
+          <div className="mono" style={{ fontSize: 14, letterSpacing: '0.02em' }}>designlang</div>
+          <p style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 8, fontFamily: 'var(--font-mono)' }}>
+            Built in Node, Playwright, and opinion.
           </p>
-          <Extractor />
         </div>
-      </section>
 
-      {/* ── FOOTER ── */}
-      <footer>
-        <div className="footer-title">DESIGNLANG</div>
-        <p style={{ color: '#888', fontSize: '14px' }}>
-          Built by Manavarya Singh. MIT Licensed. Open Source.
-        </p>
-        <div className="footer-links">
-          <a href="https://github.com/Manavarya09/design-extract">GitHub</a>
-          <a href="https://www.npmjs.com/package/designlang">npm</a>
+        <div style={{ gridColumn: 'span 3' }}>
+          <div style={colHead}>community</div>
+          <a href="https://github.com/Manavarya09/design-extract" style={linkStyle}>GitHub</a>
+          <a href="https://www.npmjs.com/package/designlang" style={linkStyle}>npm</a>
+          <a href="https://github.com/Manavarya09/design-extract/discussions" style={linkStyle}>Discussions</a>
+          <a href="https://github.com/Manavarya09/design-extract/issues" style={linkStyle}>Issues</a>
+          <a href="https://github.com/sponsors/Manavarya09" style={linkStyle}>Sponsor</a>
         </div>
-        <div className="footer-copy">
-          No other tool extracts layout patterns, responsive behavior, interaction states, and scores design quality from a single command.
+
+        <div style={{ gridColumn: 'span 3' }}>
+          <div style={colHead}>reference</div>
+          <a href="https://github.com/Manavarya09/design-extract#cli" style={linkStyle}>CLI docs</a>
+          <a href="https://github.com/Manavarya09/design-extract#mcp" style={linkStyle}>MCP server</a>
+          <a href="https://github.com/Manavarya09/design-extract#agent-rules" style={linkStyle}>Cursor rules</a>
+          <a href="https://github.com/Manavarya09/design-extract/blob/main/CHANGELOG.md" style={linkStyle}>CHANGELOG</a>
+        </div>
+
+        <div style={{ gridColumn: 'span 3' }}>
+          <div style={colHead}>colophon</div>
+          <p style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', lineHeight: 1.6 }}>
+            v7.0 · MIT · Manav Arya Singh · 2026.
+          </p>
+          <p style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 10, fontFamily: 'var(--font-mono)', lineHeight: 1.6 }}>
+            Set in Fraunces (Undercase), Instrument Sans (Instrument), and JetBrains Mono (JetBrains).
+          </p>
         </div>
-      </footer>
-    </>
+      </div>
+
+      <div
+        className="mono"
+        style={{
+          fontSize: 11,
+          color: 'var(--ink-3)',
+          borderTop: '1px solid var(--paper-3)',
+          paddingTop: 'var(--r3)',
+          letterSpacing: '0.04em',
+        }}
+      >
+        Extracted, not generated.
+      </div>
+    </footer>
   );
 }

package/website/app/robots.js

@@ -0,0 +1,15 @@
+import { SITE_URL } from './seo-config';
+
+export default function robots() {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/api/'],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

package/website/app/seo-config.js

@@ -0,0 +1,82 @@
+export const SITE_URL = 'https://designlang.manavaryasingh.com';
+export const SITE_NAME = 'designlang';
+
+export const SITE_TITLE =
+  "designlang \u2014 Extract any website's design system as DTCG tokens, MCP, iOS, Android, Flutter, WordPress";
+
+export const SITE_DESCRIPTION =
+  'designlang is an open-source CLI that reverse-engineers any website into a complete design system \u2014 W3C DTCG tokens (primitive, semantic, composite), Tailwind, CSS variables, Figma variables, shadcn/ui theme, React / Vue / Svelte themes, iOS SwiftUI, Android Compose, Flutter, WordPress block theme, plus a stdio MCP server for Claude Code, Cursor, and Windsurf. CSS health audit, WCAG remediation, semantic region classifier, reusable component clustering, dark-mode diff, auth-gated crawling. One command, zero install.';
+
+export const SITE_KEYWORDS = [
+  'design system extractor',
+  'extract design system from website',
+  'extract design tokens from url',
+  'website to design tokens',
+  'website to tailwind config',
+  'website to figma variables',
+  'W3C DTCG',
+  'W3C design tokens',
+  'DTCG tokens',
+  'design tokens format',
+  'design tokens generator',
+  'design token extractor',
+  'design tokens from website',
+  'semantic tokens',
+  'primitive tokens',
+  'alias tokens',
+  'composite tokens',
+  'style dictionary alternative',
+  'tokens studio alternative',
+  'subframe alternative',
+  'v0 alternative',
+  'builder.io alternative',
+  'project wallace alternative',
+  'supernova alternative',
+  'specify alternative',
+  'css extractor',
+  'extract css from website',
+  'website to css variables',
+  'website to shadcn theme',
+  'shadcn theme generator',
+  'shadcn/ui theme extractor',
+  'tailwind config generator',
+  'tailwind preset from website',
+  'react theme from website',
+  'figma variables generator',
+  'figma variables from website',
+  'figma tokens import',
+  'iOS SwiftUI tokens',
+  'Android Jetpack Compose tokens',
+  'Flutter theme from website',
+  'WordPress block theme generator',
+  'multi-platform design tokens',
+  'MCP server design tokens',
+  'MCP server Claude Code',
+  'MCP server Cursor',
+  'MCP server Windsurf',
+  'Claude Code design rules',
+  'Cursor project rules',
+  'Claude Code skills',
+  'AGENTS.md design system',
+  'design tokens MCP',
+  'agent rules emitter',
+  'CSS health audit',
+  'CSS specificity audit',
+  'unused CSS analyzer',
+  'WCAG contrast remediation',
+  'accessibility remediation',
+  'color contrast fixer',
+  'semantic regions classifier',
+  'component cluster detection',
+  'reusable component detection',
+  'dark mode diff',
+  'responsive breakpoint capture',
+  'interaction state capture',
+  'Playwright design extractor',
+  'headless browser design extraction',
+  'open source design system tool',
+  'CLI design system tool',
+  'npx designlang',
+  'designlang',
+  'Manav Arya Singh',
+];