字体
查看网站用了什么字体，以及它的授权
页面上每种字体的字体族、字重、字号和来源，外加从 H1 到按钮的完整字体层级。
- 知道它来自 Google Fonts、Adobe 还是自托管
- 使用前先看授权
- 把字体层级导出到你的项目
Aa
Playfair Display
Google Fonts · OFL
- Aa Regular
- Aa Italic
- Aa Bold
截图
整页导出为 PNG 或 PDF，也可以只截取单个元素。
一站搞定
以前研究一个网站要开五个扩展。现在只开一个，就能看到字体、颜色、CSS 和 SEO，无需账号。
一个窗口
以前每个扩展都在自己的窗口里显示数据，而且什么都不保存。现在我能在一起看到全部，还能保存下来。
对比
我为自己的网站和 Google 前三名各保存一张卡片，在一张表格里并排查看。
触手可及
鼠标悬停，就能看到所指元素的字体、颜色和 CSS。点一下，还能拿到页面的 SEO 和截图。
试一试
还没安装任何东西，我就打开演示，在这个页面上悬停：字体、字号、颜色和盒模型一目了然。
原样呈现
字体和它的授权、一个 URL 的 SEO、网站的设计系统，我都能原样看到，不用手动复制。
适合谁
设计师、SEO 还是代理公司，各取所需：从参考网站的 token 到给客户的对比表格。
持续更新
我看看更新日志：v1.0 发布版，以及七项 Pro 功能的抢先体验。
发布当天
我翻看发布当天的功能清单：检查、SEO 和截图功能从第一天起就都有。
价格
基础功能永久免费。Pro 一次性付款，无需订阅，抢先体验期间还有七项 Pro 功能免费。
候补名单
它还没上架 Chrome Web Store：我加入候补名单，争取第一批试用。
常见问题
安装之前，我先浏览最常见的问题，不用离开页面就找到了答案。
01
五个扩展，一个窗口搞定
之前 / 之后之前
- 一个扩展只为查字体
- 另一个查颜色，却不管对比度
- 为读一条 CSS 规则打开 DevTools
- 再装一个查页面 SEO
- 把所有数据手动复制到表格里
用 Smart Design Inspector
- 字体、字重、授权和字体层级，一个面板全看到
- 调色板、取色器，每组颜色的 WCAG 对比度
- 鼠标一悬停，CSS、盒模型和间距一目了然
- Title、schema、hreflang 和 llms.txt，附提示
- 保存卡片，一键导出对比表
核心功能
你的网站与竞争对手，一表对比
为每个网站保存一张卡片并进行对比：title、标题结构、schema、字体、颜色和 Core Web Vitals。表格可导出为 CSV 或 Markdown，直接交给客户。
网站对比 →对比 · 3 个网站CSVMarkdown
| yourclient.example | competitor-a.example | competitor-b.example | |
|---|---|---|---|
| Title | 58 字符OK | 74 字符待改进 | 52 字符OK |
| H1 | 1OK | 0缺失 | 1OK |
| Schema | OrganizationOK | —缺失 | ProductOK |
| 字体 | Inter | Poppins | DM Sans |
| 颜色 | #2563EB | #16A34A | #0B0B0B |
| LCP | 1.8 sOK | 3.4 s待改进 | 2.1 sOK |
02
网站上看到的一切，尽在手边
8 项功能网站对比
为每个竞争对手保存一张卡片，并在可导出的表格中对比。
网站对比 →SEO 检查器
Title、description、Open Graph、H1-H6、schema、hreflang、robots、sitemap 和 llms.txt，并附带提示。一键跳转到 PageSpeed 或 isitagentready.com。
SEO 检查器 →CSS 检查器
鼠标悬停即可查看计算后的 CSS、盒模型、外边距和间距。
CSS 检查器 →字体
整页的字体家族、字重、来源、授权和字号层级。
网站用的是什么字体 →颜色
页面调色板、取色器，以及每组文字与背景的 WCAG 对比度。
提取网站的颜色 →设计系统
将颜色、间距和排版导出为 Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md。
提取设计系统 →网站转 Tailwind
将任意区块复制为 JSX + Tailwind 或 HTML/CSS。
把网站转换为 Tailwind →03
无需安装，先试一试
Demo开启演示，把鼠标移到本页任意位置：你会看到每个元素的字体、字号、颜色和盒模型，和扩展里一样。
仅限桌面端 · 扩展的功能远不止这些
04
数据，原原本本
3 项功能详解SEO 检查器
几秒钟看清一个 URL 的页面 SEO
Google 在 head 和 body 中读取的一切，并提示你该修复什么。
- Google 搜索预览和社交预览
- Schema、hreflang、sitemap 和 llms.txt
- 实时 Core Web Vitals，高亮问题元素
| Title | Smart Design Inspector – Design & SEO… | OK |
| Description | 在 Chrome 中研究任何网站… | 过长 |
| Canonical | / | OK |
| OG image | — | 缺失 |
| hreflang | 8 种语言 + x-default | OK |
| llms.txt | /llms.txt | OK |
设计系统 Pro
提取任何网站的设计系统
颜色、间距和字体，可直接粘贴到你的项目，或交给你的 AI。
- Tailwind v4
@theme - CSS 变量
- 面向 AI 智能体的 DESIGN_SPECS.md
/* yourclient.example */@theme { --color-primary: #2563eb; --color-ink: #0b0b0b; --font-sans: "Inter", sans-serif; --spacing: 4px; --radius-md: 8px;}05
适合谁用
3 类用户网页设计师
看清客户发来的参考网站是怎么做的，无需打开 DevTools，就能把它的设计变量带进你的项目。
交付物：你的设计系统SEO
几秒钟检查一个 URL 的页面 SEO，并把客户的页面与 Google 排名前三的页面对比。
交付物：页面 SEO 审计代理公司
一键导出客户网站与竞争对手的对比表，直接交给客户。
交付物：CSV 或 Markdown 对比表用户评价
最新动态
- v1.0 — 正式发布 2027年1月1日
- 抢先体验 7 项 Pro 功能 持续到首个 Pro 版本发布
07
发布当天有哪些功能
1.0 版22 项功能永久免费，另有 7 项 Pro 功能开放抢先体验。无需账号，没有时间限制。
设计
6 项免费- 悬停即可检查：计算后的 CSS、盒模型、外边距和内边距
- 测量元素间距，附带标尺
- 页面字体：字体族、字重、字号、来源和授权
- 字体层级：从 H1 到按钮的每种文字样式
- 调色板与渐变、带放大镜和历史记录的取色器、颜色格式转换（HEX、RGB、HSL、OKLCH），以及每组文字与背景的 WCAG 对比度
- 最小化面板而不丢失任何内容：页面上的图标带你回到原处
SEO 与性能
10 项免费- Title、description、canonical、robots 和 meta 标签，附长度检查和提示
- Google 搜索预览（桌面端和移动端）及社交预览：Open Graph、X、LinkedIn 和 WhatsApp
- H1-H6 标题结构，附提示
- 图片：缺失的 alt、文件大小、格式和尺寸
- 内部链接、外部链接、nofollow 和 sponsored 链接，在页面上高亮显示
- 结构化数据（JSON-LD 和 microdata）一目了然并经过验证
- hreflang、robots.txt、sitemap.xml 和 llms.txt
- 实时 Core Web Vitals（LCP、CLS、INP），高亮问题元素
- 网站技术：CMS、页面构建器、框架，以及 WordPress 的主题和插件及其版本
- 一键在 4 个外部审计工具中打开页面：PageSpeed Insights、Google（site:）、OpenGraph.xyz 和 isitagentready.com
截图与下载
5 项免费- 整页截图，导出为 PNG、JPG、WebP 或 PDF，桌面版或移动版
- 单个元素截图
- 截图编辑器：裁剪、箭头、矩形、文字、模糊和擦除
- 下载优化后的 SVG、图标和图片，可转换为 WebP，还能在浏览器里放大查看照片
- 录制为视频：页面自动滚动到底，生成 MP4
网站对比
1 项免费- 抢先预览：最多保存 3 张卡片，在屏幕上对比 2 个网站
Pro · 抢先体验
对所有人免费，截至 Pro 发布（日期待定）
- 不限数量地对比网站：无限卡片
- 对比表格可导出为 CSV 或 Markdown
- 导出设计系统：颜色、间距和字体导出为 Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md
- 将检测到的技术导出为 CSV 或 Markdown
- 将页面区块复制为 JSX + Tailwind 或 HTML/CSS
- 复制区块的动画，生成 @keyframes 和 Tailwind
- 页面视频，标出正在移动的元素
灵感模式（复制时用占位符代替文字和图片）将随首个 Pro 版本免费推出
候补名单
成为首批试用者
Smart Design Inspector 正在开发中。留下你的邮箱，它在 Chrome 网上应用店上线当天我们会通知你，并在抢先体验期间免费开放 7 项 Pro 功能。
发布当天一封邮件，之后很少打扰 · 一键退订
免费吗？
是的。检查、SEO 和截图功能永久免费。Pro 只需一次性支付 €49，并包含一年的更新。
需要注册账号吗？
不需要。安装即可使用。免费版和 Pro 都无需登录。
我的数据会怎样？
一切都在你的浏览器中处理。你访问的页面不会发送到任何服务器，也不会在别人的网站中插入广告或捐赠链接。如果你在外部审计工具（PageSpeed、isitagentready…）中打开页面，只有在你点击时，该网站才会收到网址。
它不做什么？
它不提供关键词搜索量或外链数据，也不下载付费字体：它会告诉你字体的授权和获取渠道。
支持哪些浏览器和操作系统？
从 1.0 版起支持 Windows、Mac 和 Linux 上的 Chrome、Edge、Brave、Arc、Opera 和 Vivaldi。扩展由浏览器运行，而不是由操作系统运行，所以在各处表现一致。代码已为 Firefox 和 Safari 做好准备，无需重写。开发期间，内容可能会有变化。
用 React 搭建的网站或网店也能用吗？
可以。它读取的是浏览器已经渲染好的页面，所以与网站的搭建方式无关。