# 网站设计风格提取器

渲染公开网页，结合截图导出观察到的配色、字体、间距和组件样式。

> 标准页面: https://elysiatools.com/zh/tools/website-design-style-extractor

- **分类:** Design

- **关键词:** 网站风格, 设计令牌, CSS, 字体排版, 配色提取, 网页截图

## 概述

使用 Chromium 渲染一个公开页面，不调用 AI。支持桌面（1440 × 1000）或移动端（390 × 844）、浅色或深色偏好，以及 0–3000 毫秒的额外等待。ZIP 包含 design.md、screenshot.png、tokens.json 和 tokens.css；Markdown 内嵌 PNG，可独立阅读。

截图仅覆盖固定视口。样式采样最多扫描 2000 个 DOM 元素，并记录其中最多 1000 个可见渲染元素，包括首屏以下的元素；不会自动滚动。颜色、CSS 字体栈、间距、边框、圆角、阴影、组件和可读取的自定义属性只是观察结果，并非原始设计系统。字体栈不能证明实际使用了哪种字体。频次统计针对采样 CSS 声明，不代表像素面积、品牌角色或无障碍合规性。

仅允许不含账号密码的公开 HTTP 80 端口和 HTTPS 443 端口地址。单次采集上限为 40 秒、30 MiB 网络流量和 200 个请求，单个 HTML 文档上限为 8 MiB；资源被阻止或采样上限可能降低覆盖率。采集沙箱禁用弹出窗口、表单提交、文件下载、WebSocket 连接和后台 Worker；依赖这些功能的内容可能与普通浏览器中的表现不同。不支持登录、接受 Cookie、破解验证码、点击交互或跨源框架检查。内置演示通过真实 Chromium 离线提取，所有网络请求均被阻止。

## 输入项

- **来源** (select)
- **网站地址** (text)
- **视口** (select)
- **配色偏好** (select)
- **输出格式** (select)
- **额外等待（毫秒）** (number)

## 适用场景

- 需要分析公开参考站点的排版、调色板及核心组件视觉规则时
- 重构或对齐前端样式，需要快速提炼第三方页面的 CSS 变量与设计令牌时
- 比对同一个站点在浅色与深色偏好或桌面端与移动端下的视觉呈现差异时

## 工作原理

- 在隔离沙箱中通过 Chromium 访问指定的公开 HTTP/HTTPS 网址或内置离线页面，设置指定的视口尺寸（桌面 1440×1000 或移动 390×844）与色彩偏好模式
- 等待指定的延时时间（0–3000 毫秒）确保页面渲染平稳，截取当前视口区域的高清图像
- 遍历扫描最多 2000 个 DOM 节点并对其中至多 1000 个可见渲染元素进行样式统计，汇总色彩频次、字体栈、间距阶梯与边框圆角等属性
- 生成 tokens.json、tokens.css、screenshot.png 及独立排版的 design.md 文档，并按照选择输出 ZIP 压缩包或单份 Markdown 报告

## 使用案例

- UI 设计师在进行竞品视觉调研时，一键提取优秀站点的色彩体系与间距规范
- 前端工程师为已有页面搭建 Tailwind 或 CSS Modules 主题配置时快速提炼真实色值与圆角令牌
- 项目团队在跨终端适配审查时，对比桌面端与移动端在深色模式下的排版与组件样式差异

## 常见问题

### 提取器能否捕获需要登录或绕过人机验证的页面？

不能。工具仅支持免密访问的公开 HTTP（80 端口）和 HTTPS（443 端口）网页，不支持账号登录、Cookie 授权弹窗确认或验证码破解。

### 导出的 CSS 字体栈是否代表浏览器实际渲染的字体？

不代表。提取结果仅记录样式表中声明的 CSS 字体栈规则，无法确认客户端操作系统最终实际命中的物理字体文件。

### 截图是否包含整页长图滚动的区域？

不包含。截图仅捕获设定的固定视口（桌面端 1440×1000 或移动端 390×844），但样式采样会包含首屏下方已渲染的可见元素。

### 单次样式采样的请求和数据量限制是多少？

采集任务执行上限为 40 秒、30 MiB 网络流量和 200 个网络请求，单份 HTML 文档最大允许 8 MiB。

### ZIP 设计包与独立 Markdown 文档有什么区别？

ZIP 包包含独立的文件清单（design.md、screenshot.png、tokens.json 和 tokens.css），而 Markdown 选项则输出一份内嵌 Base64 截图、可单独分发查看的单文件报告。

## 相关工具

- [CMYK 颜色转换器](https://elysiatools.com/zh/tools/cmyk-converter): 在 HEX、RGB、HSL 和 CMYK 之间统一转换颜色。
- [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。
- [CSS 缓动与动画可视化器](https://elysiatools.com/zh/tools/css-easing-visualizer): 可视化 CSS cubic-bezier 缓动曲线，在位置/透明度/缩放上实时预览，选择预设并导出可复制的 CSS
- [OKLCH 色彩转换器](https://elysiatools.com/zh/tools/oklch-color-converter): 使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议
- [无障碍色彩对比度检查器](https://elysiatools.com/zh/tools/accessible-color-palette-contrast-checker): 按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议
- [Adobe RGB转HEX转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-hex-converter): 将Adobe RGB颜色值转换为HEX格式用于网页设计
- [类似色工具](https://elysiatools.com/zh/tools/color-analogous): 生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合
- [互补色工具](https://elysiatools.com/zh/tools/color-complement): 查找互补色并创建和谐的颜色方案，支持三元色、四色和类似色关系

## 示例

- [Ant Design 示例](https://elysiatools.com/zh/samples/ant-design): Ant Design组件示例 - 企业级UI设计语言和React UI库，包含丰富的高质量组件集
- [变更日志提取器样本](https://elysiatools.com/zh/samples/changelog-extractor): 用于测试变更日志解析和提取工具的各种变更日志格式
- [Markdown 链接提取示例](https://elysiatools.com/zh/samples/markdown-with-links): 包含各种链接类型的 Markdown 示例文档，用于测试 Markdown 链接提取工具
- [手机号提取器示例](https://elysiatools.com/zh/samples/phone-number-extractor): 包含来自多个国家的电话号码的混合文本集合，用于提取测试