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:
- UI Screens: Indicate the platform (mobile, web app, or website) and whether you need a single screen or a full app.
- UI Components: Specify the component type, such as tables, charts, headers, or menus.
- Images: Indicate whether you want a photo or an illustration.
- 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:
- Platform: web app, mobile app, website
- Scope: single screen or entire app
- Description: detailed description about the app or screen, including styling information
Examples:
- [App] Create an e-learning web app with lessons, tracking, and live classes. Use soft colors and rounded UI.
- [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.
- [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.
- Reuse design: Convert the image to a design. Keep everything exactly the same, including styles, fonts, content, and layout.
- Reuse layout: Use the referenced layout as the base to generate a sunscreen product page.
- 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.
Add / Remove / Replace element:
- Remove the “About Us” section and add a testimonials section with at least 3 customer quotes below the Features section.
- Replace the lead chart with a monthly sales chart. Ensure it aligns with the existing layout and style.
Change layout:
- Change the layout from a vertical list to a horizontal scroll view for better visual flow.
- Redesign the current screen layout to use a two-column structure, with content on the left and a sidebar on the right.
- Generate the website version of this mobile screen.
Update style & theme:
- Update the accent color to a bright, energetic yellow.
- Change the main headings to a bold, impactful display font.
- Switch the entire UI to a dark mode, using deep grays and white text, ensuring high contrast for accessibility.
Modify contents:
- Change all contents to French.
- Replace the hero image on the landing page with a city skyline at sunset.
- 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:
- Image Type: photo, illustration
- Ratio 1:1, 3:2, 2:3, 16:9, 9:16, 3:4, 4:3
- Style: flat, outline, minimal, cartoon, 3D, realistic, etc.
- Description: describe the subject or image to generate
Examples:
- Generate a 16:9 photo of a cozy reading corner with books and plants.
- 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:
- Diagram Type: Visily supports sitemaps, organization charts, flowcharts, state diagrams, use case diagrams, class diagrams, and entity-relationship diagrams (ERDs).
- 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.
- Direction: vertical or horizontal.
Examples:
- 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.
- 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.
- Update contents: Translate all text in this diagram to Spanish.
- Change diagram type: Convert this flowchart into a state diagram.
- Change layout direction: Change the flowchart layout to be horizontal.
- Add or remove nodes: Add a “Return Item” step after “Payment Confirmed” in this flowchart.
📃 Takeaways
Get the best results with these simple tips:
- Clarify the output type (screen, component, image, diagram) & any properties needed.
- Be specific about what you want to generate.
- Use design terms: e.g., menu bar, sign-up button.
- Be specific to exact elements you want to modify (e.g., blue button on login page).
- Avoid combining multiple requests in one prompt.
- Tweak and iterate your prompt to refine results.
