PikSpec – Build with AI · CSS & Font Finder

Turn any website's design into a ready kit for Claude, Cursor and Codex. Inspect CSS, fonts and colors; export tokens and DESIGN.md.

PikSpec shows the design system behind any website and helps you build with it. Open it on a page to see the real fonts, colors and CSS, export them as design tokens, or hand the design to your AI coding tool so it builds your own product in that style. No more guessing from screenshots. Click an element and get the actual values. WHAT YOU CAN DO Build with AI (new) Capture a design you like, describe what you are building, and choose the AI tool you use. PikSpec opens it with the prompt ready, copies the prompt for chat assistants, or gives code editors a starter project with design tokens, rules files, reference images and a checker that flags colors, sizes or fonts outside the system. You can also restyle an app you already have without touching its logic or copy. If the site uses a licensed font, PikSpec tells you and suggests a close free alternative. Inspect any element Click a heading, button or card to see its computed styles: font, size, line height, colors, spacing, borders, radius and shadows. Copy the values into your code. Identify fonts See which fonts a page uses and the weights and sizes of each style. PikSpec checks the font that actually rendered, not just the one the CSS asked for. See the color palette Every color on the page in one place, with values you can copy. Read the whole design system Type scale, spacing, radius, shadows and effects, laid out together. Find images and icons Browse the images and SVG icons on the page, then download the ones you are allowed to reuse. Export design tokens Download what you inspected as CSS variables, JSON, a Tailwind theme, SCSS or a DESIGN.md brief. Save a static copy of a page Keep a static HTML and CSS reference of a page to study or rebuild a layout. It does not copy the site's backend, and you should only reuse pages and assets you have permission to use. Responsive screenshots Capture a page at desktop, tablet and mobile widths. Your workspace Save captures to your private PikSpec workspace and come back to them later. HOW IT WORKS 1. Open PikSpec from the Chrome toolbar. It opens in the side panel. 2. Click "Grant access & analyse" on the page you want to inspect. 3. Inspect, export, or build with AI. 4. Save what you need to your workspace. PikSpec never analyses a page on its own. Nothing happens until you click Analyse. PRIVACY - Pages are inspected locally in your browser. - Nothing is uploaded until you choose to save a capture. - Account and plan checks use PikSpec's service. - Anonymous usage stats record which features are used, never page addresses or content. You can turn them off in the account menu. - Screenshots and font checks may show Chrome's "started debugging this browser" notice. That is expected. Screenshots and saved pages can include personal information shown on the page. Review a capture before you save or share it. Some protected browser pages can't be captured. Plans: https://www.pikspec.com/pricing Website: https://www.pikspec.com Help: https://www.pikspec.com/support Privacy: https://www.pikspec.com/privacy Made by an indie developer. Questions or ideas? Email support@pikspec.com.