Documentation

Install the extension

A Chrome Web Store listing is planned. For now, install from source in developer mode. 

git clone https://github.com/yash0208/design-catcher.git
cd design-catcher && pnpm install && pnpm build:extension
  1. Open chrome://extensions and enable Developer mode
  2. Click Load unpacked and select packages/extension/.output/chrome-mv3
  3. Pin the extension icon to your toolbar

Configure your API key

Design Catcher is bring-your-own-key (BYOK). Keys are stored locally in chrome.storage.local and never sent to a Design Catcher server.

OpenAI

  • Get a key at platform.openai.com
  • Default endpoint: https://api.openai.com/v1
  • Recommended models: gpt-4o-mini (fast), gpt-4o (quality)

Claude (Anthropic)

  • Get a key at console.anthropic.com
  • Default endpoint: https://api.anthropic.com/v1
  • Recommended: claude-sonnet-4-20250514

NVIDIA NIM

  • Get a key at build.nvidia.com
  • Default endpoint: https://integrate.api.nvidia.com/v1
  • OpenAI-compatible API — use any catalog model ID

Open extension Settings, paste your key, click Test connection, then Save.

Capture a design

  1. Navigate to any website
  2. Click the Design Catcher icon to open the side panel
  3. Choose provider and model (or use defaults from Settings)
  4. Click Capture design
  5. Copy or download DESIGN.md, STRUCTURE.md, and UI-KIT.md from the side panel

Output format

Every capture produces a markdown spec with these sections:

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts
  • Responsive Behavior
  • Iteration Guide
  • Known Gaps

Tokens use curly-brace notation: {colors.canvas}, {typography.display-xl}, {component.button-primary}. See the sample output for a full example.

Privacy

See the full privacy policy for how captures, cloud processing, and the community cache handle your data.

Use with AI agents

Save DESIGN.md to your project root or reference it in agent prompts:

Implement the landing page following DESIGN.md exactly.
Use token refs like {colors.primary} — never hardcode hex values.

Works with Cursor, Claude Code, Codex CLI, Gemini CLI, and any tool that reads project context.