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, 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: