Tutorial

Edit styles with AI prompts

Not every fix needs manual slider adjustments. With inspecta’s Edit with prompt feature, you describe the change you want and inspecta applies it to the selected element on the live page.

Before you start

You need to be signed in to your inspecta account to use this feature. Once you are, open Settings in the extension, choose your AI provider, and add your API key. inspecta uses bring your own key (BYOK), so OpenAI, Anthropic, and Google Gemini are all supported. inspecta doesn’t charge for AI usage; any cost comes directly from your provider, billed to your own key.

How it works

  1. Select an element on the page, such as a button, card, nav item, or any DOM node.
  2. Open the prompt bar and type what you want, for example:
    • “Make the padding 24px on all sides”
    • “Change the background to a soft blue and round the corners”
    • “Center this text and increase the font weight”
  3. Apply: inspecta updates the element’s styles immediately so you can see the result.

When to use prompts vs. the visual editor

Use prompts when:

  • You know what you want but not the exact CSS
  • You want to try a few variations quickly
  • The change spans multiple properties

Use the visual editor when:

  • You need pixel-perfect control
  • You’re matching a Figma spec exactly
  • You’re adjusting one value at a time

Best practices

  • Be specific about the element scope: “this button” vs. “all primary buttons on the page.”
  • Start with one element, then use bulk compare if the same drift appears elsewhere.
  • Export your changes with Send to AI once you’re happy with the result.