designlang 4.0.0 → 4.0.1

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <h1 align="center">designlang</h1>
+  <h1 align="center">DESIGNLANG</h1>
   <p align="center">Reverse-engineer any website's complete design system in one command.</p>
 </p>
 
@@ -7,6 +7,7 @@
   <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
   <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract" alt="license"></a>
   <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
+  <a href="https://website-five-lime-65.vercel.app"><img src="https://img.shields.io/badge/website-live-red" alt="website"></a>
 </p>
 
 ---
@@ -127,6 +128,47 @@ designlang brands stripe.com vercel.com github.com linear.app
 
 Generates a matrix with color overlap analysis, typography comparison, spacing systems, and accessibility scores. Outputs both `brands.md` and `brands.html`.
 
+### 6. Clone Command
+
+Generate a working Next.js app with the extracted design applied:
+
+```bash
+designlang clone https://stripe.com
+cd cloned-design && npm install && npm run dev
+```
+
+One command → a running app with the site's colors, fonts, spacing, and component patterns.
+
+### 7. Design System Scoring
+
+Rate any site's design quality across 7 categories:
+
+```bash
+designlang score https://vercel.com
+```
+
+```
+  68/100  Grade: D
+
+  Color Discipline     ██████████░░░░░░░░░░ 50
+  Typography           ██████████████░░░░░░ 70
+  Spacing System       ████████████████░░░░ 80
+  Shadows              ██████████░░░░░░░░░░ 50
+  Border Radii         ████████░░░░░░░░░░░░ 40
+  Accessibility        ███████████████████░ 94
+  Tokenization         ████████████████████ 100
+```
+
+### 8. Watch Mode
+
+Monitor a site for design changes:
+
+```bash
+designlang watch https://stripe.com --interval 60
+```
+
+Checks hourly and alerts when colors, fonts, or accessibility scores change.
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -134,12 +176,16 @@ Generates a matrix with color overlap analysis, typography comparison, spacing s
 | Base extraction | `designlang <url>` | Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |
 | Layout system | automatic | Grid patterns, flex usage, container widths, gap values |
 | Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |
+| Design scoring | automatic | 7-category quality rating (A-F) with actionable issues |
 | Dark mode | `--dark` | Extracts dark color scheme |
 | Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
 | Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
 | Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
 | Interactions | `--interactions` | Capture hover/focus/active state transitions |
 | Everything | `--full` | Enable screenshots + responsive + interactions |
+| 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 |
+| 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 |
 | Sync | `designlang sync <url>` | Update local tokens from live site |
@@ -167,6 +213,9 @@ Options:
   --verbose               Detailed progress output
 
 Commands:
+  clone <url>             Generate a working Next.js starter from extracted design
+  score <url>             Rate design quality (7 categories, A-F, bar chart)
+  watch <url>             Monitor for design changes on interval
   diff <urlA> <urlB>      Compare two sites' design languages
   brands <urls...>        Multi-brand comparison matrix
   sync <url>              Sync local tokens with live site
@@ -203,12 +252,13 @@ Running `designlang https://vercel.com --full`:
   Shadows: 11 unique shadows
   Radii: 10 unique values
   Breakpoints: 45 breakpoints
-  Components: 4 patterns detected
+  Components: 11 types detected
   CSS Vars: 407 custom properties
   Layout: 55 grids, 492 flex containers
   Responsive: 4 viewports, 3 breakpoint changes
   Interactions: 8 state changes captured
   A11y: 94% WCAG score (7 failing pairs)
