You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ai_builder/overview/best_practices.md
+13-16Lines changed: 13 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,37 +18,35 @@ Before jumping into the AI Builder, take time to plan your approach. Good prepar
18
18
19
19
### Auto-Generate Prompts from App Specs
20
20
21
-
To save time and get higher-quality prompts, you can feed your full app spec into **Chat Mode** and ask it to break the spec into structured, build-ready prompts.
21
+
To save time and get higher-quality prompts, you can feed your full app spec into the AI Builder and ask it to break the spec into structured, build-ready prompts.
22
22
23
-
Chat Mode can translate your vision into:
23
+
The AI Builder can translate your vision into:
24
24
25
25
- Layout instructions
26
26
- UI component definitions
27
27
- Data model requirements
28
28
- Styling preferences
29
29
- Follow-up test plans
30
30
31
-
Once generated, copy each prompt into the AI Builder to execute them in sequence.
32
-
33
31
**Example workflow:**
34
32
35
-
1.Switch to Chat Mode and paste your full app specification
36
-
2. Ask **"Break this into a series of buildable prompts I can feed into the Agent Mode."**
37
-
3.Copy each generated prompt into Agent Mode one by one
33
+
1.Paste your full app specification into the AI Builder
34
+
2. Ask **"Break this into a series of buildable prompts."**
35
+
3.Execute each generated prompt in sequence
38
36
4. Build iteratively using the structured prompts
39
37
40
38
### Working with Text Specifications
41
39
42
40
If you have a structured app specification, don't paste the entire document into the builder at once. Break it down into logical sections and feed them in sequence.
43
41
44
-
**Pro tip:**Use **Chat Mode** to help prepare prompts:
42
+
**Pro tip:**Let the AI Builder help prepare prompts:
45
43
46
44
Paste your full app spec and ask:
47
45
48
-
-**"Break this into buildable prompts I can feed into the builder."**
46
+
-**"Break this into buildable prompts."**
49
47
-**"Write one prompt per feature/page to build this app."**
50
48
51
-
This hybrid approach — planning in **Chat Mode**, then building in **Agent Mode** — lets you move faster and build smarter.
49
+
This approach — planning first, then building iteratively — lets you move faster and build smarter.
52
50
53
51
### Writing Clear, Task-Oriented Prompts
54
52
@@ -86,12 +84,11 @@ You can drop in screenshots of websites, dashboards, apps, or even hand-drawn wi
86
84
- Include any elements you want: forms, tables, nav, charts
87
85
- You can annotate them with arrows, notes, or labels
88
86
89
-
**Get UI/UX feedback using Chat Mode:**
87
+
**Get UI/UX feedback:**
90
88
91
89
Upload a screenshot and ask: **"What are 5 things I could do to improve the UI/UX of this?"**
92
90
93
-
94
-
Follow up with: **Implement items 1, 2, and 4 in the builder.**
91
+
Follow up with: **Implement items 1, 2, and 4.**
95
92
96
93
Or request specific improvements: **Make this more minimal and mobile-first.**
97
94
@@ -136,18 +133,18 @@ To improve your design, ask the builder for more polished layouts, better struct
136
133
137
134
**Suggested workflow:**
138
135
139
-
1.In Chat Mode, upload an image or describe the layout.
136
+
1.Upload an image or describe the layout.
140
137
2. Ask: **"Tell me 5 things that would improve the UI/UX of this page."**
141
138
3. Review the suggestions and decide which ones you want to apply.
142
-
4.Switch to Agent Mode and implement: **"Improve visual hierarchy by increasing heading sizes and adding more spacing between sections."**
139
+
4.Implement: **"Improve visual hierarchy by increasing heading sizes and adding more spacing between sections."**
143
140
144
141
### Using Knowledge to Guide the Build
145
142
146
143
The **Knowledge** panel lets you provide long-form references that influence how the agent builds your app. Add design systems, style guides, brand guidelines, or architecture rules.
147
144
148
145
Once added, the builder will try to honor these rules throughout the session, ensuring consistency without repeating instructions.
149
146
150
-
Try combining Knowledge with Chat Mode:
147
+
Try combining Knowledge with your prompts:
151
148
152
149
-**Use the style guide in Knowledge to improve this page.**
0 commit comments