Getting Started

Get up and running with Design Grab in under a minute.

1. Install the Chrome Extension

Install the Design Grab Chrome extension from the Chrome Web Store or load it as an unpacked extension from the repository.

git clone https://github.com/nicepkg/designgrab
cd designgrab && bun install
# Load extension/ folder as unpacked in chrome://extensions

2. Start the local server

The local dashboard server receives captures from the extension and generates your design.md files.

bun run server.ts
# Dashboard available at http://localhost:3847

3. Capture a website

Navigate to any website (e.g. openai.com), click the Design Grab extension icon, and hit "Capture". The page's DOM and computed styles are sent to your local server.

4. Use your design.md

Open the dashboard at localhost:3847 to view, copy, or download your generated design.md. Use it as a reference for building UIs that match the captured website's design system.

Next: How It Works →