designmd-supply-generator 是一个 Next.js 应用，目标是把任意网站转换成一份完整的 DESIGN.md 设计系统文档。它由 ara.so 制作，属于 Design Skills 集合。
用途 它面向需要为某个网站提取并沉淀设计系统的场景：输入一个域名，输出一份结构化的 Markdown 设计文档，包含 YAML frontmatter，内容覆盖颜色、字体排印、布局、组件和品牌规范。
主要能力 系统编排四个 Context.dev API：Styleguide（样式令牌，如颜色、字体排印、间距、圆角、组件）、Brand（品牌数据，如名称、Logo、颜色、行业）、Screenshot（首页高质量截图）、Markdown（网页内容抓取）。随后通过 Vercel AI Gateway 调用大语言模型，将这些素材组合生成设计文档。所有 API 响应与生成的文档都会缓存到 Turso（libSQL），以便后续快速访问。
对外接口 应用提供以下核心 HTTP 端点：
- POST /api/design-md：请求体为 {"domain": "stripe.com"}，返回 markdown 与 cached 字段。
- GET /api/design-md?domain=...：如果有缓存则返回缓存的 DESIGN.md，否则触发生成。
- GET /api/brand?domain=...：返回 Context.dev Brand API 响应（带缓存），例如域名、名称、Logo、颜色、行业。
- GET /api/styleguide?domain=...：返回设计令牌（颜色、字体排印、间距、圆角、组件）。
- GET /api/screenshot?domain=...：返回首页的高质量截图。
安装与配置 安装命令： git clone https://github.com/context-dot-dev/designmd-supply.git cd designmd-supply npm install 环境变量配置： cp .env.example .env 必需变量： CONTEXT_DEV_API_KEY=your_context_dev_key VERCEL_AI_GATEWAY_API_KEY=your_vercel_ai_key 可选变量（Turso 缓存，Vercel 上会自动注入）： designmd_TURSO_DATABASE_URL=libsql://your-db.turso.io designmd_TURSO_AUTH_TOKEN=your_turso_token API 密钥获取地址：Context.dev（https://context.dev）、Vercel AI Gateway（https://vercel.com/ai-gateway）、Turso（https://turso.tech）。 本地开发：npm run dev，然后打开 http://localhost:3000。
使用方式 基本用法是通过 /api/design-md 传入域名生成文档。也可以直接使用 Context.dev 客户端提取样式令牌与品牌数据。服务端完整流水线示例用 Promise.all 并行拉取 styleguide、brand、screenshot、markdown，再拼接 prompt 交给 LLM 生成，并把截图作为图像输入一起提交。生成结果可通过缓存函数读写，缓存键按域名与类型（styleguide、brand、designmd 等）区分；支持批量读取用于目录页，也支持列出所有已缓存域名。 域名目录通过编辑 lib/domains.ts 的 TOP_DOMAINS 数组维护，首次访问时填充缓存，也可在构建时用 generateStaticParams 预渲染。前端提供 DesignDocViewer 组件用 ReactMarkdown 展示生成的文档，以及 DomainSearch 组件做搜索与跳转。还给出了生成并下载 DESIGN.md、批量生成多个域名等常见工作流代码。
适用场景 为单个网站生成设计系统文档；批量生成多个域名的设计文档；构建设计文档目录与预览页面；在服务端流水线中直接复用 Context.dev 的样式与品牌数据。
限制与注意事项 Context.dev API 存在速率限制，需积极使用缓存与批量操作并适当间隔请求。LLM 生成可能超时，可用 maxRetries 与 abortSignal 调整。未配置 Turso 环境变量时缓存写入会静默失败，代码中会给出警告并回退到实时 API。截图为避免过大可降低尺寸或改用 JPEG。域名输入需要做规范化处理（去除协议、www、路径并转小写）。部署可通过 vercel 命令，Turso 在 Vercel Marketplace 会自动配置，其他平台需手动设置相关环境变量。项目还提供了 TypeScript 类型定义（DesignMdResponse、StyleguideData、BrandData 等）与基于 React.cache 的请求去重性能优化示例。