从任何网站提取资产、颜色、版式和标记。导出为 CSS、SCSS、Tailwind 等。终极开发和设计工具包。
🎨 立即从任何网站提取设计令牌、样式和资产
Peek 是一款面向 UI/UX 设计师、vibe 编码员和前端开发人员的终极一体化检查器工具。只需单击一下，即可从任何网站提取完整的设计系统（颜色、渐变、版式、阴影、边框半径和资源）。告别手动检查，迎接简化的工作流程。
以 CSS、SCSS、Tailwind CSS v3/v4、JSON、SVG 等格式导出可用于生产的代码。
✨ 主要特点
🔍 新：设计审核
- 根据真实的设计系统规则自动审核任何网站：可访问性、颜色、排版、间距、布局和组件一致性。
- Peek 对每个维度进行评分并给出总体评分，以便您可以准确地看到网站设计的不足之处。
📊 新：设计健康与概述
-“概述”选项卡现在显示实时设计健康评分，包括等级、理由和每个维度的细分。
- 色彩和谐检测、WCAG 对比对分析、字体配对审查和深色模式检测 — 全部集中在一处。
- 从概述中直接跳转到审计结果或完整的 Typescale 视图。
🌑 新：阴影提取
- Peek 从页面中提取每个框阴影和投影 - 解析为带有偏移、模糊、扩散和颜色的单独图层。
- 在专用阴影模态中检查阴影细节。
- 浏览阴影页面上的所有阴影，并一键将它们复制为 CSS 令牌。
🛠️ 新：技术堆栈检测（内置）
- Peek 检测网站构建所用的流行框架。
- 带有框架描述的堆栈图标和工具提示直接显示在“概述”选项卡中。
⬛ 新：边界半径提取
- Peek 现在显示整个页面使用的边框半径标记，显示在“概述”选项卡中以及颜色和排版摘要旁边。
🖼️ 完整的资产提取
- 立即查找并分析页面上的所有图像、SVG 和其他资源。
- 按名称或类别搜索资产；按尺寸过滤（小/中/大）。
- 一键过滤、缩放、复制和下载资源。
🎨 SVG 颜色自定义
- 直接在 Peek 内更改单个 SVG 颜色 — 包括多色 SVG。
- 立即复制或下载定制的 SVG。
- 自动检测渐变 SVG 并用清晰的横幅进行标记。
🎨 智能颜色和渐变检测
- 自动提取整个调色板，包括纯色和渐变。
- 支持 HEX、RGB、HSL 和 OKLCH 等现代格式。
- 以开发人员就绪格式复制或下载
📝 高级版式分析
- 立即识别字体系列、大小、粗细和行高。
- 使用语义标签可视化网站的完整字体（显示、标题、正文、说明文字……）。
- 实时字体预览：查看与网站上显示的字体完全相同的字体。
- 智能脚本检测：Peek 自动检测脚本（拉丁语、孟加拉语、印地语、泰米尔语、泰卢固语、马拉雅拉姆语、希伯来语、中文、泰语、阿拉伯语、日语、西里尔语等）并预览相应语言的字体。
- 从“概述”选项卡复制 CSS、SCSS、Tailwind 或 JSON 中的完整字体比例。
📤 Tailwind v3 和 v4 导出
- 导出 Tailwind CSS v3 和 v4 的颜色标记。
- 当颜色格式（例如 OKLCH）与 Tailwind v3 不兼容时，Peek 会自动警告您，因此您的输出始终有效。
🚀 闪电般快速且对开发人员友好
- 获取即时样式和资产数据，无需重新加载页面或影响性能。
- 将样式直接复制到剪贴板或下载文件。
- 导出干净的、可用于生产的代码。
🎯 非常适合
- UI/UX 设计师创建设计系统
- 前端开发人员构建组件库
- 设计团队进行设计审核并保持品牌一致性
- 学生学习网页设计原理
🔒 隐私第一
- 所有处理都在您的设备本地进行
- 没有数据发送到外部服务器
- 尊重您的隐私和网站内容
🚀 几秒钟内即可开始
- 安装 Peek 扩展
- 导航到任何网站
- 单击“查看”图标
- 立即提取样式
💡 使用案例
- 在几秒钟内对任何站点进行完整的设计审核。
- 对网站的设计系统进行逆向工程。
- 检测网站是使用什么框架和库构建的。
- 从鼓舞人心的网站构建调色板。
- 分析竞争对手的版式和品牌。
- 创建一致的品牌准则。
- 使用现实世界的设计令牌更快地制作原型。
🎨 支持的格式
- CSS、SCSS、Tailwind CSS（v3 和 v4）、JSON、SVG 等
- 与所有主要设计工具兼容
- 可供生产使用
- 立即安装 Peek，释放智能风格和资产提取的力量！
发布历史
🚀 v0.8.10.0 // 2026 年 5 月 29 日（补丁 v0.8.10.1；2026 年 6 月 12 日）
🥳 新！
1️⃣ 设计审核：Peek 现在可以根据真实的设计规则审核任何网站，包括可访问性、颜色、排版、间距、布局和组件一致性 - 并提供评分和可导出的报告。
2️⃣ 设计健康评分：“概览”选项卡显示实时健康评分、等级、每维度细分、色彩和谐检测、WCAG 对比对分析、字体配对见解和暗模式检测。
3️⃣ 阴影提取：页面上的每个框阴影和投影都被提取，解析为图层，并在专用的阴影模态和阴影页面中查看。立即将阴影复制为 CSS 令牌。
4️⃣ 技术堆栈检测（内置）：Peek 检测网站构建所用的流行框架 - 在“概述”选项卡中以图标和工具提示显示。
5️⃣ 边界半径提取：边界半径标记现在显示在“概述”选项卡中。
6️⃣ Tailwind v3 导出：专门为 Tailwind CSS v3 导出颜色标记，当颜色格式不兼容时会自动发出警告。
7️⃣ 资产选项卡搜索和过滤：按名称或类别搜索资产，并按大小（小/中/大）过滤。
⬆️ 改进
- 版式模态：增强的交互性和更丰富的统计数据。
- 重新设计了“概述”选项卡，以提高清晰度并导航到“审核结果”、“类型比例”和“阴影”页面。
- 在资产模式中使用内联横幅通知进行 SVG 梯度检测。
- 整个用户界面中所有标签、按钮和徽章的标题大小写保持一致。
---
🚀 v0.8.9.1 // 2026 年 4 月 19 日
🥳 新！
1️⃣ SVG 超能力：更改 SVG 颜色并复制/下载定制的 SVG（渐变 SVG 颜色定制即将推出！）
2️⃣ 更有条理的资产：徽标现在首先出现！其他资产按资产类型分组。
3️⃣ 改进：概览选项卡中的跳转到顶部按钮
🐞 错误修复：修复了在 SVG 颜色编辑模式下手动输入的十六进制值不起作用的错误。
---
🚀 v0.8.8.0 // 2026 年 3 月 8 日
🥳 新内容：网站概述
1️⃣ 概述选项卡 – 当前站点的颜色、排版和字体比例的单页摘要。
2️⃣ 颜色分析 – 主色、次要色和强调色以及角色细分（背景、文本、按钮）。
3️⃣ 版式总结 – 标题/正文字体、独特样式计数和字体比例预览。
4️⃣ 快速操作 – 跳转到复制或下载从概览中选择的颜色组。
🥳 新功能：复制字体比例
1️⃣ 将字体比例复制为... – 复制 CSS、SCSS、Tailwind 等中的完整字体比例。
⬆️改进：输出代码（复制/下载）
1️⃣ 生成的代码更清晰——格式、间距和注释更加一致。
2️⃣ 更好的结构——变量和规则的逻辑分组和排序。
---
🚀 v0.8.7.2 // 2025 年 11 月 4 日
✨ 新功能和改进
• 删除选取的颜色：通过撤消支持删除单个选取的颜色。
• 圆锥渐变到SVG：圆锥渐变在SVG 导出中自动转换为线性。
• 增强的视频播放器：资产模式中的画中画支持。
• 改进的颜色转换：OKLCH 渐变颜色现在可以正确转换为您选择的格式。
🐞 错误修复
• 修复了OKLCH 渐变颜色在复制和下载页面中无法转换的问题。
享受！
https://trypeek.app