Design Rip

Design Rip

Turn any public website into a reusable design.md draft for AI UI generation.

Design Rip captures full-page screenshots, component crops, hover states, tiled long-page screenshots, computed styles, gradients, transitions, dark sections, CSS variables, and token drafts. Claude can then synthesize the artifacts into a clean design system brief.

npx design-rip https://loman.ai --out design.md

Why

Vibe-coded UI often fails because the agent has weak visual context. Design Rip gives Claude or Codex the real visual evidence: screenshots plus exact computed style data.

Use it when you want to:

• clone the visual language of a public landing page
• extract tokens from a design-forward SaaS site
• give an AI agent a reliable design.md before it builds
• compare component states, gradients, spacing, and motion values

CLI

npx design-rip <url> [options]

Options:

--url <url>              URL to capture, optional if URL is positional
--pages <paths>          comma-separated extra paths, like /pricing,/docs
--viewports <widths>     comma-separated widths, default 375,768,1440
--out-dir <dir>          artifact directory, default ./.design-rip-cache
--out <file>             write a deterministic design.md draft
--scale <n>              device pixel ratio for retina screenshots (default: 2)
--dark                   force dark color scheme (prefers-color-scheme: dark)
--wait-extra <ms>        extra settle time for heavy SPAs

Examples:

npx design-rip https://linear.app --pages /pricing --viewports 375,1440 --out design.md

# retina 2× screenshots (default) — best for AI vision analysis
npx design-rip https://vercel.com --scale 2 --out design.md

# capture dark mode variant
npx design-rip https://vercel.com --dark --out design-dark.md

Artifacts

.design-rip-cache/
  shots/
    *.png
    components/
    hover/
    tiles/
  styles.json
  vars.json
  meta.json
  tokens.draft.json

styles.json includes color, typography, spacing, gradients, transition values, shadows, radii, and interactive transition metadata.

meta.json includes framework signals, fonts, captured pages, component crop paths, hover crop paths, dark section detections, and tile paths.

Claude Code Plugin

This repo loads as a Claude Code plugin:

.claude-plugin/plugin.json
SKILL.md
capture.mjs
template.md
setup.sh

Inside Claude Code, invoke directly once installed:

/design-rip https://loman.ai
/design-rip https://vercel.com --dark

The skill runs the capture script, reads screenshots and JSON artifacts, and writes a polished design.md using vision + computed style cross-reference.

Codex Support

Run headless with the Codex CLI:

codex "rip the design from https://linear.app and write design.md"

Or point Codex at the script directly:

codex "node ./capture.mjs --url https://linear.app --scale 2 --out-dir .design-rip-cache && synthesize design.md from the artifacts"

Development

npm install
npm run smoke
npm run demo:loman

Limits

• Public pages only in v1.
• Auth-gated apps need a future cookie/session mode.
• This does not grant rights to copy protected designs. Use responsibly.