Spectra - Design Peeper & Stack Detector

by lyle.lypm · tickmao.com · Developer Tools

Established publisherManifest V3 Free

View in Chrome Web Store Data as of 16 Oct 2026

Instant visual analytics & Figma-style inspection. Extract colors, fonts, and tech stacks effortlessly.

Users

+1 in 30 days

Rating

5.0 / 5

unchanged in 30 days

Ratings

0 in 30 days

Store rank

#141K

#118K among extensions

Version

1.2.0

updated 23 Dec 2025

Users

monthly, 10 months

Latest, 16 Oct 2026: 24 usersMove the mouse over the chart for any month

Ratings count

monthly, 10 months

Latest, 16 Oct 2026: 1 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About Spectra - Design Peeper & Stack Detector

Spectra 是一款专为设计师和前端开发者打造的网页视觉分析与还原工具，集成类似 Figma 的像素级页面检查器。 Spectra is the ultimate visual analytics dashboard and Figma-style inspector for designers and developers. 🚀 核心功能 / Core Features 1. 🎨 设计仪表盘 (Design Dashboard) • 配色提取：智能提取页面核心配色，自动合并相似色，一键获取完整配色方案。 • 字体概览：自动识别页面使用的所有字体家族 (Font Family) 和字重。 • 技术侦测：专注前端技术探索，精准识别 React, Vue, Tailwind, Next.js 等主流框架和工具。快速了解站点实现方案，定位技术选型，寻找开发灵感。 2. 🔍 元素检查器 (Inspector) • 像素级精度：快捷键快速启动，悬停即查，点击锁定。 • 智能测距：按住 Alt 键即可测量元素间距，完美还原设计软件的操作体验，不再为布局差异而烦恼。 • 开发友好：一键复制 CSS 代码，查看详细元素信息，支持 WCAG 对比度评级，自动进行 px/rem 单位换算。 • DOM 导航：使用键盘方向键 (↑/↓) 在 DOM 树中快速穿梭切换。 3. ⚙️ 其他 (Others) • 现代设计：支持现代深色/明亮模式切换 (Dark/Light Mode)，支持多语言。 • 隐私安全：所有分析均在本地浏览器完成，不收集任何用户数据。 ------------------------------------- [English Description] Spectra helps you analyze any webpage in seconds. ✨ 1. Smart Dashboard • Colors: Extract core color palettes intelligently. • Typography: Detect fonts and weights instantly. • Tech Stack: Identify frontend frameworks (React, Vue, Tailwind, Next.js, etc.) to understand how the site is built. ✨ 2. Figma-style Inspector • Precision: Inspect elements on hover, click to lock. • Smart Measurement: Hold the "Alt" key to measure distances between elements—just like in design tools. • Dev Tools: Copy CSS, view WCAG contrast, and see px/rem units automatically. • DOM Navigation: Use arrow keys to traverse the DOM tree. 🔒 Privacy First: All analysis happens locally in your browser.