designlang 12.2.0 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # Changelog
 
+## [12.4.0] — 2026-05-05
+
+**Pack — one command, one polished design-system bundle.**
+
+\`designlang pack <url>\` runs the full extraction once and writes every
+emitter output into a single, signed, layered directory. One artifact a
+designer or dev can clone, drop into a project, or zip up and send to a
+client. Closes [#59](https://github.com/Manavarya09/design-extract/issues/59).
+
+### Added
+
+- New CLI command: \`designlang pack <url> [-o <dir>] [--with-clone] [--open]\`
+- New module \`src/pack.js\` exporting \`buildPack(design, opts)\`
+- Layout:
+  \`\`\`
+  <host>-design-system/
+  ├── README.md           — bespoke, "Built from <host>" + grade + at-a-glance stats
+  ├── LICENSE.txt         — provenance + usage guidance
+  ├── tokens/             — DTCG + Tailwind + CSS vars + Figma vars + motion + theme.js
+  ├── components/         — typed React stubs (anatomy.tsx)
+  ├── storybook/          — runnable Storybook project
+  ├── starter/            — minimal HTML starter wired to tokens/variables.css
+  ├── prompts/            — v0.txt · lovable.txt · cursor.md · claude-artifacts.md
+  │   └── recipes/        — recipe-<component>.md cards (named, no longer indexed)
+  └── extras/             — voice.json + prompt-pack.md rollup
+  \`\`\`
+- 7 new tests covering directory shape, valid JSON outputs, README content,
+  starter wiring, recipe filenames, and a regression test for the
+  double-stringify bug that broke first integration.
+
+### Why
+
+The 17+ loose files designlang already emits are the right pieces, but
+asking a user to zip them themselves is friction. \`pack\` is the same
+artifacts as one polished, downloadable, cite-able bundle.
+
+## [12.3.0] — 2026-05-05
+
+**Remix — restyle any site in a different design vocabulary.**
+
+A genuinely new product surface: take an extracted page-shape (sections,
+voice, page-intent, anatomy) and re-render it under one of six
+opinionated design vocabularies. "What would stripe.com look like if it
+had been designed brutalist? Or art-deco? Or cyberpunk?"
+
+### Added
+
+- **`designlang remix <url> --as <vocab>`** — re-renders the audited page
+  using the host's *own copy* (headings, ledes, CTA verbs from voice) but
+  styled in another vocabulary. Six built-ins:
+  - `brutalist` — hard edges, mono type, single screaming accent
+  - `swiss` — Helvetica, grids, restraint (post-Bauhaus default)
+  - `art-deco` — gold on ink, geometric ornament, vertical type
+  - `cyberpunk` — neon on midnight, scanlines, mono with glitch energy
+  - `soft-ui` — cushioned shapes, low contrast, Vision-OS-adjacent
+  - `editorial` — broadsheet serifs, generous whitespace, ink on paper
+- `--all` flag emits one HTML per vocabulary in a single extraction.
+- `--list` prints the vocabulary registry with blurbs.
+- New formatter: `src/formatters/remix.js` — maps every section role
+  (hero, feature-grid, pricing-table, stats, testimonial, faq,
+  logo-wall, steps, cta) to vocabulary-styled markup.
+- New module: `src/vocabularies/` — six self-contained vocab definitions
+  (tokens + font stack + signature CSS) plus `index.js` registry.
+- Hero-deduplication: real-world section walkers (especially on SPA
+  marketing pages) often emit a hero wrapper + an inner hero with the
+  same h1. Remix now dedupes by heading and excludes claimed headings
+  from the voice pool, so heading-less sections (cta bands, logo walls)
+  don't re-render an already-claimed heading.
+- 14 new tests (350 total, all passing). Cover registry shape,
+  per-vocab token validity, dedup, XSS escaping, missing-input errors.
+
+Why: Grade (v12.1) is the audit, Battle (v12.2) is the comparison,
+Remix is the *transformation*. Pure visual moat — no competitor
+(Dembrandt, Superposition, html.to.design, Builder Visual Copilot)
+ships site-shape-preserving vocabulary swap.
+
 ## [12.2.0] — 2026-05-02
 
 **Battle cards + design score badges — distribution + virality on top of Grade.**

package/README.md

@@ -26,8 +26,11 @@ It also goes where extractors don't: **layout patterns**, **responsive behavior
 
 ```bash
 npx designlang https://stripe.com                      # extract everything
