网页配色提取
一键获取完整配色方案
AI 自动分析网站主色、辅助色、强调色，连同字体体系、间距规范一起输出，30 秒生成可直接复用的结构化设计文档
主色
#635BFF
辅助色
#0A2540
强调色
#00D4AA
文字色
#425466
背景色
#FFFFFF
字体栈
Inter, -apple-system, sans-serif
Display
64px / weight 600
Headline
32px / weight 500
Body
16px / 1.5 line-height
Aa 你好世界
Inter, 16px, weight 400
Section Padding
96px vertical
Card Gap
24px
Grid Column
12 col / 24px gutter
痛点
传统方法为什么又慢又烦？
截图 → 上传 → 逐点取色
看到喜欢的网站配色，需要手动截图、打开取色工具、逐个像素点取色，提取一个完整配色方案至少需要 20 分钟，还容易遗漏关键颜色。
只能提取颜色，无分析
ColorZilla 等扩展可以提取单个颜色，但无法识别哪些是主色、哪些是辅助色、哪些是文字色，输出只是一堆无序的 HEX 代码。
一键提取 + AI 分析 + 结构化文档
打开任意网页，点击分析按钮，AI 自动识别配色体系、字体层级、间距规范，30 秒输出可直接复用的 DESIGN.md 文档。
能力
颜色只是开始
配色方案
主色、辅助色、强调色、文字色、背景色，AI 自动分类并标注使用场景
字体体系
字体栈、字号层级、字重、行高、字间距，完整还原排版系统
间距规范
Padding、Margin、Grid 间距、组件内边距，量化所有空间关系
质感系统
渐变、阴影、模糊、圆角、边框，提取所有视觉质感参数
动效参数
Transition、Duration、Easing、Delay，记录每一处微交互
组件样式
Button、Card、Input、Navigation，提取关键组件的完整样式定义
工作流
3 步拿到完整配色方案
STEP 01
打开任意网页
在 Chrome 浏览器中打开你想分析的网站，支持任意公开网页
STEP 02
点击分析按钮
点击扩展图标，选择「分析当前页面」，AI 开始自动采集设计数据
STEP 03
下载 DESIGN.md
30 秒后获得包含配色方案、字体体系、间距规范的完整设计文档
场景
谁在用网页配色提取？
竞品分析
快速拆解竞品的配色逻辑，横向对比多个产品的设计语言，形成系统化的竞品研究报告
设计复刻
精确还原喜欢的网站风格，拿到可直接用于 Figma / Sketch 的配色与字体数据
AI 编码辅助
将配色数据直接注入 Cursor、Windsurf 等 AI 编码工具的 prompt，确保生成代码的视觉一致性
FAQ
常见问题
传统取色工具（如 ColorZilla）只能提取单个像素的颜色值，输出的是无序的 HEX 代码。Design Extractor 通过 AI 分析整个网页，自动识别主色、辅助色、强调色、文字色、背景色的分类关系，并连同字体、间距、动效等完整设计体系一起输出为结构化的 DESIGN.md 文档。
支持任意公开的 HTTPS 网页，包括企业官网、SaaS 产品页、电商平台、个人博客等。只要网页在浏览器中正常显示，Design Extractor 就能分析其设计系统。暂不支持需要登录才能查看的页面。
默认输出为结构化的 Markdown 文档（DESIGN.md），包含完整的配色方案、字体体系、间距规范、组件样式等。你可以直接复制到剪贴板，或下载为 .md 文件。文档格式兼容 Cursor、Windsurf、GitHub Copilot 等 AI 编码工具。
免费版允许你使用自己的 OpenAI 兼容 API Key 进行无限次分析。Pro 版（$5/月）提供 50 次/月的平台额度，无需配置 API Key。Max 版（$20/月）提供 200 次/月，适合设计团队高频使用。所有版本的功能完全相同。
Design Extractor 通过三重机制确保准确度：（1）自动采集页面全量 CSS 变量和计算样式；（2）截取页面顶部、35%、70% 三张截图辅助 AI 理解视觉层次；（3）AI 综合语义分析，识别颜色在设计系统中的角色定位。综合准确度远超单纯的颜色采样工具。
不会。Design Extractor 采用隐私优先架构：你的 API Key 仅存储在本地 chrome.storage.local 中，分析过程在浏览器本地完成，设计数据不会上传到任何服务器。使用自定义 API Key 时，扩展本身无需联网。
目前仅支持 Chrome 浏览器（包括基于 Chromium 的 Edge、Arc、Brave 等）。扩展基于 Chrome Manifest V3 标准开发，确保与最新版 Chrome 完全兼容。Firefox 和 Safari 版本正在规划中。
可以。提取的 DESIGN.md 文档中包含完整的色卡定义，你可以直接复制 HEX/RGB/HSL 值到 Figma、Sketch、Adobe XD 等设计工具中。后续版本还将支持直接导出为 Figma Variables 格式。