提取任意样式。
即时可得。
悬停 → 锁定 → 编辑 → 复制。提取网站的 CSS，在页面上实时修改，导出为 Tailwind 类 — 全程无需离开页面。
为追求快速交付的设计师与开发者打造
一个工具，三种工作流
看到想要的组件？悬停、锁定、复制成 Tailwind 或 AI prompt。无需翻 DevTools，无需手动转换，粘贴即用。
Tailwind 转换 · 实时编辑 · AI Prompt
想从参考网站取配色或字体？打开 Design 面板——所有颜色和字体一览无余，需要哪个复制哪个。
Design 面板 · 字体检查 · HEX/RGB/HSL
想传达设计决策？锁定元素、抓取精确样式，用 Box Model 图清晰说明间距构成。
Box Model · CSS 快照 · 历史记录
为追求效率的开发者而生
没有侧边栏，不用 DevTools。一切都在页面上完成。
悬停锁定
悬停任意元素查看样式。点击锁定 — CSS 覆盖层直接在元素旁边展示所有计算属性。
实时在线编辑
点覆盖层中的任意 CSS 值直接编辑，回车应用 — 页面立即更新。无需侧边栏，无需弹窗。
Tailwind 类导出
确定性 CSS→Tailwind 转换 — 无 AI 幻觉。颜色、间距、排版、布局一一映射到精确 Tailwind 工具类。
配色方案提取
一键提取整页配色与字体。颜色支持 HEX/RGB/HSL 切换，可导出 CSS 变量或 JSON。
可访问性感知 AI Prompt
读取元素的 ARIA 角色，自动生成要求 AI 实现键盘导航、焦点管理与 state 的 prompt，按 React / Vue / HTML 输出，可粘贴进 Claude、ChatGPT 或 Cursor。
复制与导出
复制 CSS 文本或 JSON、导出 Tailwind 类。全在覆盖层底部完成 — 无需切换窗口。
3 步完成，零摩擦。
悬停锁定
光标移到任意元素上方。StyleSnap 高亮显示。点击锁定 — CSS 覆盖层直接出现在元素旁。
编辑预览
点覆盖层中的 CSS 值直接编辑，回车 即见页面变化。复制 CSS、导出 Tailwind 类、提取配色 — 全在同一个覆盖层完成。
导出交付
复制 CSS、JSON 或 Tailwind 类，直接粘贴使用。
真实网页上的真实截图
以下所有功能适用于任何网站 — Tailwind、Bootstrap、自定义 CSS，都能用。
悬停任意元素 → 即时 CSS 面板
所有计算属性按分类整理：排版、视觉、布局。一键复制 CSS 或 Tailwind。
CSS → Tailwind 一键转换
确定性映射 — 无 AI 幻觉。每个 class 都精确对应原始 CSS 值。
一键提取页面配色与字体
获取整个页面的调色板和字体栈。在 HEX、RGB、HSL 之间切换。导出为 CSS 变量或 JSON。
直观查看 margin · border · padding · content
嵌套盒模型图出现在锁定元素旁边，间距一目了然。
无障碍友好的 AI 提示词
StyleSnap 读取元素的 ARIA 角色，生成包含键盘导航、焦点和状态等需求的 AI 提示词 — 输出 React、Vue 或 HTML。
随时回到检查过的元素
本次会话中所有锁定的元素都会被保存 — 点击即可重新锁定并查看样式。
一个价格，全部包含。
无订阅，无隐藏费用。一次买断，永久使用。
- ✓无限 CSS 提取
- ✓页面上实时在线编辑
- ✓Tailwind 类导出
- ✓配色方案提取
- ✓复制 CSS / JSON / Tailwind
- ✓终身更新
- ✓Edge & Chrome 支持
- ✓优先邮件支持
7 天无理由退款
通过 Dodo Payments 安全支付。购买后用邮箱激活 Pro。
Edge & Chrome 双平台支持
StyleSnap 同时支持 Microsoft Edge 和 Google Chrome。Firefox 和 Safari 即将推出。
手动安装
如果你所在地区无法访问商店，可下载扩展包手动加载。
⬇ 下载扩展 (ZIP)准备好告别反复翻 DevTools 了吗？
一键。完整样式。Tailwind 或 AI 提示词。$29 一次买断。
7 天无理由退款保障