Iterate on the UI with Smart Inspect
Aim: Use Smart Inspect in the live app editor to precisely target specific UI components for modification, annotate what needs to change, and propagate consistent styling across the interface.
Prerequisites
-
There are no prerequisites in the sense of iterating on styling effects, though it is recommended that you have sufficiently planned and scaffolded your app, as well as connected relevant data sources so that branding and styling annotations can be carried out on a comprehensive enough foundation for the app’s functionality and structure.
Procedure
-
In the live app editor, select Smart Inspect.
Result: The live preview of the application enters inspect mode.
-
Hover over any component in your application to see its component type and ID displayed as an overlay. This tells you exactly what you are looking at without having to search through the application component tree.
-
Select a component as prompt context.
By selecting any component in inspect mode, the selected component becomes the active context for your next prompt within the Chat tab. You can enter the prompt itself directly in the context of the component in the live app editor. This means that when you enter the prompt
Change the label color to match the brand primary colour #2E5FA3", Naia Build knows exactly which label you mean. You do not need to describe it in the abstract. -
Use drag select to take a selection-based image of an area of your app (for example, across multiple components).
Send the image to the Chat tab with Add to Chat to provide further chat description information (for example, by adding a reference file alongside the attached image). Alternatively, with Send to Chat, enter a prompt description of the change you desire for the area of the application you have selected during drag select.
Result: Naia Build understands the visual context alongside your text instruction to make precisely targeted changes.
-
After selecting a component, right-click to enable the Quick Actions menu. Select Copy Style to copy the style of the selected component. Select another component where you want to apply the copied style, and paste the style by right-clicking the other component.
Result
-
You have applied targeted UI changes by selecting components directly in the live app editor and prompting via chat.
-
You have propagated consistent styling across the interface using the right-click copy and paste style actions, without the need to manually edit individual component properties.