capruo
capruo
Capruo runs in Chrome on desktop.Join the waitlist
NewCopy any element as Tailwind or React

Everything you admire on the web, with its DNA.

A keyboard-first Chrome extension that saves any element, image or screenshot with its palette, type, spacing and code.

50% off your first month for waitlist members. No spam, see how we use your email.

See how it worksRuns in Chrome on desktop

Screenshotslosethecode.Bookmarkslosethelook.Moodboardsforgetwhyyousavedthem.Capruokeepsallthree.

Built for designers who collect[Logo][Logo][Logo][Logo]
Chapter 01 · Pick

Point at it. Walk the DOM.

  1. 01Hover anythingEvery element on every site lights up under the cursor.
  2. 02Walk up the DOM↑↓Parent, child, sibling. The label shows exactly what you hold.
  3. 03Land on the section↑One more step and you have the whole block.
  4. 04Save it↵Lifted out with its code, palette and type.
Chapter 02 · Decode

Take it apart. Keep the recipe.

Design DNA splits every capture into its layers: surface, shape, type and accent. Each one is measured, named and ready to copy.

  1. 1Base#0E1F17 · radius 22 · pad 44
  2. 2Surfaces#1C3A2B · radius 16 · gap 10
  3. 3TypeFraunces 500 44/46 · Inter 16/26
  4. 4Accent#7BE495 · pill · 600
Chapter 03 · Translate

Copy it as code. Paste it into your app.

Tailwind, HTML + CSS or React. Snap to your scale, or keep every measured pixel. Try it.

Benefit.tsxvverdant.so · captured
Live preview
Why teams switchShip calmer releases.
Branch previewsOne-click rollback
1export function Benefit() {2  return (3    <section className="grid gap-10 rounded-3xl bg-[#0E1F17] p-12 md:grid-cols-2">4      <span className="rounded-full bg-[#1C3A2B] px-3 py-1 text-[#7BE495]">5        Why teams switch6      </span>7      <h2 className="font-serif text-5xl/[1.05] text-[#E8F1EA]">8        Ship calmer releases.9      </h2>10      <ul className="grid gap-3">11        <li className="rounded-2xl bg-[#1C3A2B] p-5">Branch previews</li>12        <li className="rounded-2xl bg-[#1C3A2B] p-5">One-click rollback</li>13      </ul>14    </section>15  );16}
16 lines · responsive
calm green feature list⌘K
5 matchesby meaning, not tagsranked on your device
More like thisM
Chapter 04 · Recall

Find it again by what it looks like.

Chapter 05 · Compose

From a moodboard to a design system.

Start a sessionCtrl⇧G
05.1

Collect

Brand research
Ship calmer releases.
24captures in one session
05.2

Distill

live
background#0E1F17
surface#14291F
text#E8F1EA
primary#7BE495
headingFraunces
radius16 px
05.3

Preview

DarkLight
verdantProductPricingStart free
Releases your team can sleep through.Generated from 24 captures.
Starter$0
Team$24
05.4

Export

CSS varsTailwind v4Tokens JSON
@theme {
  --color-bg: #0E1F17;
  --color-surface: #14291F;
  --color-text: #E8F1EA;
  --color-primary-500: #7BE495;
  --font-heading: "Fraunces";
  --radius-md: 16px;
}
DownloadCopy
Chapter 06 · Private

Your library stays yours. The AI runs on your device.

0captures sold or shared with advertisersTagging, visual search and More like this run locally, in the extension.
Your library syncs to your private account, so only you can see it. Delete any capture at any time, or ask us to delete everything.

The whole app on six keys.

Every one starts withCtrl⇧
  • Control ShiftSHover, ↑ ↓ to walk, ↵ to savePick element
  • Control ShiftFGrabs the original filePick image
  • Control ShiftEDrag any regionScreenshot
  • Control ShiftXFonts, size and colourText style
  • Control ShiftKBy meaning or colourSearch
  • Control ShiftGStart / finishSession

Bulk select

Tag, move or export dozens at once.

Filter by colour and format

“Everything green, in landscape.”

The original, not the thumbnail

Image picks follow srcset to the largest file.

Exports that drop in

Components and systems, in formats you use.

  • tokens.css
  • @theme v4
  • tokens.json
  • Component.tsx

Install. Capture. Build.

  1. 01

    Install

    Add the extension and pin it. Sign in once.

    Join the waitlist
  2. 02

    Capture

    Pick, grab or screenshot on any site. DNA is extracted for you.

    Control Shift S
  3. 03

    Build

    Copy components, or turn a session into a design system.

    --radius-md: 16 px
Early access · everything is free for now

Simple plans, priced fairly.

Try the whole product free on a small library. Pro is for when it grows, and for taking your design system with you.

Billing period

Free

A quick playground for the whole product.

$0forever

Join the waitlist
  • Elements, images, screenshots and text
  • Design DNA and palette on every capture
  • Copy as Tailwind, HTML or React
  • On-device search and tags
  • 100 captures · 100 MB of files
  • 3 sessions
  • Design system generator previewExport locked

Pro

Launch offer

For turning a library into systems.

$9/ month

$89/ year

Or $89 a year, about $7.42 a month.

About $7.42 a month, 18% less than paying monthly.

Join the waitlist

Waitlist members get 50% off your first month.

  • Everything in Free
  • Unlimited sessions
  • 20,000 captures · 10 GB of filesFair use
  • Design system generator with CSS, Tailwind v4 and JSON export30 a month

Prices in USD. Plans start after early access, and nothing is charged until then.

Questions, answered.

When can I use it?

Capruo is in private early access. Join the waitlist and we’ll email you when your spot opens. Waitlist members get 50% off your first month once paid plans start.

What gets captured?

Elements with their code, original images (even under overlays), region and visible-page screenshots, and selected text with its typography. Visual captures come with their palette, type, spacing and radius.

Which code formats can I copy?

Tailwind, HTML + CSS, or React + CSS in TSX or JSX. Nearest snaps to the Tailwind scale, Exact keeps measured values, and the preview works across responsive widths.

Is the copied code exact?

It keeps the markup and every style the element uses, including hover states and media queries, and checks the result against the page. It doesn’t copy JavaScript behaviour, and canvas, video and embedded frames become placeholders.

Does it work on any site?

On almost any site. Chrome doesn’t let extensions run on its own pages, such as chrome:// settings, the Chrome Web Store and the built-in PDF viewer.

Where is my library stored?

In your private Capruo account, so the dashboard can show and search it from any computer. Only you can see it. Delete any capture whenever you like, or ask us to delete your account and everything in it.

Does the on-device AI work offline?

The model downloads once, the first time you capture, and then runs from your browser’s cache. Tagging works without a connection; saving to your library and the dashboard need one.

Which browsers are supported?

Chrome on desktop. Other Chromium browsers such as Edge, Brave and Arc may work, but we haven’t tested them yet. Phones can’t run extensions.

Your next design system is already out there.

Get early access when we open the doors.

50% off your first month for waitlist members. No spam, see how we use your email.