VibeDesign

Tracking since Apr 7, 2026.

Changelog

• May 1, 2026
  description

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  VibeDesign extracts design tokens from any website (colors, typography, spacing, shadows, components) and turns them into a structured prompt you can paste into Replit, Claude Design, Lovable, Bolt, or Figma Make.
  
  New in v2.0:
  - Optional free account for cross-device history
  - Dashboard at vibedesign.tech to view and manage your analyses
  - 5 free prompts per month (sign in for unlimited)
  - Anonymous mode: no signup required, works out of the box
  
  How it works:
  1. Click the extension on any website
  2. Analyze Page — extracts colors, typography, spacing, shadows
  3. Get a ready-to-paste prompt
  4. Paste into your AI coding tool
  
  Privacy:
  Your API key (Claude, Gemini, or OpenAI) is stored only in your browser. We never see or transmit it. When you sign in, the URLs you analyze and the prompts you generate are saved to your account so you can access them on other devices. Anonymous mode keeps everything local on your device.

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  VibeDesign extracts design tokens from any website (colors, typography, spacing, shadows, components) and turns them into a structured prompt you can paste into Replit, Claude Design, Lovable, Bolt, or Figma Make.
  
  Key features:
  - Optional free account for cross-device history
  - Dashboard at vibedesign.tech to view and manage your analyses
  - 5 free prompts per month (sign in for unlimited)
  - Anonymous mode: no signup required, works out of the box
  
  How it works:
  1. Click the extension on any website
  2. Analyze Page — extracts colors, typography, spacing, shadows
  3. Get a ready-to-paste prompt
  4. Paste into your AI coding tool
  
  Privacy:
  Your API key (Claude, Gemini, or OpenAI) is stored only in your browser. We never see or transmit it. When you sign in, the URLs you analyze and the prompts you generate are saved to your account so you can access them on other devices. Anonymous mode keeps everything local on your device.

• Apr 24, 2026
  description

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  WHAT IT DOES
  Analyzes any website's visual design: colors, typography, shadows, spacing, animations, components
  Generates narrative design briefs optimized for v0.dev, Bolt, Lovable, and general AI tools
  Captures the design intent, not just CSS values — prompts explain WHY each choice works
  Smart visual context inference: detects hero sections, 3D containers, code blocks, tab UIs, icon systems
  
  AI-ENHANCED (Optional)
  Connect your own API key (Gemini, Claude, or OpenAI) for AI-powered design direction with 7-paragraph narrative briefs. Works perfectly without AI too — the built-in rule engine covers all design patterns.
  
  DESIGN SYSTEM EXPORT
  Generate a reusable design system reference with derivation rules. Build pricing pages, docs, settings — any sub-page that stays true to the original design language.
  
  PRIVACY-FIRST
  Zero data collection, zero tracking, zero analytics
  API keys stored locally, never transmitted to us
  All processing happens in your browser
  Select "None" as AI provider for zero network requests
  
  HOW TO USE
  Navigate to any website
  Click the VibeDesign icon or open the side panel
  Choose your focus (All, Colors, Type, Shadow, Motion, Layout, Components)
  Click "Analyze Page" — your prompt is ready to paste into v0.dev, Bolt, or Lovable
  
  OPTIONAL: AI-ENHANCED PROMPTS
  Connect your own API key (Gemini, Claude, or OpenAI) in Settings to unlock AI-written design direction. Your key is stored only in your browser's local storage - it is never sent to our servers, only used to call the AI provider's API directly from your browser.
  
  WHAT'S NEW
  v1.5.4: Prompt accuracy overhaul. Two-tier animation system (hero load + scroll reveal with failsafe). Main-children-first section extraction fixes missing sections on Next.js/Framer sites. New detections: custom cursors, ambient animations, parallax, SVG diagrams, sticky-scroll tabs, section color rhythm. Smarter AI direction with color role correction. No new permissions required.

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  VibeDesign extracts design tokens from any website (colors, typography, spacing, shadows, components) and turns them into a structured prompt you can paste into Replit, Claude Design, Lovable, Bolt, or Figma Make.
  
  New in v2.0:
  - Optional free account for cross-device history
  - Dashboard at vibedesign.tech to view and manage your analyses
  - 5 free prompts per month (sign in for unlimited)
  - Anonymous mode: no signup required, works out of the box
  
  How it works:
  1. Click the extension on any website
  2. Analyze Page — extracts colors, typography, spacing, shadows
  3. Get a ready-to-paste prompt
  4. Paste into your AI coding tool
  
  Privacy:
  Your API key (Claude, Gemini, or OpenAI) is stored only in your browser. We never see or transmit it. When you sign in, the URLs you analyze and the prompts you generate are saved to your account so you can access them on other devices. Anonymous mode keeps everything local on your device.

