a692570/design-extractor

# 设计系统提取器 一款 Chrome 扩展程序，可一键反编译任意网站的设计系统：CSS 变量、组件结构、计算样式和关键帧动画，并打包为单个 Markdown 文件，可直接喂给 AI 重建 UI。 ## 功能 大多数设计克隆工具从截图中提取颜色。此工具读取真正的“源”：CSS 自定义属性、计算样式和组件 HTML。输出是一个结构化的 Markdown 文件，包含开发者忠实重建设计所需的一切。 **一键、一个文件。喂给 Claude 或 GPT，然后说“帮我构建类似这样的东西”。** ## 处理流程 | 层 | 提取内容 | 重要性 | |----|----------|--------| | CSS 自定义属性 | `:root` 变量（真实的设计令牌） | 现代网站将整个系统存储在 `--color-primary`、`--spacing-lg` 等中；计算样式无法获取这些。 | | 样式表遍历 | 原始 CSS（未解析前） | 获取 `rem`、`var()`、`clamp()` 原始值，而非解析后的像素。 | | 组件 HTML | 骨架化导航、英雄区、卡片、页脚 | 仅凭令牌颜色无法告诉你“该把样式放在哪里”。 | | 计算样式 | 对真实 DOM 元素执行 `getComputedStyle()` | 适用于 CDN 托管的 CSS（如 Webflow、Framer），此时样式表遍历会失效。 | | 关键帧动画 | 所有样式表中的 `@keyframes` 规则 | 捕获入场动画、闪烁效果和过渡动画。 | 整个流程完全在客户端运行。无服务器，无 API 调用。 ## 演示：anthropic.com 该扩展运行在 [anthropic.com](https://anthropic.com)，生成了一个名为 `anthropic-design-system.md` 的文件。该文件被直接传入 AI，未提供其他上下文。以下是结果： | 原始站点 | 从提取的 `.md` 克隆的版本 | |----------|--------------------------| |  |  | AI 从 `.animate-word` 类和提取样式中的 `opacity/transform` 过渡值推断出了逐词出现的动画效果。跑马灯条带则来自关键帧部分的 `@-webkit-keyframes marquee` 规则。两者均未被明确描述，但数据已足够。 ## 输出格式 扩展程序会生成一个以站点命名的单一合并文件： ``` cloudflare-workers-design-system.md wisprflow-design-system.md anthropic-design-system.md ``` 结构： ``` # 站点名称设计系统 > Extracted from https://site.com --- ## 检测到的框架 ## 设计令牌（CSS 自定义属性） ### 颜色 ### 排版令牌 ### 间距令牌 ### 动画令牌 ## 原始 CSS 变量（完整转储） --- ## 导航 ## 英雄 ## CTA 按钮 ## 页脚 (skeletonized HTML with [TEXT] and [URL] placeholders) --- ## 导航样式 ## 英雄样式 ## 卡片样式 ## 页脚样式 ## 关键帧动画 ``` ## 安装 尚未上架 Web Store。侧载只需 30 秒： 1. [下载最新版本](https://github.com/a692570/design-extractor/releases/latest) 并解压 2. 打开 `chrome://extensions`（或 `edge://extensions`） 3. 开启 **开发者模式**（右上角） 4. 点击 **加载已解压的扩展程序** 并选择解压后的文件夹 5. 访问任意网站并点击扩展图标 ## 提取内容与未覆盖内容 ### 提取良好： - CSS 自定义属性（设计令牌） - 保留 `clamp()` 值的字体比例尺 - 间距系统 - 组件 HTML 结构与类名 - 通过 `getComputedStyle()` 获取的计算样式（可捕获 CDN 托管的 CSS） - `@keyframes` 动画 - 框架检测（Tailwind、shadcn/ui、MUI、Bootstrap、Radix 等） ### 无法提取： - Canvas/WebGL 动画（运行时生成，无 CSS 源） - Lottie/Rive 动画（需要原始 JSON） - 专有字体（仅捕获名称，建议备用字体） ## 扩展前缀过滤 提取器会过滤由浏览器扩展（如 Speechify、Grammarly、1Password）注入的 CSS 变量，以免污染输出。从 212 个原始属性中，可得到约 70 个干净属性。 ## 技术细节 清单 V3。无外部依赖。完全在浏览器中运行。三个注入脚本： - `content-script.js`：采样 DOM 元素，读取计算样式，收集站点信号 - `runStructureScript`：提取并骨架化组件 HTML - `runStylesScript`：通过 `getComputedStyle()` 查找组件类对应的 CSS 规则 Service Worker 负责编排、标准化并生成 Markdown。 ## 许可证 MIT

标签：AI辅助开发, Computed Style, CSSOM, CSS变量, DOM解析, Markdown导出, SEO: 网站克隆, SEO: 设计系统提取, 云资产清单, 关键帧动画, 关键词: AI构建UI, 关键词: Claude, 关键词: GPT, 前端分析, 功能: 动画捕获, 功能: 提取设计令牌, 功能: 组件骨架化, 单文件导出, 反调试, 威胁情报, 客户端提取, 开发者工具, 技术栈: CSS, 技术栈: Web扩展, 数据可视化, 组件结构, 网页克隆, 自定义属性, 自定义脚本, 设计克隆, 设计系统, 逆向工程, 防御加固