Stop describing UIs to AI.Give it the design instead.

Handoff-CDN is a free, open-source library of production-grade UI prototypes —
each one packaged as a single command that pipes a complete design brief into any AI coding tool.

npx handoff-cdn use aerodrop | claude

The problem

You ask AI to build a UI. It gives you generic gray boxes with placeholder text and wrong fonts.

Not because AI can't code — because it has nothing real to work from.

Describing a design in words loses 90% of it. Figma exports are dev-only. No one has solved the brief → code gap.

The fix

Handoff-CDN gives AI a working HTML prototype + the original design intent + the full token contract — all in one piped command.

Your words → vague output
A Handoff-CDN bundle → pixel-accurate implementation

Each bundle contains:

• A self-contained HTML/CSS/JS prototype (the actual design, running in a browser)
• The original user intent transcript (what the designer was thinking)
• A design token contract (exact colors, radii, blur, spacing — no approximations)
• A directive that locks the AI to the spec and blocks token drift

The AI doesn't guess. It executes.

Before / After

claude "build me an autonomous AI delivery app, dark theme" vs npx handoff-cdn use aerodrop | claude

What changed: Blue gradient background → oklch(0.09 0.04 260) deep glass wash. Generic phone frame → exact iOS hardware proportions. border-radius: 44px rounded cards → glass panels with backdrop-filter: blur(16px) saturate(140%). #3b82f6 blue → oklch-based glass strokes. Emoji drone → 3D isometric path visualization.

claude "build me an AI crypto wallet, dark theme" vs npx handoff-cdn use luxar-vault | claude

