Skip to content

Skill · 05 of 09

inspire borrow the feel, not the site

Build a website inspired by an existing site without copying it. Measures the source's design DNA with `void extract <url>` (type tuple, neutral ramp, accent…

skills/inspire/SKILL.md138 lines3 referencesupdated 16 Sept 2026

When Claude Code loads it

Use when the user says "make it look like X", "inspired by <url>", "in the style of linear.app/stripe/vercel/apple", "I like this site", "clone the vibe of", "similar to", or pastes a URL of a site they admire.

A site's feel comes from a few measurable choices: the display type tuple, the neutral ramp, how rationed the accent is, radius, shadow grammar, section rhythm and motion personality. Those transfer. Logos, words, images, fonts files and signature effects don't. After this skill, continue with website from phase 2. Effects: motion, components. Tokens: craft.

Rules

  1. Measure before you imitate. Run void extract; don't eyeball colors or guess fonts.
  2. Borrow relationships, not values that identify the brand. Tracking ratio, weight, leading, text tiers, accent coverage, rhythm: yes. Exact brand hex, logo, wordmark, copy, illustrations: no.
  3. Never copy: logos, favicons, product names, headlines/taglines/CTA wording, testimonials, client lists, photos/video/3D/illustrations/icons made for the brand, proprietary font files, CSS/JS bundles, and the source's signature composition in combination (exact hero + exact motion + exact palette).
  4. Proprietary fonts → free alternatives matched on tuple (weight, tracking, leading), from references/font-alternatives.md.
  5. Rebuild effects at a lower tier. GSAP/Lenis/WebGL become CSS scroll-driven animation, grain and gradients, or one budgeted canvas (references/effect-downgrades.md).
  6. Three deliberate departures, written down, before building.
  7. Compare feel, not pixels. Side-by-side screenshots judged on the 12 DNA traits, not overlay parity.
  8. Ours must be dramatically lighter. Report source vs ours: JS, fonts, total transfer.

Step 1 — Extract

bash
void extract https://example.com --out .void/inspire/example.com
# more pages from the same site: --pages /pricing,/about   or   --max-pages 3

Writes into .void/inspire//: brief.md (human/agent brief), dna.json (every measurement with 0–1 confidence and evidence), direction.css (a draft void direction with overrides baked in), shots/ (desktop fold, full page, mobile fold, section crops, dark fold if the site responds to prefers-color-scheme).

Then:

  1. Read brief.md fully: TL;DR, nearest direction, color, typography, layout rhythm, components, motion, page outline, weight, do-not-copy, 3 moves, confidence & gaps.
  2. Look at the screenshots (open the PNGs): fold, full page, mobile. Note the hero archetype, imagery style, density, and what you actually feel (calm? loud? editorial? technical?).
  3. Treat anything with confidence < 0.5 (listed under "Confidence & gaps") as unknown; verify it manually (Step 1b) or ignore it.

void extract unavailable or failing (bot wall, login): use the manual procedure in references/extraction-guide.md §4 (DevTools, 12 measurements, ~15 minutes). WebGL/video pages need SwiftShader or they screenshot black; void extract already enables it.

Step 2 — Decide: borrow / adapt / drop

Write this table into the brief. Keep it short.

Trait Source (measured) Decision Ours
Display tuple (family / weight / lh / tracking) e.g. NHG Display 700 / 0.91 / −0.013em borrow structure Schibsted Grotesk 700 / 0.92 / −0.03em
Type roles and workhorse size borrow
Neutral ramp (bg, 3 text tiers, hairline alpha) borrow relationships direction tokens, tuned
Accent (hue, coverage) adapt: keep coverage, change hue
Radius mode, shadow grammar borrow
Container, gutter, section rhythm, header borrow
Hero archetype, section outline adapt (order + our content)
Motion personality (durations, easing, what moves) borrow personality tokens
Signature effects downgrade tier or drop
Imagery / illustrations / logos / copy never copy our real assets

What transfers best, in order of how much it explains the feel (from tearing down 24 sites): display tuple → text-style histogram (workhorse size, mono texture) → neutral ramp temperature → accent share → radius mode → shadow grammar → layout skeleton/rhythm → button spec → transitions/easing → motion runtime. Details: references/extraction-guide.md.

