跳转到主要内容

​
网站设计解析器

从任意网站提取完整设计系统 — 配色、字体、背景与文字组合及对比度比率，几秒内完成。非常适合竞品分析、品牌灵感汲取或复刻特定设计风格。 积分消耗： 每次解析消耗 2 积分
访问地址： app.wrldwide.ai/website-inspector

​
概述

输入任意 URL，网站设计解析器将会：
  1. 截图 实时网站
  2. 提取 所有使用的颜色（背景色、文字色、强调色）
  3. 识别 所有字体及其字重 / 字号
  4. 映射 背景与文字的配色组合及对比度比率
  5. 交付 完整、可直接复用的设计报告

​
提取内容详解

​
🎨 配色

解析器将颜色分为三组：
类别展示内容
主要背景色主背景颜色及其使用频率
主要文字色正文、标题和标签颜色
强调色CTA 按钮、高亮、链接、交互元素
全部颜色按使用占比排序的完整调色板
每种颜色附带：
  • HEX 代码（如 #7c5cfc）
  • RGB 数值（如 rgb(124, 92, 252)）
  • 颜色名称（如 “Medium Slate Blue”）
  • 使用占比 — 该颜色在网站中占多少比例

​
✍️ 字体排印

字体提取揭示：
数据项展示内容
字体家族字体名称（如 “Inter”、“Geist”、“DM Sans”）
使用字重当前使用的字重（300、400、600、700 等）
使用字号字号范围（如 12px、14px、16px、24px、48px）
使用频率该字体出现的频率

​
🔲 背景与文字配色组合

最具实用价值的部分 — 展示哪些颜色被搭配使用：
  • 背景色 + 文字色 配对
  • 出现次数 — 该组合出现了多少次
  • 对比度比率 — 无障碍评分（WCAG 合规性）
  • 视觉预览 — 实际渲染后的颜色组合效果

​
使用方法

1

打开网站设计解析器

访问 app.wrldwide.ai/website-inspector
2

输入网站 URL

输入或粘贴你想要解析的网站完整 URL。示例：
  • https://apple.com
  • https://shopify.com
  • https://yourcompetitor.com
适用于任何公开网站。
3

点击提取

点击提取设计（消耗 2 积分）。解析器将会：
  • 加载并截图实时网站
  • 处理颜色、字体和配色组合
  • 约 10-20 秒内返回结果
4

查看配色

浏览配色区域 — 主要背景色、主要文字色、强调色。点击任意颜色即可一键复制 HEX 代码。
5

查看字体

查看使用了哪些字体及其字重。记录字体家族名称，以便在你自己的设计或提示词中使用。
6

查看配色组合

背景与文字配色组合区域展示实际使用的颜色搭配。检查对比度比率确保无障碍合规。
7

复制并应用

使用一键复制按钮获取 HEX 代码、字体名称或完整调色板。应用到你的品牌素材或图片生成提示词中。

​
核心功能

解析器加载并渲染实际的实时网站 — 包括动态元素、CSS 变量和当前设计。你看到的就是访客看到的效果。
颜色按出现频率排序。排名靠前的颜色定义了网站的视觉形象 — 而非仅仅是 CSS 文件中存在的颜色。
每个背景与文字配色组合均获得无障碍合规评分。既可用于设计灵感，也可确保你自己的设计符合 WCAG 标准。
每个颜色值（HEX、RGB）都有复制按钮。字体名称可直接复制，无需手动记录。
在提取数据旁边查看被解析网站的截图，方便将颜色与视觉效果对照。

​
使用场景

​
竞品设计调研

解析竞争对手网站，了解其设计语言：
  • 他们使用什么配色方案？
  • 是暖色调还是冷色调？
  • CTA 的强调色是什么？
  • 哪些字体传达了他们的品牌个性？

​
广告品牌克隆

从成功品牌中提取精确颜色和字体，然后在你自己的创意提示词中使用： 
请生成一张护肤产品广告，使用以下配色：
背景：#F5F0E8（温暖米白色）
文字：#1A1A1A（近黑色）
强调色：#C4956A（温暖金色）
字体风格：简洁无衬线，类似 "Canela" 字体

​
设计系统归档

解析你自己的网站，归档实时设计系统 — 非常适合品牌规范、设计师入职或一致性审计。

​
风格迁移灵感

将提取的配色用于风格迁移，将网站的视觉美学应用到你的产品图片上。

​
在图片生成提示词中使用提取数据

将解析结果直接用于图片生成提示词： 改进前（模糊）： 
Glossier 风格产品图
改进后（精确，使用提取数据）： 
产品图，背景色 #F5F0EB（温暖奶油色），
强调色 #E8C4B8（雾玫瑰色），简洁无衬线字体，
大量留白，柔和漫射光，高端 DTC 美学
颜色和字体引用越精确，AI 生成的视觉效果越准确。

​
下一步

图片生成

在图片提示词中使用提取的颜色

风格迁移

将设计美学应用到产品图片

Logo 创建

用你的配色方案创建 Logo

广告洞察

分析竞争对手广告创意