Set up Design Instructions

1. Open the Visily AI chat box from your workspace (Start with AI) or from inside a board (Visily AI).
2. Click the Instructions button, then choose Add new. This opens the Design Instructions setup.
   
   
3. Configure the available fields in the setup dialog to create your instruction set. See the Design Instruction sections below for guidance on each section.
   
   
4. Click Save to save your instruction set. Once saved, it will be automatically applied to your AI design settings.
   
   
5. Start generating in Plan Mode or Design Mode. The AI will use the active Design Instructions to guide future generations on that board.

Design Instruction sections

Default style

1. Platform: Choose Mobile, Web App, Website, or Auto. Select Auto to let the AI determine the most suitable platform based on your prompt.
2. Theme:
   
1. Auto: Lets the AI choose the most appropriate style. This is useful when exploring new styles or when your prompt already describes a style.
2. Board theme: Uses the board’s existing theme, making it easy to generate designs that match your brand.
3. Color mode:
1. Choose Light or Dark if you already know the intended color mode and want to keep it consistent across generations.
2. Choose Auto to let the AI decide based on your prompt.
   

Brand assets

1. Upload your logos so the AI can use them in your generated designs.
2. We recommend logos with a transparent background so they look great on any background color.
3. You can upload up to 5 logos (PNG, JPG, WebP, SVG format, max 5MB each).
4. If you upload multiple logos, please tell the AI how to use them correctly.
   Example: “This logo has white text for dark mode,” or “This is the icon only, without the company name.”

Project context

1. App Basics: What it is
   
1. Product name & platform: The name of the product and the platform you are building.
2. Product overview: The product’s purpose and its main features.
3. Brand identity: The app’s core value (e.g., trust, speed) and its overall personality (e.g., fun, serious).
2. Design & Experience: The look and feel
1. Logo usage: A description of your logo and key rules for how to use it.
2. Color system: All main colors, including their exact codes (HEX/RGB), and what they are used for.
3. Typography & Text usage: Describe the font name or font’s style (e.g., modern, academic) and how text sizes compare.
4. Imagery and Illustration: The required style for photos, images, and any drawn illustrations.
5. UI components & Visual style: Rules for buttons, icons, and interface elements (e.g., rounded or sharp corners).
6. Layout & Spacing: Which screen element is most important, and how content should be laid out.
7. Accessibility & Inclusivity (WCAG Contrast): Mandatory rules to ensure the app is readable and usable by everyone.
8. Brand consistency — Do’s and Don’ts: Rules on how the brand must be used, and what to avoid.
   

1. App Basics

YouTube is the global video sharing platform, available across Web and mobile devices

Users engage with YouTube for:

– Video discovery and playback.

– Content upload and channel management.

– Interaction via comments and subscriptions.

Brand Identity: The core value is Empowerment, Connection, and Discovery. The personality is Energetic, Immediate, and Essential. All design adheres to the principles of Content Dominance, Low Friction, and Scalability.

2. Design & Experience: The Look and Feel

Logo Usage: The YouTube Logo is the main asset.

– DO use the official logo file and maintain the required clear space.

– DON’T modify, stretch, or alter the logo’s colors or proportions.

Color System: The palette is minimal, high-contrast, and action-focused.

– YouTube Red: #FF0000 — Primary accent for the Play icon and Subscribe button.

– Almost Black: #212121 — Primary base for text (Light Mode) and backgrounds (Dark Mode).

– White: #FFFFFF — Secondary base for backgrounds (Light Mode) and text (Dark Mode).

– Medium Gray: #AAAAAA — Used for secondary text and metadata.

– Highlight Gray: #F0F0F0 — Used for subtle background differentiation.

Typography & Text Usage:

– Font Family: Roboto (Sans-serif) is used exclusively across all platforms.

– Hierarchy: Titles use Bold weight; body text uses Regular.

– Tone: Language is direct, energetic, and supportive; secondary information uses a smaller size and lighter color.

Imagery and Illustration:

– Thumbnails (Imagery): Must be high-resolution, expressive, and high-contrast to maximize clicks.

– Icons (Illustration): Geometric, clean, and minimalist (Material style). The Play icon is the core functional symbol.

UI Components & Visual Style:

– Clean, functional design following Material principles.

– Cards & Shapes: Use subtle rounded corners (4-8px radius).

Layout & Spacing: Adaptive design using a responsive grid.

– Priority: The Video Player or Thumbnail Card is always the focal point of the screen.

– Spacing: Apply an 8dp grid for all margins and padding (Grid Consistency).

Accessibility & Inclusivity (WCAG Contrast):

– All text must meet WCAG 2.1 AA standards with a minimum contrast ratio of 4.5:1 against the background color.

Brand Consistency — Do’s and Don’ts: Rules for third-party use and naming.

– DO link back to YouTube content when referencing the brand externally.

– DON’T use any variant of “YouTube” (e.g., “YT”) in the name of a third-party product.

TIPS

1. To keep the style of the generated design consistent, make the “Design & Experience” section very detailed. You can even paste in your design system here.
2. Use clear lists in your instructions (like using a dash – for bullet points).
3. Update these instructions as your project changes to make sure they’re always accurate.
4. Tweak and iterate your context to refine results. Even a few lines can make a meaningful difference.
   

To update an existing instruction set, open the Instructions menu, click the Edit icon next to the instruction you want to change, make your edits, and save the changes.

Notes

1. Design Instructions help keep your project goals, constraints, and design preferences in one place.
2. If there is any conflict between your prompt and the active Design Instructions, the prompt for that specific generation will take priority.
3. You can create multiple instruction sets, but only one can be active at a time. 
4. Design Instructions are shared with everyone on the board, which helps your team stay consistent across all designs.