AI Website Design —
提取，而非猜测
在 30 秒内分析任意网站的设计系统。配色、字体、间距、动效 —— 全部收录在一份可复用的 DESIGN.md 中。
# Linear Design System
## Visual Theme & Atmosphere
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas where content emerges from darkness like starlight.
## Color Palette
- **Background Primary**: #08090a
- **Text Primary**: #f7f8f8
- **Brand**: #5e6ad2
- **Border**: rgba(255,255,255,0.08)
## Typography
- **Font Family**: Inter Variable
- **Display**: 72px / -1.584px letter-spacing
- **Headline**: 48px / weight 510
- **Body**: 14px / 1.6 line-height
## Component Stylings
- **Button**: rounded-full, bg-indigo-600, px-6 py-3
- **Card**: bg-white/[0.035], border-white/10, backdrop-blur
- **Input**: bg-black/30, border-white/10, focus:border-indigo-400
## Motion Design
- **Transition**: 150ms cubic-bezier(0.4, 0, 0.2, 1)
- **Hover**: border-color shift to indigo-300/35痛点
设计系统整理，为什么总这么耗时？
手动翻查 DevTools
看到一个喜欢的网站，想复刻其 AI website design 风格，需要手动打开开发者工具，逐一检查颜色、字体、间距，耗时 1-3 小时且容易遗漏细节。
说不清设计意图
和 AI 编码工具或外包设计师沟通时，「做成 Linear 那种感觉」无法精确传达，导致反复返工，效率低下。
竞品分析效率低
做 AI website design 竞品调研时需要横向对比多个产品的设计语言，逐页截图、标注、整理效率极低，难以形成系统化结论。
能力
九大维度，完整拆解设计系统
CSS 变量采集
自动提取所有 CSS 自定义属性，建立完整的 Token 映射表
字体栈识别
识别字体族、字重、字号层级、行高与字间距规则
配色方案提取
提取主色、辅色、文字色、背景色的精确 HEX/RGBA 值
渐变与阴影质感
解析多层阴影叠加、渐变方向与色标位置
动效参数分析
采集 transition、animation 的时长、缓动曲线与延迟
组件样式采集
按钮、卡片、输入框、徽章等组件的完整样式定义
间距系统还原
还原 8px 基准或自定义间距系统的完整规则
响应式断点检测
识别媒体查询断点与折叠策略
视觉截图辅助
自动截取顶部、35%、70% 三张截图，辅助 AI 理解视觉层次
输出
标准化的 DESIGN.md 文档
覆盖「整体氛围 → 设计规范 → 组件规范 → 复刻指南」四大模块，AI 编码工具可直接读取并遵循
# Linear Design System
## Visual Theme & Atmosphere
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas where content emerges from darkness like starlight.
## Color Palette
- **Background Primary**: #08090a
- **Text Primary**: #f7f8f8
- **Brand**: #5e6ad2
- **Border**: rgba(255,255,255,0.08)
## Typography
- **Font Family**: Inter Variable
- **Display**: 72px / -1.584px letter-spacing
- **Headline**: 48px / weight 510
- **Body**: 14px / 1.6 line-height
## Component Stylings
- **Button**: rounded-full, bg-indigo-600, px-6 py-3
- **Card**: bg-white/[0.035], border-white/10, backdrop-blur
- **Input**: bg-black/30, border-white/10, focus:border-indigo-400
## Motion Design
- **Transition**: 150ms cubic-bezier(0.4, 0, 0.2, 1)
- **Hover**: border-color shift to indigo-300/35集成
一条链路，从网页到 AI 生成代码
将 DESIGN.md 直接喂给 AI 编码工具，零歧义复刻任意网站的视觉风格
Workflow
三步上手，30 秒拿到设计系统
STEP 01
安装扩展
从 Chrome Web Store 一键安装 Design Extractor，无需配置
STEP 02
分析网页
打开任意 HTTPS 网页，点击扩展图标，AI 自动采集全量设计数据
STEP 03
下载文档
点击「下载 .md」保存结构化设计文档，或直接复制到剪贴板
FAQ
常见问题
它是一种利用人工智能技术，自动分析并提取任意已有网站设计系统的方法。不同于 AI 生成新网站，它专注于逆向工程已有网页的配色、字体、间距、动效等设计规范，并输出为结构化的 DESIGN.md 文档。
AI 网站生成器（如 Wix AI、Relume）从零创建新网站；而 Design Extractor 是分析已有网站的设计系统，帮你理解并复刻任意网页的视觉风格。我们是 extractor，不是 builder。
可以。免费版允许你使用自己的 OpenAI 兼容 API Key 进行无限次分析。所有设计数据仅在你的浏览器本地处理，不经过我们的服务器。Pro 版（$5/月）提供平台额度，无需配置 API Key。
我们采集 CSS 变量、字体栈、配色方案、渐变与阴影、动效参数、组件样式、间距系统、响应式断点，并辅以三张视觉截图，形成完整的设计系统画像。
DESIGN.md 是纯 Markdown 格式，包含标准化的设计规范描述。你可以直接将其内容复制到 Figma 的设计说明中，或供 AI 工具读取后生成与 Figma 对接的代码。
我们结合 DOM 结构分析、Computed Styles 计算和视觉截图理解，能够提取到字体精确到 OpenType 特性、阴影精确到多层叠加参数、间距精确到光学补偿值等细节。
可以分析任意公开可访问的 HTTPS 网页。需要登录才能查看的页面、iframe 嵌套内容或动态渲染的 Canvas 内容可能无法完整采集。
目前支持 Google Chrome 及所有基于 Chromium 内核的浏览器（Edge、Arc、Brave 等）。Firefox 和 Safari 版本正在开发中。