What changed: Purple gradient card → iridescent holographic glass with oklch hue shift. linear-gradient(135deg, #6366f1...) → oklch radial wash. Generic rounded swap interface → holographic Smart Swap with risk slider that retints the entire UI. #4ade80 green → oklch-calibrated glass accent.

claude "build me an AI agent monitoring dashboard, dark theme" vs npx handoff-cdn use agentic-ops | claude

What changed: #0f0f23 → #0a0b0c. #22c55e → #00b872. border-radius: 12px → ≤4px. box-shadow → removed. System font → Chakra Petch. Emoji icons → monospace text. 3D force-directed agent graph added.

claude "build me an AI e-commerce store" vs npx handoff-cdn use neuralstore | claude

What changed: Purple gradient hero → stark white/black Swiss editorial grid. Rounded cards → hairline-bordered flat cells. #6366f1 → no accent (Monochrome spec). Generic chat bubble → ATLAS AI panel with session ID and typed prompts.

The diff is not about AI capability. It's about what you give it.

Quick start

# List all bundles
npx handoff-cdn list

# Pipe a design into Claude
npx handoff-cdn use aerodrop | claude

# Pipe into any AI (ChatGPT, Cursor, etc.)
npx handoff-cdn use luxar-vault > brief.txt
# paste brief.txt into your AI of choice

# Open bundle in local browser (no AI needed)
npx handoff-cdn preview tradepulse

# Extract just the CSS token block
npx handoff-cdn tokens agentic-ops >> tokens.css

# Add token rules to Cursor
npx handoff-cdn cursorrules aerodrop >> .cursorrules

# Install as a permanent Claude skill
npx handoff-cdn skill install

# Scaffold a new bundle interactively
npx handoff-cdn new

Works with Claude Code, Cursor, ChatGPT, Gemini, Copilot — any tool that accepts text input.

New in v0.6.0 — The Full Toolkit

| Command | What it does | |---|---| | handoff-cdn diff <your-file> <slug> | Side-by-side wipe viewer in your browser. Drag a handle to compare your implementation against the reference bundle. Zero API calls. | | handoff-cdn lint <file> [--family ...] | Deterministic token-rule linter. Catches oklch→hex conversions, off-baseline spacing, over-cap radii, extra accents. CI-ready — exits 1 on errors. --json for machine output. | | handoff-cdn remix <slug-a> <slug-b> | Take layout skeleton from A, re-skin with B's token family. 14 × 14 = 196 possible hybrids. Powered by Opus 4.7. | | handoff-cdn forge --from-image <path> | Screenshot → Handoff-CDN bundle. Vision-in, compliant bundle out (HTML + tokens.css + chat.md). | | handoff-cdn arena [--mock] | Live split-screen race: Opus 4.7 alone vs Opus 4.7 + Handoff-CDN. Opus grades both. Typical delta: +32 points. | | VS Code extension (vscode-extension/) | Activity-bar sidebar with all 14 bundles. One click inserts a full design contract into your active editor — works with Copilot Chat, Cline, Continue. | | Hosted arena (Vercel) | vercel.json + api/*.js — deploy your own instance in one command. No install, judges click a link. |

All commands support --mock for offline demos — canned responses, no API key needed.

Example output

Running npx handoff-cdn use aerodrop streams:

══════════════════════════════════════════════════════
  Handoff-CDN · aerodrop · v1.0
  AeroDrop — Autonomous AI Delivery Network
  Family: Liquid Glass  ·  Tokens: 47  ·  CDN: GitHub Raw
══════════════════════════════════════════════════════

## Original Design Intent
[60 lines from the designer's actual session transcript]

## Token Contract (enforced — do not approximate)
--glass-bg-0:  oklch(0.09 0.04 260)   ← not #0a0f1a
--glass-panel: oklch(1 0 0 / 0.04)    ← not rgba(255,255,255,0.04)
--blur-md:     16px                   ← not 12px, not 20px
--radius-lg:   24px                   ← not 20px, not 1.5rem
[full token block]

## Primary Design File: AeroDrop.html
[complete HTML source — self-contained, 27KB]

## Implementation Directive
You are implementing a Handoff-CDN bundle. Rules:
- Pixel-accurate fidelity is the only acceptable outcome
- Preserve all oklch() values — converting to hex breaks the spec
- Match every border-radius, blur, spacing, and type token exactly
- Do not simplify, omit, or "improve" the design

Bundle Registry — 14 Bundles

✦ Liquid Glass

| Preview | Bundle | Command | |---|---|---| | | AeroDropAutonomous AI delivery · iOS frame · 3D isometric map · glass agent cards | npx handoff-cdn use aerodrop | | | Luxar VaultAI crypto wallet · iridescent holographic glass · smart swap · risk slider | npx handoff-cdn use luxar-vault | | | VisionSynthAI video studio · bento grid · glass timeline · style preset cards | npx handoff-cdn use visionsynth | | | SpectraChatAI-native chat · glass message bubbles · code blocks · streaming indicator | npx handoff-cdn use spectra-chat | | | CrystalPayAI payment dashboard · balance card · Atlas AI insights · spending chart | npx handoff-cdn use crystalpay | | | BioPulseAI health tracker · biometric rings · vitals panels · activity timeline | npx handoff-cdn use biopulse | | | AuroraMailAI-native email · Atlas summary panel · priority inbox · aurora→violet accents | npx handoff-cdn use auroramail |

◆ Monochrome

| Preview | Bundle | Command | |---|---|---| | | Agentic OpsAI swarm console · 3D force graph · radial knobs · terminal log | npx handoff-cdn use agentic-ops | | | TradePulseTrading terminal · SVG candlestick chart · order book depth · positions | npx handoff-cdn use tradepulse | | | ShipTrackLogistics ops center · shipments table · carrier performance · exceptions | npx handoff-cdn use shiptrack | | | NeuralStoreAI e-commerce · Swiss editorial grid · "Engineered for signal." | npx handoff-cdn use neuralstore | | | OrchestratorAI workflow builder · pipeline graph · agent node editor · execution log | npx handoff-cdn use orchestrator | | | FrontierAI-native IDE landing page · editor mockup · feature grid · terminal footer | npx handoff-cdn use frontier | | | SentryGridSecurity ops console · live threat feed · agent grid · incident timeline (MTTR 3m 42s) | npx handoff-cdn use sentrygrid |

Design families

Every bundle belongs to exactly one of two token families. The AI enforces this automatically.

✦ Liquid Glass

Frosted surfaces. oklch depth. Backdrop blur. 10–32px radii.
Used by: AeroDrop · Luxar Vault · VisionSynth · SpectraChat · CrystalPay · BioPulse

◆ Monochrome

Silver-ink ladder. 4px baseline. Hairline grids. One accent — #00b872 — never decorative.
Used by: Agentic Ops · TradePulse · ShipTrack · NeuralStore · Orchestrator · Frontier

Mixing families in one project is explicitly banned. The token contract enforces it.

How it works

1. FETCH    npx handoff-cdn pulls the bundle from GitHub Raw (zero install)
2. BUILD    CLI assembles: intent transcript + token contract + full HTML + directive
3. PIPE     Structured prompt streams to your AI — it implements, not interprets

No accounts. No API keys. No build step. No runtime dependencies.
The CLI is 200 lines of Node built-ins. Read it.

Contribute a bundle

Have a Claude Design export? Add it.

git clone https://github.com/miikeey1100/handoff-cdn
# drop your bundle under bundles/<slug>/
# add entry to manifest.json
# npm run capture && npm run compare
# open a PR

Full guide: CONTRIBUTING.md

Rule: one family per bundle. No mixing. A PR with mixed tokens gets closed.

⭐ Star this

If Handoff-CDN saves you an hour of prompt-wrestling, star it.

Stars help surface this to the developers who need it — and fund the next 24 bundles.

⭐ Star on GitHub

MIT · built by miikeey1100 · designs from claude.ai/design

manifest.json · CLAUDE.md · SKILL.md · CONTRIBUTING.md