This section of the documentation will show you how to leverage Shaper’s built-in AI prompts to speed up your design process. You’ll learn how to describe the interface you want and watch Shaper build it for you in real-time, how to refine the AI-generated layouts, and how to use handy AI features like “Fix with AI” for quick improvements. Shaper’s approach to AI is augmentative: the AI speeds you up, but you remain in control, shaping the final output. Let’s explore how to use prompts in this AI UI builder workflow.

​
Generating Layouts with AI Prompts

To kickstart a design in Shaper, you can use the AI Prompt feature – essentially a text-to-UI generator. Rather than starting from a blank canvas, simply tell Shaper what you need in natural language, and it will create a layout for you, complete with real components and code.

How to Use AI Prompts:

  1. Open the Prompt Dialog: Click the “✨ AI Prompt” button (usually found in the toolbar or start screen) or press the dedicated shortcut key to bring up the prompt input box. A dialog or side panel will appear, inviting you to “Describe the interface you want to create.”
  2. Enter Your Prompt: Type a clear description of the UI you’re envisioning. Be as specific as needed about the type of page or component and what it should include. For example, you might write: “Dashboard with a sidebar navigation, a top header, and a grid of 4 summary cards showing user stats.” (See the next section for more prompt examples.)
  3. Generate: Hit enter or click “Generate Layout”. Shaper’s AI will think for a moment – you might see an overlay with a loading animation or a brief “Thinking…” message – and then voilà! components will start appearing on your canvas, arranged according to your prompt.
  4. Watch the Magic (Streaming Response): The generation might stream in, meaning you’ll see the layout materialize step by step. For instance, first the high-level sections (sidebar, header, cards), then content within them. This streaming overlay gives you immediate feedback that the AI is working. In a few seconds, you’ll have a first draft of your UI.

(Screenshot/GIF: A user enters a prompt in the AI dialog – e.g., “Landing page with a hero section, three feature columns, and a signup call-to-action” – then the Shaper canvas populates with a basic layout matching that description.)

Shaper’s AI doesn’t just place placeholder graphics; it creates actual elements that you can select, move, and style. The sidebar from the example will be an actual container with navigation items, the cards will be components with text and icons, etc. All of this comes with React code and Tailwind classes ready to go. This is design-to-code at warp speed.

​
Examples of Effective Prompts

Writing a good prompt is key to getting a useful layout from the AI. Here are a few example prompts and what they produce:

  • Dashboard: “Admin dashboard with a sidebar menu, a top navbar, and a main area showing three stats cards in a row and a recent activity table.”

    Result: The AI generates a two-column layout: a left sidebar with dummy menu items, a top nav bar (maybe with a placeholder title or profile icon), and in the main section, three statistic cards (e.g., for users, revenue, etc.) alongside a table below them. All sections are neatly aligned and responsive.

  • Form Screen: “Mobile signup screen with app logo at top, two text fields for email and password, a submit button, and a link to log in.”

    Result: A centered column layout optimized for mobile: logo image at the top, text input fields (with labels) for email and password, a prominent signup button, and an underlined text link for “Already have an account? Log in.” The AI might even apply some basic spacing and a nice form card container if applicable.

  • Landing Page: “Landing page with a hero section, an overview section, and a pricing table. Hero has a headline, subtext, and a signup button. Overview has three illustrated features in columns.”

    Result: The generated page includes a hero area (big heading text, subtext paragraph, and a button), followed by a three-column section each with an icon placeholder, a heading, and some text, and then a pricing table section with tier cards. It will be a scrollable page with sensible spacing between sections.

Feel free to experiment – you can ask for a “profile card with avatar, name, and bio” or a “settings page with a list of toggle switches”. The AI is trained on many interface patterns, so it often understands common design terminology (like “sidebar”, “navbar”, “form”, “card”, etc.).

Tip: When writing prompts, focus on the structure and purpose of the UI rather than exact styling. Mention the key components and their arrangement. For example, say “two-column layout” or “grid of 3 cards” instead of “make it blue with size 14 font” – you can always style the details after generation. The clearer your description of the layout and components, the better the first draft the AI will provide.