logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Develop mode
Collaboration
Import and export
File settings
Account
Teams, projects, and files
Billing
Professional plan
Organization plan
Apps
Work with support
Help Center/Motiff AI/AI Generates UI/Get started with AI Generates UI

Get started with AI Generates UI

Motiff aims to explore innovative approaches to human-AI collaboration. AI can save a significant amount of time by generating user interfaces with just a simple description of your intention and quickly transforming your creative text prompt or reference images into visual designs. In addition, you can preset or remix stylings to precisely control the styles of your design, generating consistent and highly usable interfaces

Use AI Generates UI

You can use the AI Generates UI feature by following these steps:

  1. 1.Click 'AI.svg' in the toolbar and select AI Generates UI. 'Use AI Generates UI-01.png'
  2. 2.Enter prompts or upload reference images in the popup.
  3. 3.Choose between the styling presets of Mobile or Web.
  4. 4.Click Generate.

Note: The default style is set to Mobile Auto. Click '16_Common_ArrowDown (7).svg' to switch styling presets, such as Web Auto.

Motiff supports performing the following actions in the AI Generates UI popup. 'Use AI Generates UI-02.png'

  1. 1.A text prompt area for direct input.
  2. 2.Click '16_Common_random.svg' to see prompt examples.
  3. 3.Click '16_Common_addPicture.svg' to upload reference images.
  4. 4.Preset the stylings for the generated interface. Motiff supports multiple styling presets for both mobile and web.
  5. 5.Click '16_Common_Close (1).svg' to close the popup.

Input prompts

Motiff supports two text input types:

  • Text input: Use text prompts to describe the desired interfaces.
  • Image input: Upload reference images for the generated design.

Enter text prompts

Effective prompts help the AI understand your needs more accurately. This includes information about page content, structure, layout, or style. The AI will follow your instructions to generate the interfaces.

You can input prompts of varying complexity based on your needs.

  • Short prompt: Suitable for brainstorming and creative exploration, such as “homepage of an e-commerce app”.
  • Detailed prompt: Suitable for precisely describing requirements, such as "a homepage for an e-commerce app aimed at young people, featuring a top search bar, carousel ad space, popular product recommendations, category navigation, and a bottom tab bar”.

Note: A complete prompt typically includes the following information: page name or its function, application type, target users, and detailed descriptions of page modules.

'Enter text prompts.png'

Upload reference images

Motiff supports the following two ways for uploading reference images:

  • Upload local images: Click '16_Common_addPicture.svg' to open your local folder, then select and upload the image.

  • Upload layers from canvas:

    1. a.Select the layer on the canvas.
    2. b.From the context menu, choose Copy as PNG.'Upload reference images-01.png'

    Tip: You can use shortcuts to copy the selected layers:

    • macOS: ⇧ shift + ⌘ Command + C
    • Windows: Ctrl + Shift + C
    1. c.Paste the image and wait for the upload to complete. 'Upload reference images-02.png'

Note: To avoid interfering with the model, it is recommended that the reference image only has one interface.

Preset stylings

Motiff offers many types of styling presets for mobile and web platforms to enhance the stability and controllability of interface generation.

  • Mobile
    • Mobile Auto: AI can create designs freely and won’t be constrained by any specific style.
    • Material Design: Follows Google’s Material Design principles, offering highly customizable components and a flexible theme system for mobile apps.
  • Web
    • Web Auto: AI can create designs freely and won’t be constrained by any specific style.
    • Ant Design: An organization-level UI design principles provided by Ant Group, offering a wide range of customizable components and a theme system.
    • shadcn/ui: A clean and modern UI library style, designed to deliver a simple design language for designers and developers to build modern web apps quickly.

Tip: Motiff will continue to add more styling presets for the design systems.

Change styling presets

  1. 1.Click '16_Common_ArrowDown (7).svg' next to the styling presets to open the dropdown menu.
  2. 2.Select the styling preset. '6-英.png'

Tip: After selecting the styling presets, AI will automatically resize the output interfaces (mobile or web), you don’t need to specify the device type repeatedly in the prompt.

Remix stylings

Motiff allows you to customize styling presets and gives you precise control over design details to create consistent designs that meet your needs.

  1. 1.

    Hover the mouse over the styling preset you want to customize, and click 'Vector (1).svg' to remix it. 'Remix stylings-01.png'

  2. 2.

    Adjust the style parameters. (The parameters may vary between design systems. The figure below shows the adjustable parameters of shadcn/ui.) 'Remix stylings-02.png'

  3. 3.

    Click Remix to save the styling presets. Motiff will save this styling in the Styling Presets menu for future use. 'Remix stylings-03.png'

    Tip: You can hover your mouse over the customized styling to edit it. 'Remix stylings-04.png'

Supported parameters for styling adjustment

Motiff is dedicated to aligning with the parameters supported by major design system websites and makes sure that designers can efficiently and accurately adjust design stylings to meet diverse project requirements.

Supported parametersMobile AutoMaterial DesignWeb AutoAnt Designshadcn/ui
Mode✓✓✓✓✓
Contrastx✓xxx
Theme color✓✓✓✓✓
Other colorxxx✓（Support colorSuccess, colorWarning, colorError, etc.）x
Corner radius✓x✓✓✓
Basic text sizexxx✓x
Font✓✓✓✓✓

Tip: Fonts can only be selected from Motiff’s cloud fonts list.

FAQ

  1. 1.

    How can I generate a complete set of interfaces continuously?

    Currently, AI-generated UI does not support multi-turn conversations. To design a complete set of interfaces, you can input specific prompts for each page step by step, or adjust details based on existing prompts to maintain consistency and functionality.

    Tip: Continuous generation is coming soon. Stay tuned!

  2. 2.

    Why does the generated interface not match my description?

    Try using more detailed prompts by clearly specifying page structure, functional modules, and styling requirements. This will help the AI better understand your needs.

  3. 3.

    Why are the styles of the generated interfaces inconsistent across multiple attempts?

    You can preset stylings or remix stylings to maintain consistency in the generated results.

  4. 4.

    Why does the generated interface not match the target device size I want?

    AI prioritizes the styling selected in the Styling Presets menu by default. Make sure that you have chosen the required Mobile or Web style.

    Additionally, the default size for mobile is 390px, and for web, it is 1440px. Other page sizes are currently not supported.