导出 Pro

提取任意网站的设计系统

Q: 免费吗？

这是 Pro 功能。在 Pro 发布（日期待定） 之前，所有人都可以免费抢先体验。之后它将包含在 €49 一次性付款的 Pro 中。

Smart Design Inspector 会扫描整个页面，提取其中的设计 token（颜色、字号层级和间距），并导出为 Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md，可直接用于你的项目或交给 AI 助手。

加入候补名单三种格式

Pro 功能，抢先体验期间免费，截至 Pro 发布（日期待定）

tucliente.example

/* Tailwind v4 */
@theme {
  --color-primary: #2563eb;  --color-ink: #0b0b0b;  --color-bg: #ffffff;  --color-line: #e5e7eb;  --font-heading: "Inter", sans-serif;
  --text-h1: 48px;
  --text-h1--line-height: 1.1;
  --spacing-section: 96px;
}

/* CSS 变量 */
:root {
  --color-primary: #2563eb;  --color-ink: #0b0b0b;  --color-bg: #ffffff;  --color-line: #e5e7eb;  --font-heading: "Inter", sans-serif;
  --text-h1: 48px;
  --spacing-section: 96px;
}

# 设计系统 · tucliente.example

## 颜色
- primary #2563eb · 按钮和链接
- ink #0b0b0b · 正文

## 字体排版
- H1 · Inter 600 · 48 px / 1.1

## 间距
- 区块 · 96 px

示意示例 · Pro · 抢先体验

它为你省下的工作

痛点

客户发来一个参考网站：“我想要这种感觉。”要复刻它的风格，你需要它的颜色、字号和间距。用取色器和 DevTools 一个个去扒，要点几十下，最后得到的只是一堆零散的数值，而不是一套能直接用的系统。

导出哪些内容

3 类 token

颜色

按用途分组的页面配色：背景、文字、边框、强调色

字体排版

每种样式（H1-H6、正文、按钮）的字体、字号、字重、行高和字间距，以及 @font-face 或 Google Fonts 链接

间距

页面中反复出现的外边距和内边距尺度

三种输出格式

复制或下载

Tailwind v4 `@theme`

粘贴到你的 CSS 中：

@theme {
  --color-primary: …;
  --font-heading: …;
  --spacing-section: …;
}

CSS 变量

写在 :root 中，适用于任何不用 Tailwind 的项目。

DESIGN_SPECS.md

一份完整讲解整套系统的文档。既能给团队看，也能在你让 Claude、Cursor 或其他 AI 助手按这种风格开发时直接交给它。

使用方法

3 步

01
打开参考网站。
02
选择 设计 → 导出系统。
03 Pro
选好格式，复制或下载。

免费版与 Pro

查看价格 →

	免费€0永久	Pro€49一次性付款
查看页面的配色、字体和字号层级
导出设计系统：Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md	—	抢先体验免费