The AI Assistant panel provides intelligent help for your design workflow. Ask questions, generate design suggestions, get code, and automate repetitive tasks using natural language.
Opening the AI Assistant
- Press
Cmd/Ctrl + Shift + Alt + Ato toggle the panel - Or access from the right sidebar panels menu
- Panel appears in the secondary sidebar
What You Can Do
Ask Questions
- "How do I create a gradient?"
- "What's the shortcut for grouping?"
- "Explain Auto Layout"
- Get instant answers about Azyrom features
Generate Designs
- "Create a login form"
- "Design a pricing card"
- "Make a navigation bar"
- AI generates editable design elements
Edit Selections
- "Make this button blue"
- "Add a shadow to selected"
- "Align these to center"
- Natural language editing commands
Generate Code
- "Show me the CSS for this"
- "Generate React component"
- "Export as Flutter widget"
- Get code from your designs
11 AI Tools
The AI Assistant includes 11 specialized tools accessible from the Tools tab. Each tool is optimized for specific design tasks:
Layout Assistant
- Purpose: AI-powered layout optimization and spacing suggestions
- Use for: Improving spacing consistency, detecting alignment issues, grid optimization
- Example: "Analyze my layout and suggest spacing improvements"
Color Palette Generator
- Purpose: Generate harmonious color schemes and palettes
- Use for: Creating brand colors, finding complementary colors, color accessibility
- Example: "Generate a modern SaaS color palette based on blue"
Component Suggestions
- Purpose: Smart component recommendations based on context
- Use for: Finding reusable components, identifying design patterns
- Example: "What components should I create for this dashboard?"
Design System Analysis
- Purpose: Consistency checking and design system governance
- Use for: Finding inconsistencies, enforcing design standards
- Example: "Check my design for typography inconsistencies"
Smart Alignment
- Purpose: Automatic grid detection and alignment optimization
- Use for: Detecting implicit grids, suggesting alignment improvements
- Example: "Detect the grid structure in my design"
Content Optimization
- Purpose: UX copywriting improvements and content strategy
- Use for: Improving button labels, error messages, microcopy
- Example: "Make my error messages more user-friendly"
Accessibility Checker
- Purpose: WCAG compliance analysis and accessibility improvements
- Use for: Color contrast checking, keyboard navigation, screen reader support
- Example: "Check my design for WCAG AA compliance"
Design Critique
- Purpose: Professional design feedback and expert analysis
- Use for: Getting objective feedback, identifying improvements
- Example: "Give me a professional critique of this landing page"
Image Generator
- Purpose: AI-powered image creation with DALL-E
- Use for: Creating placeholder images, generating illustrations
- Example: "Generate a hero image of a modern office workspace"
Text Generator
- Purpose: AI content generation for UI elements
- Use for: Creating realistic placeholder text, generating copy variations
- Example: "Generate product descriptions for an e-commerce site"
Auto-complete Design
- Purpose: Finish incomplete designs automatically
- Use for: Completing partial layouts, filling in missing sections
- Example: "Complete this navigation bar with remaining menu items"
Conversation Features
Context Awareness
- AI understands your current selection
- Knows what mode you're in (Design/Draw/Sites)
- References previous messages in conversation
Apply Suggestions
- Click "Apply" on suggestions to use them
- Preview changes before applying
- Undo works on AI-applied changes
Conversation History
- Previous conversations are saved
- Access history from panel menu
- Continue previous conversations
Common Use Cases
Learning
- Ask about features you don't know
- Get step-by-step tutorials
- Understand best practices
Productivity
- Bulk edit multiple elements
- Generate placeholder content
- Create design variations
Code Export
- Get production-ready code
- Multiple framework support
- Copy code snippets directly
Prompt Tips
- Be specific - "Make the button 44px tall with 16px padding"
- Reference selection - "Change the selected text to 16px"
- Ask for options - "Show me 3 color palette options"
- Iterate - "Make it more subtle" or "Try a different approach"
AI Provider Settings
The AI Assistant supports multiple AI providers. Configure your preferred provider for optimal results:
- Anthropic (Claude) - Excellent reasoning and code generation
- OpenAI (GPT) - Fast responses with broad knowledge
- Ollama (Local) - Free, privacy-focused, runs on your device
See AI Settings for detailed configuration instructions.
General Settings
- Model Selection - Choose specific model variant
- Temperature - Creativity level for generation (0.0-1.0)
- Auto-Apply - Automatically apply simple changes
- Context Length - How much conversation history to include
Privacy
- Conversations are processed securely
- Design data sent only with explicit commands
- Clear conversation history anytime
Tips
- Select elements before asking for edits
- Use conversational follow-ups to refine
- Ask for explanations when learning
- The AI can see your current document structure