YunyueLi/design-teardowns
GitHub: YunyueLi/design-teardowns
该项目将世界级产品落地页逆向工程为源码级设计解构，提供11个深度案例画廊和一个能自动提取真实design tokens并生成复刻文档的可复用Claude Agent Skill。
Stars: 2 | Forks: 0
# 设计解构
[](LICENSE-CODE) [](LICENSE) [](skills/design-teardown) 
**在线画廊：** https://yunyueli.github.io/design-teardowns/ — 或者克隆后双击 `index.html`。
Design Teardowns 在一个仓库中包含了两样东西：
1. **包含 11 篇深度解构的画廊**，解析著名的 AI 原生产品（Comet、Linear、Notion、ChatGPT、Gemini 等）。每一个都是独立的交互式页面，并附带设计文档，全部使用该产品自身的视觉语言构建。
2. **一个可复用的 Claude Agent Skill** —— [`design-teardown`](skills/design-teardown) —— 能够为任何 URL 生成解构：它通过 Playwright 提取真实的计算样式和 design tokens，然后编写解构页面、复刻指南以及对抗性自我审查。
贯穿始终的原则是**基于事实，而非直觉**：每一种颜色、字体、缓动曲线和持续时间都是从实时网站测量得出的，绝非目测。
## 解构作品
| 网站 | 解构 | 标志性外观 |
|---|---|---|
| **Comet**（旗舰产品，原生应用） | [`teardowns/comet/`](teardowns/comet/teardown.html) | 宇宙行星主题，源码级 tokens，真实的 CDP 录制 |
| Linear | [`teardowns/linear/`](teardowns/linear/teardown.html) | 精准暗色系，动画 agent 点阵 |
| Moonshot AI | [`teardowns/moonshot/`](teardowns/moonshot/teardown.html) | 纯黑底色，日食光晕，品牌 RGB 故障特效 |
| tutti | [`teardowns/tutti/`](teardowns/tutti/teardown.html) | 影院级黑底，视差首屏，macOS 窗口边框 |
| OJO | [`teardowns/ojo/`](teardowns/ojo/teardown.html) | 星空叙事，打字机代码，技能跑马灯 |
| Converge AI | [`teardowns/converge/`](teardowns/converge/teardown.html) | 极简黑白，悬浮汇聚球体 |
| ChatGPT | [`teardowns/chatgpt/`](teardowns/chatgpt/teardown.html) | 极简白底，prompt 卡片海洋，水彩风底色 |
| Notion | [`teardowns/notion/`](teardowns/notion/teardown.html) | 友好白底，高亮胶囊，手绘风头像 |
| Gemini | [`teardowns/gemini/`](teardowns/gemini/teardown.html) | 柔光渐变，圆角聊天输入框 |
| Lovart | [`teardowns/lovart/`](teardowns/lovart/teardown.html) | 优雅衬线体，agent 思考过程可视化 |
| Latrix | [`teardowns/latrix/`](teardowns/latrix/teardown.html) | 灰白画廊墙，巨大 Playfair 衬线体，扭曲的标志螺旋 |
每个文件夹包含：`teardown.html`（交互式），`设计解构.md` / `复刻指南.md` / `出处与方法.md`（解构、复刻指南、出处），`事实核查.md` / `设计评审.md`（事实核查与设计评审），`design-tokens.css`，`tokens.json` 以及原貌截图。文档为中文；tokens 和代码为语言通用的内容。
## 使用该 skill
用自然语言提问 —— *"解构 https://linear.app 的设计"*，*"逆向工程 stripe.com 的真实配色、字体和缓动效果"*，*"扒出某站的真实配色、字体、缓动"* —— 然后该 skill 就会运行完整的 pipeline。
**安装 (Claude Code) —— 选择其中一种方式：**
插件市场，只需两行：
```
/plugin marketplace add YunyueLi/design-teardowns
/plugin install design-teardown@design-teardowns
```
或者将该 skill 复制到你的 skills 目录中：
```
git clone https://github.com/YunyueLi/design-teardowns
cp -r design-teardowns/skills/design-teardown ~/.claude/skills/
```
或者获取打包好的 skill：下载 [`design-teardown.skill`](design-teardown.skill) 并将其拖入 Claude（在 Settings 中找到 Skills），或者将其解压到 `~/.claude/skills/` 中。
**直接运行 pipeline**（需要 Playwright：`pip install playwright && playwright install chromium`）：
```
python skills/design-teardown/scripts/capture_site.py --url https://example.com --out ./out/example --name Example
python skills/design-teardown/scripts/build_index.py --dir ./out # gallery cover for many sites
```
## 工作原理
该 skill 遵循同一个 pipeline，并且每一步都会留下可验证的产出物：
1. **捕获（是真实的，而非猜测的）。** Playwright 读取计算样式；服务端 fetch 直接拉取样式表文本（绕过 CORS）。最终生成 `tokens.json` 和 `design-tokens.css`。
2. **定义视觉语言。** 读取真实的基准颜色、字体排版和主题图案；解构页面使用*该*语言构建，从不使用共享模板。
3. **构建页面和文档。** 这是一个交互式解构，使用真实的缓动效果和持续时间重现至少一个标志性效果，并附带复刻指南和出处文档。每个数值都会标记是“测量的”还是“推断的”。
4. **对抗性自我审查。** 事实核查阶段会将页面上的每个数值与 `tokens.json` 进行核对，设计评审阶段则会对精准度和完整性进行评分。
有关完整方法，请参阅 [`skills/design-teardown/SKILL.md`](skills/design-teardown/SKILL.md) 及其 `references/`，包括用于 Comet 旗舰产品的原生应用路径（解包 `resources.pak` 和 CDP 帧捕获）。
## 打开示例
- **在线：** 画廊部署在 GitHub Pages 上，网址为 https://yunyueli.github.io/design-teardowns/。
- **本地，零构建：** 克隆后双击 `index.html`（它会重定向到画廊）。为了保证字体完美的还原度，请在本地运行它 —— 在 `file://` 协议下浏览器会阻止加载本地 `@font-face`，因此标题会回退为系统字体（内容不受影响）：
python3 -m http.server 8000 # 然后打开 http://localhost:8000
## 仓库布局
| 路径 | 内容 |
|---|---|
| `teardowns/` | 画廊 `index.html` 以及每个网站对应的独立文件夹 |
| `skills/design-teardown/` | 可复用的 skill（SKILL.md、脚本、参考资料） |
| `tools/` | 提取和录制脚本（网站和原生应用） |
| `.claude-plugin/marketplace.json` | 将该仓库变成一条命令即可添加的插件市场 |
## 许可证
代码（包括画廊、脚本和 skill）采用 **MIT** 协议 —— 详见 [LICENSE-CODE](LICENSE-CODE)。原创的解构内容（文档、测得的 token 值、我们自己的截图）采用 **CC BY 4.0** 协议 —— 详见 [LICENSE](LICENSE)。第三方产品名称、logo 以及任何复制的材料均不包含在此授权范围内，其所有权仍归各自所有者所有。
## 免责声明
这是一项独立的教育和研究性质设计研究。它**不隶属于、不受认可或赞助于**任何其产品被分析的公司。所有产品名称、logo 和商标均归各自所有者所有，仅用于指代和评论性质的合理使用。此处不会重新分发被分析产品的任何专有字体、视频、音频或源代码。完整条款请见 [NOTICE](NOTICE)。如果您拥有引用材料的权利并希望进行修改，请提交 issue，我们将善意处理。
标签：Claude Agent, Playwright, UI/UX, 前端设计, 后端开发, 多模态安全, 数据可视化, 特征检测, 设计令牌, 逆向分析, 逆向工具