AI 抄不出 Stripe 的灵魂？因为它没见过 Stripe 的真身！这个 68 Star 小工具能反向拆出任何网站的设计系统

「帮我做一个像 Stripe 一样的落地页。」——等 30 秒，AI 给你一个灰底紫渐变的标准 SaaS 模板。

问题不在 AI 笨，而在于它没见过 Stripe 的真身。它只能把所有见过的页面平均一遍，吐给你那个「互联网均值」。

设计圈的「真·抄作业」工具

今天推荐的设计神器 design.md，把这事儿一次解决了——它能从任意公开网站里，把真实在用的设计系统反向拆出来，生成一份能喂给任何 AI Agent 的 DESIGN.md。

作者 sunil-dsb 这套工具的核心思路：

• 用 Playwright 在 5 个视口 × 最多 8 个页面里爬真实站点，包括 hover/focus/active 交互态、暗色模式、响应式断点
• 解析 DOM + CSS，提取色彩、字体、间距、阴影、圆角整套 token
• 用 OKLCH ΔE 感知色彩聚类（不是按 hex 字符串去重），4 层稳定性分类——保证「全场 5 折」Banner 不会污染主品牌色

确定性输出——同一个 URL，每次抽出来都一模一样。

一次粘贴，拿到一整套设计资产

丢一个 stripe.com 进去，30 秒后你拿到：

• DESIGN.md——给 Agent 读的「设计圣经」，色板/字体/间距规约全在里面
• tailwind.css——直接粘贴进 Tailwind 项目的主题文件
• shadcn-theme.css——配套的 shadcn/ui 主题
• tokens.json——结构化 token，方便 Figma / 文档同步
• proof.html——像素级对比证明，看 AI 还原得有多准

最后一步：把 DESIGN.md 丢到项目根目录，跟 README.md 放一起，跟 Agent 说一句：“Read DESIGN.md before generating UI.”

Claude Code / Cursor / v0 / Lovable / Windsurf / GitHub Copilot，凡是读 AGENTS.md 或 CLAUDE.md 的工具都会读 DESIGN.md，纯 Markdown 无需插件。

谁最适合用？

• 独立设计师：快速借鉴大厂风格建作品集页
• 前端工程师：给老项目统一设计语言
• 独立开发者：三小时上线一个有 Stripe / Linear / Vercel 那种调性的落地页

MIT 开源，无需登录、API key 或 waitlist。Live demo 丢 URL 就能玩：https://design-md-1047885385938.us-central1.run.app

如果你已经厌倦了 AI 给你交「互联网均值」式的作业，这份 68 Star 的小工具，值得现在就 Star 一下。

👉 GitHub 仓库：github.com/sunil-dsb/design.md

GitHub: https://github.com/sunil-dsb/design.md