StyleSnap - CSS Inspector & Design Token Exporter EN
lucidlibs · EEdge MV3
Extract CSS, convert to Tailwind/React/Vue, export design tokens. The complete design extraction workflow.
<all_urls>），意味着它可以读取你在任意站点的页面内容，包括已登录的页面。这是许多扩展正常工作的必要条件，但也值得你确认来源可信。
截图
简介
StyleSnap is the fastest way to read, convert, and reuse the CSS on any website — right inside your browser.
🔍 INSTANT CSS INSPECTION
Hover any element to see its computed styles, click to lock. Values are editable inline — tweak them and watch the page update live. A box-model diagram shows margin · border · padding · content at a glance.
🌀 TAILWIND CONVERSION
Deterministic CSS-to-Tailwind mapping — no AI guesswork. Every class maps precisely to the original CSS value.
🎨 DESIGN PANEL
Extract the whole page's color palette and font stack in one click. Switch between HEX, RGB, and HSL, and export as CSS variables or JSON.
🤖 ACCESSIBILITY-AWARE AI PROMPTS
StyleSnap reads the element's ARIA roles and writes a prompt that tells the AI to implement keyboard navigation, focus management, and state — then outputs React, Vue, or HTML. Paste straight into Claude, ChatGPT, or Cursor.
🕘 INSPECTION HISTORY
Every element you lock this session is saved — jump back and re-open its styles instantly.
📋 COPY & EXPORT
Copy CSS, copy Tailwind classes, or open the element in CodePen — all from the overlay.
Works on any website — Tailwind, Bootstrap, or hand-written CSS. One-time purchase, no subscription.
StyleSnap - CSS Inspector & Design Token Exporter 是做什么的
StyleSnap - CSS Inspector & Design Token Exporter 是一款面向 Edge 的实用工具类扩展，主要用来解决浏览器里某类具体的小问题。官方对它的介绍是：Extract CSS, convert to Tailwind/React/Vue, export design tokens. The complete design extraction workflow.在微软 Edge 加载项商店上，它当前版本 1.0.3，约 3 名用户。
适合什么人用
从功能定位看，StyleSnap - CSS Inspector & Design Token Exporter 更适合想补上浏览器原生缺失功能的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。需要注意的是它作用于所有网站，装上后建议先观察一两天，确认不影响常用站点的正常使用。
怎么安装 StyleSnap - CSS Inspector & Design Token Exporter
- 打开微软 Edge 加载项商店上的官方页面；
- 点「添加到浏览器」并确认权限提示；
- 装好后在扩展列表里固定图标，方便随时开关。
本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。
常见问题
StyleSnap - CSS Inspector & Design Token Exporter 是免费的吗？
StyleSnap - CSS Inspector & Design Token Exporter 在微软 Edge 加载项商店免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。
StyleSnap - CSS Inspector & Design Token Exporter 安全吗？
它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。
StyleSnap - CSS Inspector & Design Token Exporter 支持哪些浏览器？
当前收录的版本来自微软 Edge 加载项商店，适用于 Edge。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。
怎么卸载 StyleSnap - CSS Inspector & Design Token Exporter？
在扩展管理页找到 StyleSnap - CSS Inspector & Design Token Exporter，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。
权限清单 来自 manifest.json 原文
站点访问（可选） 1
<all_urls>
接口权限 6
activeTabclipboardWritecontextMenusnotificationsstoragetabs