The AI’s first draft is just that – a first draft. The real power of Shaper is that you can take this AI-generated layout and make it your own using all the regular editor features. Everything the AI places is fully editable.

After generation, you should:

  • Review the Structure: Look at the layer tree and canvas to understand how the AI organized the layout. Maybe it created a “Header” container, a “Sidebar” component, etc. Knowing the structure will help you decide what to tweak.
  • Select & Tweak Elements: Click on any element to adjust it in the Property Panel. Did the AI give you a blue hero background but you want purple? Just change the background color. Perhaps the cards need to be spaced out more – select the container around them and increase the gap or padding.
  • Replace Placeholder Content: The AI might use placeholder text like “Lorem ipsum” or generic labels (“Card Title”, “Feature 1”). Go ahead and change those to real copy that fits your project. Double-click text layers to edit text, or use the property panel to update image sources to your actual images.
  • Apply Design Tokens: This is where your earlier work on design tokens pays off. You can swap out the AI’s default colors or font sizes with your tokenized styles. For example, if the AI created a button with a random blue color, reassign it to your “Primary” color token and adjust the typography to match your brand’s heading style. This quickly harmonizes the AI-generated parts with the rest of your design system.
  • Restructure if Needed: Don’t be afraid to move things around. AI might not nail the exact layout you imagined – maybe the sidebar is too wide or the form should be on the right side instead of left. You can drag and reorder sections, or even delete parts you don’t need. The canvas is fully yours to control. For instance, if the “recent activity table” in the dashboard isn’t needed, you can remove it or swap it for a different component.
  • Make Components from Patterns: If the AI generated multiple similar elements (like several cards or list items), consider grouping one and making it a component (as discussed in the Editor section). Then replace the others with instances of that new component. This will save time if you need to edit those elements later in one go.

Remember, the AI’s output is real code in your project. So as you refine visually, the code is also being refined. You can even flip to the Code view to see how the AI structured the JSX – it can be a great learning moment to understand how certain layouts are coded.

(Screenshot: An AI-generated landing page with highlighted sections, and the user customizing one section – e.g., changing text and applying a token color in the property panel.)

Best Practice: Treat the AI’s design as a starting point. It’s there to save you from the blank canvas syndrome and do the heavy lifting of layout. But always review accessibility (are form labels present?), logical hierarchy (proper headings), and fidelity to your brand. Use your designer’s eye to polish the details after the AI has done the grunt work.