D.Spoid

Inspect and extract a web page's design system with one click. Design inspector for designers, developers, and planners.

D.Spoid is a Chrome extension that allows you to inspect and extract the design system and UI details of any web page directly in your browser, without the need to open complex developer tools. Designed for designers, frontend developers, and product planners, it helps anyone quickly analyze the structure of live web pages. D.Spoid is not just a generic devtools clone; it is a practical workflow tool built to improve communication between teams and enhance the understanding of design systems. Operating directly in your current tab via a simple popup toggle, it instantly reveals the style, layout, and typography information of any selected UI element. Key Features Direct UI Inspection: Select and inspect UI elements directly on the active web page. Detailed Style Metrics: View exact element size, padding, margin, border, and border-radius. Typography Details: Instantly check font family, size, weight, and text color. Layout Information: Understand layout structures with display, position, and overflow properties. Design Token Detection: Detect CSS variables and design token references used in the element. Tailwind Mapping Suggestions: Get practical Tailwind-style class mapping suggestions for selected elements. Component Pattern Detection: Identify component patterns from common UI systems and libraries. Quick Copy & Share: Easily copy selected element information and console issue summaries. AI-Friendly Context: Generate location and context sharing data optimized for AI collaboration. Seamless Workflow: Works directly in the current tab via a popup toggle, with full English and Korean localization. Privacy & Data Usage D.Spoid respects your privacy. The extension does not collect, store, or sell any personal user data. All UI inspection and data extraction processes occur entirely locally within your browser and are never transmitted to external servers.