Clone the sitesyou admire.Make them yours.

A prompt has no taste. A reference does. Inoculate extracts the design system behind any site and hands it to your coding agent.

Public package coming soon · command available to preview

See the live transplant ↓
REFERENCELIVE BROWSER
stripe.com
DESIGN MARKEXTRACTED

TYPE SYSTEM

Söhne

COMPOSITION

asymmetry 0.72

MOTION

opacity · transform

REFUSALS

14 anti-defaults

AGENT HANDOFF

Scaffold and build contract ready

stripe.comclaude.aivercel.comlinear.appframer.comnotion.soraycast.comresend.comstripe.comclaude.aivercel.comlinear.appframer.comnotion.soraycast.comresend.com

This page wearsany site's skin.

Pick a reference. The page takes on its real colour, type, and motion, extracted by inoculate clone.

live · the mark driving this page
reference
inoculate (origin)
typeface
Fraunces + Space Mono
signature easing
cubic-bezier(.22,1,.36,1)
primary duration
editorial
corner radius
0px
motion personality
deliberate
clone-prompt.mdhanded to your agent
# Clone Workflow: the reference

Inoculate scraped the reference and built a complete Next.js
scaffold for your agent. The hard part is done.

✅ Next.js + Tailwind v4 scaffold, section by section
✅ 10-12 sections extracted with specs + hover + state diffs
✅ Motion trace (animations, scroll trajectories, interactions)
✅ Colour tokens → globals.css with @theme inline
✅ Typeface, easing curves and radius recorded in design-mark.json

→ Start from design-mark.json, the source-derived intent.

The DesignMark.

A portable record of the decisions that make a reference feel authored. This is the context your coding agent builds from.

motion constitution
always · opacity · transform · color · border-color
never · background · border-radius · font-size · width · height
design-mark.jsonLIVE OUTPUT · STRIPE.COM
{
  "reference": "stripe.com",
  "composition": {
    "asymmetry": 0.72,
    "pacing": "chaptered"
  },
  "motion": {
    "always": ["opacity", "transform"],
    "never": ["width", "height", "font-size"]
  },
  "antiDefaults": [
    "true black, not stock slate",
    "4px / 6px geometry, not soft cards"
  ]
}
01

Tokens

Colour semantics, type scale, spacing and geometry.

02

Composition

Density, asymmetry, hierarchy and section pacing.

03

Refusals

The generic defaults that would erase the reference.

04

Motion

A precise vocabulary of properties, curves and durations.

We built thisby running it onitself.

We pointed Inoculate at stripe.com, took its Design Mark, and rebranded it into what you're reading. A transplant, not a copy.

12
section specs
27
assets pulled
171
research files
inoculate v0.2.0
the version that ran
the session that built this page
$inoculate init --name Inoculate
✓ identity saved
$inoculate add stripe.com
✓ design-mark.json + 12 section specs
$inoculate clone stripe.com
✓ runnable scaffold in .inoculate/clones
$inoculate rebrand .inoculate/clones/stripe-com
✓ palette · font · motion · copy prompt
design intent extracted from stripe.com, rebranded by Inoculate. the byline in the footer is literal.