Design Extractor

Design Extractor

Turn any website screenshot or live URL into a reusable design system. Outputs a design.v1.json-compliant JSON file and a ready-to-use agent prompt that any AI coding agent (Claude Code, Cursor, Codex) can use to re-skin a target project.

What This Skill Produces

Every run produces two artifacts:

1. A JSON file conforming to design.v1.json — CSS tokens (light + dark), typography, spacing, radius, shadows, fonts, accessibility, components, optional motion tokens and external libraries, and agent instructions.
2. A prompt — a short, ready-to-paste instruction block an AI agent can use to apply the extracted design to any project.

When run inside the sleek-ui repository, it additionally offers to add the design to the catalog via a PR — updating the raw JSON, the bundled source JSON, the design list, and generating a preview SVG.

Inputs

The skill accepts any of these:

If no input is provided, ask the user: "Paste a screenshot path, a URL, or both." Never guess.

Workflow

Step 1 — Receive & Validate Input

1. Determine input type from the user's message:
   • Absolute/relative path ending in .png/.jpg/.jpeg/.webp → screenshot
   • http(s)://… → URL
   • Both → both
2. If the input is a screenshot path, verify the file exists via Read.
3. If the input is a URL, call the /browse skill to capture a screenshot. See references/extraction-guide.md for the exact browsing instructions.
4. Ask the user for a design name (slug format — lowercase, hyphens) and a short description if not given. Defaults: slug from the URL hostname (e.g., stripe.com → stripe) or from the screenshot filename.

Step 2 — Analyze the Design

Read the image (screenshot or captured URL) and extract the visual language. The model has vision — use it directly. Do not call OCR or color-extraction tools; read the image.

For each field below, state the extracted value and a one-line justification in your response to the user (e.g., primary: 245 90% 73% — purple CTA buttons and links). This keeps the output auditable.

Extract the following (see references/schema-guide.md for the full field list and HSL format rules):

• Colors (light + dark) — background, foreground, primary, primary-foreground, secondary, secondary-foreground, muted, muted-foreground, accent, accent-foreground, destructive, destructive-foreground, border, input, ring, card, card-foreground. Use shadcn HSL format — space-separated, no hsl() wrapper: "240 33% 14%".
  • If the source is a dark-mode site only, derive light-mode tokens by inverting lightness, keeping the hue and scaling saturation. If the source is light-mode only, derive a dark companion the same way. See references/extraction-guide.md for the inversion formula.
• Typography — font family (sans, serif, mono), font sizes (xs through 4xl), weights (normal, medium, semibold, bold), line heights (tight, normal, relaxed), letter spacing (tight, normal, wide).
• Spacing — unit + scale (xs through 2xl). Most modern sites use a 4px base.
• Radius — sm, default, lg, full. Infer from button and card corners.
• Shadows — sm, default, lg. Use the shadcn defaults if the source is flat.
• Font URLs — build Google Fonts CSS URLs for each detected family. If a family is not on Google Fonts (e.g., custom corporate font), fall back to the closest Google Fonts alternative and note the substitution.
• Components — button (primary, secondary, ghost), card, input. Reference token names, not raw values.
• Accessibility — focus ring width/color/offset. Default to 2px / currentColor / 2px unless the source is obviously different.
• Motion (URL inputs only) — durations, delays, easings, iteration counts, keyframes, and interaction effects (hover, focus, entrance, exit, scroll). Follow the detection workflow in references/extraction-guide.md — screenshot-only inputs cannot capture motion, so omit tokens.motion for them.
• Libraries — external animation/runtime libraries detected on the source (e.g., GSAP, Framer Motion, anime.js, AOS, Lottie). Only list libraries actually detected — never guess. Omit libraries when none are found.

Step 3 — Generate the JSON

Write a JSON file that conforms to public/schema/design.v1.json. Required top-level fields: $schema, name, version, description, categories, tokens, fonts, agentInstructions. See references/schema-guide.md for the full required-field list per section.

Target path depends on context:

• Inside sleek-ui repo (detected by git remote -v containing luongnv89/sleek-ui OR presence of public/schema/design.v1.json): target public/designs/{slug}.json.
• Outside sleek-ui repo: write to the current working directory as {slug}.json (or ask the user for a path).

Fields to set:

{
  "$schema": "https://luongnv.com/sleek-ui/schema/design.v1.json",
  "name": "{slug}",
  "version": "1.0.0",
  "description": "{one-sentence description, min 10 chars}",
  "categories": ["{1-3 tags}"],
  "author": { "name": "sleek-ui", "url": "https://luongnv.com/sleek-ui" },
  "tokens": {
    "colors": {...}, "typography": {...}, "spacing": {...}, "radius": {...}, "shadows": {...},
    "motion": { "duration": {...}, "easing": {...}, "keyframes": {...}, "effects": [...] }
  },
  "fonts": { "google": [...], "urls": [...] },
  "accessibility": { "contrastTarget": 4.5, "focusRing": {...}, "reducedMotion": true },
  "components": { "button": {...}, "card": {...}, "input": {...} },
  "libraries": [ { "name": "...", "package": "...", "version": "^1.2.3", "purpose": "..." } ],
  "agentInstructions": { "defaultMode": "light|dark", "steps": [...] }
}

tokens.motion and libraries are optional — include them only when motion/libraries were actually detected. Omit both for screenshot-only inputs and for sources with no meaningful animation.

Use the standard agentInstructions.steps from references/schema-guide.md unless the design needs special handling.

Step 4 — Generate the Agent Prompt

Write a ready-to-paste prompt an AI agent can use to apply the design to any project. See references/agent-prompt-template.md for the exact template.

The prompt must:

• Reference the JSON file's location (URL if published, or local path if not)
• Instruct the agent to set CSS custom properties on :root and .dark
• Load fonts via a <link> tag in <head>
• Set font-family from the typography tokens
• Apply component styles using Tailwind / shadcn classes (when applicable)
• Reproduce extracted animations when tokens.motion is present — map CSS-compatible easings to --ease-* theme keys, apply library-native easings through the relevant library API, map keyframes to @keyframes + --animate-* (Tailwind v4), and add any packages listed in libraries
• Test both light and dark modes

Step 5 — Detect Sleek-UI Context

Detect whether the current repo is the sleek-ui repository:

git remote -v 2>/dev/null | grep -q "luongnv89/sleek-ui" && echo "sleek-ui-repo" || echo "external"

Fallback check: presence of public/schema/design.v1.json and scripts/validate-designs.js.

• If external: Print the JSON path and the agent prompt. Done.
• If sleek-ui-repo: Proceed to Step 6.