Elysia Tools
导航
Design
渲染公开网页，结合截图导出观察到的配色、字体、间距和组件样式。
详情
使用 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 离线提取，所有网络请求均被阻止。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
网站设计风格提取器通过沙箱环境中的 Chromium 真实渲染公开网页，自动抓取视口截图并采样分析页面中的配色、CSS 字体栈、间距、圆角与阴影等样式属性。提取结果可一键打包导出为结构化的设计令牌文件（tokens.json、tokens.css）与带截图的 Markdown 说明文档，无需人工逐项审查元素样式。
背景
团队计划为新项目参考某开源技术社区的设计语言，需要获取其在桌面端下的核心视觉基准。
问题
手动审查 DOM 提取色值和字体声明效率低下，且容易漏掉深层嵌套组件的实际样式。
如何使用
选择来源为“公开网站地址”，输入目标网址，视口设置为“桌面端（1440 × 1000）”，配色偏好选择“浅色”，格式选择“ZIP 设计包”，额外等待设为 500 毫秒后提交。
{
"source": "url",
"url": "https://example.org",
"viewport": "desktop",
"colorScheme": "light",
"format": "zip",
"waitMs": 500
}结果
下载包含 tokens.json、tokens.css、screenshot.png 和完整 design.md 的压缩包，可直接将 CSS 变量合并到项目中。
背景
正在评估自研应用在手机视口及暗黑环境下的设计规范，需要一份独立报告用于周会讨论。
问题
需要快速产出包含暗色模式移动端截图、主要用色频次分布和字体阶梯的单文件说明文档。
如何使用
选择“内置离线演示”或输入特定测试网址，视口切换为“移动端（390 × 844）”，配色偏好设为“深色”，格式指定为“独立 Markdown 文档”。
{
"source": "demo",
"viewport": "mobile",
"colorScheme": "dark",
"format": "markdown",
"waitMs": 0
}结果
不能。工具仅支持免密访问的公开 HTTP（80 端口）和 HTTPS（443 端口）网页，不支持账号登录、Cookie 授权弹窗确认或验证码破解。
不代表。提取结果仅记录样式表中声明的 CSS 字体栈规则，无法确认客户端操作系统最终实际命中的物理字体文件。
不包含。截图仅捕获设定的固定视口（桌面端 1440×1000 或移动端 390×844），但样式采样会包含首屏下方已渲染的可见元素。
采集任务执行上限为 40 秒、30 MiB 网络流量和 200 个网络请求，单份 HTML 文档最大允许 8 MiB。
ZIP 包包含独立的文件清单（design.md、screenshot.png、tokens.json 和 tokens.css），而 Markdown 选项则输出一份内嵌 Base64 截图、可单独分发查看的单文件报告。
生成一份单文件 Markdown 报告，内部已内嵌渲染截图，并罗列了移动端暗黑环境下的背景色、文本色及按钮圆角等观察属性。