[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80255":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":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},80255,"designmd-supply","context-dot-dev\u002Fdesignmd-supply","context-dot-dev","A supply of the world's designmds","https:\u002F\u002Fdesignmd.supply",null,"TypeScript",207,28,1,0,11,18,90,33,4.39,"MIT License",false,"main",true,[],"2026-06-12 02:04:00","# designmd.supply\n\n> A supply of design md, generated. Drop in any public domain — get back a\n> Google-spec `DESIGN.md` ready to feed an AI agent.\n\n`designmd.supply` is a small Next.js app that turns any website into a\nself-contained design system document. It pulls brand identity, design tokens,\na hero screenshot, and the live page Markdown, then composes them into a\n`DESIGN.md` file with YAML frontmatter and the canonical sections (Overview,\nColors, Typography, Layout, Elevation, Shapes, Components, Do's and Don'ts).\n\n## Powered by Context.dev\n\nThe whole pipeline runs on four endpoints from the\n[Context.dev API](https:\u002F\u002Fcontext.dev?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source):\n\n| Context.dev API                                                                                                                                                                                   | What we use it for                                                                                                  |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| [**Styleguide API**](https:\u002F\u002Fdocs.context.dev\u002Fapi-reference\u002Fweb-extraction\u002Fscrape-styleguide?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source) — `web.extractStyleguide`     | Primary source of truth for design tokens: colors, typography, spacing, radii, components.                          |\n| [**Brand API**](https:\u002F\u002Fdocs.context.dev\u002Fapi-reference\u002Fbrand-intelligence\u002Fretrieve-brand-data-by-domain?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source) — `brand.retrieve` | Logos, backdrops, brand colors, slogan, industry classification — used to render the directory and the canvas hero. |\n| [**Screenshot API**](https:\u002F\u002Fdocs.context.dev\u002Fapi-reference\u002Fweb-scraping\u002Fscrape-screenshot?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source) — `web.screenshot`              | High-quality homepage capture, fed to the model as visual context for tone and layout.                              |\n| [**Markdown API**](https:\u002F\u002Fdocs.context.dev\u002Fapi-reference\u002Fweb-scraping\u002Fscrape-markdown?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source) — `web.webScrapeMd`                 | Clean Markdown of the live page so the model can ground component and copy guidance in real content.                |\n\nThe four payloads converge in\n[`lib\u002Fdesign-md.ts`](lib\u002Fdesign-md.ts), where they're shaped into a single\nprompt and sent through the [Vercel AI Gateway](https:\u002F\u002Fvercel.com\u002Fai-gateway)\nto produce the final `DESIGN.md`.\n\nGet a free Context.dev key at\n[context.dev](https:\u002F\u002Fcontext.dev?utm_source=designmd-supply&utm_medium=github&utm_campaign=open-source).\n\n## Quickstart\n\n```bash\nnpm install\ncp .env.example .env\nnpm run dev\n```\n\nThen open \u003Chttp:\u002F\u002Flocalhost:3000> and search for any domain.\n\n### Environment variables\n\n```bash\nCONTEXT_DEV_API_KEY=             # https:\u002F\u002Fcontext.dev\nVERCEL_AI_GATEWAY_API_KEY=       # https:\u002F\u002Fvercel.com\u002Fai-gateway\n\n# Turso (Vercel Marketplace integration — auto-injected on Vercel)\ndesignmd_TURSO_DATABASE_URL=\ndesignmd_TURSO_AUTH_TOKEN=\n```\n\nThe `designmd_*` prefix matches the variables provisioned by the\n[Turso integration on the Vercel Marketplace](https:\u002F\u002Fvercel.com\u002Fmarketplace\u002Fturso),\nso on Vercel they're injected automatically. Locally, copy them from the\nproject's Vercel dashboard into `.env`. If they're absent, the app still\nworks — it just falls through to the live Context.dev APIs on every request\nwith no cache.\n\n## How it works\n\n```\n            ┌──────────────────────────────────────────┐\n            │             Domain in (any URL)          │\n            └──────────────────────────────────────────┘\n                                  │\n                                  ▼\n                       Turso cache hit?  ──► serve cached payload\n                                  │\n                                  ▼ (miss)\n       ┌──────────────┬───────────┴──────────┬──────────────┐\n       ▼              ▼                      ▼              ▼\n  Styleguide API   Brand API           Screenshot API   Markdown API\n  (tokens)         (logos, colors)     (hero image)     (page text)\n       │              │                      │              │\n       └──────────────┴──────────┬───────────┴──────────────┘\n                                 ▼\n                  Prompt assembly  (lib\u002Fdesign-md.ts)\n                                 ▼\n                   LLM via Vercel AI Gateway\n                                 ▼\n                    DESIGN.md  (YAML + Markdown)\n                                 ▼\n                       write back to Turso\n```\n\nThe four Context.dev calls run in parallel. The model receives the styleguide\nJSON as the primary token source and the screenshot + page Markdown as\nsupporting evidence for tone, components, and layout — so values come from\nreal data rather than the model's imagination.\n\n## Project layout\n\n```\napp\u002F\n  api\u002F\n    brand\u002F         GET  — Context.dev Brand API proxy (Turso-cached)\n    styleguide\u002F    GET  — Context.dev Styleguide API proxy (Turso-cached)\n    screenshot\u002F    GET  — Context.dev Screenshot API proxy (Turso-cached)\n    design-md\u002F     GET  — Turso cache lookup\n                   POST — compose DESIGN.md from the three payloads + Markdown\n  guides\u002F[domain]\u002F route for an individual generated guide\n  page.tsx         home with search + directory of curated domains\n\ncomponents\u002F        UI: directory, search, canvas, orchestration, copy block\nlib\u002F\n  design-md.ts     prompt + spec summary\n  domains.ts       curated list of domains shown on the home page\n  turso.ts         libSQL client + cache helpers (get\u002Fset\u002Fbatch\u002FlistDomains)\n```\n\n## Caching with Turso\n\nThe four Context.dev payloads (styleguide, brand, screenshot, markdown) and\nthe final composed `DESIGN.md` are all cached in a single Turso table,\n`domain_cache`, keyed by `(domain, kind)`. The schema is created lazily on\nfirst use — there's no migration step.\n\n- **First request** for a domain hits Context.dev + the LLM and writes every\n  payload back to Turso.\n- **Subsequent requests** for the same domain serve straight from Turso.\n- **`generateStaticParams`** for `\u002Fguides\u002F[domain]` reads the set of domains\n  with a cached `designmd` row from Turso, so the build only pre-renders\n  pages that actually have content.\n- **Homepage directory** uses a single batched read (`getCachedBatch`) to\n  pull brand + screenshot for every curated domain in one round trip.\n\nCache writes are best-effort — if Turso is unreachable, the request still\nsucceeds, the user just doesn't get a cached copy. The same applies if the\nenv vars are missing entirely (see above).\n\nTo add a domain to the curated directory, append it to `TOP_DOMAINS` in\n`lib\u002Fdomains.ts`. The first visit will populate the cache.\n\n## Scripts\n\n```bash\nnpm run dev         # Next dev server\nnpm run build       # production build\nnpm run start       # serve the production build\nnpm run lint        # eslint\nnpm run typecheck   # tsc --noEmit\n```\n\n## Tech stack\n\n- [Next.js 16](https:\u002F\u002Fnextjs.org\u002F) (App Router, RSC)\n- [React 19](https:\u002F\u002Freact.dev\u002F)\n- [Tailwind CSS 4](https:\u002F\u002Ftailwindcss.com\u002F)\n- [`context.dev`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcontext.dev) SDK\n- [Vercel AI SDK](https:\u002F\u002Fsdk.vercel.ai\u002F) + AI Gateway\n- [Turso](https:\u002F\u002Fturso.tech\u002F) (libSQL) via the\n  [Vercel Marketplace integration](https:\u002F\u002Fvercel.com\u002Fmarketplace\u002Fturso)\n\n## Contributing\n\nIssues and PRs welcome. To add a domain to the curated directory, append it\nto `TOP_DOMAINS` in `lib\u002Fdomains.ts` — the cache populates on first visit.\n\n## License\n\nMIT\n","designmd.supply 是一个能够将任何网站转换为自包含设计系统文档的小型 Next.js 应用。它通过抓取品牌标识、设计令牌、主页截图和页面 Markdown 内容，生成符合 Google 规范的 `DESIGN.md` 文件，该文件包括概述、颜色、字体、布局、层次、形状、组件及使用指南等标准部分。项目利用 Context.dev API 的四个端点来提取样式指南、品牌信息、网页截图和 Markdown 内容，并通过 Vercel AI Gateway 生成最终的设计文档。适用于需要快速构建或更新设计系统文档的设计团队或个人开发者。",2,"2026-06-11 03:59:51","CREATED_QUERY"]