Working with the AI

Master prompting and iteration to build exactly what you want.

The AI Chat panel is a primary tool for creating and modifying applications in Dazl. This guide shows you how to communicate effectively with Dazl's AI agent to develop applications through iterative collaboration.

Writing effective prompts

The quality of your results depends largely on how clearly you communicate your needs. Here's how to write prompts that get better results:

Be specific and descriptive

• ❌ "Make a form"
• ✅ "Create a contact form with name, email, message fields and a green submit button"

Include layout preferences

• ❌ "Add navigation"
• ✅ "Add horizontal navigation with Home, About, Services, Contact links"

Mention what you don't want it doing yet

• "Create basic pricing cards - I'll adjust the content later myself"

Prompt structure that works

Well-structured requests typically produce better results. Here's a proven pattern you can adapt for different situations:

Complete example:

Create a product showcase section with image, title, price, and add-to-cart button for each product, arranged in a 3-column grid.

Basic pattern:

1. What you want - "Create a hero section"
2. Key requirements - "with headline, subtext, and call-to-action button"
3. Layout and style preference - "centered with background image"

Iterative workflow

Building applications works best when you develop them layer by layer rather than trying to create everything perfectly at once:

Start simple → Add complexity

Build layer by layer instead of trying to perfect everything at once:

1. "Create a basic hero section"
2. "Add a call-to-action button below the headline with the text Shop Now"
3. "Make the call-to-action button navigate to the store page"
4. "Add a subtle animation when the page loads"

Each step builds on the previous result.

Context awareness

The AI pays attention to what you've selected and your recent conversation, making your requests more targeted and effective:

AI knows what you've selected

• Select button → "Make this bigger and blue"
• Select section → "Add a contact form here"
• No selection → "Add a footer to the page"

AI remembers your conversation

• "Make the buttons we just created rounded"
• "Use the same style for the navigation menu"

Always select the element you want to change before making requests.

Automatically enhancing your prompt

To help shape your prompts into a format that works best with Dazl's AI, click the "Enhance Prompt" button to let Dazl automatically re-write and re-format your prompt.

Use attachments

Use attachments to either guide the AI with examples or to provide assets for it to use and include in the project

When results aren't quite right

Sometimes the first result isn't exactly what you need. Here are effective strategies for getting better outcomes:

Ask for alternatives

• "Show me 2 other layout options for this section"
• "Try a different approach for the mobile navigation"

Be more specific

• "The spacing is too tight - add more room between cards"
• "Change the About section to be more friendly and less formal in tone"

Reference examples

• "Make it similar to Netflix's card layout"
• "Use a sidebar like a common admin dashboards"

Refining results effectively

How you approach refinements can make the difference between getting stuck and achieving exactly what you want:

Acknowledge what works first

• "This layout is good, but can you make the header sticky?"
• "Perfect functionality - just add 2 more cards to the design"

One change at a time

• Don't request 5 modifications at once
• Let AI implement each change before the next

Use visual editing for fine-tuning

• Get structure and functionality from AI
• Handle precise styling through direct editing

AI + Visual editing workflow

Dazl's power comes from seamlessly combining both approaches. Here's how to choose the right method for different tasks:

AI-first approach (new functionality)

1. Describe what you need to AI
2. Review generated structure
3. Fine-tune appearance visually
4. Test in Preview mode

Visual-first approach (styling refinements)

1. Select an element directly on Stage or using the Elements panel
2. Make changes using the editing toolbar (top), on stage (drag & drop, text editing) or the Dev Tools
3. Ask AI for specific improvements
4. Iterate between both methods

Working with AI responses

Each AI response provides several options for managing your progress and understanding the generated results:

Each response includes options:

• See code changes - See what code the AI generated as part of this message
• Restore - Return to a specific message version
• Up vote / Down vote - Send feedback on whether the AI result matched your expectations
• Clicking on a file - automatically opens the added or modified file in the code editor

Getting unstuck

When communication with the AI isn't working as expected, these strategies can help you get back on track:

When AI doesn't understand:

• Rephrase more specifically
• Break complex requests into smaller parts
• Provide visual examples or references
• Select the element you're talking about

When you're not sure what's possible:

• "What are some options for improving this design?"
• "Show me 3 different ways to layout this content"
• "What feature should we work on next?"
• "Can you explain why this implementation works better?"
• "What are the best practices for this type of section?"