-npx designlang grade https://stripe.com --badge        # report card + SVG badge  ← v12.2
-npx designlang battle stripe.com vercel.com            # head-to-head graded fight ← v12.2
+npx designlang pack stripe.com                         # one polished design-system directory ← v12.4
+npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary       ← v12.3
+npx designlang remix stripe.com --all                  # emit all 6 vocabs at once           ← v12.3
+npx designlang grade https://stripe.com --badge        # report card + SVG badge             ← v12.2
+npx designlang battle stripe.com vercel.com            # head-to-head graded fight           ← v12.2
 npx designlang clone https://stripe.com                # working Next.js starter
 npx designlang --full https://stripe.com               # screenshots + responsive + interactions
 ```
@@ -65,6 +68,7 @@ Each run writes 17+ files to `./design-extract-output/`. The headline outputs:
 | `*-grade.html` | **v12.1** Shareable Design Report Card (letter grade + evidence) |
 | `*-grade.svg` | **v12.2** Shields.io-style design-score badge (drop into any README) |
 | `*-battle.html` | **v12.2** Head-to-head graded battle card from `designlang battle` |
+| `*-remix.<vocab>.html` | **v12.3** Site restyled in another vocabulary — brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |
 
 Multi-platform (`--platforms web,ios,android,flutter,wordpress,all`) adds `ios/`, `android/`, `flutter/`, and a WordPress block theme. `--emit-agent-rules` adds Cursor / Claude Code / generic agent rule files.
 
@@ -124,8 +128,10 @@ designlang mcp                              # stdio MCP server for Cursor / Clau
 | Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
 | Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
 | Grade (v12.1) | `designlang grade <url>` | Shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence, strengths + fixes |
-| Battle (NEW v12.2) | `designlang battle <A> <B>` | Head-to-head graded battle card with verdict, dimension table, palette comparison |
-| Badge (NEW v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/<host>.svg` |
+| Battle (v12.2) | `designlang battle <A> <B>` | Head-to-head graded battle card with verdict, dimension table, palette comparison |
+| Badge (v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/<host>.svg` |
+| Remix (v12.3) | `designlang remix <url> --as <vocab>` | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). `--all` emits all 6 |
+| Pack (NEW v12.4) | `designlang pack <url>` | Bundle every output (tokens / components / Storybook / starter / prompts) into one polished design-system directory |
 | Watch | `designlang watch <url>` | Monitor for design changes on interval |
 | Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |
 | Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
@@ -180,6 +186,8 @@ Commands:
   score <url>                       Rate design quality (7 categories, A-F, bar chart)
   grade <url>                       Generate a shareable HTML Design Report Card (--format html|md|json|svg|all, --badge, --open)
   battle <urlA> <urlB>              Head-to-head graded battle card (--format html|md|json|all, --open)
+  remix <url>                       Restyle in another vocabulary (--as brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial, --all, --list, --open)
+  pack <url>                        Bundle every output into one design-system directory (--with-clone, --open)
   watch <url>                       Monitor for design changes on interval
   diff <urlA> <urlB>                Compare two sites' design languages
   brands <urls...>                  Multi-brand comparison matrix

package/bin/design-extract.js

@@ -43,11 +43,13 @@ import { syncDesign } from '../src/sync.js';
 import { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from '../src/multibrand.js';
 import { generateClone } from '../src/clone.js';
 import { watchSite } from '../src/watch.js';
-import { diffDarkMode } from '../src/darkdiff.js';
 import { applyDesign } from '../src/apply.js';
 import { formatGrade, formatGradeMarkdown } from '../src/formatters/grade.js';
 import { formatBattle, formatBattleMarkdown } from '../src/formatters/battle.js';
 import { formatScoreBadge } from '../src/formatters/badge.js';
+import { formatRemix } from '../src/formatters/remix.js';
+import { VOCABULARIES, getVocabulary, listVocabularies } from '../src/vocabularies/index.js';
+import { buildPack } from '../src/pack.js';
 import { nameFromUrl } from '../src/utils.js';
 
 function validateUrl(url) {
@@ -1102,6 +1104,127 @@ program
     }
   });
 
+// ── Remix command — restyle an extracted page in another vocabulary ─
+program
+  .command('remix <url>')
+  .description('Restyle a site in a different design vocabulary (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial)')
+  .option('-o, --out <dir>', 'output directory', './design-extract-output')
+  .option('-n, --name <name>', 'output file prefix (default: derived from URL)')
+  .option('--as <vocab>', 'vocabulary id (run `designlang remix --list` to see all)', 'brutalist')
+  .option('--list', 'list all vocabularies and exit')
+  .option('--all', 'emit one HTML per vocabulary (six files at once)')
+  .option('--open', 'open the result in the default browser')
+  .action(async (url, opts) => {
+    if (opts.list) {
+      console.log('');
+      console.log(chalk.bold('  Vocabularies'));
+      console.log('');
+      for (const v of listVocabularies()) {
+        console.log(`  ${chalk.cyan(v.id.padEnd(14))} ${chalk.gray(v.blurb)}`);
+      }
+      console.log('');
+      console.log(chalk.gray(`  Use: designlang remix <url> --as <id>`));
+      console.log('');
+      return;
+    }
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+
+    const vocabIds = opts.all ? Object.keys(VOCABULARIES) : [opts.as];
+    // Validate vocab early so we fail before extraction.
+    for (const id of vocabIds) getVocabulary(id);
+
+    const spinner = ora(`Extracting ${url}...`).start();
+    try {
+      const design = await extractDesignLanguage(url);
+
+      const outDir = resolve(opts.out);
+      mkdirSync(outDir, { recursive: true });
+      const prefix = opts.name || nameFromUrl(url);
+      const written = [];
+
+      for (const id of vocabIds) {
+        spinner.text = `Rendering ${id}...`;
+        const vocab = getVocabulary(id);
+        const html = formatRemix(design, vocab, { vocabId: id, version: PKG_VERSION });
+        const p = join(outDir, `${prefix}.remix.${id}.html`);
+        writeFileSync(p, html);
+        written.push(p);
+      }
+
+      spinner.stop();
+      console.log('');
+      console.log(`  ${chalk.bold('Remixed')} ${chalk.gray('·')} ${chalk.cyan(vocabIds.join(', '))} ${chalk.gray('·')} ${chalk.gray(url)}`);
+      console.log('');
+      for (const f of written) console.log(`  ${chalk.green('✓')} ${chalk.gray(f)}`);
+      console.log('');
+      console.log(chalk.gray(`  Open the .html in a browser. One file per vocabulary, fully self-contained.`));
+      console.log('');
+
+      if (opts.open && written.length > 0) {
+        const { spawn } = await import('child_process');
+        const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+        spawn(cmd, [written[0]], { detached: true, stdio: 'ignore' }).unref();
+      }
+    } catch (err) {
+      spinner.fail('Remix failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
+// ── Pack command — bundle every emitter into one design-system directory
+program
+  .command('pack <url>')
+  .description('Bundle every output (tokens, components, storybook, prompts, starter) into a single design-system directory')
+  .option('-o, --out <dir>', 'output directory (default: ./<host>-design-system)')
+  .option('--with-clone', 'include the full Next.js clone as the starter (slower; otherwise emits a minimal HTML starter)')
+  .option('--open', 'open the starter index.html in the default browser')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+
+    const spinner = ora(`Extracting ${url}...`).start();
+    try {
+      const design = await extractDesignLanguage(url);
+
+      const defaultDirName = `${nameFromUrl(url)}-design-system`;
+      const outDir = resolve(opts.out || defaultDirName);
+
+      spinner.text = 'Packing artifacts...';
+      const { files } = buildPack(design, {
+        outDir,
+        version: PKG_VERSION,
+        withClone: !!opts.withClone,
+      });
+
+      spinner.stop();
+      console.log('');
+      console.log(`  ${chalk.bold('Packed')} ${chalk.gray('·')} ${chalk.cyan(files.length)} files ${chalk.gray('·')} ${chalk.gray(url)}`);
+      console.log('');
+      console.log(`  ${chalk.green('✓')} ${chalk.bold(outDir)}`);
+      console.log('');
+      console.log(chalk.gray('  Top-level layout:'));
+      const top = ['README.md', 'LICENSE.txt', 'tokens/', 'components/', 'storybook/', 'starter/', 'prompts/', 'extras/'];
+      for (const t of top) console.log(`    ${chalk.gray('·')} ${t}`);
+      console.log('');
+      console.log(chalk.gray(`  Zip it:    cd ${outDir} && zip -r ../${defaultDirName}.zip .`));
+      console.log(chalk.gray(`  Storybook: cd ${outDir}/storybook && npm install && npm run storybook`));
+      console.log('');
+
+      if (opts.open) {
+        const starter = join(outDir, 'starter', 'index.html');
+        const { spawn } = await import('child_process');
+        const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+        spawn(cmd, [starter], { detached: true, stdio: 'ignore' }).unref();
+      }
+    } catch (err) {
+      spinner.fail('Pack failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 // ── Apply command ──────────────────────────────────────────
 program
   .command('apply <url>')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.2.0",
+  "version": "12.4.0",
   "description": "Extract the complete design language from any website and ship it — 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/chat.js

@@ -22,20 +22,6 @@ function isHex(s) {
   return typeof s === 'string' && /^#[0-9a-f]{3,8}$/i.test(s.trim());
 }
 
-function hexToRgb(hex) {
-  const m = String(hex).trim().toLowerCase().replace(/^#/, '');
-  const full = m.length === 3 ? m.split('').map((c) => c + c).join('') : m.slice(0, 6);
-  return {
-    r: parseInt(full.slice(0, 2), 16) || 0,
-    g: parseInt(full.slice(2, 4), 16) || 0,
-    b: parseInt(full.slice(4, 6), 16) || 0,
-  };
-}
-
-function rgbToHex({ r, g, b }) {
-  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
-}
-
 function opSharpenRadii(design, factor = 0.5) {
   const radii = design.borders?.radii || [];
   const next = radii.map((r) => ({ ...r, value: Math.max(0, Math.round((r.value || 0) * factor)) }));

package/src/formatters/css-vars.js

@@ -1,5 +1,3 @@
-import { pxToRem } from '../utils.js';
-
 export function formatCssVars(design) {
   const lines = [':root {'];