Documentation

Install from Chrome Web Store

Design Catcher is available on the Chrome Web Store — no developer mode required.

Add to Chrome — it's free

Install from source (developers)

To run from source or modify the extension:

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 (optional)

The default capture path uses Gemini on GCP — no API key needed. For local-only or custom model synthesis, Design Catcher supports BYOK. Keys are stored 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 system

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

Rate limits: 10 new captures per IP per day. Repeat captures of the same domain load from the community cache instantly — no LLM call, no quota cost.

Output format

Every capture produces three markdown files:

  • DESIGN.md — colors, typography, spacing tokens, shadows, border radius, components, Do's and Don'ts, responsive behavior
  • STRUCTURE.md — hero blocks, nav patterns, section rhythm, carousels, scroll behavior, motion specs
  • UI-KIT.md — detected component patterns mapped to shadcn/ui, Aceternity, Magic UI, and 21st.dev

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

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. Drop all three files into your repo root as a capture bundle for full fidelity.

Privacy

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