Turn Any Website into an AI Design Skill

What it does

This Chrome extension reads the active tab and pulls out six style categories—typography, colors, spacing, radius, shadows, and motion—then compiles them into a DESIGN.md or SKILL.md file. The output follows the open-source TypeUI format and is intended as a blueprint for AI coding tools such as Claude Code, Codex, and Google Stitch.

The interesting bit

Rather than writing design-system documentation by hand, you point the tool at a live site and let it infer brand context, writing tone, accessibility rules, anti-patterns, and quality gates automatically. It treats the production site as the specification and reverse-engineers an agent-ready skill.

Key highlights

• Extracts six style signals directly from the DOM: typography, colors, spacing, radius, shadows, and motion
• Generates two output formats: a DESIGN.md design-system reference and a SKILL.md agent-ready skill file
• Embeds WCAG 2.2 AA accessibility requirements and interaction constraints in every generated document
• Output includes structured sections for brand context, writing tone, required practices, prohibited anti-patterns, and testable quality gates
• Explicitly targets AI agents including Claude Code, Codex, and Google Stitch

Caveats

• The README only documents manual unpacked installation; a Chrome Web Store release is not mentioned
• The project does not disclose how it handles complex styling pipelines such as CSS-in-JS or dynamically injected styles

Verdict

Useful if you want to clone or extend an existing site’s aesthetic using AI agents and need a structured way to transport the design system. Not a design tool in its own right—think of it as a reverse compiler for visual taste.