「designmd.supply」开源的 DESIGN.md 生成器：把任意网站变成可喂给 AI agent 的设计文档

如果你经常把网站丢给 AI，让它“照着这个风格做一个页面”，会发现一个尴尬的问题：截图能传达感觉，但很难稳定传达设计规则；README 能说清楚技术栈，却说不清按钮、留白、字号、圆角和组件状态。

designmd.supply 想补的就是这块空白。它是 Context.dev 开源的一个小型 Next.js 应用，输入任意公开域名后，会抓取品牌信息、设计 token、首页截图和页面 Markdown，再整理成一份 Google 风格的 DESIGN.md。这份文档不是给人随便浏览的宣传页，而是更适合直接交给 AI agent、代码助手或团队成员作为设计系统上下文。

把网站的设计语言整理成 agent 能读懂的文档

项目的核心流程很直白：Styleguide API 提取颜色、字体、间距、圆角、组件等设计 token；Brand API 补充 logo、品牌色和行业信息；Screenshot API 提供视觉上下文；Markdown API 则把页面内容清理成可引用的文本。最后这些材料会在 lib/design-md.ts 中汇总，交给 Vercel AI Gateway 生成带 YAML frontmatter 的 DESIGN.md。

它的价值不在于“又生成一篇文档”，而在于把原本分散在页面视觉、DOM 内容和品牌资产里的线索，变成一份结构化的设计约束。对做 landing page 复刻、品牌页面延展、AI 代码生成校准、设计系统归档的人来说，这比单纯贴一张截图更稳。

适合拿来搭自己的设计上下文流水线

仓库目前是 MIT License，主语言是 TypeScript，使用 Next.js 16、React 19、Tailwind CSS 4、Context.dev SDK、Vercel AI SDK / AI Gateway 和 Turso。Turso 主要负责缓存：同一个 domain 的 styleguide、brand、screenshot、markdown 和最终 designmd 结果都会按 domain_cache 存起来，避免每次请求都重新打外部 API 和模型。

这也意味着它不只是一个在线小工具，更像是一份可以拆开复用的参考实现。你可以直接跑它，也可以借它的思路，在自己的产品里做“从网站到设计上下文”的自动化入口。需要注意的是，本地运行要准备 Context.dev key 和 Vercel AI Gateway key；如果没有 Turso 环境变量，应用仍能工作，只是不会命中缓存。

截至我查看时，这个仓库有 23 个 Star、5 个 Fork，项目还很新，但方向很清楚：把可视网页转成 AI 能长期引用的设计规范。对于现在越来越常见的 agentic coding 工作流，这类 DESIGN.md 很可能会变成和 README.md、AGENTS.md 一样重要的上下文文件。