Prompt guide for the Visily AI Chat Assistant

Prompt guide for the Visily AI Chat Assistant

Create great designs, diagrams, and images with Visily AI by writing clear, focused prompts. This guide shows you how.

🔑 Golden Rule: Always State the Output Type

Clearly specify what you want to generate:
  1. UI Screens: Indicate the platform (mobile, web app, or website) and whether you need a single screen or a full app.
  2. UI Components: Specify the component type, such as tables, charts, headers, or menus.
  3. Images: Indicate whether you want a photo or an illustration.
  4. Diagrams: Visily supports sitemaps, organization charts, flowcharts, state diagrams, use case diagrams, class diagrams, and entity-relationship diagrams (ERDs).

🎨 Generate Designs (Screens & Components)

Generate from text prompt

For the best results, include the following details:
  1. Platform: web app, mobile app, website
  2. Scope: single screen or entire app
  3. Description: detailed description about the app or screen, including styling information
Examples:
  1. [App] Create an e-learning web app with lessons, tracking, and live classes. Use soft colors and rounded UI.
  2. [Screen] Design a mobile app screen for order confirmation after a purchase, including order summary, estimated delivery, and a “Track Order” button. Use a reassuring, clean style.
  3. [Component] Design a property listing card to display key details like price, location, photo, and features in a compact, readable layout.

Generate from uploaded screenshots

You can upload a screenshot of an app or website and have Visily AI generate new designs based on it. Below are the 03 most common operations you can do with uploaded screenshots.
  1. Reuse design: Convert the image to a design. Keep everything exactly the same, including styles, fonts, content, and layout.
  2. Reuse layout: Use the referenced layout as the base to generate a sunscreen product page.
  3. Reuse styles: Design the product detail screen for my website with image, name, price, description, and key features. Match fonts, spacing, and layout to the referenced design.

Modify a design

After Visily AI generates a screen or component, you can ask it to make follow-up modifications. You can also select a screen or component on the canvas to modify it with AI. Below are common modification types Visily AI supports and examples for each type.
  1. Add / Remove / Replace element:
    1. Remove the “About Us” section and add a testimonials section with at least 3 customer quotes below the Features section.
    2. Replace the lead chart with a monthly sales chart. Ensure it aligns with the existing layout and style.
  2. Change layout:
    1. Change the layout from a vertical list to a horizontal scroll view for better visual flow.
    2. Redesign the current screen layout to use a two-column structure, with content on the left and a sidebar on the right.
    3. Generate the website version of this mobile screen.
  3. Update style & theme:
    1. Update the accent color to a bright, energetic yellow.
    2. Change the main headings to a bold, impactful display font.
    3. Switch the entire UI to a dark mode, using deep grays and white text, ensuring high contrast for accessibility.
  4. Modify contents:
    1. Change all contents to French.
    2. Replace the hero image on the landing page with a city skyline at sunset.
    3. Update all landing page images and contents to reflect an optical clinic’s branding and services.

🖼️ Generate Images

For the best results, include the following details:
  1. Image Type: photo, illustration
  2. Ratio: 1:1, 3:2, 2:3, 16:9, 9:16, 3:4, 4:3
  3. Style: flat, outline, minimal, cartoon, 3D, realistic, etc.
  4. Description: describe the subject or image to generate
Examples:
  1. Generate a 16:9 photo of a cozy reading corner with books and plants.
  2. Create a cute robot mascot image in a 1:1 ratio, flat style, with a friendly mood. The robot should have a rounded body, big expressive eyes, and a soft smile.

🗂️ Generate Diagrams

Generate from text prompt

For the best results, include the following details:
  1. Diagram Type: Visily supports sitemaps, organization charts, flowcharts, state diagrams, use case diagrams, class diagrams, and entity-relationship diagrams (ERDs).
  2. Description: provide either high-level information (and let AI figures the rest) or detailed specifications of the diagram, e.g. the entities and attributes to include in an ERD.
  3. Direction: vertical or horizontal.
Examples:
  1. Create a vertical flowchart of the full checkout process for an online fashion store, including all typical steps like login, address entry, shipping selection, payment, and confirmation.
  2. Generate a use case diagram for an e-commerce app with order tracking, payment, and customer service.

Modify a diagram

After Visily AI generates a diagram, you can ask it to make follow-up modifications. You can also select a diagram on the canvas to modify it with AI. Below are modification types Visily AI supports and examples for each type.
  1. Update contents: Translate all text in this diagram to Spanish.
  2. Change diagram type: Convert this flowchart into a state diagram.
  3. Change layout direction: Change the flowchart layout to be horizontal.
  4. Add or remove nodes: Add a “Return Item” step after “Payment Confirmed” in this flowchart.

📃 Takeaways

Get the best results with these simple tips:
  1. Clarify the output type (screen, component, image, diagram) & any properties needed.
  2. Be specific about what you want to generate.
  3. Use design terms: e.g., menu bar, sign-up button.
  4. Be specific to exact elements you want to modify (e.g., blue button on login page).
  5. Avoid combining multiple requests in one prompt.
  6. Tweak and iterate your prompt to refine results.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • What you can do with the Visily AI Chat Assistant

      This article gives an overview of how you can use the Visily AI Chat Assistant to support your design process. What you can do with the Visily AI Chat Assistant The Visily AI Chat Assistant helps you generate and refine designs throughout your design ...

    • How to use the Visily AI Chat Assistant to generate your design

      This article explains how to use the Visily AI Chat Assistant to generate your design. You can use it to create new designs from a prompt, with optional visual guidance and AI settings to better match your design goals. Access the Visily AI Chat ...

    • How to use the Visily AI Chat Assistant to modify your design

      This article explains how to use the Visily AI Chat Assistant to modify your design. You can ask the AI to refine either a previous generated output or an existing design on your canvas. Modify an existing design on the canvas To modify an existing ...

    • How to guide AI generation with presets

      This article explains how to guide AI generation with presets in Visily. Presets help you steer the AI toward the type of output, style, and visual direction you want. Use presets to guide AI generation You can use the following presets and guidance ...

    • How to use AI Plan mode

      This article explains how to use AI Plan Mode in Visily. Plan Mode helps you create a structured design plan before generating the actual design. Access and use AI Plan mode In the Visily AI chat box, choose Plan Mode. Enter a prompt describing what ...