Inspiration Mode

Inspiration Mode lets you capture UI components from ANY website - not just localhost. Save screenshots and CSS metadata from sites you admire, then use them as references when asking AI to build similar designs.

Overview

With Inspiration Mode:

  • Browse any website (production sites, competitors, design references)
  • Hover to inspect elements with CSS Scan-style UI
  • Capture elements with screenshots and CSS metadata
  • Reference captures when asking AI to build similar designs

Activating Inspiration Mode

Inspiration Mode activates automatically when you open Pointa on a non-localhost website:

  1. Navigate to ANY website (not just localhost)
  2. Click the Pointa extension icon to open the sidebar
  3. The sidebar switches to Inspiration Mode for external sites

Inspiration Mode works on:

  • Production websites
  • Competitor sites
  • Design inspiration sites (Dribbble, Behance, etc.)
  • Component libraries (Tailwind UI, shadcn, etc.)

Capturing Elements

Hover to Inspect

Move your cursor over elements. You'll see:

  • Element highlight with dotted guide lines
  • Real-time metadata preview panel
  • CSS properties for the hovered element

Click to Capture

Click on any element to capture:

  • A screenshot of the element
  • CSS properties (typography, colors, spacing)
  • Element dimensions
  • The source URL

The capture is saved to your local Pointa storage.

Metadata Captured

For each captured element:

Visual

  • Element screenshot
  • Dimensions (width, height)
  • Position on page

Typography

  • Font family
  • Font size
  • Font weight
  • Line height
  • Letter spacing
  • Text color

Colors

  • Background color
  • Border color
  • Box shadow colors

Spacing

  • Padding (all sides)
  • Margin (all sides)
  • Gap (for flex/grid)

Layout

  • Border radius
  • Border width and style
  • Box shadow
  • Display type

Viewing Saved Inspirations

All captured inspirations appear in the Pointa sidebar:

  • Organized by source domain
  • Shows thumbnail preview
  • Click to view full details

Using Inspirations with AI

When asking AI to implement a design:

  1. Reference your saved inspiration
  2. Describe what you want to match
  3. AI will read the CSS metadata

Example prompts:

  • "Make my buttons look like the one I captured from Stripe"
  • "Apply the typography style from my Linear inspiration to my headings"
  • "Use the card design I saved as reference for my product cards"

AI receives:

  • The captured CSS properties
  • The source URL for context
  • The screenshot (if needed for visual reference)

Use Cases

Competitive Analysis

Capture UI patterns from competitor products to understand their design approach.

Design System Building

Save consistent examples of buttons, cards, forms from sites with great design.

Client References

When a client says "I like how X does this", capture it as a concrete reference.

Learning

Study CSS implementations of designs you admire.

Tips for Inspiration Mode

Capture at the Right Level

  • Too broad: Capturing entire sections loses specific details
  • Too narrow: Capturing just text misses container styles
  • Just right: Capture the component level (button, card, input)

Organize by Purpose

Capture with intent:

  • "Button styles I like"
  • "Typography references"
  • "Card layouts"

Include Context

When capturing, note:

  • Why you like this design
  • What aspect to match
  • How it relates to your project

Respect Copyright

Inspiration Mode is for reference only. Don't copy designs wholesale - use them as inspiration for your own original work.

Privacy Notes

  • Captured inspirations are stored locally only
  • Nothing is uploaded to external servers
  • Screenshots stay on your machine
  • Only you (and your AI tool) can access them

Related Features