[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81380":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":14,"starSnapshotCount":14,"syncStatus":45,"lastSyncTime":46,"discoverSource":47},81380,"design.md","sunil-dsb\u002Fdesign.md","sunil-dsb","Generate DESIGN.md, Tailwind themes, tokens, and prompts from any website.","https:\u002F\u002Fdesign-md-1047885385938.asia-south2.run.app",null,"TypeScript",41,1,0,3,0.9,"MIT License",false,"main",true,[22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"ai-design","ai-design-tool","awesome-lists","chrome","claude-design","code-quality","compiler","css","design","design-md","design-system","design-tokens","google-stitch","md-file","md-file-generator","npm","react-native","tailiwindcss","vibe-coding","vibe-design","2026-06-12 02:04:14","\u003Cdiv align=\"center\">\n\n\u003Cimg src=\".\u002Fpublic\u002Fhero.webp\" alt=\"design.md  extract design systems from any website\" width=\"100%\" \u002F>\n\n# design.md\n\n### Paste a URL. Get a DESIGN.md your AI agent can read.\n\nExtract real design systems colors, typography, spacing, tokens from any public website.\nBuilt for Claude Code, Cursor, v0, Lovable, Replit, Windsurf, and GitHub Copilot.\n\n\u003Cbr \u002F>\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green.svg)](LICENSE)\n[![Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-0.1.0-blue.svg)](CHANGELOG.md)\n[![Stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fsunil-dsb\u002Fdesign.md?style=social)](https:\u002F\u002Fgithub.com\u002Fsunil-dsb\u002Fdesign.md\u002Fstargazers)\n[![Tailwind v4](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftailwind-v4-38bdf8.svg)](https:\u002F\u002Ftailwindcss.com)\n[![Built on](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbuilt_on-Google's_DESIGN.md_spec-7a73ff.svg)](https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Fdesign-md\u002Foverview)\n\n\u003Cbr \u002F>\n\n\u003Ca href=\"https:\u002F\u002Fdesign-md-1047885385938.us-central1.run.app\">\u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fexternal-link.svg?color=%2322c55e\" width=\"14\" align=\"center\" alt=\"\">  \u003Cb>Live demo\u003C\u002Fb>\u003C\u002Fa>  · \n\u003Ca href=\".\u002Fexamples\">Examples\u003C\u002Fa>  · \n\u003Ca href=\"#roadmap\">Roadmap\u003C\u002Fa>  · \n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsunil-dsb\u002Fdesign.md\">\u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fstar.svg?color=%23f59e0b\" width=\"14\" align=\"center\" alt=\"\">  Star us\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\n---\n\n## What it does\n\nWhen you ask AI to _\"build me a landing page like Stripe,\"_ the agent doesn't actually know what Stripe looks like. It averages millions of pages and ships you something generic.\n\n`design.md` fixes that by extracting the **real** design system from any website and writing it into a file your AI agent can read **before** it generates any UI.\n\n| File            | What it explains to the agent       |\n| --------------- | ----------------------------------- |\n| `README.md`     | What the project does               |\n| `AGENTS.md`     | How the AI should build it          |\n| **`DESIGN.md`** | **How the UI should look and feel** |\n\nDrop a `DESIGN.md` next to your `README.md`. Tell your agent: _\"Read DESIGN.md before generating UI.\"_ Every component it makes now follows your colors, typography, and spacing not the internet's average.\n\n---\n\n## Works with\n\n\u003Cdiv align=\"center\">\n\n**Claude Code** · **Cursor** · **v0** · **Lovable** · **Replit** · **Windsurf** · **GitHub Copilot**\n\n\u003C\u002Fdiv>\n\nIf your tool reads `AGENTS.md` or `CLAUDE.md`, it reads `DESIGN.md`. Plain markdown, no plugin required.\n\n---\n\n## In 30 seconds\n\n```bash\n# 1. Open the live tool\nhttps:\u002F\u002Fdesign-md-1047885385938.us-central1.run.app\n\n# 2. Paste any public URL\nstripe.com\n\n# 3. Get back a folder\nDESIGN.md         tailwind.css       shadcn-theme.css\nprompts\u002F          tokens.json        proof.html\n\n# 4. Drop DESIGN.md in your repo. Then tell your agent:\n\"Read DESIGN.md before generating any UI.\"\n```\n\nNo signup. No API key. No waitlist. Free, open source, MIT licensed.\n\n---\n\n## What gets extracted\n\n- 🎨 **Colors** OKLCH ΔE perceptual clustering, not hex-string dedup. 4-layer stability classification so a sale banner can't pollute your primary brand color.\n- 🔤 **Typography** full type scale, weights, line-heights, letter-spacing, OpenType features.\n- 📐 **Spacing** base unit auto-detected (4\u002F8-pt grid), scale steps, section spacing.\n- 🌗 **Dark mode** 4 detection methods, full variable diff between modes.\n- 🪟 **Shadows + radii** multi-layer parsing, named elevation ramps.\n- 🎯 **Pixel-fidelity proof** every output verified against the live site at ΔE\u003C12 with image-region exclusion.\n- 📍 **Per-token provenance** every value tagged with source page, CSS variable name, and structural region (nav \u002F header \u002F main \u002F footer \u002F aside).\n\n---\n\n## How it works\n\n```text\nURL\n ↓\n[1] Playwright crawler · 5 viewports × up to 8 pages\n ↓\n[2] DOM + CSS · interaction states · dark-mode toggle · screenshots\n ↓\n[3] OKLCH ΔE clustering · 4-layer stability · role naming\n ↓\n[4] DESIGN.md · tailwind.css · shadcn theme · 5 prompt packs · tokens.json\n```\n\nDeterministic. Same URL → same output. The 4 gallery brands ship with agent-written `DESIGN.md` for premium quality; on-demand extractions use deterministic role naming for free, reproducible output.\n\n---\n\n## Why this is different\n\n> Compared against [**designlang**](https:\u002F\u002Fgithub.com\u002FManavarya09\u002Fdesign-extract) (open-source CLI + emitters, MIT) and [**getdesign.md**](https:\u002F\u002Fgetdesign.md) (the popular paid DESIGN.md generator, also reachable at `getdesign.app`).\n\n### Shipped today\n\n| Capability                       |                                                  **design.md**                                                   |                                                   designlang                                                    |                                               getdesign.md                                               |\n| -------------------------------- | :--------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------: |\n| Color clustering                 |   \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  OKLCH ΔE    |                                                    sRGB only                                                    |                                              LLM heuristic                                               |\n| Pixel-fidelity verification      |  \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  ΔE < 12   |           \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">           |       \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">        |\n| 4-layer stability classification |           \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">           |           \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">           |       \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">        |\n| Multi-page crawl + dark-mode     | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  up to 8 pages |          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">           |       \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">       |\n| Open source                      |      \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  MIT      |     \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  MIT      | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">  closed |\n| Pricing                          | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  Free forever  | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">  Free forever |  \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">  Paid  |\n| Free, no signup or waitlist      |           \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">           |          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fcheck.svg?color=%2322c55e\" width=\"16\" alt=\"yes\">           |       \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\">        |\n\n### On our roadmap\n\n| Capability                                 |                                                      **design.md**                                                      |                                         designlang                                          |                                        getdesign.md                                         |\n| ------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |\n| AI prompt packs                            | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fclock.svg?color=%23f59e0b\" width=\"16\" alt=\"planned\">  5 agents planned |                                      4 agents shipped                                       | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> |\n| Tailwind v4 `@theme` emit                  |     \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fclock.svg?color=%23f59e0b\" width=\"16\" alt=\"planned\">  planned      |                                           v3 only                                           | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> |\n| shadcn theme emit (17-slot, WCAG-verified) |     \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fclock.svg?color=%23f59e0b\" width=\"16\" alt=\"planned\">  planned      |                                           partial                                           | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> |\n| Regenerated OKLCH ramps                    |     \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fclock.svg?color=%23f59e0b\" width=\"16\" alt=\"planned\">  planned      |                                        raw observed                                         | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> |\n| Public accuracy scoreboard                 |     \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fclock.svg?color=%23f59e0b\" width=\"16\" alt=\"planned\">  planned      | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> | \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fminus.svg?color=%236b7280\" width=\"16\" alt=\"no\"> |\n\n**Where we win today:** perceptual color clustering, pixel-fidelity verification, and stability classification the three accuracy levers nobody else has.\n**Where they ship and we don't yet:** designlang has 4 working AI prompt packs in production; we have zero. We're catching up.\n**The longer-term wedge:** regenerated coherent ramps (not raw observed colors) + public accuracy scoreboard measuring our output against hand-curated gold tokens.\n\n---\n\n## Examples\n\nFour gold-standard extractions ship with the repo:\n\n| Brand                            | Sector          | Files                                                    |\n| -------------------------------- | --------------- | -------------------------------------------------------- |\n| [Stripe](.\u002Fexamples\u002Fstripe\u002F)     | Payments        | `DESIGN.md`, `tokens.json`, `preview.html`, `proof.html` |\n| [Linear](.\u002Fexamples\u002Flinear\u002F)     | Issue tracking  | `DESIGN.md`, `tokens.json`, `preview.html`, `proof.html` |\n| [Vercel](.\u002Fexamples\u002Fvercel\u002F)     | Frontend cloud  | `DESIGN.md`, `tokens.json`, `preview.html`, `proof.html` |\n| [Supabase](.\u002Fexamples\u002Fsupabase\u002F) | Postgres + auth | `DESIGN.md`, `tokens.json`, `preview.html`, `proof.html` |\n\nEach `DESIGN.md` is ~300 lines of brand-specific prose tied to extracted values. The HTML artifacts are stand-alone open them in a browser to inspect.\n\n---\n\n## Quickstart (run locally)\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fsunil-dsb\u002Fdesign.md.git\ncd design.md\npnpm install\npnpm dev\n```\n\nOpen \u003Chttp:\u002F\u002Flocalhost:3000>.\n\nExtract from the CLI:\n\n```bash\npnpm engine:extract https:\u002F\u002Fstripe.com --fast\n```\n\nOutput lands in `output\u002F\u003Cdomain>\u002F`.\n\n---\n\n## Project structure\n\n```text\napp\u002F             Next.js 16 app router (landing, \u002Fwhy, \u002Fextract, \u002Fapi\u002Fextract)\ncomponents\u002F      Navbar, Hero, Gallery, SpecPreview, Footer, etc.\nlib\u002Fengine\u002F      Forked extraction engine (cluster, crawl, proof, validate, ...)\nbin\u002F             CLI shims  pnpm engine:extract \u002F engine:proof \u002F engine:validate\nicons\u002F           Inline SVG brand + utility icons\nexamples\u002F        Gold-standard DESIGN.md extractions per brand\noutput\u002F          Per-extraction artifacts (gitignored)\npublic\u002F          Static assets (hero image, footer image, pixel font)\n```\n\n---\n\n## Tech stack\n\n- **Next.js 16** (App Router, React Server Components)\n- **React 19**\n- **Tailwind CSS v4**\n- **TypeScript** (strict)\n- **Playwright** + `puppeteer-extra-plugin-stealth`\n- **culori** for OKLCH math\n- **Vitest** for engine tests\n- **Simple Icons** for brand logos\n\n---\n\n## Roadmap\n\n**Shipped**\n\n- [x] Playwright extraction · 5 viewports · 8 pages (matches CLI default)\n- [x] OKLCH ΔE clustering · 4-layer stability classification\n- [x] 5-state interaction capture (hover · focus · focus-visible · active · disabled) + loading\u002Fempty\u002Ferror\n- [x] Pixel-fidelity proof.ts (ΔE\u003C12 coverage, image-region exclusion)\n- [x] 4 gold-standard examples (Stripe, Linear, Vercel, Supabase)\n- [x] SPA landing + gallery + on-demand `\u002Fextract` URL form\n- [x] Heuristic role-namer (Primary · Ink · Canvas · Hairline · Accent · Brand-Dark · ...)\n- [x] Dark-mode auto-detection (4 methods)\n- [x] **Visibility-and-importance weighting** layered on cluster.ts (area × fold × interactivity × semantic-region weighting, integrated into the role-namer's primary pick so footer-grey can't outrank a hero CTA on raw frequency)\n- [x] **Deterministic DESIGN.md emitter** on the on-demand path (11 of 17 sections templated; 4 subjective sections stubbed with hand-off to the universal prompt; scores 100\u002F100 on the engine's own `validate.ts`)\n- [x] **Universal AI prompt** that works in any agent surface (Claude Code · Claude.ai · ChatGPT · Cursor · Codex · Windsurf · Lovable · Replit Agent) see `prompts\u002Funiversal.md` per extraction\n- [x] Engine diagnostics panel in the result UI (12 rules surfacing low coverage, single-page noise, framework miscall, primary-is-grey, etc.)\n- [x] SSE-streamed extraction progress (7-stage checklist visible in real time)\n- [x] File-serving route (`\u002Fapi\u002Foutput\u002F[...path]`) with path-traversal defence\n\n**In progress**\n\n- [ ] Per-agent prompt-pack variants (the 5 framed copies for Claude Code · Cursor · v0 · Lovable · Replit the universal prompt covers all of them today, but per-agent framing tweaks are a follow-up)\n- [ ] Tailwind v4 `@theme` emitter\n- [ ] shadcn theme emitter (17-slot mapping, conditional on 5 required signals)\n- [ ] CSS variables export · DTCG token export\n- [ ] Regenerated color ramps (Leonardo or OKLCH lightness curve + hue rotation)\n- [ ] Public accuracy scoreboard (`eval\u002Fgold\u002F` fixtures + scoring script)\n- [ ] Vercel deploy + R2 \u002F Vercel Blob storage for the runtime `output\u002F` directory\n\n---\n\n## Built on\n\n- [**Google Stitch's DESIGN.md spec**](https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Fdesign-md\u002Foverview) introduced the format\n- [**jasonhnd\u002Fdesign-md-generator**](https:\u002F\u002Fgithub.com\u002Fjasonhnd\u002Fdesign-md-generator) the engine we forked (MIT)\n- [**Project Wallace**](https:\u002F\u002Fwww.projectwallace.com\u002F) DTCG conversion patterns we mirror\n\n---\n\n## Contributing\n\nPRs welcome. For larger changes, open an issue first so we can align on direction.\n\n```bash\ngit checkout -b feature\u002Fyour-thing\n# do the thing\ngit commit -m \"feat: your thing\"\ngit push origin feature\u002Fyour-thing\n```\n\nTests must pass (`pnpm test`) and TypeScript must be clean (`pnpm exec tsc --noEmit`).\n\n---\n\n## Disclaimer\n\nGenerated outputs are **not** official design systems from the referenced brands. All trademarks, brand names, and design assets belong to their respective owners.\n\nThis project extracts publicly observable design patterns for educational, research, and development workflows. **Do not represent generated outputs as official brand assets.**\n\n---\n\n## License\n\n[MIT](LICENSE)\n\n---\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg src=\".\u002Fpublic\u002Ffooter.webp\" alt=\"\" width=\"100%\" \u002F>\n\n### Built for AI agents that generate UI.\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsunil-dsb\u002Fdesign.md\">\u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fstar.svg?color=%23f59e0b\" width=\"14\" align=\"center\" alt=\"\">  \u003Cb>Star this repo\u003C\u002Fb>\u003C\u002Fa>\n · \n\u003Ca href=\"https:\u002F\u002Fdesign-md-1047885385938.us-central1.run.app\">\u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fexternal-link.svg?color=%2322c55e\" width=\"14\" align=\"center\" alt=\"\">  \u003Cb>Try the live demo\u003C\u002Fb>\u003C\u002Fa>\n · \n\u003Ca href=\"https:\u002F\u002Fstitch.withgoogle.com\u002Fdocs\u002Fdesign-md\u002Foverview\">\u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fbook-open.svg?color=%237a73ff\" width=\"14\" align=\"center\" alt=\"\">  \u003Cb>Read the spec\u003C\u002Fb>\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n","design.md 是一个用于从任意网站提取设计系统并生成DESIGN.md文件的工具，该文件可以被AI代理读取以生成符合特定设计风格的UI。项目采用TypeScript编写，支持Tailwind CSS主题、设计令牌和提示的自动生成。其核心功能包括从公开网站中抽取真实的设计元素如颜色、排版和间距，并将其格式化为易于AI理解和使用的文件。适用于需要快速构建与现有网页设计一致的新页面或组件的场景，尤其适合与Claude Code, Cursor, Replit等AI辅助开发工具配合使用。",2,"2026-06-11 04:04:50","CREATED_QUERY"]