getds is a Google Chrome extension that automatically extracts design tokens, components, and visual patterns from any web page — and exports them as a structured Markdown report ready to feed into any AI coding tool.

Ask any AI to build a website. You get something like this:

Prompt: "Create a simple SaaS sales landing page as a template."

Clean. Functional. Completely generic. Light background, standard sans-serif font, a purple CTA button. The AI did its job — but the output carries zero visual personality.

Now suppose your actual goal was to capture the essence of a site like this:

agencefoudre.com — defined by a vivid hot-pink palette, condensed bold uppercase typography, oversized spatial rhythm, and a stacked-card layout. The visual language is instantly recognizable.

No amount of prompt engineering can close that gap — because the AI simply doesn't know the exact tokens that make that design what it is: the precise background tones, the specific font weights, the spacing scale, the animation curves.

This is exactly the problem getds solves.

Run getds on the reference site, get the full token report, feed it to your AI tool — and the result transforms:

Same page. Same prompt. Completely different output — because now the AI knows the exact design tokens of the reference.

In short: getds converts any website's visual identity into a machine-readable design system — so AI tools can reconstruct it faithfully instead of guessing.

getds runs directly in the browser and scans the current page to perform comprehensive extraction and auditing:

• Colors: Backgrounds, text, borders, gradients, deduced semantic roles, and color grouping by hue
• Typography: Font families, typographic scales, fluid typography, variable fonts, line heights, and text shadows
• Spacing & Layout: Spacing scales, grid tokens, inset spacing, gutters, flexbox and CSS Grid layouts
• Shapes & Effects: Border radius scales, box shadows (elevation), opacity, and CSS filters

• Structural Mapping: Identifies buttons, cards, modals, navigation patterns, tables, pill shapes, and form inputs/layouts
• Component Variants: Detects and records interactive state changes (:hover, :focus, :active, :disabled)
• Icons & Media: Extracts inline SVGs, icon fonts, SVG references, and creates icon inventories

• Contrast & Visibility: Checks foreground/background contrast violations
• Semantic Structure: Audits heading hierarchy, ARIA usage, and alt texts
• Usability: Validates focus styles, touch targets, and reduced-motion preferences

• Animations: Extracts CSS keyframes, Web Animations API, transitions, scroll-driven animations, SVG animations, and event triggers
• 3D & Canvas: Detects WebGL canvases, 3D model references, and 3D component libraries (e.g., Three.js)

• Markdown Export: Generates rich Markdown reports with data tables, CSS reconstruction snippets, and YAML frontmatter
• Mermaid Diagrams: Renders visual diagrams of the page's hierarchical and structural patterns
• AI Reconstruction Guides: Provides an advanced blueprint optimized for AI-driven visual reconstruction

src/
├── content/      # Scripts injected into pages — 150+ detectors for colors, typography,
│                 # spacing, a11y, animations, and metadata
├── popup/        # Extension UI (HTML/CSS/JS) — the panel the user sees on clicking the icon
├── background/   # Service workers orchestrating popup ↔ content script messaging
└── lib/          # Shared utilities (IndexedDB storage, helpers)

1. Clone the repository:

   git clone https://github.com/charlenopires/getds.git
   cd getds

2. Install dependencies (test tooling only):

   bun install

3. Open Chrome → chrome://extensions/
4. Enable Developer mode (top-right toggle)
5. Click "Load unpacked" → select the repo root folder
6. The getds icon appears in your Chrome extensions bar

The extension requires no bundler — Manifest V3 with native ES modules means Chrome loads source files directly.

bun install
# Then: Chrome → chrome://extensions/ → Developer mode → Load unpacked → repo root

# Create a clean zip for Web Store submission
zip -r getds.zip . \
  --exclude "*.git*" \
  --exclude "node_modules/*" \
  --exclude "*.pem" \
  --exclude "*.test.js" \
  --exclude "bunfig.toml" \
  --exclude "bun.lock"

Or use Chrome's built-in packer: chrome://extensions/ → Pack extension → select repo root.

Keep the generated getds.pem private key secure — never commit it.

assets/
  icon16.png    (16×16 px)
  icon48.png    (48×48 px)
  icon128.png   (128×128 px)

# Run all tests once
bun run test

# Watch mode (re-runs on file changes)
bun run test:watch

Contributions are welcome. To propose a change:

1. Fork the repository
2. Create a branch: git checkout -b my-feature
3. Commit your changes: git commit -m 'feat: my new feature'
4. Push: git push origin my-feature
5. Open a Pull Request describing what was done

Developed with the community, initiated by @charlenopires. See the repository for licensing terms.