Style Capture is a Chrome extension and CLI that captures computed CSS from any element on any website, maps it to Tailwind utilities, and gives your AI coding agent everything it needs to rebuild the UI.

Install from the Chrome Web Store.

1. Click the Style Capture icon on any website
2. Hover and click the element you want to capture
3. Paste into Claude Code, Cursor, or any AI agent

npx style-capture <url> <selector>

npx style-capture https://stripe.com ".hero-section"
npx style-capture https://linear.app "main > section:first-child" --mode full

For frequent use, install globally with npm install -g style-capture.

Install the slash command for Claude Code or any skills.sh-compatible agent:

npx skills add mblode/style-capture -g --all -y

Describe the element in natural language — no CSS selectors needed:

/style-capture https://stripe.com the pricing table
/style-capture https://linear.app the hero section with the gradient

A <style_capture> block containing:

• html_capture — sanitised HTML of the subtree
• css_capture — computed CSS grouped by element
• tailwind_hints — Tailwind utilities with confidence scores
• open_questions — ambiguous mappings flagged for review

All processing happens locally. Nothing leaves your device.

© 2026 Matthew Blode

MIT