# Iterative building

Trying to describe a complete product in one prompt rarely produces the best result. Build works better when you treat it like a development process start with a working core, then add layers.

***

### The phased approach

Break the product into phases based on what needs to exist before the next thing can be built. Each phase produces something testable.

```
Phase 1: User auth, a basic task list, and a project structure.
Phase 2: Due dates, priority levels, and assignees on tasks.
Phase 3: A Kanban board view with drag-and-drop.
Phase 4: Email notifications for task assignments and due date reminders.
```

This pattern works because each phase has a clear scope. Build can make reliable architectural decisions within that scope, and you can verify the result before committing to the next step.

***

### Design before code

If UI quality matters, use Design mode to establish the visual direction before any code is written. Once the design looks right, export it to the code pipeline. This produces significantly better UI output than describing the design and code together in a single prompt.

A practical sequence:

```
1. Use Design mode to generate and refine the UI.
2. Export the design to the code pipeline.
3. Add backend logic, auth, and data layer via follow-up prompts.
4. Connect the frontend to real data.
```

***

### Testing between phases

Use the live preview to verify each phase before moving to the next. It's much easier to fix an issue in isolation before the next layer of complexity is added than to debug it later when more code is involved.

Describe bugs directly from the preview rather than trying to locate them in the file explorer. Build understands descriptions like "clicking the delete button doesn't remove the item from the list" and will find the relevant code.

***

### Figma workflow

If you're working from Figma designs, the recommended sequence is:

```
1. Structure the Figma file with Auto Layout and named layers.
2. Import the file into Build.
3. Review the generated components in the preview.
4. Add interactivity, routing, and data via follow-up prompts.
```

See **Figma integration** for more on preparing your Figma file for the best results.


---

# 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.codemate.ai/build/iterative-building.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.