适合谁阅读
如果你第一次打开 Design Extractor，或者想把它稳定地接入自己的前端工作流，这篇文章就是从零开始的使用说明。你会完成三件事：安装 Chrome 扩展、分析一个真实网页、拿到一份可以直接交给 AI 编程工具使用的 DESIGN.md。
Design Extractor 的定位不是截图工具，也不是普通的网页爬虫。它会采集当前页面的 CSS 变量、关键元素样式、字体、颜色、动效、背景质感和多段页面截图，再交给 AI 生成结构化设计文档。最终输出的 DESIGN.md 会把一个网页的视觉系统整理成配色、排版、间距、组件和复刻指南。
第一步：安装 Chrome 扩展
打开官网导航栏里的 Add to Chrome，或者进入 Chrome Web Store 的 Design Extractor 页面，点击“添加至 Chrome”。安装完成后，建议在 Chrome 右上角的扩展菜单中把 Design Extractor 固定到工具栏，这样每次分析网页时可以直接点击图标。
安装后你可以先打开一个公开网页，例如 Linear、Stripe、Vercel、Notion 或你正在研究的竞品网站。系统页面不支持分析，例如 chrome://、edge://、about: 这类页面会被浏览器限制。
第二步：选择使用方式
Design Extractor 支持两种使用方式：
- Free：使用你自己的 OpenAI 兼容 API Key，不限制平台额度，适合已经有模型账号的用户
- Pro / Max：使用平台提供的分析额度，不需要自己配置 API Key，适合希望开箱即用的用户
如果你是 Free 用户，点击扩展图标进入设置，填入 API Key、Base URL 和模型名称。项目默认支持 OpenAI 兼容接口，所以除了 OpenAI，也可以使用 Kimi / Moonshot 等兼容服务。配置保存后会写入浏览器本地存储，不会上传到官网账号。
如果你使用 Pro 或 Max，先在官网登录账号并完成订阅，然后回到扩展侧边栏登录同一个账号。扩展会读取你的账户状态和本月额度，之后分析网页时会走平台额度。
第三步：分析第一个网页
打开你想分析的网页后，点击工具栏里的 Design Extractor 图标，侧边栏会自动出现。确认当前页面已经加载完成，再点击“分析当前页面”。
分析过程会做几件事：
- 从页面中采集 CSS 自定义属性、关键 DOM 元素的计算样式和已加载字体
- 提取包含 transition、animation、transform、gradient、shadow、blur、backdrop-filter 的样式线索
- 自动截取页面顶部、35% 位置、70% 位置三张截图，帮助 AI 识别真实视觉层次
- 将结构化证据和截图一起发送给 AI，流式生成 DESIGN.md
通常等待几十秒就能看到内容开始逐段输出。页面越复杂、截图越多、模型越强，生成时间可能越长。分析过程中尽量不要切换页面或关闭标签页。
第四步：阅读和导出 DESIGN.md
生成结果会直接显示在扩展侧边栏里。你可以先快速检查这几个章节是否完整：
- 整体氛围：是否准确描述了页面气质，例如工具型、编辑型、品牌型或内容型
- 配色方案：是否提到了主色、中性色、背景色、边框色和语义色
- 字体栈：是否提到了 font-family、字号层级、字重和行高
- 质感与动效：是否包含阴影、渐变、模糊、过渡时长和缓动曲线
- 组件规范：是否拆出了 Button、Card、Navigation、Input、Typography 等组件
- 复刻指南：是否给出了可以落地到代码里的实现建议
确认结果可用后，可以点击复制，把 Markdown 直接放进 Cursor、Claude 或你的项目文档；也可以点击下载，保存为类似 linear_DESIGN.md 或 stripe_DESIGN.md 的文件。
第五步：把结果交给 AI 编程工具
最常见的用法是把 DESIGN.md 放进 Cursor 的项目规则、System Prompt 或当前对话上下文里，然后让 AI 根据这份设计规范写页面或组件。
你可以这样提问：
请严格根据下面这份 DESIGN.md 实现一个响应式落地页。颜色、字体、间距、圆角、按钮状态和动效都必须优先使用文档里的数值。不要使用泛化的默认 SaaS 风格。
如果你只想生成一个组件，指令可以更具体：
根据 DESIGN.md 里的 Button 和 Card 规范，实现 PricingCard 组件。要求 hover、focus、disabled 状态完整，并把颜色抽成 CSS 变量。
这类指令的关键是：不要只说“做成某某网站的感觉”，而是让 AI 使用 DESIGN.md 里的精确数值。这样生成出来的代码会更稳定，也更容易和团队协作。
第六步：查看历史和管理额度
官网的 Dashboard 可以查看当前账号、套餐和本月额度。扩展侧边栏也会显示当前使用状态，帮助你判断本次分析走的是自带 API Key 还是平台额度。
如果你经常研究竞品，可以把下载的 DESIGN.md 按品牌或项目归档。比如：
- references/design/linear_DESIGN.md
- references/design/stripe_DESIGN.md
- references/design/vercel_DESIGN.md
这样做的好处是，你可以在不同项目里快速复用同一套设计分析结果，也可以对比多个品牌的设计系统差异。
常见问题
为什么某些页面无法分析？
浏览器系统页面、扩展商店内部页面、登录后权限很强的后台页面，可能会限制脚本注入或截图。建议优先分析公开 HTTPS 页面。
为什么输出里漏掉了部分字体或样式？
跨域样式表、动态渲染内容和 iframe 内部样式可能无法完整读取。Design Extractor 会尽量结合截图补充视觉判断，但如果页面结构非常复杂，结果可能需要人工复核。
Free 用户一定要配置 API Key 吗？
是的。Free 模式使用你自己的 OpenAI 兼容 API Key。Pro 和 Max 用户可以使用平台额度，不需要手动配置 Key。
建议补充的图片
这篇教程后续最适合补 5 张产品截图，建议放到 website/public/blog/how-to-use-design-extractor/ 目录：
- 01-chrome-store-install.png：Chrome Web Store 安装页，突出“添加至 Chrome”按钮
- 02-extension-sidepanel.png：扩展侧边栏初始状态，展示分析入口
- 03-api-key-settings.png：Free 用户的 API Key 设置界面，敏感信息打码
- 04-streaming-design-md.png：AI 正在流式生成 DESIGN.md 的过程
- 05-export-or-copy.png：生成完成后的复制和下载入口
如果只想先补最关键的两张，优先准备 02-extension-sidepanel.png 和 04-streaming-design-md.png。它们最能说明产品到底怎么用、最终会得到什么。
总结
Design Extractor 的完整流程可以概括为：安装扩展，打开参考网页，点击分析，得到 DESIGN.md，再把它交给 AI 编程工具或团队文档使用。
它真正节省的不是截图时间，而是把“这个网站为什么好看”转换成可复用的工程语言。只要你能找到一个值得学习的网页，就可以用它快速建立自己的设计参考库。