网页设计规范提取 一键生成 DESIGN.md
输入任意网页 URL，AI 自动分析配色、字体、间距、动效与组件样式，30 秒输出结构化设计规范文档
▊提取效果
看看能从顶级网站中提取什么
每个卡片展示真实提取结果的核心数据摘要
效率对比
从 3 小时到 30 秒
提取维度
九大维度，深度拆解设计系统
CSS 变量采集
自动提取所有 CSS 自定义属性，建立完整的 Token 映射表
字体栈识别
识别字体族、字重、字号层级、行高与字间距规则
配色方案提取
提取主色、辅色、文字色、背景色的精确 HEX/RGBA 值
渐变与阴影质感
解析多层阴影叠加、渐变方向与色标位置
动效参数分析
采集 transition、animation 的时长、缓动曲线与延迟
组件样式采集
按钮、卡片、输入框、徽章等组件的完整样式定义
间距系统还原
还原 8px 基准或自定义间距系统的完整规则
响应式断点检测
识别媒体查询断点与折叠策略
视觉截图辅助
自动截取顶部、35%、70% 三张截图，辅助 AI 理解视觉层次
集成
一条链路，从网页到 AI 生成代码
将 DESIGN.md 直接喂给 AI 编码工具，零歧义复刻任意网站的视觉风格
FAQ
常见问题
网页设计规范提取是指通过工具自动分析目标网页的 CSS、DOM 结构和视觉呈现，提取出配色方案、字体系统、间距规则、组件样式、动效参数等设计要素，并整理成结构化的 DESIGN.md 文档，供设计师或 AI 编码工具复用。
免费版允许你使用自己的 OpenAI 兼容 API Key 进行无限次分析。所有设计数据仅在你的浏览器本地处理，不经过我们的服务器。Pro 版（$5/月）提供平台额度，无需配置 API Key。
目前支持 Google Chrome 及所有基于 Chromium 内核的浏览器（Edge、Arc、Brave 等）。Firefox 和 Safari 版本正在开发中。
可以分析任意公开可访问的 HTTPS 网页。需要登录才能查看的页面、iframe 嵌套内容或动态渲染的 Canvas 内容可能无法完整采集。
是的，我们遵循社区广泛认可的 DESIGN.md 规范格式，包含 Visual Theme、Color Palette、Typography、Component Stylings、Layout Principles、Motion Design 等标准模块。
DESIGN.md 是纯 Markdown 格式，任何支持 Markdown 的 AI 工具都可以读取，包括 Cursor、Windsurf、GitHub Copilot、Claude Code、Trae 等。
绝对安全。API Key 仅存储在你本地的 chrome.storage.local 中，永远不会上传到我们的服务器或第三方。使用自定义 Key 时，扩展本身无需联网。
我们结合 DOM 结构分析、Computed Styles 计算和视觉截图理解，能够提取到字体精确到 OpenType 特性、阴影精确到多层叠加参数、间距精确到光学补偿值等细节。
开始提取你的第一个设计规范
30 秒内，把任意网页变成可复用的 DESIGN.md