• Apr 24, 2026
  permissions

  activeTab, scripting, storage, tabs, sidePanel

  activeTab, scripting, storage, tabs, sidePanel, identity, alarms

• Apr 19, 2026
  description

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  WHAT IT DOES
  
  Analyzes any website's visual design: colors, typography, shadows, spacing, animations, components
  Generates narrative design briefs optimized for v0.dev, Bolt, Lovable, and general AI tools
  Captures the design intent, not just CSS values — prompts explain WHY each choice works
  Smart visual context inference: detects hero sections, 3D containers, code blocks, tab UIs, icon systems
  AI-ENHANCED (Optional)
  Connect your own API key (Gemini, Claude, or OpenAI) for AI-powered design direction with 7-paragraph narrative briefs. Works perfectly without AI too — the built-in rule engine covers all design patterns.
  
  DESIGN SYSTEM EXPORT
  Generate a reusable design system reference with derivation rules. Build pricing pages, docs, settings — any sub-page that stays true to the original design language.
  
  PRIVACY-FIRST
  
  Zero data collection, zero tracking, zero analytics
  API keys stored locally, never transmitted to us
  All processing happens in your browser
  Select "None" as AI provider for zero network requests
  HOW TO USE
  
  Navigate to any website
  Click the VibeDesign icon or open the side panel
  Choose your focus (All, Colors, Type, Shadow, Motion, Layout, Components)
  Click "Analyze Page" — your prompt is ready to paste into v0.dev, Bolt, or Lovable
  
  OPTIONAL: AI-ENHANCED PROMPTS
  Connect your own API key (Gemini, Claude, or OpenAI) in Settings to unlock AI-written design direction. Your key is stored only in your browser's local storage - it is never sent to our servers, only used to call the AI provider's API directly from your browser.

  See a website you love? Extract its exact design DNA and turn it into a prompt that AI coding tools can reproduce faithfully.
  
  WHAT IT DOES
  Analyzes any website's visual design: colors, typography, shadows, spacing, animations, components
  Generates narrative design briefs optimized for v0.dev, Bolt, Lovable, and general AI tools
  Captures the design intent, not just CSS values — prompts explain WHY each choice works
  Smart visual context inference: detects hero sections, 3D containers, code blocks, tab UIs, icon systems
  
  AI-ENHANCED (Optional)
  Connect your own API key (Gemini, Claude, or OpenAI) for AI-powered design direction with 7-paragraph narrative briefs. Works perfectly without AI too — the built-in rule engine covers all design patterns.
  
  DESIGN SYSTEM EXPORT
  Generate a reusable design system reference with derivation rules. Build pricing pages, docs, settings — any sub-page that stays true to the original design language.
  
  PRIVACY-FIRST
  Zero data collection, zero tracking, zero analytics
  API keys stored locally, never transmitted to us
  All processing happens in your browser
  Select "None" as AI provider for zero network requests
  
  HOW TO USE
  Navigate to any website
  Click the VibeDesign icon or open the side panel
  Choose your focus (All, Colors, Type, Shadow, Motion, Layout, Components)
  Click "Analyze Page" — your prompt is ready to paste into v0.dev, Bolt, or Lovable
  
  OPTIONAL: AI-ENHANCED PROMPTS
  Connect your own API key (Gemini, Claude, or OpenAI) in Settings to unlock AI-written design direction. Your key is stored only in your browser's local storage - it is never sent to our servers, only used to call the AI provider's API directly from your browser.
  
  WHAT'S NEW
  v1.5.4: Prompt accuracy overhaul. Two-tier animation system (hero load + scroll reveal with failsafe). Main-children-first section extraction fixes missing sections on Next.js/Framer sites. New detections: custom cursors, ambient animations, parallax, SVG diagrams, sticky-scroll tabs, section color rhythm. Smarter AI direction with color role correction. No new permissions required.

Permissions & access

Permissions

activeTabscriptingstoragetabssidePanelidentityalarms

Host access

<all_urls>

Screenshots