Rip a brand off something that already exists — a live URL, a screenshot, a bundle of images, or a narrated screen recording — and turn it into reusable packs.
Most brands already exist somewhere. They’re on a live site, in a deck, in a screenshot someone sent you, or in a founder’s head while they walk you through a competitor’s homepage on a call.Capture is how you get that into sitekit as a reusable pack, rather than describing it to a model in a prompt and hoping.
Capture scaffolds and gathers evidence — it doesn’t call a model on its own. It sets up the pack, collects the source material, and installs the right authoring skill into your harness. Your agent does the extraction, with the evidence in front of it. That’s the same division of labour as the rest of sitekit.
That scaffolds a workshop style pack, records the source, runs the motion pass, and installs the capturing-a-style-pack skill. Your agent then reads the evidence and writes the pack.
The richest source. Your agent fetches the page in its own harness, and sitekit additionally runs a Playwright motion pass against the live DOM (see below). Both palettes can be captured rather than derived when the source ships its own dark theme.
For when there’s no reachable URL — a competitor behind a login, a design comp, a deck slide. Your agent uses its harness vision tools to read the image. Pixel-sampling the screenshot gives measured values rather than guessed ones.
A .zip of images. sitekit unpacks them and the agent synthesizes across the set — far better than a single screenshot for inferring a system, because repeated motifs are what distinguish a design language from one page’s layout.
A supplementary layer — pair it with a primary source. sitekit samples timed frames via ffmpeg and transcribes the narration, so the words “notice how the cards lift on hover” land in the pack as design intent, tied to the frame that shows it.
When you capture from a URL, sitekit drives Playwright against the live page and reads motion off the real DOM rather than inferring it from a still image. It records:
@keyframes bodies, with the real transform and opacity stops
Hover and focus signatures, by selector
Scroll-triggered reveals — what animates as it enters the viewport
Hidden elements that carry a transition — the modals, drawers, and flyouts you’d never see in a screenshot
The resolved timing register — the durations and easings the brand actually uses
This is the part a screenshot can’t give you, and it’s usually what makes a captured pack feel like the source rather than a flat imitation of it.
sitekit style capture acme --url https://acme.com --no-motion # skip the passsitekit style capture acme --url https://acme.com --motion-only # re-run motion on an existing pack
--motion-only is the one to use when a pack is already good but its motion is thin — it re-runs just the harness against an existing pack without re-scaffolding or reinstalling the skill.
By default a screencast’s audio is transcribed automatically (via ElevenLabs). You can control that:
--fps <n> # sampling rate; omit to derive from duration--transcript <file> # bring your own SRT / VTT / JSON / txt--no-transcribe # sample frames only, skip the audio--transcription-provider <name> # default: elevenlabs
Transcription is also available on its own, decoupled from capture:
sitekit transcribe walkthrough.mov
That produces a reviewable artifact — timed narration plus sampled frames — which your agent reads to drive on-brand changes through the maintenance loop. It’s the natural way to hand over “here’s a video of me walking through what I want changed.”
Your agent reads the source copy and extracts register, recurring sentence shapes, vocabulary, and the phrases the brand demonstrably never uses — which become machine-enforced bannedPhrases. See Voice packs.
Each installs a skill that runs a clarify-intent → draft → preview → iterate → verify loop with your agent, rather than producing a pack in one shot and calling it done.
Capture is also the on-ramp for a site that already exists and isn’t going anywhere — a WordPress marketing site, a Squarespace page, a bespoke Next.js app.
# 1. capture the brand off the live sitesitekit voice capture acme-voice --url https://acme.comsitekit style capture acme-style --url https://acme.com# 2. bind the site to those packssitekit adopt acme --voice acme-voice --style acme-style --url https://acme.com
adopt writes a sitekit.adoption.json and installs the aligning-a-foreign-site skill. From then on you can judge any page or any proposed edit against the captured brand without migrating the site:
--fragment accepts - to read HTML from stdin, needs no workspace or marker, and returns a verdict against the resolved packs. It’s the primitive that makes “is this on-brand?” answerable for HTML sitekit never emitted.
Capture ports visual and verbal atoms — a palette, a type scale, a motion register, a set of motifs. It does not port a wordmark, a logo, or product imagery, and the bundled packs captured from real companies deliberately carry that boundary in their documentation.Author neutral content on top of a captured pack. The pack is a design language, not a costume.
