To get the most out of Shaper’s AI, keep these best practices in mind:
  • Be Specific, But Not Verbose: Clearly mention the key layout or components you want. For example, “a three-step onboarding flow with progress bar” is clear. Avoid extremely long paragraphs that might confuse the AI – break ideas into sentences or phrases.
  • Use Common UI Terms: The AI understands many design terms (dashboard, hero section, card, navbar, modal, list, etc.). Use these conventional words rather than overly technical descriptions. Instead of “a rectangular box for user input,” say “a form with input fields.”
  • Specify Platform or Device if Relevant: If you want a mobile layout, mention it. E.g., “mobile profile screen” versus “web profile page” might yield different layouts optimized for those contexts.
  • Iterate with Follow-ups: You don’t have to get everything in one prompt. You can generate a base, then use another prompt to enhance it. For instance, after creating a basic dashboard, you might prompt, “Add a line chart widget to the dashboard below the stats cards.” The AI can insert new elements into your existing design. This conversational iteration can yield great results.
  • Leverage AI for Variations: Not sure which design approach to take? Use prompts to create multiple versions. Generate two or three different layouts (e.g., “Landing page with video background” vs “Landing page with illustration and signup form”) on separate pages, then pick the best elements from each. This is a fast way to explore alternatives without manually designing each from scratch.
  • Stay in Control: AI is powerful, but sometimes it might produce something unexpected or not exactly as per your style. Always review and adjust. Think of the AI as a junior designer – talented and fast, but needing direction from you, the senior designer. Don’t hesitate to delete or redo sections that aren’t up to your standards.
  • Mind the Code (for Devs): If you have coding knowledge, occasionally glance at the code output for a complex AI-generated layout. Ensure it’s using the components or semantic structure you want. It’s easier to correct an AI layout early (like swapping a <div> for a semantic <header>) than to retrofit it later.
By following these practices, you’ll harness the AI to dramatically speed up your workflow while maintaining the quality and consistency of your design.