Spectra - Design Peeper & Stack Detector

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

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.