作为一个开发者，每次做新项目都要花大量时间研究配色、字体、间距……
Linear 的暗色配色怎么做的？Stripe 的渐变美学是什么逻辑？Notion 的极简排版有哪些规则？
这些问题我也问了很久。于是我做了一件事——把 63 个世界级产品的设计系统逆向分析了一遍，提取成统一的 JSON 格式，开源在 GitHub 上。
这是什么
auto-theme — 63+ 世界级设计系统，逆向解析，开箱即用。
🔗 GitHub：github.com/Devldq/auto… 🌐 在线预览：devldq.github.io/auto-theme/
最酷的用法：丢给 AI
这个项目最大的价值在于 AI 工作流：
- 下载
theme-presets.json（140KB，包含所有主题数据） - 上传给 Claude / ChatGPT / Cursor
- 发一句 prompt："用这个 JSON 里的主题，给我的应用生成主题切换器"
- 几分钟内，你的应用就能支持 63 套世界级主题
不需要自己研究配色，AI 帮你搞定。
包含哪些主题
覆盖了你能叫出名字的几乎所有顶级产品：
AI & 开发工具：Linear、Cursor、Vercel、Supabase、Raycast、Posthog… 设计工具：Figma、Framer、Webflow、Miro… 企业 SaaS：Stripe、Notion、Airtable、Shopify、Zapier… AI 大模型：Claude、Mistral AI、ElevenLabs、Cohere… 消费品牌：Spotify、Airbnb、Tesla、BMW、Ferrari…
每个主题包含什么
每个主题都有完整的 token 体系：
{
"id": "linear",
"name": "Linear",
"light": {
"background": "#f7f8f8",
"accent": "#5e6ad2",
"textPrimary": "#141516",
"border": "#e4e5e8",
"font": { "family": "\"Inter Variable\", sans-serif" }
},
"dark": {
"background": "#08090a",
"accent": "#7170ff",
"textPrimary": "#f7f8f8"
}
}
- 完整配色方案（背景/层级面/文字/边框/强调色/状态色）
- 字体排版规则
- 亮色 + 暗色双版本
- 侧边栏布局、圆角、密度配置
在线预览
做了一个 Demo 站，可以在线浏览所有主题的实时效果，点击任意主题卡片能看到用该主题渲染的 Mock App UI：
👉 devldq.github.io/auto-theme/
欢迎 Star、使用、贡献新主题 🎨
GitHub：github.com/Devldq/auto…
