AI Response Overlay & Workflow Integration
Guide to Ai response and workflow integration in Shaper
When you invoke an AI action in Shaper – whether generating a full layout or using “Fix with AI” – you’ll notice a response overlay on the canvas. This overlay is designed to keep you in the flow without jarring popups or waiting screens.
What the Overlay Does:
- It provides immediate feedback that your request is being processed. You might see a subtle overlay with a loading spinner and messages like “Generating with AI…” or a fun phrase related to your action (e.g., “Shaping your design…”).
- For larger generations (like a whole page), the overlay might progressively show the layout being built, as mentioned. This streaming effect means you aren’t left staring at an empty canvas; you can start to see the structure and even begin thinking about adjustments while it finishes.
- Once the AI operation is done, the overlay fades away automatically, merging the result into your normal canvas view. You can then click on elements as usual.
This integration means AI is not a separate mode or external tool – it’s woven into the Shaper workflow. You can seamlessly go from manual editing to AI assistance and back to manual.
Example Flow: Imagine you’re designing a complex page:
- You start by prompting the overall layout (AI builds a base).
- You then switch to manual mode to fine-tune and add specific branding assets.
- You encounter a tricky CSS issue with alignment, so you use “Fix with AI” on that element.
- Continue designing manually, then perhaps use another prompt to add an extra UI section below (yes, you can run another prompt to append or create a new component on the fly).
- Throughout, the AI overlays guided you and then got out of the way, keeping you “in the zone.”
(Illustration: A sequence of three images – first shows the AI overlay saying “Generating…”, second shows partial UI with a loading indicator, third shows the final UI with the overlay gone – demonstrating how the AI generation appears and then integrates.)
The result is a fluid prompt + edit hybrid flow. You’re never locked out of editing; even while the AI is streaming in, you can usually start selecting the parts that have appeared and inspect them. This parallelism can make you feel like you truly have an assistant working side by side.