Features
你需要的设计规范,AI 全部帮你提取
从配色到动效,从字体到组件,Design Extractor 生成完整的设计系统文档
设计系统核心
配色方案提取
自动识别主色、辅色、背景色、文字色、边框色,生成完整的 CSS 变量定义,包含 HEX、RGB、HSL 三种格式。
排版规范
字体系统分析
提取字体栈、各级标题字号、字重、行高、字间距,还原完整的排版系统。支持 Google Fonts、系统字体、自定义字体。
空间系统
间距与布局
分析 padding、margin、gap 规律,推导出基础间距单位。识别栅格系统、断点设置和响应式布局策略。
动效系统
动效与交互规范
提取 transition、animation、transform 参数,分析缓动曲线和时长规律,生成可直接复用的动效代码片段。
组件系统
组件规范提取
分析 Button、Input、Card、Badge 等常用组件的圆角、阴影、尺寸规范,生成统一的组件设计令牌。
视觉质感
视觉质感分析
识别渐变方向和色值、阴影层次、毛玻璃效果、噪点纹理等质感元素,让 AI 真正理解页面的视觉氛围。
文档输出
一键下载 DESIGN.md
生成标准 Markdown 格式文档,包含所有提取的设计规范。可直接粘贴到 Cursor、Claude 等 AI 工具的 System Prompt。
安全隐私
隐私优先设计
API Key 仅存本地,页面数据直接发给 AI,不经过任何中间服务器。完全符合 Chrome Manifest V3 安全标准。