# 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/diagram content="%%{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](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/rollback-strategies)
* **Making changes effectively**: [Making Changes](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/making-changes)
* **Ready to test your app**: [Testing Approaches](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/project-workflow/testing-approaches)

{% 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 %}