1. Open the page you want to study
Open the page in Chrome, then open the PikSpec extension. Grant access when prompted and start the capture from the panel. Use a page you have permission to inspect. Chrome’s own settings pages and other protected browser surfaces cannot be captured.
If the page requires a login, sign in on that page first. The capture reflects what your browser can render at that moment; it does not provide access to another user’s session or a site’s backend.
2. Review colours, typography and spacing
Use Styles to review the colours and typography detected on the page. Compare text sizes, weights and spacing before treating repeated values as a design system. A measured value is evidence of how the page rendered, not necessarily the name or intent of the original design token.
Font-family declarations can contain several fallback fonts. A computed font stack alone does not confirm which font rendered every character. Check the available font evidence and compare line breaks before rebuilding the component.
3. Inspect an individual component
In Inspect, select the element you want to study. Review its saved preview, layout, spacing, typography and appearance. Use All properties to search for a property or value, then copy the CSS declarations you need.
The dashboard preview is a saved capture. Hovering over it does not create new evidence from the original page. Responsive and interaction comparisons depend on which widths and states were actually captured. Return to the source page to capture missing evidence.
4. Export design tokens and a Design Pack
Generate a token package when you need reusable values for implementation. The package includes DESIGN.md, JSON, CSS, Tailwind CSS and SCSS outputs. Review the generation allowance shown before proceeding; copying or downloading an existing generated result does not create a new generation.
The Design Pack is a reference for captured design details. It is useful alongside the token files when explaining typography, colours and layout to an AI coding tool. Missing source data cannot be recovered by changing the export format.
5. Choose a clone or a reconstruction prompt
Use Clone when you want a saved page archive. If Clone says Nothing packed yet, open the original page and run Clone from the extension. A saved screenshot by itself is not an interactive clone.
Use an element reconstruction prompt when you want to implement a selected component. Copy the prompt into your coding tool, build the component in your project, and compare the result with the saved reference. A reconstruction prompt provides captured evidence; it does not promise the original source code or an identical backend.
6. Check the result at desktop and mobile sizes
Compare the rebuilt component at the captured width, then test narrower layouts. Check font loading, text wrapping, overflow, keyboard focus and menus. Test hover and focus behaviour separately from a static screenshot.
When something differs, first check whether the capture contains the required font, asset, state or breakpoint. Capture additional evidence where possible, then adjust the implementation. Review visible private information before saving or sharing a capture.
Plans and help
Start with the free plan to explore the inspection workflow. Compare the current plan allowances before generating tokens, reconstructing elements or exporting clones. For a failed capture, include the error message, browser version and steps to reproduce it when contacting support.
Compare PikSpec plans · Troubleshoot a capture · Explore the Design Pack
Contact PikSpec
Email support@pikspec.com for support, privacy requests or content reports.