tailwind-markup.htmlReusable utility markup
Chrome extension for frontend teams
Turn any website into an implementation-ready design system.
Inspect a real interface. Capture its components, tokens, and visual rules. Then send clean Tailwind, React, DESIGN.md, and SKILL.md output straight to your coding agent.
Precise captureComputed styles, not guesses
Agent-readyInstructions and code together
Private by defaultPage analysis stays local
From reference to implementation
Three moves. No archaeology.
System Lens turns visual evidence into a handoff your codebase and your agent can actually use.
-
01
Inspect the real interface
Hover any element and select the component you want to understand.
-
02
Extract the system
Recover colors, spacing, type, radius, shadows, motion, and component signals.
-
03
Build with context
Send code, tokens, and agent instructions to Codex, Claude Code, or Cursor.
One inspection, six useful outputs
More than copied markup.
Every capture stays connected to the evidence behind it, so generated code is easier to verify and extend.
- Tailwind HTML and React structure
- Normalized colors, type, spacing, and motion
- Agent-ready
DESIGN.mdandSKILL.md - Implementation audit and change history
CapturedComponent.tsxReact and shadcn/ui structure
DESIGN.mdVisual evidence and implementation rules
SKILL.mdReusable instructions for coding agents
design-tokens.jsonPortable normalized tokens
Inside the extension
Every generated format, in one capture.
Switch from implementation code to agent guidance without rerunning the inspection.
Tailwind Markup
Utility-class HTML rebuilt from extracted structure and computed styles.
React
A React and shadcn/ui-oriented component shell.
DESIGN.md
Visual rules, evidence, tokens, and implementation guidance.
SKILL.md
Reusable instructions for Codex, Claude Code, and Cursor.
Design Tokens
Normalized color, type, spacing, radius, shadow, and motion values.
Styles Audit
Capture quality, coverage, and implementation caveats.
Simple pricing
Choose how you want to own your workflow.
Every paid option unlocks the complete System Lens Pro feature set.
Monthly
$6.99/month
Cancel whenever you need.- Unlimited component captures
- All six export formats
- Project history and comparisons
- Agent handoff tools
Best value
Annual
$50/year
$4.17/month. Save $33.88 yearly.- Everything in monthly
- Unlimited batch captures
- Scheduled page monitoring
- Priority product updates
Lifetime
$65once
One personal license. No recurring charge.- System Lens Pro access
- All current Pro workflows
- Local project library
- Agent-ready exports
Questions, answered
Before you inspect your first page.
What does System Lens actually capture?
It analyzes visible components and computed styles, then organizes typography, color, spacing, radius, shadow, motion, and structural signals into reusable outputs.
Does it copy an entire website?
No. System Lens captures implementation evidence and component patterns. You remain responsible for respecting trademarks, copyrighted assets, and site terms.
Which coding agents does it support?
Agent packages are prepared for Codex, Claude Code, and Cursor. The Markdown outputs also work with other tools that accept project instructions.
Is website data uploaded?
Core page inspection and capture history are local-first. Optional team sync and billing use the System Lens service when enabled.
What does the lifetime option include?
It provides one personal System Lens Pro license without a recurring subscription. Final license and update terms will be shown before checkout.
Can I cancel the monthly or annual plan?
Yes. Subscription management, payment updates, and cancellation are handled through Stripe's Customer Portal.
Build from evidence
Stop rebuilding interfaces from screenshots and guesses.
Open the page. Inspect the component. Give your agent the context it was missing.
Get System Lens