Design Catcher

About

Design Catcher captures any website's visual design system and exports a portable DESIGN.md specification for AI coding agents.

HOW IT WORKS
• Visit any website you want to replicate
• Open the Design Catcher side panel
• Capture extracts HTML, CSS, computed styles, and CSS variables
• Your LLM synthesizes a structured DESIGN.md with design tokens
• Copy or download and use with Cursor, Claude Code, Codex, or any AI agent

KEY FEATURES
• Deterministic extraction of colors, typography, spacing, radius, and components
• Bring your own API key — OpenAI, Claude (Anthropic), or NVIDIA NIM
• Optional viewport screenshot for vision-capable models
• Portable DESIGN.md format with token refs like {colors.primary}
• No backend — API keys stored locally in chrome.storage.local
• Open source under MIT license

Perfect for developers who want to replicate a site's design language in their codebase without manually documenting every style.