Stats
Actions
Tags
From Design Rip
Extract a design system from any public website URL into a structured design.md file. Captures screenshots and computed styles via Playwright, then synthesizes tokens, components, and aesthetic principles by fusing vision analysis with raw style data. Use when the user says "rip design from <url>", "extract design.md", "clone design system from <site>", "generate design tokens from <url>", or wants to reverse-engineer a site's visual language for use with interface-design:init or similar UI scaffolding.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-rip:design-ripThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reverse-engineer a public website's design system into a `design.md` file the user can feed to `interface-design:init` or any UI generation flow.
Reverse-engineer a public website's design system into a design.md file the user can feed to interface-design:init or any UI generation flow.
npm i -g playwright && npx playwright install chromium)If Playwright missing, run bash ~/.claude/skills/design-rip/setup.sh first and tell the user.
url (required): the website to ripout (optional): output path for design.md, default ./design.mdpages (optional): comma-separated additional paths to crawl (e.g. /pricing,/docs)viewports (optional): comma-separated widths, default 375,768,1440node ~/.claude/skills/design-rip/capture.mjs \
--url "<url>" \
--pages "<paths>" \
--viewports "375,768,1440" \
--scale 2 \
--out-dir "./.design-rip-cache"
Add --dark to capture dark-mode variant. Add --scale 1 for faster captures on slow machines.
This produces under ./.design-rip-cache/:
shots/ — PNG screenshots per page per viewport (downscaled to 1600px max width)shots/components/ — tight crops for nav, hero, first CTA, first card, pricing section, and footer when detectedshots/hover/ — tight hover-state crops for visible buttons and linksshots/tiles/ — overlapping 1600x1200 page tiles for long pages over 3000px tallstyles.json — computed styles aggregated across all visible elements
gradients, transitionValues, and per-element transitionsvars.json — CSS custom properties found on :root and themed selectorsmeta.json — framework detection, theme-color, fonts, URL list crawled, component crop paths, hover crop paths, tile paths, and dark section detectionstokens.draft.json — deterministic first-pass tokens (color/spacing/typography clusters)Wait for the script to finish. If it fails with playwright: not found, run the setup script and retry.
Use the Read tool on every important PNG in shots/, especially:
shots/components/shots/hover/shots/tiles/ when the full-page screenshot is too tall to inspect clearlyUse Read on the JSON files for exact values. Cross-reference vision with data — vision gives aesthetic and component patterns, JSON gives precise tokens.
Use the template at ~/.claude/skills/design-rip/template.md as the skeleton. Fill in:
primary, accent, background, text, text-muted, border, surface) anchored to roles, not raw hex dumps
primary = color of primary CTA button (largest button, above fold, highest contrast)background / text from <body> computed stylesvars.json (existing CSS custom properties beat inferred ones)tokens.draft.json margin/padding histogram, snap to base unit (usually 4 or 8)shots/components/ for base styling and shots/hover/ for hover states.meta.json.darkSections to identify dark bands or inverted sections. Describe how text, borders, and CTAs adapt there.styles.json.gradients, tokens.draft.json.gradientsByFrequency, and transitionValuesByFrequency.Before writing, sanity-check:
color-500-style names — use semantic rolesIf a value is ambiguous (two equally plausible primaries, unclear accent), flag it inline as <!-- ambiguous: candidates X, Y --> and pick the more frequent one.
Write to the out path (default ./design.md).
Tell the user:
interface-design:init to scaffold UI in this styleLeave ./.design-rip-cache/ in place — user may want to re-synthesize or inspect raw data. Mention it can be deleted safely.
waitUntil: networkidle + 1.5s settle. If page still empty, user should add --wait-extra 5000.page-0.png, page-1.png...).--dark flag to capture dark variant. Run twice (light + dark) and merge into one token set with light / dark variants in the color section.--scale 2 produces 2× screenshots. Use --scale 1 if disk space is constrained or captures are slow.Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub abhiyan100/design-rip