Give your AI the exact component, not a screenshot.

Pin any element on any site. Kernline copies its real HTML, styles, design tokens, and hover states for Cursor, Claude, or ChatGPT, or captures the whole card as HTML, React, or Vue. CSS and Tailwind copy are built in. It runs only on the tab you open and never uploads the page.

Free forever, with 3 Copy for AI goes a day. Pro from $3/month billed yearly, or $59 once.

From any site to your AI coding tool

Copy for AI

One click copies the pinned element and its children as a compact bundle: trimmed HTML, the computed styles that matter, design tokens, sizes, and hover or media states. Paste it into Cursor, Claude, or ChatGPT for an accurate rebuild instead of a guess from a screenshot. Nothing leaves your browser until you paste it.

3 a day on Free · Unlimited on Pro

Component capture

Pin something inside a card, navbar, or section. Kernline climbs to that region and exports a self-contained HTML, React, or Vue snippet with Tailwind utilities plus a short description you can paste into an AI chat.

3 a day on Free · Unlimited on Pro

Kernline Export tab with Tailwind classes and a hover variant for a pinned button.

Tailwind and design tokens

Turn any element into Tailwind v3 or v4 classes. With Pro, scan a whole page for its colours, fonts, spacing, and radii. Export CSS variables or a Tailwind theme, or copy a config or tokens file for AI coding tools.

One element on Free · Full-page scan on Pro

Kernline Inspect tab showing the size and type of a pinned button.

Inspector

Hover any element and pin it. See the box model, type, colour, spacing, flex and grid at a glance, in px or rem, and copy its CSS without digging through DevTools. Unlimited on Free.

Free

Assets

See every image, SVG, icon and font a page uses. Download one at a time on Free, or clean SVGs in bulk and grab them all as a ZIP with Pro.

Single downloads on Free · ZIP on Pro

Kernline Overlay tab with a mockup loaded at 50% opacity and nudged to position 0, -6.

Pixel overlay

Drop your mockup over the live page and scroll to check it lines up. Free saves one overlay per site. Pro adds layers and a different image per breakpoint.

One overlay on Free · Layers on Pro

How it works

Open it on the tab you're working on. Click the toolbar icon, press Alt + Shift + K, or right-click and choose “Inspect with Kernline”.
Pick an element. Hover to preview, click to pin.
Hand it to your AI, or copy the code. Copy for AI, a component as HTML, React, or Vue, Tailwind classes, CSS, an asset, or a full set of design tokens.

Need stylesheets or images from another domain? Kernline asks you first, for that domain only, and you can take access back in settings any time. How permissions work.

Private by design

Only the tab you open. Kernline doesn't ask to read every site when you install it. It runs when you open it, on that tab.
Your pages stay on your machine. Styles and assets are processed in your browser. We never see the URLs you visit or the pages you inspect.
No ads, no tracking. No analytics in the extension, no injected promos and no selling your data. The free features work offline.
No AI upload unless you turn it on. Kernline never sends page content to our servers. The optional MCP server runs on your own computer and only forwards to Cursor or Claude when you enable it.

Kernline does not send the page or the URL to us. Pro licence checks go to Polar. Stylesheets or images on another domain are fetched only after you allow that domain. Read the privacy policy.

Pricing

Kernline plans
Plan	Price	What you get
Free	$0	3 Copy for AI and 3 Component captures a day, full inspector with unlimited CSS copy, Tailwind for one element at a time, asset list with single downloads, and one saved overlay per site. The daily count stays on your device.
Pro yearly Best value	$36/year ($3/month)	Unlimited Copy for AI (HTML, styles, tokens, and states for AI coding tools) and Component capture (HTML, React, or Vue plus Tailwind), hover, focus, and responsive Tailwind variants, full-page token export (including tailwind.config or tokens file for AI), bulk SVG clean and ZIP download, unlimited overlays with layers and breakpoints, priority support.
Pro monthly	$6/month	Everything in Pro. Cancel any time.
Lifetime Pro	$59 once	Everything in Pro with one payment and no renewal, for as long as Kernline is sold. What lifetime means.

Payments by Polar. 14-day refund on any plan, Lifetime included. Terms · Refunds

Compare Free and Pro

FAQ

What is Kernline?

Kernline is a browser extension for Chrome, Edge, and Firefox that gives your AI coding tool the exact component from any site. Copy for AI copies an element's real HTML, styles, tokens, and states, and Component capture exports it as HTML, React, or Vue. It also inspects CSS, exports Tailwind and design tokens, lists assets, and overlays mockups. It runs only on the tab you open.

Does Kernline upload the pages I inspect?

No. Everything happens in your browser, on the tab you opened.

What's stored on my device?

Your settings, saved overlays, your licence status, and on Free a count of today's Copy for AI and Component capture goes. All of it is removed when you uninstall.

What's the difference between Free and Pro?

Free covers everyday inspecting and CSS copying, plus 3 Copy for AI and 3 Component captures a day. Pro makes those unlimited and adds Tailwind variants, full-page design tokens, bulk asset export and unlimited overlays. Pro is $36/year, $6/month, or $59 once for Lifetime. See all questions