# AI vs Manual Edits

## The Core Question

**Non-technical explanation**: When building in Buzzy, you have two tools—like having both a power drill and a screwdriver. The power drill (Buzzy AI v3) is fast and powerful for big structural changes. The screwdriver (visual Design editor) gives you precision control for fine-tuning details. Using the right tool at the right time makes you 10x more productive.

As you build your Buzzy application, you'll constantly face this decision:

* 🤖 Should I prompt Buzzy AI v3 to make this change?
* 🎨 Or should I just use the visual Design editor?

Getting this right dramatically affects productivity and efficiency. **The key difference from traditional code development**: With Buzzy, there's no code to manually edit. Instead, you choose between AI prompts (for structural changes) and visual editing (for refinements).

**Decision impact**:

```mermaid
%%{init: {'theme':'default', 'themeVariables': {'fontSize':'16px'}}}%%
graph TB
    A[Need to Make a Change] --> B{What Type?}
    B -->|Structural/Data| C[Use Buzzy AI v3]
    B -->|Visual/Polish| D[Use Design Editor]
    C --> E[Fast & Complete]
    D --> F[Precise & Quick]
    
    G[Wrong Choice] --> H[Slow & Frustrating]
    
    style E fill:#6c6,stroke:#333,color:#000
    style F fill:#6c6,stroke:#333,color:#000
    style H fill:#f88,stroke:#333,color:#000
```

## When to Use Buzzy AI v3 Prompts

### Ideal for AI Prompts

**1. Creating New Datatables and Relationships**

✅ **Use AI prompts when**:

* Adding new Datatables to your app
* Creating Subtables (1:M relationships)
* Setting up Linked Table Fields (N:M relationships)
* Defining field types and structures

**Example**: "Add a Categories datatable and link it to Products using a Linked Table Field so products can have multiple categories"

**Why**: Buzzy AI v3 understands data relationships and generates the proper structure

***

**2. Generating New Screens**

✅ **Use AI prompts when**:

* Creating new screens from scratch
* Adding standard screen types (list, detail, form)
* Building complete user workflows
* Setting up navigation between screens

**Example**: "Create a Project Detail screen that shows project info, has an edit button, and displays the Tasks subtable below"

**Why**: AI generates complete screen structures with proper components and navigation

***

**3. Adding Features with Data Changes**

✅ **Use AI prompts when**:

* Features require new Datatables or fields
* Need to modify data relationships
* Adding functionality that touches multiple screens
* Implementing features with business logic

**Example**: "Add user assignments to tasks - create an Assignments subtable with user and role fields, show assignments in task detail, and add an 'Assign User' button"

**Why**: AI can handle the data model changes and screen updates together

***

**4. Large-Scale Refactoring**

✅ **Use AI prompts when**:

* Renaming Datatables throughout the app
* Changing data relationships (Subtable to Linked Field, etc.)
* Restructuring screen flows
* Major navigation changes

**Example**: "Rename the 'Items' datatable to 'Products' throughout the entire app, including all screens, relationships, and references"

**Why**: AI tracks changes across the entire App Definition consistently

***

**5. Implementing Standard Patterns**

✅ **Use AI prompts when**:

* Adding search and filter functionality
* Implementing common workflows
* Setting up authentication screens
* Creating typical CRUD operations

**Example**: "Add search functionality to the Products list screen that searches across product name and description"

**Why**: Buzzy AI v3 knows how to implement these patterns correctly

## When to Use Buzzy's Visual Design Editor

### Ideal for Visual Editor

**1. Small UI Adjustments**

✅ **Use Design editor when**:

* Changing button labels or colors
* Adjusting field placeholders
* Reordering components on a screen
* Changing text content

**Example**: Changing "Submit" button to "Save Changes" - just click the button in Design tab and update the label

**Why**: Much faster than prompting AI for tiny changes

***

**2. Fine-Tuning Display Rules**

✅ **Use Design editor when**:

* Adjusting when components are visible
* Tweaking conditional logic for display
* Testing different display rule conditions
* Refining user experience based on states

**Example**: Adjusting display rule from `status = "active"` to `status = "active" OR status = "pending"`

