The “Fix with AI” feature is like having an intelligent assistant ready to adjust or debug parts of your design on command. This can be a huge time-saver for minor tweaks or solving issues.

Here’s how you can use “Fix with AI” in context:

  • Layout Adjustments: Suppose you have a container with elements that aren’t aligning quite right or overflow on a smaller screen. You can select that container, click a “Fix with AI” suggestion (if prompted) or open an AI context menu, and enter something like “Make these items evenly spaced and centered.” The AI will attempt to adjust the properties (e.g., it might set justify-center and add some gap classes) to achieve the result.
  • Styling Corrections: If you’re not sure why a text isn’t readable (maybe the color contrast is off on a background), you could ask the AI to fix it: “Ensure this text has sufficient contrast.” The AI might then darken the text color or lighten the background accordingly.
  • Quick Component Edits: Let’s say you have a button that is slightly off – perhaps the padding is inconsistent. Rather than tweaking multiple properties yourself, you could prompt, “Fix padding on this button to make it look balanced.” The AI can apply a uniform padding class or adjust the styling for you.
  • Error Resolution: In some cases, if there’s a binding or code issue (for example, a component not rendering due to a missing import or a minor code error introduced in manual code editing), Shaper’s AI can identify and fix the error. For instance, “Fix with AI” could automatically add the correct import for a component you pasted in, or close an unclosed <div> tag in code. It essentially debugs simple issues.
  • Content Generation: You can even use AI to generate small bits of content. If you have a card with dummy text, a contextual AI prompt like “Write a brief tagline for this feature card.” could return a nice one-liner, saving you time on copywriting.

The “Fix with AI” suggestions often appear contextually – e.g., a lightbulb icon or prompt near selected element – whenever Shaper detects something that could be improved. You can also right-click an element and see AI options like “Fix layout” or “Suggest improvement”.

Tip: Use “Fix with AI” as a guide, not gospel. It’s great for quick fixes, but always review the AI’s change. For instance, if you ask to center something and it adds a class that doesn’t align exactly as you wanted, you might still tweak it. The goal is to save steps, not to remove you from the loop. Over time, the AI will learn common fixes, and you’ll learn to phrase requests in ways it understands well.