Step 3 — Map to a void direction

  1. Start from brief.md → "Start from a void direction" (the recommended direction and scores). Sanity-check against craft §1: the audience of our site wins over the source's look if they conflict.
  2. Open the draft direction.css. Keep it only if its values are plausible; otherwise import the stock direction and add a small override block.
  3. Allowed overrides (edit direction.css or add after the direction import in globals.css): fonts and next/font variables, --weight-display, --weight-heading, --tracking-display, --label-tracking, --radius, --section-y, --container-page, durations, --grain-opacity, neutral hue/chroma, brand roles (via craft/references/color.md §5). Keep every semantic role name; never add hex to components.
  4. Check contrast after edits: the draft is contrast-checked only for generated roles. Run void lint, then void design on the running site.
  5. More than ~8 overrides means a different stock direction fits better. Switch.

Step 4 — Rebuild signature effects cheaper

For each effect in brief.md → Motion (and dna.json → motion.effects, motion.libraries, motion.smoothScroll):

  1. Is it a signature of that brand (preloader shader, CRT, scrubbed word fill, custom cursor)? Then don't reproduce it as-is; take its personality (e.g. "text arrives line by line, confident, 15–60ms stagger") and pick at most one to rebuild.
  2. Rebuild at the lowest tier that keeps the personality: references/effect-downgrades.md maps GSAP ScrollTrigger, SplitText, Lenis, pinning, OGL/three shaders, Lottie, video backgrounds, preloaders and cursor followers to CSS recipes in motion/references/recipes.md or lean components in components.
  3. Budget from motion §3: one signature + at most one secondary; ≤ 1 WebGL context; no smooth-scroll library.

Step 5 — Differentiate (3 deliberate departures)

Write three departures into the design statement. brief.md → "Make it your own (3 moves)" suggests some. Pick from:

Lever Example
Accent hue move ≥ 60° away from the source hue at the same L and chroma; prefer less crowded bands (gold/citron 57–117°, cyan/azure 174–241°)
Type voice different display family class (grotesk ↔ serif ↔ mono) with the same tuple rhythm
Scheme dark source → light-first site (or the reverse), keeping the ramp relationships
Hero composition product shot ↔ typographic poster ↔ split
Signature detail replace their signature with one tied to our product (a real log, a real metric, a real map)
Radius / depth 0 → 6px, rings → hairlines, soft shadows → flat
Rhythm compress (dense product) or expand (editorial) section spacing by a step

Test: someone who knows the source site should say "similar taste", not "copy of X". If any screenshot could be mistaken for the source, add a departure.

