How to inspect a website’s design system
A step-by-step workflow: open a page, review its colors, typography and spacing, inspect individual components, export tokens and a Design Pack, and check the result at desktop and mobile sizes.
Extract design tokens from any website
What a design token extractor measures, the five export formats (DESIGN.md, JSON, CSS, Tailwind v4 and SCSS), and the limits of values measured from a rendered page.
Generate a DESIGN.md for AI coding tools
Why AI-built sites look generic, what goes into a DESIGN.md, and how to use one with Claude Code, Cursor, v0 and Codex.
Find the colors and fonts any website uses
See a page’s whole palette and type scale at once, check which font actually rendered, and export the results for your own project.
Example Design Pack
A complete Design Pack built from sample data, showing how captured colors, type, spacing, radius and shadows are organised.
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.