designlang 12.9.0 → 12.10.0

package/.claude-plugin/marketplace.json

@@ -9,7 +9,7 @@
       "name": "designlang",
       "source": "./",
       "description": "Eight slash commands wrapping the designlang CLI: /extract (full design language \u2192 DTCG, Tailwind, Figma), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies \u2014 brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book \u2014 13 chapters, hand-off-ready), /pair (fuse two designs across configurable axes \u2014 colours from one site, typography from another).",
-      "version": "12.9.0",
+      "version": "12.10.0",
       "author": {
         "name": "Manavarya Singh"
       },

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "designlang",
   "description": "Extract any website's design language and ship it. Eight slash commands \u2014 /extract, /grade, /battle, /remix, /pack, /theme-swap, /brand, /pair \u2014 wrap the designlang CLI to pull DTCG tokens, Tailwind/shadcn/Figma vars, motion + voice, generate shareable graded report cards, head-to-head battle pages, six-vocabulary remixes, downloadable design-system bundles, OKLCH-correct theme recolouring, full editorial brand-guidelines books, and design crossovers between two sites.",
-  "version": "12.9.0",
+  "version": "12.10.0",
   "author": {
     "name": "Manavarya Singh",
     "url": "https://github.com/Manavarya09"

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [12.10.0] — 2026-05-12
+
+**Small ship: \`designlang stats\` + low-confidence warning in grade cards.**
+
+Two tight quality-of-life additions on top of the v12.9 extraction pass.
+
+### Added
+
+- **\`designlang stats <url>\`** — one-screen summary to stdout. Grade, primary, fonts, spacing base, WCAG, stack, library, tone, material, intent — all in ~15 lines. No files written. Use \`-j\` / \`--as-json\` for machine-readable output (CI, scripting).
+
+  \`\`\`
+  Grade        B · 87/100
+  Primary      #533afd ×899 59% conf
+  Fonts        sohne-var
+  Type scale   14 sizes
+  Spacing      base 2px · 13 steps
+  Shape        5 radii · 6 shadows
+  Colours      31 tokens
+  WCAG         79%
+  Stack        next · unknown
+  Material     skeuomorphic
+  Tone         neutral
+  Intent       landing
+  \`\`\`
+
+- **Low-confidence primary warning in \`grade.html\`.** Surfaces the v12.9
+  \`primary.confidence\` field when it drops under 0.5 — a soft, amber
+  callout above the dimensions grid that tells the reader the brand
+  colour is a near-tie pick rather than a runaway leader. Renders as
+  ordinary inline note, not an error. Stays out of the way when
+  confidence is high (the common case).
+
+### Why \`stats\`?
+
+Every other command writes files. There was no one-line "what's this
+site made of" path for scripting, CI summaries, or a quick sanity
+check. \`stats\` fills that gap without bloat — it's the read-only,
+zero-side-effect entry point.
+
+2 new tests (low-confidence note present + absent paths). 398/398 total.
+
 ## [12.9.0] — 2026-05-11
 
 **Extraction quality pass — the core MVP, fixed.**

package/bin/design-extract.js

@@ -944,6 +944,104 @@ program
     }
   });
 
+// ── Stats command — fast stdout summary, no files written ──
+program
+  .command('stats <url>')
+  .description('Print a concise one-screen summary to stdout — grade, primary, fonts, spacing, voice. No files written.')
+  .option('-j, --as-json', 'emit machine-readable JSON to stdout instead of pretty text')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+
+    // Quiet path for --as-json: no spinner / chrome noise, just data on stdout.
+    // (`--json` is already a global program flag; `--as-json` avoids the clash.)
+    const wantJson = !!opts.asJson;
+    const spinner = wantJson ? null : ora(`Reading ${url}...`).start();
+    try {
+      const design = await extractDesignLanguage(url);
+      const s = design.score || {};
+      const primary = design.colors?.primary;
+      const families = (design.typography?.families || []).map(f => f?.name || f).filter(Boolean);
+      const summary = {
+        url,
+        title: design.meta?.title,
+        grade: s.grade ?? null,
+        score: s.overall ?? null,
+        primary: primary
+          ? { hex: primary.hex, count: primary.count, confidence: primary.confidence ?? null }
+          : null,
+        families: families.slice(0, 3),
+        fontFamilyCount: families.length,
+        typeScale: (design.typography?.scale || []).length,
+        spacingBase: design.spacing?.base ?? null,
+        spacingScale: (design.spacing?.scale || []).length,
+        radii: (design.borders?.radii || []).length,
+        shadows: (design.shadows?.values || []).length,
+        colors: (design.colors?.all || []).length,
+        wcag: design.accessibility?.score ?? null,
+        material: design.materialLanguage?.label,
+        library: design.componentLibrary?.library,
+        tone: design.voice?.tone,
+        stack: design.stack?.framework,
+        intent: design.pageIntent?.type,
+      };
+
+      if (wantJson) {
+        if (spinner) spinner.stop();
+        process.stdout.write(JSON.stringify(summary, null, 2) + '\n');
+        return;
+      }
+
+      spinner.stop();
+      const gradeColor =
+        summary.grade === 'A' ? chalk.green
+        : summary.grade === 'B' ? chalk.cyan
+        : summary.grade === 'C' ? chalk.yellow
+        : summary.grade === 'D' ? chalk.magenta
+        : chalk.red;
+      const confTag = primary && primary.confidence != null
+        ? (primary.confidence < 0.5
+            ? chalk.yellow(`~${Math.round(primary.confidence * 100)}% conf`)
+            : chalk.gray(`${Math.round(primary.confidence * 100)}% conf`))
+        : '';
+      const line = (label, value) =>
+        `  ${chalk.gray(label.padEnd(12))} ${value}`;
+
+      console.log('');
+      console.log(`  ${chalk.bold(url)}`);
+      if (summary.title) console.log(`  ${chalk.gray(summary.title)}`);
+      console.log('');
+      console.log(line('Grade', `${gradeColor.bold(summary.grade || '—')} ${chalk.gray('·')} ${chalk.bold(String(summary.score ?? '—') + '/100')}`));
+      if (primary) {
+        console.log(line('Primary', `${chalk.bold(primary.hex)} ${chalk.gray('×' + primary.count)} ${confTag}`));
+      } else {
+        console.log(line('Primary', chalk.gray('—')));
+      }
+      if (families.length) {
+        const head = families[0];
+        const body = families[1] || head;
+        const extra = families.length > 2 ? chalk.gray(` +${families.length - 2}`) : '';
+        console.log(line('Fonts', `${head}${body && body !== head ? chalk.gray(' / ') + body : ''}${extra}`));
+      } else {
+        console.log(line('Fonts', chalk.gray('—')));
+      }
+      console.log(line('Type scale', `${summary.typeScale} sizes`));
+      console.log(line('Spacing', `${summary.spacingBase ? `base ${summary.spacingBase}px` : 'no base'} · ${summary.spacingScale} steps`));
+      console.log(line('Shape', `${summary.radii} radii · ${summary.shadows} shadows`));
+      console.log(line('Colours', `${summary.colors} tokens`));
+      console.log(line('WCAG', summary.wcag != null ? `${summary.wcag}%` : chalk.gray('—')));
+      console.log(line('Stack', [summary.stack, summary.library].filter(Boolean).join(' · ') || chalk.gray('—')));
+      console.log(line('Material', summary.material || chalk.gray('—')));
+      console.log(line('Tone', summary.tone || chalk.gray('—')));
+      console.log(line('Intent', summary.intent || chalk.gray('—')));
+      console.log('');
+    } catch (err) {
+      if (spinner) spinner.fail('Stats failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 // ── Grade command — shareable HTML report card ─────────────
 program
   .command('grade <url>')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.9.0",
+  "version": "12.10.0",
   "description": "Extract the complete design language from any website and ship it \u2014 clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/formatters/grade.js

@@ -124,6 +124,16 @@ export function formatGrade(design, opts = {}) {
   const ogTitle = `${host} — Grade ${s.grade}`;
   const ogDesc = `Design system audit by designlang. ${s.overall}/100 across 8 dimensions.`;
 
+  // Surface a low-confidence warning when the primary detection was uncertain
+  // (e.g. monochrome site, near-tie between top brand candidates). The field
+  // arrived in v12.9 — this card now exposes it so readers don't take the
+  // primary at face value when it's a soft pick.
+  const primaryConfidence = design.colors?.primary?.confidence;
+  const lowConfidence = typeof primaryConfidence === 'number' && primaryConfidence < 0.5;
+  const confidenceNote = lowConfidence
+    ? `<p class="confidence-note">Primary detection was low-confidence (${Math.round(primaryConfidence * 100)}%). The brand colour may be a soft pick — review the palette below.</p>`
+    : '';
+
   const dims = DIMENSIONS
     .filter(([k]) => s.scores[k] !== undefined)
     .map(([k, label, blurb]) => {
@@ -225,6 +235,20 @@ ${headHref ? `<link href="${esc(headHref)}" rel="stylesheet">` : ''}
   section > h2 { font-family: var(--display); font-weight: 400; font-size: 32px; margin: 0 0 8px; letter-spacing: -.005em; }
   section > h2 + .lead { color: var(--ink-soft); margin: 0 0 36px; max-width: 60ch; }
 
+  /* Low-confidence primary callout — only rendered when v12.9's
+     primary.confidence drops under 0.5. Soft warning, not an error. */
+  .confidence-note {
+    margin: -16px 0 32px;
+    padding: 12px 16px;
+    background: rgba(212, 145, 0, .08);
+    border-left: 2px solid #d49100;
+    border-radius: 0 4px 4px 0;
+    font-size: 14px;
+    color: var(--ink-soft);
+    max-width: 60ch;
+  }
+  [data-theme="dark"] .confidence-note { background: rgba(212, 145, 0, .14); }
+
   /* — Dimensions grid — */
   .dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
   @media (max-width: 640px) { .dims { grid-template-columns: 1fr; gap: 28px; } }
@@ -313,6 +337,7 @@ ${headHref ? `<link href="${esc(headHref)}" rel="stylesheet">` : ''}
     <section>
       <h2>Eight dimensions, scored.</h2>
       <p class="lead">Each dimension is graded against calibrated thresholds drawn from production design systems (Stripe, Linear, Vercel, GitHub, Apple). The number is the headline; the prose underneath is what to do next.</p>
+      ${confidenceNote}
       <div class="dims">${dims}</div>
     </section>