Step 6 — Build, compare, report

  1. Build with website phases 2–6 using the brief, our content and the direction.
  2. Compare screenshots side by side (.void/inspire//shots/ vs .void/shots/) at 1440 and 390 on feel: type presence, density, temperature, accent restraint, rhythm, motion personality. Write 3 bullets: what matches, what's intentionally different, what still feels off.
  3. Weight: read the source's tech.transfer from dna.json (or brief.md → Weight) and ours from void audit (perf section). Report a table: JS KB, font KB, image+media KB, total KB, requests. Target: JS ≤ 170 KB first-load, fonts ≤ 120 KB, total ≤ 1 MB for a marketing page.

Worked examples (from the 2026-09-15 teardown)

A. hellohello.is → void swiss (dark scheme)

Measured Translation
Neue Haas Grotesk Display/Text 75 Bold, one weight (700), hierarchy from size + white/#777 split Schibsted Grotesk 700 display + 400 body (break the single weight on body for readability); text-fg / text-fg-muted split; --weight-display: 700 (swiss default)
vw-scaled type: hero 104px (7.24vw), lh 0.91, −0.013em; statements 64px lh 0.86; body −0.04em text-[clamp(3rem,1.2rem+6.2vw,6.75rem)] leading-[0.9] poster (archetype 1c); statements text-display-lg; no negative body tracking (Schibsted isn't NHG)
black #000 / panels #131313 / #fafafa / #777 (206 elements), 1px #2e2e2e row rules, no shadows, radius only on dots swiss .dark roles (L 14% bg, not #000); divide-y divide-line-subtle rows; shadow-* unused; radius 0
red #d83831 on 14 elements + selection red/black swiss red is nearly the same hue → departure 1: shift accent to citron oklch(85% 0.17 105) (dark text on solids) at similar coverage; keep a brand-solid selection
GSAP + ScrollTrigger + Lenis (lerp .05) + OGL CRT shader; masked line reveals 15–60ms stagger; grey→white scrubbed word fill; 900px pinned scenes; ~8s preloader no preloader; hero lockup void-settle + staggered lines (T1); statements with scroll-driven masked line rise (motion/references/recipes.md §10), one section only; word fill dropped (departure 2); native scroll; CRT → CSS scanlines + grain over a static AVIF (T0), or omitted; no pinning
Corner metadata: live Montevideo time, ©2026, last.fm "now playing" this is their signature → don't copy. Departure 3: one corner detail tied to our product (e.g. latest release version from the changelog, server-rendered)
Capabilities as numbered 3-column editorial list archetype 5 (editorial capability list) — a convention, fine to borrow
16 JS requests / 396 KB JS, 157 KB fonts (OTF/TTF), 2.2 MB video, 3.3 MB total target ≈ 140 KB JS (Next baseline + 0 client effects), ~60 KB woff2 fonts, 1 AVIF poster, < 700 KB total

B. linear.app → void precision

Measured Translation
Inter Variable 510 (cv01, ss03), H1 64/64, −0.022em at 64 and 48px (constant ratio); hero sub only 15px #8a8f98; mono 14/24 most frequent style Geist 500 via precision (--tracking-display: 1 gives −0.04em at display-lg; set --tracking-display: 0.6 to land near −0.024em); sub text-md text-fg-muted; label-mono + mono metadata for texture
#08090a bg, text #f7f8f8 / #d0d6e0 / #8a8f98 / #62666d, hairlines rgba(255,255,255,.08) ×68, blurred fixed 73px header precision dark roles as-is (bg L 14.5%, line 9% white); template header (56px, blur optional)
#5e6ad2 indigo on skip link only; multi-hue pastel labels precision's indigo is this hue → departure 1: accent to teal oklch(62% 0.11 195) or amber; no pastel label rainbow
pill buttons (32 nav / 44 hero), :active scale(.97), 160ms (.25,.46,.45,.94) Button + press; keep radius-lg buttons (departure 2: not pills)
hero: left H1 + sub + changelog link right, then full product UI window archetype 1b with our product; if we have no product UI yet, a real terminal/log block instead (departure 3)
H1 words SSR'd at opacity:0; blur(10px) then WAAPI 1000–1500ms; 4,380 dotIn dot-grid animations; View Transitions CSS; 73 reduced-motion queries H1 void-settle 450ms without opacity/blur (LCP-safe); no dot-grid animation; View Transitions via ≤ 400ms; reduced motion from base
431 JS requests / 1.76 MB JS, 541 KB fonts (full Inter var), HTML 1.24 MB decoded, 6.2 MB total ≈ 150 KB JS, ~51 KB fonts, HTML < 60 KB, total < 1 MB

C. anthropic.com → void editorial

Measured Translation
Anthropic Sans/Serif (custom, variable 300–800); serif body 20/28; H1 sans 61px 700, tracking 0, balance; hero paragraph serif 24/33.6 in a right column Newsreader for body text-lg/text-xl at 1.6; H1 in Newsreader 400 text-display-lg (departure 1: serif H1 instead of bold sans); split hero archetype 1d (convention, borrow)
ivory #faf9f5, ink #141413, secondary #b0aea5, borders rgba(20,20,19,.1), dark footer editorial light roles (paper bg L 98.3% hue 85, ink L 21%) — already this relationship; bg-fg text-bg footer band only if it serves the page
clay #d97757 on 1 background; selection clay 50% keep single-use restraint; editorial oxblood instead of clay (departure 2)
link words underlined inside the H1 their signature → drop; use underlined links in the deck paragraph instead
0/25 headings centered; skip links; radii 8/12/16/24; no computed shadows left-aligned throughout; editorial radius 2px (departure 3: sharper, rules instead of rounded cards)
Webflow + GSAP + ScrollTrigger + Lottie; 983 KB video; 3 fonts / 353 KB; no JSON-LD, no llms.txt; 1.75 MB total CSS reveal on 1–2 figures; AVIF poster instead of video; ~75 KB fonts (Newsreader + Plex Mono); JSON-LD + llms.txt from the template (seo); total < 600 KB

Visual style, layout conventions, spacing systems and color relationships are generally not protectable. Logos, trademarks, copywriting, photography, illustrations, font software, code and distinctive trade dress can be. void extract records measurements for inspiration only: never download or self-host the source's font files, lift its CSS/JS, reuse its assets or text, or make a site that could be confused with the source or imply affiliation. When the user asks for a literal clone of a brand they don't own, explain this and offer the inspired version. When in doubt, add another departure. Not legal advice; the user is responsible for their final site.

References