Spectra - Design Peeper & Stack Detector

Name: Spectra - Design Peeper & Stack Detector
Rating: 5 (1 reviews)
Author: lyle.lypm

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

As of June 2026, Spectra - Design Peeper & Stack Detector has 18 users and a 5.00/5 rating from 1 reviews in the Developer Tools category.

lyle.lypm Developer Tools

Chrome Web Store ↗.crx

Users+12.5%

Rating0%

5.00

1 reviews

Reviews0%

Version

1.2.0

Manifest V3

History

7 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	16	5.00	1	1.2.0
Apr 19, 2026	15	5.00	1	1.2.0
Apr 28, 2026	14	5.00	1	1.2.0
May 8, 2026	15	5.00	1	1.2.0
May 16, 2026	16	5.00	1	1.2.0
May 25, 2026	18	5.00	1	1.2.0
Jun 4, 2026	20	5.00	1	1.2.0
Now	18	5.00	1	1.2.0

Permissions & access

Permissions: activeTabstorage
Host access: <all_urls>

Screenshots

Spectra - Design Peeper & Stack Detector screenshot 1

Spectra - Design Peeper & Stack Detector screenshot 2

Spectra - Design Peeper & Stack Detector screenshot 3

Spectra - Design Peeper & Stack Detector screenshot 4

About

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.