设计解构卡 Design Decoder

一键解构任意网页的真实渲染设计系统：面积加权色板（HEX/OKLCH）、字体阶梯、圆角阴影令牌与品牌资产，直接导出 DESIGN.md。

前端工程师、UI/UX 设计师与 AI 创作者在参考优秀网页时，往往需要反复打开开发者工具逐个节点翻找颜色、字体与圆角变量。设计解构卡（Design Decoder）在浏览器侧边栏或弹窗中，一键读取当前页面真实渲染后的计算样式（Computed Styles），在 50 毫秒内生成结构化设计系统卡片。 1. 面积加权色彩系统：按元素在视口中的真实渲染像素面积加权排序，自动归纳背景纸色、卡片表面、主文字墨色、次要灰阶、品牌强调色与发丝边框色，支持一键切换 HEX 与感知均匀色彩空间 OKLCH，并实时计算 WCAG 对比度评级（AAA / AA）。 2. 字体与排版阶梯：提取页面实际生效的主字体族、等宽字体族与激活字重分布，按 H1、H2、H3、正文与代码层级列出字号、无单位行高、字距与页面真实文案样本。 3. 表面几何与根级变量：统计页面同心圆角（border-radius）分布与阴影层级，支持实时检索与一键复制 :root 下的全部 CSS 自定义属性（--token）。 4. 页内十字准星探针：点击顶部探针按钮即可在当前网页开启精密悬浮取样框，鼠标悬停任意元素实时查看其尺寸、文字色、背景色、字号字重与圆角。 5. 一键导出 DESIGN.md：直接复制或下载符合 AI 编程助手（Claude Code、Cursor、Hermes）规范的 DESIGN.md 设计系统文档、tokens.css 样式表与 W3C Design Tokens JSON。 适合独立开发者、产品设计师、设计系统工程师以及使用 AI 构建前端界面的创作者。所有样式计算均在本地浏览器内完成，仅在点击扩展图标时通过 activeTab 临时读取当前标签页样式，不收集或上传任何浏览数据。