​
1. Prompt Writing Guide: Crafting Effective AI Requests

AI in Shaper relies on well-structured prompts to generate high-quality designs. A clear and detailed prompt ensures the AI understands the request and produces precise, functional, and visually appealing results.

​
Key Elements of an Effective Prompt

  • Be Specific: Instead of saying, “Create a login form,” provide more details like, “Generate a login form with email and password fields, a ‘Remember Me’ checkbox, and a blue ‘Sign In’ button aligned to the right.”
  • Mention Layout Preferences: If you want a sidebar, grid, or card-based design, include that in the prompt.
  • Define Styling Preferences: Specify details like color schemes, typography, button styles, and spacing.
  • Reference Components: If using ShadCN components, mention them to ensure compatibility with your design system.
  • Include Functional Details: If a UI element has hover effects, animations, or interactions, describe how it should behave.

​
Example of a Well-Written Prompt

✅ “Create a pricing section with three cards displaying different plans: Basic, Pro, and Enterprise. Each card should include a title, price, bullet points for features, and a CTA button. Use a minimalist design with a white background, rounded corners, and subtle shadows.”

❌ “Make a pricing page.” (Too vague, lacks structure and design details.)

​
Writing Prompts from Different Areas in Shaper

Shaper provides multiple ways for users to generate and refine designs using AI-powered prompts. Depending on where you are in the platform, you can submit design queries from different locations, and the AI will generate UI components, layouts, or full-page designs accordingly.

​
1. Shaper Landing Page

The Shaper landing page allows users to enter a design prompt before even creating a project. This feature is perfect for those who want to instantly generate a UI concept based on an idea.

✅ How It Works:

  • Enter a text-based prompt describing the type of UI you need.
  • AI will generate an initial design preview based on the prompt.
  • If satisfied, you can start editing the generated design in the Shaper editor.

✅ Pre-Existing Prompt Templates:

  • To make the process even easier, the landing page includes pre-built prompt templates that users can choose from.
  • Clicking on a template will auto-fill the prompt text area, which users can modify as needed or simply click “Send” to generate the design.

✅ Example Prompt:
*“Generate a clean and modern landing page with a hero section, feature highlights, and a call-to-action button.”*Dashboard Prompts

​
2. Dashboard – Generating a New Design from a Centralized Hub

Once inside the Shaper dashboard, users can generate designs directly from the project view. This is useful when creating new projects or modifying existing ones with AI assistance.

✅ How It Works:

  • From the dashboard, select “Generate a Design” and input your prompt.
  • AI will provide a UI layout suggestion based on your input.
  • Choose to accept, refine, or discard the design before importing it into your project.

✅ Pre-Existing Prompt Templates:

  • The dashboard also includes pre-set AI prompt templates for common UI patterns, such as dashboards, pricing pages, or login screens.
  • Clicking on a template will auto-load the prompt into the text area, allowing users to customize it or send it directly to generate a design.

✅ Example Prompt:
*“Create a pricing section with three cards for different subscription plans, using a modern and minimalistic design style.”*AI inline quick edit Prompts

​
3. AI Chat Box – Interactive AI Design Assistance

The AI Chat Box inside the Shaper editor allows users to have a conversational interaction with the AI to refine designs in real time. Instead of generating entire pages from scratch, this feature helps users tweak specific elements of an existing UI.

✅ How It Works:

  • Open the AI Chat Box from the editor panel.
  • Describe what you want to change or improve.
  • AI will apply the requested modification instantly.

✅ Example Prompts:

  • “Change all primary buttons to a rounded design with a blue gradient background.”
  • *“Reduce the padding inside all cards to make them more compact.”*3. Keyword Optimization: Improving AI-Generated Results

Using the right keywords significantly impacts the quality of AI-generated designs.

​
4. Inline AI Quick Edit – Fast Adjustments Without Leaving the Design

For instant modifications, Shaper includes an Inline AI Quick Edit feature. This allows users to select a UI element and make AI-powered adjustments without opening the AI chat box.

✅ How It Works:

  • Click on any UI element in the design editor.
  • Choose “AI Quick Edit” to modify it using natural language.
  • AI instantly applies changes based on the given instruction.

✅ Example Quick Edits:

  • “Make this card have a drop shadow and rounded corners.”
  • “Increase the font size of this heading by 20%.”

​
Example of Optimized Prompt Using Keywords

✅ “Create a modern, minimalistic contact form with a full-width layout. Include input fields for name, email, and message, along with a submit button. Add a hover effect where the button changes to dark blue with a slight scale-up animation.”

By incorporating clear, structured keywords, you guide the AI to produce precise and well-styled designs that fit your vision.