+  Design Score: 68/100 (D) — 4 issues
 ```
 
 ## How It Works
@@ -230,6 +280,10 @@ npx skills add Manavarya09/design-extract
 
 In Claude Code, use `/extract-design <url>`.
 
+## Website
+
+**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — the brutalist product page.
+
 ## Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!

package/bin/design-extract.js

@@ -28,7 +28,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('4.0.0');
+  .version('4.0.1');
 
 // ── Main command: extract ──────────────────────────────────────
 program

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/crawler.js

@@ -14,9 +14,11 @@ export async function crawlPage(url, options = {}) {
   });
   const page = await context.newPage();
 
-  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  // Wait for network to settle — but don't hang on sites with persistent connections
+  await page.waitForLoadState('networkidle').catch(() => {});
   if (wait > 0) await page.waitForTimeout(wait);
-  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(() => document.fonts.ready).catch(() => {});
 
   const title = await page.title();
   const lightData = await extractPageData(page);
@@ -33,8 +35,9 @@ export async function crawlPage(url, options = {}) {
     const internalLinks = await discoverInternalLinks(page, url, depth);
     for (const link of internalLinks) {
       try {
-        await page.goto(link, { waitUntil: 'networkidle', timeout: 20000 });
-        await page.evaluate(() => document.fonts.ready);
+        await page.goto(link, { waitUntil: 'domcontentloaded', timeout: 20000 });
+        await page.waitForLoadState('networkidle').catch(() => {});
+        await page.evaluate(() => document.fonts.ready).catch(() => {});
         const pageData = await extractPageData(page);
         additionalPages.push({ url: link, data: pageData });
       } catch { /* skip failed pages */ }
@@ -50,8 +53,9 @@ export async function crawlPage(url, options = {}) {
       colorScheme: 'dark',
     });
     const darkPage = await darkContext.newPage();
-    await darkPage.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
-    await darkPage.evaluate(() => document.fonts.ready);
+    await darkPage.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    await darkPage.waitForLoadState('networkidle').catch(() => {});
+    await darkPage.evaluate(() => document.fonts.ready).catch(() => {});
     darkData = await extractPageData(darkPage);
     await darkContext.close();
   } else {

package/src/extractors/interactions.js

@@ -8,9 +8,10 @@ export async function captureInteractions(url, options = {}) {
   const context = await browser.newContext({ viewport: { width, height } });
   const page = await context.newPage();
 
-  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  await page.waitForLoadState('networkidle').catch(() => {});
   if (wait > 0) await page.waitForTimeout(wait);
-  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(() => document.fonts.ready).catch(() => {});
 
   const results = { buttons: [], links: [], inputs: [] };
 

package/src/extractors/responsive.js

@@ -20,9 +20,10 @@ export async function captureResponsive(url, options = {}) {
     const page = await context.newPage();
 
     try {
-      await page.goto(url, { waitUntil: 'networkidle', timeout: 20000 });
+      await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 });
+      await page.waitForLoadState('networkidle').catch(() => {});
       if (wait > 0) await page.waitForTimeout(wait);
-      await page.evaluate(() => document.fonts.ready);
+      await page.evaluate(() => document.fonts.ready).catch(() => {});
 
       const data = await page.evaluate(() => {
         const body = document.body;

package/website/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "website",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000
+    }
+  ]
+}

package/website/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

package/website/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/website/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/website/app/globals.css

@@ -0,0 +1,432 @@
+:root {
+  --red: #ff0000;
+  --black: #0a0a0a;
+  --white: #f5f0e8;
+  --cream: #e8e0d0;
+  --yellow: #ffdd00;
+  --gray: #333;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--black);
+  color: var(--white);
+  font-family: 'Inter', sans-serif;
+  overflow-x: hidden;
+  cursor: crosshair;
+}
+
+::selection {
+  background: var(--red);
+  color: var(--black);
+}
+
+a { color: inherit; }
+
+/* ── HERO ── */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-bottom: 4px solid var(--red);
+  overflow: hidden;
+}
+
+.hero::before {
+  content: 'DESIGNLANG DESIGNLANG DESIGNLANG DESIGNLANG DESIGNLANG ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 300%;
+  font-family: 'Unbounded', sans-serif;
+  font-size: 14vw;
+  font-weight: 900;
+  color: rgba(255, 0, 0, 0.03);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: scroll-text 20s linear infinite;
+  line-height: 1;
+}
+
+@keyframes scroll-text {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-33.33%); }
+}
+
+.hero-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: clamp(4rem, 12vw, 10rem);
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -0.04em;
+  line-height: 0.9;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-title span {
+  display: block;
+  color: var(--red);
+  font-size: 0.4em;
+  letter-spacing: 0.2em;
+  margin-top: 16px;
+}
+
+.hero-sub {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: clamp(14px, 1.5vw, 18px);
+  color: #888;
+  margin-top: 32px;
+  text-align: center;
+  max-width: 600px;
+  line-height: 1.6;
+  z-index: 1;
+}
+
+.hero-cmd {
+  margin-top: 48px;
+  background: #111;
+  border: 2px solid var(--red);
+  padding: 20px 40px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: clamp(16px, 2vw, 22px);
+  color: var(--yellow);
+  position: relative;
+  z-index: 1;
+  transition: all 0.2s;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.hero-cmd:hover {
+  background: var(--red);
+  color: var(--black);
+  transform: translate(-4px, -4px);
+  box-shadow: 4px 4px 0 var(--yellow);
+}
+
+.hero-cmd::before {
+  content: '$ ';
+  color: var(--red);
+}
+
+.hero-cmd:hover::before {
+  color: var(--black);
+}
+
+.scroll-hint {
+  position: absolute;
+  bottom: 40px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: #444;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+/* ── SECTION LAYOUT ── */
+section {
+  padding: 100px 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.section-red {
+  background: var(--red);
+  color: var(--black);
+  max-width: 100%;
+  padding: 80px 24px;
+}
+
+.section-cream {
+  background: var(--cream);
+  color: var(--black);
+  max-width: 100%;
+  padding: 80px 24px;
+}
+
+.section-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.section-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+  margin-bottom: 48px;
+  line-height: 1;
+}
+
+.section-title::after {
+  content: ' ///';
+  color: var(--red);
+}
+
+.section-red .section-title::after {
+  color: var(--black);
+}
+
+.section-cream .section-title::after {
+  color: var(--red);
+}
+
+/* ── OUTPUT FILES ── */
+.files-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2px;
+}
+
+.file-card {
+  background: #111;
+  border: 2px solid #222;
+  padding: 28px;
+  transition: all 0.15s;
+  position: relative;
+  overflow: hidden;
+}
+
+.file-card:hover {
+  border-color: var(--red);
+  transform: translate(-2px, -2px);
+  box-shadow: 2px 2px 0 var(--red);
+}
+
+.file-card::before {
+  content: attr(data-num);
+  position: absolute;
+  top: -10px;
+  right: 10px;
+  font-family: 'Unbounded', sans-serif;
+  font-size: 80px;
+  font-weight: 900;
+  color: rgba(255, 0, 0, 0.06);
+  line-height: 1;
+}
+
+.file-name {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 15px;
+  color: var(--yellow);
+  margin-bottom: 8px;
+}
+
+.file-desc {
+  font-size: 14px;
+  color: #888;
+  line-height: 1.5;
+}
+
+/* ── FEATURES ── */
+.features-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 0;
+}
+
+.feature {
+  padding: 32px;
+  border: 1px solid #222;
+  transition: all 0.15s;
+}
+
+.feature:hover {
+  background: #111;
+  border-color: var(--red);
+}
+
+.feature-name {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.feature-cmd {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: var(--yellow);
+  margin-bottom: 12px;
+}
+
+.feature-desc {
+  font-size: 14px;
+  color: #888;
+  line-height: 1.5;
+}
+
+/* ── SCORE DEMO ── */
+.score-demo {
+  background: #111;
+  border: 2px solid var(--red);
+  padding: 40px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  line-height: 2;
+  overflow-x: auto;
+  color: #ccc;
+}
+
+.score-grade {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 64px;
+  font-weight: 900;
+  color: var(--red);
+  display: inline;
+}
+
+/* ── COMMANDS ── */
+.commands-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 2px;
+}
+
+.command-card {
+  background: var(--black);
+  padding: 32px;
+  border: 2px solid rgba(255,0,0,0.3);
+  transition: all 0.15s;
+}
+
+.command-card:hover {
+  border-color: var(--red);
+  background: rgba(255, 0, 0, 0.05);
+}
+
+.command-name {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--yellow);
+  margin-bottom: 12px;
+}
+
+.command-desc {
+  font-size: 14px;
+  color: #ccc;
+  line-height: 1.5;
+}
+
+/* ── STATS STRIP ── */
+.stats-strip {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 2px solid var(--red);
+  border-bottom: 2px solid var(--red);
+}
+
+.stat {
+  flex: 1;
+  min-width: 150px;
+  padding: 32px 24px;
+  text-align: center;
+  border-right: 1px solid #222;
+}
+
+.stat:last-child { border-right: none; }
+
+.stat-value {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 48px;
+  font-weight: 900;
+  color: var(--red);
+  line-height: 1;
+}
+
+.stat-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  margin-top: 8px;
+}
+
+/* ── FOOTER ── */
+footer {
+  padding: 60px 24px;
+  text-align: center;
+  border-top: 4px solid var(--red);
+}
+
+footer a {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+footer a:hover {
+  color: var(--red);
+}
+
+.footer-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 24px;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin-bottom: 16px;
+}
+
+.footer-links {
+  display: flex;
+  gap: 32px;
+  justify-content: center;
+  margin-top: 24px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+}
+
+.footer-copy {
+  margin-top: 48px;
+  font-size: 12px;
+  color: #444;
+}
+
+/* ── MARQUEE ── */
+.marquee {
+  overflow: hidden;
+  white-space: nowrap;
+  border-top: 2px solid #222;
+  border-bottom: 2px solid #222;
+  padding: 12px 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: #444;
+}
+
+.marquee-inner {
+  display: inline-block;
+  animation: marquee 30s linear infinite;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* ── RESPONSIVE ── */
+@media (max-width: 768px) {
+  .features-list { grid-template-columns: 1fr; }
+  .commands-grid { grid-template-columns: 1fr; }
+  .files-grid { grid-template-columns: 1fr; }
+  .stats-strip { flex-direction: column; }
+  .stat { border-right: none; border-bottom: 1px solid #222; }
+  .hero-cmd { font-size: 14px; padding: 16px 24px; }
+}