Design Grab

About

Description:                                                                                                                                                                                             
                                                                                                                                                                                                             
  Design Grab lets you capture any website's complete design system with one click.                                                                                                                        

  HOW IT WORKS
  1. Start your local Design Grab server (npx designgrab)
  2. Navigate to any website you want to study
  3. Click the Design Grab icon and hit "Capture This Page"
  4. The extension extracts all computed CSS, colors, typography, spacing, and component structures
  5. View and manage captures in your local dashboard at localhost:3847

  WHAT IT CAPTURES
  • Complete color palette — every color value used on the page
  • Typography — font families, sizes, weights, line heights, letter spacing
  • Spacing & layout — paddings, margins, gaps, grid structures
  • Component structures — buttons, cards, navbars, forms, and more
  • CSS variables — all custom properties and design tokens

  KEY FEATURES
  • One-click full-page capture with all CSS inlined
  • Works with CSS-in-JS frameworks (React, Vue, etc.) — captures runtime-injected styles
  • Dark theme aware — automatically fixes rendering issues in captured dark-mode sites
  • Strips all JavaScript for clean, static HTML output
  • All data stays local — nothing is sent to external servers
  • Configurable server URL for custom setups
  • Open source (MIT License)

  PRIVACY
  Design Grab is completely local-first. The extension only communicates with your own localhost server — no data is ever sent to external servers, no analytics, no tracking. The only network requests are
  to your local machine.

  USE CASES
  • Study how top companies build their UIs
  • Reference real design tokens when building your own projects
  • Feed captured design systems to AI coding assistants for pixel-perfect implementation
  • Build a personal library of design references

  REQUIREMENTS
  • Node.js 18+ or Bun
  • Run "npx designgrab" to start the local server before capturing

  Design Grab does not own or claim any rights over captured design systems. All visual assets and design elements remain the intellectual property of their respective owners.

  Website: https://designgrab.vercel.app
  GitHub: https://github.com/kartikk-k/designgrab