What is the best prompt to ask the agent for the UI of the iPhone Duo besides Responsive app settings
Pending
Hey Angel! Here's the prompt pattern that's worked best for us and for other builders on iPhone Duo, filled in for your screens:
"Make this app work great on the iPhone Duo, folded and unfolded.
- Folded (466 x 678 pt): keep every screen exactly as it is today.
- Unfolded (951 x 669 pt, landscape): use the whole screen. Invoices, Customers, Inventory and Orders show the list on the left and the selected item's details on the right. Show the Dashboard cards in 3 or 4 columns. Keep forms, settings and pop-ups centered at about 600 pt wide. No black bars, nothing stretched.
- Folding or unfolding mid-task should just keep going: same screen, same selected item, same scroll position, nothing typed lost.
- Choose the layout from the screen width, not the device type.
Test every screen in the web preview at both sizes, including switching sizes mid-task, before you finish."
What made the difference in the builds that worked:
1. Say what goes where when it's unfolded. "List on the left, details on the right" has come out right in one prompt in every build we looked at. "Make it responsive" leaves the agent guessing.
2. Tell it to keep the folded layout as it is. In our own tests of this prompt, the only misses were on the folded screen.
3. If something breaks, send one follow-up that names the screen, folded or unfolded, what's wrong and how it looked before, and end with "keep everything else exactly as it is." Both of our misses were fixed that way in one more prompt.
Hey Angel! Here's the prompt pattern that's worked best for us and for other builders on iPhone Duo, filled in for your screens: "Make this app work great on the iPhone Duo, folded and unfolded. - Folded (466 x 678 pt): keep every screen exactly as it is today. - Unfolded (951 x 669 pt, landscape): use the whole screen. Invoices, Customers, Inventory and Orders show the list on the left and the selected item's details on the right. Show the Dashboard cards in 3 or 4 columns. Keep forms, settings and pop-ups centered at about 600 pt wide. No black bars, nothing stretched. - Folding or unfolding mid-task should just keep going: same screen, same selected item, same scroll position, nothing typed lost. - Choose the layout from the screen width, not the device type. Test every screen in the web preview at both sizes, including switching sizes mid-task, before you finish." What made the difference in the builds that worked: 1. Say what goes where when it's unfolded. "List on the left, details on the right" has come out right in one prompt in every build we looked at. "Make it responsive" leaves the agent guessing. 2. Tell it to keep the folded layout as it is. In our own tests of this prompt, the only misses were on the folded screen. 3. If something breaks, send one follow-up that names the screen, folded or unfolded, what's wrong and how it looked before, and end with "keep everything else exactly as it is." Both of our misses were fixed that way in one more prompt.