**Why**: Quick to test and iterate in visual editor

***

**3. Layout and Styling Refinements**

✅ **Use Design editor when**:

* Adjusting component spacing
* Changing layout arrangements
* Updating colors and themes
* Fine-tuning mobile vs desktop views

**Example**: Moving a button from top of screen to bottom, or adjusting card spacing

**Why**: Immediate visual feedback, no need to describe desired layout to AI

***

**4. Action Configuration**

✅ **Use Design editor when**:

* Configuring submit actions
* Setting up navigation actions
* Adjusting what happens when buttons are clicked
* Fine-tuning form submissions

**Example**: Changing a button action to navigate to a different screen after submit

**Why**: Visual action editor is intuitive and immediate

***

**5. Iterative UX Improvements**

✅ **Use Design editor when**:

* Refining based on user feedback
* Testing different arrangements
* Polishing the user experience
* Making multiple small adjustments

**Example**: Rearranging form fields, adjusting labels, changing button positions based on user testing

**Why**: Rapid iteration without waiting for AI

## The Hybrid Approach

Often the best strategy combines both AI prompts and Visual editor:

### Hybrid Pattern: AI First, Visual Polish

**1. Generate with AI prompts**: Get 80% of the way there quickly with Buzzy AI v3

**2. Review**: Test in preview mode and identify what needs refinement

**3. Visual editor refinements**: Polish the remaining 20% using Design tab

**Example**:

```
Step 1 (AI prompt): "Create a user registration form with email, password, 
                     confirm password, and terms acceptance. Include validation 
                     that email is properly formatted and passwords match."

Step 2 (Review in preview): Form works but could be improved:
- Button text should say "Create Account" not "Submit"
- Form fields could use better placeholder text
- Error messages appear but styling could be friendlier

Step 3 (Visual editor): In Design tab:
- Click button, change label to "Create Account"
- Update placeholders in each field
- Adjust error message styling
```

### Hybrid Pattern: Visual Foundation, AI Expansion

**1. Refine core with visual editor**: Get critical UX details right

**2. Use AI to expand**: Add standard features quickly with prompts

**3. Review integration**: Test in preview to ensure new parts work well together

**Example**:

```
Step 1 (Visual editor): Perfect the login screen layout and error states
Step 2 (AI prompt): "Add password reset flow with email verification"
Step 3 (Preview test): Verify reset flow navigation works smoothly with login screen
```

## Decision Framework

Use this flowchart thinking for Buzzy:

```
Need to make a change?
  |
  ├─ Is it a simple UI tweak (button label, color, spacing)?
  │   └─ YES → Use Design editor (faster than prompting)
  │
  ├─ Does it involve new Datatables or relationships?
  │   └─ YES → Use AI prompt
  │
  ├─ Is it a new screen or component?
  │   └─ YES → Use AI prompt
  │
  ├─ Is it repetitive across multiple screens?
  │   └─ YES → Use AI prompt for consistency
  │
  ├─ Does it require understanding existing app structure?
  │   └─ YES → Review Data and Design tabs first, then choose
  │
  ├─ Is it adjusting display rules or actions?
  │   └─ YES → Use Design editor (visual, immediate feedback)
  │
  ├─ Is it a standard pattern (search, filter, CRUD)?
  │   └─ YES → Use AI prompt + review in Design tab
  │
  └─ When in doubt → Try AI prompt first, refine with Design editor
```

## Common Mistakes

### Mistake 1: Using AI for Everything

**Problem**: Prompting Buzzy AI v3 for every tiny UI change

**Issues**:

* Slower than using Design editor
* AI might change unintended parts of your app
* You learn less about Buzzy's visual editor capabilities
* Wastes time describing simple changes

**Fix**: Use Design editor for simple UI tweaks (button labels, colors, spacing)

### Mistake 2: Avoiding AI Too Much

**Problem**: Trying to build everything with visual editor only

**Issues**:

* Unnecessarily slow for complex features
* Missing the speed benefits of AI generation
* Manually recreating patterns AI knows well
* Error-prone when building repetitive structures

**Fix**: Use AI prompts for new Datatables, screens, and standard patterns

### Mistake 3: Not Reviewing AI-Generated Structure

