designlang 4.0.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -2
- package/bin/design-extract.js +1 -1
- package/package.json +1 -1
- package/src/crawler.js +10 -6
- package/src/extractors/interactions.js +3 -2
- package/src/extractors/responsive.js +3 -2
- package/website/.claude/launch.json +11 -0
- package/website/AGENTS.md +5 -0
- package/website/CLAUDE.md +1 -0
- package/website/README.md +36 -0
- package/website/app/favicon.ico +0 -0
- package/website/app/globals.css +432 -0
- package/website/app/layout.js +19 -0
- package/website/app/page.js +162 -0
- package/website/jsconfig.json +7 -0
- package/website/next.config.mjs +6 -0
- package/website/package-lock.json +912 -0
- package/website/package.json +15 -0
- package/website/public/file.svg +1 -0
- package/website/public/globe.svg +1 -0
- package/website/public/next.svg +1 -0
- package/website/public/vercel.svg +1 -0
- package/website/public/window.svg +1 -0
- package/designlang.png +0 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "./globals.css";
|
|
2
|
+
|
|
3
|
+
export const metadata = {
|
|
4
|
+
title: "DESIGNLANG — Reverse-Engineer Any Website's Design System",
|
|
5
|
+
description: "One command. 8 output files. Colors, typography, spacing, layout, accessibility, interactions, and more. npx designlang",
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default function RootLayout({ children }) {
|
|
9
|
+
return (
|
|
10
|
+
<html lang="en">
|
|
11
|
+
<head>
|
|
12
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
13
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
|
|
14
|
+
<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" />
|
|
15
|
+
</head>
|
|
16
|
+
<body>{children}</body>
|
|
17
|
+
</html>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
export default function Home() {
|
|
2
|
+
const marqueeText = "COLORS // TYPOGRAPHY // SPACING // LAYOUT // SHADOWS // ACCESSIBILITY // COMPONENTS // ANIMATIONS // BREAKPOINTS // CSS VARIABLES // INTERACTIONS // RESPONSIVE // FIGMA // TAILWIND // REACT // SHADCN // ";
|
|
3
|
+
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
{/* ── HERO ── */}
|
|
7
|
+
<section className="hero">
|
|
8
|
+
<h1 className="hero-title">
|
|
9
|
+
DESIGN
|
|
10
|
+
<br />
|
|
11
|
+
LANG
|
|
12
|
+
<span>reverse-engineer any website</span>
|
|
13
|
+
</h1>
|
|
14
|
+
<p className="hero-sub">
|
|
15
|
+
One command extracts the complete design language from any live website.
|
|
16
|
+
8 output files. 15 sections. 12 extractors. No other tool does this.
|
|
17
|
+
</p>
|
|
18
|
+
<a href="https://github.com/Manavarya09/design-extract" className="hero-cmd">
|
|
19
|
+
npx designlang https://vercel.com
|
|
20
|
+
</a>
|
|
21
|
+
<div className="scroll-hint">scroll down</div>
|
|
22
|
+
</section>
|
|
23
|
+
|
|
24
|
+
{/* ── STATS ── */}
|
|
25
|
+
<div className="stats-strip">
|
|
26
|
+
<div className="stat"><div className="stat-value">8</div><div className="stat-label">Output Files</div></div>
|
|
27
|
+
<div className="stat"><div className="stat-value">12</div><div className="stat-label">Extractors</div></div>
|
|
28
|
+
<div className="stat"><div className="stat-value">11</div><div className="stat-label">Component Types</div></div>
|
|
29
|
+
<div className="stat"><div className="stat-value">15</div><div className="stat-label">Markdown Sections</div></div>
|
|
30
|
+
<div className="stat"><div className="stat-value">7</div><div className="stat-label">Score Categories</div></div>
|
|
31
|
+
<div className="stat"><div className="stat-value">4</div><div className="stat-label">Viewports Crawled</div></div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
{/* ── MARQUEE ── */}
|
|
35
|
+
<div className="marquee">
|
|
36
|
+
<div className="marquee-inner">
|
|
37
|
+
{marqueeText}{marqueeText}{marqueeText}{marqueeText}
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
{/* ── OUTPUT FILES ── */}
|
|
42
|
+
<section>
|
|
43
|
+
<h2 className="section-title">8 Output Files</h2>
|
|
44
|
+
<div className="files-grid">
|
|
45
|
+
{[
|
|
46
|
+
{ 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.' },
|
|
47
|
+
{ num: '02', name: '*-preview.html', desc: 'Gorgeous dark-themed visual report with color swatches, type scale rendering, shadow cards, and accessibility score.' },
|
|
48
|
+
{ num: '03', name: '*-tailwind.config.js', desc: 'Drop-in Tailwind CSS theme extension with colors, fonts, spacing, radii, shadows, and screens.' },
|
|
49
|
+
{ num: '04', name: '*-variables.css', desc: 'CSS custom properties organized by category. Import directly into any project.' },
|
|
50
|
+
{ num: '05', name: '*-figma-variables.json', desc: 'Figma Variables import format with light/dark mode support. Hand off to designers instantly.' },
|
|
51
|
+
{ num: '06', name: '*-theme.js', desc: 'React/CSS-in-JS theme object compatible with Chakra UI, Stitches, and Vanilla Extract.' },
|
|
52
|
+
{ num: '07', name: '*-shadcn-theme.css', desc: 'shadcn/ui theme variables in the exact format it expects. Paste into globals.css.' },
|
|
53
|
+
{ num: '08', name: '*-design-tokens.json', desc: 'W3C Design Tokens community group format for tooling integration.' },
|
|
54
|
+
].map(f => (
|
|
55
|
+
<div key={f.num} className="file-card" data-num={f.num}>
|
|
56
|
+
<div className="file-name">{f.name}</div>
|
|
57
|
+
<div className="file-desc">{f.desc}</div>
|
|
58
|
+
</div>
|
|
59
|
+
))}
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
{/* ── WHAT IT EXTRACTS ── */}
|
|
64
|
+
<section className="section-red">
|
|
65
|
+
<div className="section-inner">
|
|
66
|
+
<h2 className="section-title">What It Extracts</h2>
|
|
67
|
+
<div className="features-list">
|
|
68
|
+
{[
|
|
69
|
+
{ name: 'Colors', cmd: 'automatic', desc: 'Full palette with primary/secondary/accent/neutral classification. Gradients. Background and text colors with usage context.' },
|
|
70
|
+
{ name: 'Typography', cmd: 'automatic', desc: 'Font families, type scale, heading/body styles, weight distribution, line heights, letter spacing.' },
|
|
71
|
+
{ name: 'Spacing', cmd: 'automatic', desc: 'All unique values with automatic base-unit detection. Identifies 4px/8px grids.' },
|
|
72
|
+
{ 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.' },
|
|
73
|
+
{ name: 'Shadows', cmd: 'automatic', desc: 'All box-shadows parsed and classified by visual weight (xs through xl).' },
|
|
74
|
+
{ name: 'Components', cmd: 'automatic', desc: '11 types: buttons, cards, inputs, links, navbars, footers, modals, dropdowns, tables, badges, avatars.' },
|
|
75
|
+
{ name: 'Accessibility', cmd: 'automatic', desc: 'WCAG 2.1 contrast ratios for every fg/bg color pair. Overall score and failing pairs.' },
|
|
76
|
+
{ name: 'Responsive', cmd: '--responsive', desc: 'Crawls at 4 viewports. Maps what changes between breakpoints — fonts, nav, columns, hamburger.' },
|
|
77
|
+
{ name: 'Interactions', cmd: '--interactions', desc: 'Hovers and focuses interactive elements. Records actual style transitions — hover colors, focus rings, active states.' },
|
|
78
|
+
{ name: 'CSS Variables', cmd: 'automatic', desc: 'All :root custom properties categorized by type — colors, spacing, typography, shadows, radii.' },
|
|
79
|
+
{ name: 'Animations', cmd: 'automatic', desc: 'Transitions, easing functions, durations, and @keyframes rules.' },
|
|
80
|
+
{ name: 'Design Score', cmd: 'automatic', desc: '7-category quality rating (A-F) — color discipline, typography, spacing, shadows, radii, accessibility, tokenization.' },
|
|
81
|
+
].map(f => (
|
|
82
|
+
<div key={f.name} className="feature">
|
|
83
|
+
<div className="feature-name">{f.name}</div>
|
|
84
|
+
<div className="feature-cmd">{f.cmd}</div>
|
|
85
|
+
<div className="feature-desc">{f.desc}</div>
|
|
86
|
+
</div>
|
|
87
|
+
))}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</section>
|
|
91
|
+
|
|
92
|
+
{/* ── COMMANDS ── */}
|
|
93
|
+
<section>
|
|
94
|
+
<h2 className="section-title">Commands</h2>
|
|
95
|
+
<div className="commands-grid">
|
|
96
|
+
{[
|
|
97
|
+
{ name: 'designlang <url>', desc: 'Extract the full design language. Generates 8 output files.' },
|
|
98
|
+
{ name: 'designlang <url> --full', desc: 'Everything at once — screenshots, responsive, interactions.' },
|
|
99
|
+
{ name: 'designlang diff <A> <B>', desc: 'Compare two sites side-by-side. Outputs markdown and HTML.' },
|
|
100
|
+
{ name: 'designlang brands <urls...>', desc: 'Multi-brand comparison matrix. Color overlap, typography, a11y scores.' },
|
|
101
|
+
{ name: 'designlang clone <url>', desc: 'Generate a working Next.js starter with the extracted design applied.' },
|
|
102
|
+
{ name: 'designlang score <url>', desc: 'Rate design system quality. 7 categories, A-F grade, actionable issues.' },
|
|
103
|
+
{ name: 'designlang watch <url>', desc: 'Monitor a site for design changes on a configurable interval.' },
|
|
104
|
+
{ name: 'designlang sync <url>', desc: 'Update local token files from the live site. Code-first source of truth.' },
|
|
105
|
+
{ name: 'designlang history <url>', desc: 'View how a site\'s design has evolved over time.' },
|
|
106
|
+
].map(c => (
|
|
107
|
+
<div key={c.name} className="command-card">
|
|
108
|
+
<div className="command-name">{c.name}</div>
|
|
109
|
+
<div className="command-desc">{c.desc}</div>
|
|
110
|
+
</div>
|
|
111
|
+
))}
|
|
112
|
+
</div>
|
|
113
|
+
</section>
|
|
114
|
+
|
|
115
|
+
{/* ── SCORE DEMO ── */}
|
|
116
|
+
<section className="section-cream">
|
|
117
|
+
<div className="section-inner">
|
|
118
|
+
<h2 className="section-title">Design System Scoring</h2>
|
|
119
|
+
<div className="score-demo">
|
|
120
|
+
<div>$ designlang score https://vercel.com</div>
|
|
121
|
+
<br />
|
|
122
|
+
<div> <span className="score-grade">68</span>/100 Grade: D</div>
|
|
123
|
+
<br />
|
|
124
|
+
<div> Color Discipline ██████████░░░░░░░░░░ 50</div>
|
|
125
|
+
<div> Typography ██████████████░░░░░░ 70</div>
|
|
126
|
+
<div> Spacing System ████████████████░░░░ 80</div>
|
|
127
|
+
<div> Shadows ██████████░░░░░░░░░░ 50</div>
|
|
128
|
+
<div> Border Radii ████████░░░░░░░░░░░░ 40</div>
|
|
129
|
+
<div> Accessibility ███████████████████░ 94</div>
|
|
130
|
+
<div> Tokenization ████████████████████ 100</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
{/* ── AGENT SKILL ── */}
|
|
136
|
+
<section>
|
|
137
|
+
<h2 className="section-title">Agent Skill</h2>
|
|
138
|
+
<p style={{ fontSize: '18px', lineHeight: '1.7', color: '#aaa', maxWidth: '700px', marginBottom: '32px' }}>
|
|
139
|
+
Works with <strong style={{ color: '#fff' }}>Claude Code, Cursor, Codex, and 40+ AI coding agents</strong> via the skills ecosystem.
|
|
140
|
+
</p>
|
|
141
|
+
<div className="hero-cmd" style={{ display: 'inline-block' }}>
|
|
142
|
+
npx skills add Manavarya09/design-extract
|
|
143
|
+
</div>
|
|
144
|
+
</section>
|
|
145
|
+
|
|
146
|
+
{/* ── FOOTER ── */}
|
|
147
|
+
<footer>
|
|
148
|
+
<div className="footer-title">DESIGNLANG</div>
|
|
149
|
+
<p style={{ color: '#888', fontSize: '14px' }}>
|
|
150
|
+
Built by Manavarya Singh. MIT Licensed. Open Source.
|
|
151
|
+
</p>
|
|
152
|
+
<div className="footer-links">
|
|
153
|
+
<a href="https://github.com/Manavarya09/design-extract">GitHub</a>
|
|
154
|
+
<a href="https://www.npmjs.com/package/designlang">npm</a>
|
|
155
|
+
</div>
|
|
156
|
+
<div className="footer-copy">
|
|
157
|
+
No other tool extracts layout patterns, responsive behavior, interaction states, and scores design quality from a single command.
|
|
158
|
+
</div>
|
|
159
|
+
</footer>
|
|
160
|
+
</>
|
|
161
|
+
);
|
|
162
|
+
}
|