JSX + Tailwind
一个组件，用 Tailwind 类名还原计算后的样式。
导出 Pro
把网站的任意区块复制为 JSX + Tailwind
Smart Design Inspector 能把你选中的网站区块转换为带 Tailwind 类名的 JSX 组件，或转换为 HTML 和 CSS，粘贴到项目里即可使用。
Pro 功能，抢先体验期间免费，截至 Pro 发布（日期待定）
区块 · tucliente.example
预订
今晚订座
- 周二至周日，13:00-23:00
- 大街 12 号
<div className="rounded-lg border border-gray-200 p-8">
<p className="text-xs uppercase tracking-widest">预订</p>
<p className="mt-2 text-2xl font-semibold">今晚订座</p>
<ul className="mt-4 space-y-2 text-sm">…</ul>
<a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
立即预订
</a>
</div><div class="card">…</div>
.card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }01
工作原理
3 步- 01
打开网站，选择 复制区块。
- 02
移动鼠标，点击你想要的区块：首屏、价格卡片、页脚都可以。
- 03 Pro
选择格式（JSX + Tailwind 或 HTML/CSS），代码就会复制到剪贴板。
02
输出内容
2 种格式HTML/CSS
标记加对应的样式表，适用于不用 Tailwind 的项目或 WordPress。
03
借鉴灵感，不要照抄
知识产权其他网站的文案、图片和 Logo 都有所有者。复制结构和风格，再换上你自己的内容。首个 Pro 版本将带来灵感模式，所有人免费使用：复制时自动把文案和图片替换为占位内容。
| 免费€0永久 | Pro€49一次性付款 | |
|---|---|---|
| 复制任意元素的 CSS | ||
| 把区块复制为 JSX + Tailwind 或 HTML/CSS | — | 抢先体验免费 |
| 灵感模式：复制时把文案和图片替换为占位内容 | 随首个 Pro 推出 | 随首个 Pro 推出 |
免费吗？
这是 Pro 功能。在 Pro 发布（日期待定） 之前，所有人都可以免费抢先体验。之后它将包含在 €49 一次性付款的 Pro 中。
生成的代码完美吗？
代码可以直接运行，也贴近原样。但用 JavaScript 实现的动画和部分特效无法转成类名，建议再检查一遍。
会使用我项目里的颜色吗？
使用的是原网站的颜色。想把 token 变成变量，可以搭配“提取设计系统”一起使用。
能复制到 React、Vue 或 Elementor 吗？
JSX 可以直接用在 React 中。Vue 和 Elementor 计划在后续版本支持。
支持哪些浏览器和操作系统？
从 1.0 版起支持 Windows、Mac 和 Linux 上的 Chrome、Edge、Brave、Arc、Opera 和 Vivaldi。扩展由浏览器运行，而不是由操作系统运行，所以在各处表现一致。代码已为 Firefox 和 Safari 做好准备，无需重写。开发期间，内容可能会有变化。
候补名单
成为首批试用者
Smart Design Inspector 正在开发中。留下你的邮箱，它在 Chrome 网上应用店上线当天我们会通知你，并在抢先体验期间免费开放 7 项 Pro 功能。
发布当天一封邮件，之后很少打扰 · 一键退订