**Problem**: Accepting AI-generated App Definition without checking

**Issues**:

* Wrong data relationships (using Linked Field when should use Subtable)
* Missing security (no Viewers fields or Team access)
* Incorrect display rules
* Navigation doesn't match user flow

**Fix**: Always review Brief, Blueprint, Data, and Design tabs after AI generates

### Mistake 4: Wrong Prompt Granularity

**Problem**: Asking AI to change too much or too little at once

**Issues**:

* Too much: "Rebuild my entire app with these 10 new features" → AI gets confused
* Too little: "Change the Submit button to Save" → Faster to use Design editor

**Fix**: Find the right granularity:

* Screen level: ✅ Good for AI ("Create a project detail screen...")
* Button label: ❌ Too small, use Design editor
* Entire app rebuild: ❌ Too large, break into features

## Buzzy AI Prompt Quality Matters

**When using Buzzy AI v3, prompt quality makes a huge difference**:

### Bad Buzzy Prompts

❌ "Fix the form" ❌ "Make it responsive" ❌ "Add validation" ❌ "Update the styling"

**Problems**:

* Vague, unclear intent
* AI must guess what you want
* Often generates something different than you envisioned
* Requires multiple iterations

### Good Buzzy Prompts

✅ "Add email format validation to the User Registration form that displays 'Please enter a valid email' error message below the email field when the format is invalid"

✅ "Create a Tasks subtable field in the Projects datatable so each project can have multiple tasks with title, description, and due\_date fields"

✅ "Add a display rule to the Submit Report button so it's only visible when the report status = 'Draft' AND the current user is the report creator"

✅ "Create a Reports List screen that shows only reports where the current user is in the Viewers field, with search functionality across report name and description"

**Why better**:

* Specific about Buzzy concepts (Datatables, Subtables, display rules, Viewers)
* Clear expected behavior
* Uses Buzzy-specific terminology
* Easier for Buzzy AI to implement correctly
* Less iteration needed

## Measuring Effectiveness

Track whether you're using Buzzy AI and Design editor effectively:

**Good signals**:

* AI-generated structure works first try 80%+ of the time
* You understand the Brief, Data, and Design that AI creates
* Visual editor refinements are quick and precise
* Mix of AI prompts and Design editor feels natural
* Productivity is high
* Apps work well in preview mode

**Bad signals**:

* Constantly re-prompting AI to fix mistakes
* Don't understand the Datatables and relationships AI created
* Spending more time describing changes than Design editor would take
* Always choosing only AI or only Design editor (not using both strategically)
* App breaks frequently when making changes

## Quick Reference Guide

| Task                          | AI Prompt | Design Editor | Why                               |
| ----------------------------- | --------- | ------------- | --------------------------------- |
| Fix typo in button text       |           | ✅             | Faster to click and edit          |
| Create new Datatable          | ✅         |               | AI understands data structures    |
| Change button color           |           | ✅             | Visual feedback immediate         |
| Add Subtable relationship     | ✅         |               | AI handles relationship setup     |
| Adjust display rule condition |           | ✅             | Visual editor shows logic clearly |
| Create search functionality   | ✅         |               | Standard pattern AI knows         |
| Reorder screen components     |           | ✅             | Drag-and-drop in Design tab       |
| Generate new screen           | ✅         |               | AI creates complete structure     |
| Set up Organizations security | ✅         |               | Complex pattern, AI helps         |
| Change field placeholder      |           | ✅             | One click in Design tab           |
| Create Linked Table Field     | ✅         |               | AI handles N:M relationships      |
| Adjust spacing/margins        |           | ✅             | Visual, immediate feedback        |

## Next Steps

* **Need to undo changes**: [Rollback Strategies](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/rollback-strategies.md)
* **Making changes effectively**: [Making Changes](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/making-changes.md)
* **Ready to test your app**: [Testing Approaches](/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/testing-approaches.md)

{% hint style="success" %}
**Key Takeaway**: The best Buzzy builders know when to use AI prompts and when to use the Design editor. It's not about using AI more—it's about using AI *strategically* and combining it with visual editing for maximum efficiency.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/ai-vs-manual-edits.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.