01 — Capture
Current tabInspect the page you can see
Open PikSpec on the current tab. It reads the rendered layout, components, styles, assets, and visible states without copying passwords, cookies, or form values.
NEWSee what is inside a Design Pack →
See the design system behind any page.
Capture the page you can already see. PikSpec maps its components, styles, assets, and states into AI-ready guidance.
Checking this browser
Colors
6 of 47 values#111111
#f6f5f3
#5b2fe8
#d0b2ff
#ffeed8
#99fff9
Typography
8 text rolesDisplay56 / -2.8px
Heading36 / -1.08px
Body16 / -0.16px
Caption14 / 0
What we could not verify
shown by default- JavaScript motion cannot be confirmed from CSS alone
- Canvas colors are sampled from the rendered page
- Licensed font detected; font file not included
Use your Design Pack with the tools you already use.
Claude Code
Cursor
v0
CodexCodex
Windsurf
GitHub Copilot
From open tab to usable design context in four steps
Inspect locally, review the evidence, then send only approved findings to your PikSpec workspace.
A Design Pack you can understand at a glance
See the reusable rules, working files, and evidence your AI receives.
Color
47 sampled → 9 steps- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
Type
8 roles · 1 scaleDisplay
44 / 400 / -1.08Heading
32 / 400 / -0.48Body copy
16 / 400 / -0.16Caption
12 / 500 / 0Spacing
6-step rhythm4812162432
Radius
4 sizes481220
Elevation
4 layers2px8px16px28px
Motion
2 curvesBuilt for people who build with AI
Choose your role to see how a Design Pack replaces guesswork with usable design evidence.
Build sites that don't look AI-generated
Capture a pageGive your AI design rules, not guesses
A screenshot shows the surface. A Design Pack explains the type scale, spacing rhythm, component patterns, and constraints behind it.
Skip manual DevTools inspection
Inspect the visible page in one pass instead of searching for values one element at a time.
Turn references into usable design systems
Capture a pageSee the system behind the page
Review its color roles, type scale, spacing, elevation, and reusable patterns as one connected system.
Start documentation from evidence
Use observed tokens and component guidance as a documented starting point, then adapt them for your own product.
Turn client references into clear handoffs
Capture a pageDefine 'make it like this'
Turn the page in your browser into specific design rules your client, designer, and developer can discuss together.
Estimate scope with evidence
Use observed components, responsive behavior, and missing states to identify complexity before implementation starts.
Learn how polished websites are built
Capture a pageSee hidden design decisions
Study the typography, spacing, contrast, motion, and layout choices that make a page feel considered.
Compare design systems side by side
Save captures and compare how different products solve the same visual and interaction problems.
Build sites that don't look AI-generated
Capture a pageGive your AI design rules, not guesses
A screenshot shows the surface. A Design Pack explains the type scale, spacing rhythm, component patterns, and constraints behind it.
Skip manual DevTools inspection
Inspect the visible page in one pass instead of searching for values one element at a time.
Turn references into usable design systems
Capture a pageSee the system behind the page
Review its color roles, type scale, spacing, elevation, and reusable patterns as one connected system.
Start documentation from evidence
Use observed tokens and component guidance as a documented starting point, then adapt them for your own product.
Turn client references into clear handoffs
Capture a pageDefine 'make it like this'
Turn the page in your browser into specific design rules your client, designer, and developer can discuss together.
Estimate scope with evidence
Use observed components, responsive behavior, and missing states to identify complexity before implementation starts.
Learn how polished websites are built
Capture a pageSee hidden design decisions
Study the typography, spacing, contrast, motion, and layout choices that make a page feel considered.
Compare design systems side by side
Save captures and compare how different products solve the same visual and interaction problems.
What's inside your Design Pack
A clear package of observed rules, reusable formats, supporting evidence, and known limits. Select any card for the detail.