This guide provides a quick start to writing effective prompts for generating designs, images, and diagrams with Visily AI Assistant.
The golden rule: Clearly state your output type!
To get the best results, clearly state what you want Visily to generate. This helps Visily’s AI understand exactly what you want to create.
- UI screens: Generate a single screen or a complete app (for mobile, web, or websites).
- UI components: Create individual design parts like tables, charts, and navigation bars.
- Images: Produce product photos, illustrations, or other visual assets for your design.
- Diagrams: Create flowcharts, use case diagrams (UCD), state diagrams, sitemaps, organization charts (Org Charts), entity-relationship diagrams (ERD), and class diagrams.
Generating Designs (UI screens & components)
Generate UI Screens
Formula: Design [Platform] + [App/Screen/Section details] + [Style]
To create UI screens, describe your desired design and include these details for best results
- Platform: Specify Mobile, Webapp, or Website
- App/Screen/Section details: Briefly list them e.g., login, dashboard, profile.
- Style: Describe the look and feel of the design, using adjectives e.g., modern, clean, playful, elegant, minimal, corporate, futuristic, cozy, luxurious.
Examples:
- Design a photography portfolio website with a striking homepage, categorized galleries, client testimonials, and a booking form. Use an elegant, image-focused layout.
- Design an e-learning web app that includes structured lessons, progress tracking, and live class features. Use a soft color palette and rounded UI elements to create a friendly and approachable interface.
Generate UI Components
Formula: Generate [Component type] + [Component details] + [Style]
Your prompt should describe the component type clearly.
- Component type: e.g., tables, chart, dialog, side bar
- Component details: displaying name, description, price, and category tags.
- Style: e.g., modern, clean, playful, elegant, minimal, corporate, futuristic, cozy, luxurious.
Examples:
- Create a modern, clean product table component displaying name, description, price, and category tags.
- Design a playful, rounded pop-up dialog for a mobile game’s level completion message.
Generate Designs with references (uploaded images or existing design)
- Convert images to an editable design:
- Use this prompt:
Convert the images into an editable design. Keep everything exactly the same, including styles, fonts, content, and layout.
- Use this prompt:
- Use the layout of reference images to update content:
- Mention in the prompt to keep the layout.
- Example:
Use this layout as a base for a sunscreen product page for my website. Update the imagery and text to reflect summer vibes, UV protection, and fresh product packaging.
- Use the style or theme of reference images to generate a new screen:
- Mention in the prompt to use the style and theme.
- Example:
Design a product detail screen for my website with image, name, price, description, and key features. Match fonts, spacing, and layout to the reference design.
Refining & customizing your design
Tip:
- Provide context: Select the AI-generated output in the AI chat or element on the canvas. This helps Visily understand the design and preserve elements you don’t want to change.
- Be specific: Clearly state what to change, referencing exact elements (e.g., “blue button on login page,” “hero image”).
- Give clear instructions: Use action-oriented language (e.g., “add,” “remove,” “replace,” “change,” “update”).
Modifications you can ask Visily AI to do
- Add / Remove / Replace element:
- On the homepage, remove the “About Us” section and add a testimonials section with at least 3 customer quotes below the Features section.
- On the dashboard (web app), replace the lead chart with a monthly sales chart. Ensure it aligns with the existing layout and style.
- Change layout:
- Redesign the current screen layout to use a two-column structure, with content on the left and a sidebar on the right.
- Change the layout from a vertical list to a horizontal scroll view for better visual flow.
- Update style & theme (Colors, Fonts, Borders, Light/Dark mode):
- Update colors: Update the accent color to a bright, energetic yellow.
- Update fonts: Change the main headings to a bold, impactful display font.
- Change border radius: Make all buttons have fully rounded corners.
- Switch Light/Dark mode: Switch the entire UI to a dark mode theme, using deep grays and white text, ensuring high contrast for accessibility.
- Modify content (text & images):
- Be clear about which image or content you want to change. You can target all relevant or a specific one.
- Target a specific: Replace the hero image on the landing page with a city skyline at sunset.
- Change existing images and content to a different subject: Update all landing page images and content to reflect an optical clinic’s branding and services.
- Change app language: Change all contents to Vietnamese.
Generating Images
Formula: Create [Ratio] + [Style] + [Subject & details]
To create an image, describe the following in your prompt for better results.
- Ratio: 1:1, 3:2, 2:3, 16:9, 9:16, 3:4, 4:3
- Style: e.g. flat, outline, minimal, cartoon, 3D, realistic, etc.
- Subject & details: e.g. cute robot mascot, a cozy reading corner, a castle under a starry sky
Examples:
- 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 a 16:9 photo of a cozy reading corner with books and plants.
Generating Diagrams
Formula: Create [Diagram Type] + [Subject] + [Elements] + [Direction]
To create a diagram, describe the following in your prompt for better results.
- Diagram Type:
- Visily supports flowcharts, use case diagrams (UCD), state diagrams, sitemaps, organization charts (Org Charts), entity-relationship diagrams (ERD), and class diagrams.
- Avoid mixing multiple diagram types in a single prompt.
- Subject: The topic or domain, e.g., e-commerce checkout,company structure.
- Elements: Clear and structured steps, roles, or entities (use arrow for hierarchy/flow).
- 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 existing diagrams
You can customize any existing diagram, whether generated by AI or manually created. Simply select it and describe what you want to change.
Modifications you can ask Visily AI to do:
- Change layout direction: Change this flowchart to a horizontal layout.
- Add or remove nodes: Add a “Return Item” step after “Payment Confirmed” in this flowchart.
- Update content: Translate all text in this diagram to Spanish.
- Convert to a different diagram type: Convert this flowchart into a state diagram.
Takeaways
Get the best results with these simple tips:
- Mention 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.
