designlang 3.0.0 → 4.0.1

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; }
+}

package/website/app/layout.js

@@ -0,0 +1,19 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "DESIGNLANG — Reverse-Engineer Any Website's Design System",
+  description: "One command. 8 output files. Colors, typography, spacing, layout, accessibility, interactions, and more. npx designlang",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/website/app/page.js

@@ -0,0 +1,162 @@
+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}
+        </div>
+      </div>
+
+      {/* ── 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>
+            </div>
+          ))}
+        </div>
+      </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>
+        </div>
+      </section>
+
+      {/* ── COMMANDS ── */}
+      <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>
+      </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>
+      </section>
+
+      {/* ── AGENT SKILL ── */}
+      <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>
+      </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>
+        <div className="footer-copy">
+          No other tool extracts layout patterns, responsive behavior, interaction states, and scores design quality from a single command.
+        </div>
+      </footer>
+    </>
+  );
+}

package/website/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

package/website/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;