Show intent on the live screen
Adjust text, spacing, colors, and flex/grid alignment, then compare Before and After.
Tip
Help me follow the Show intent on the live screen guide. Adjust text, spacing, colors, and flex/grid alignment, then compare Before and After. Review the current project and turn this guidance into concrete next steps.
Workflow
- Select an element in Report mode.
- Right-click and choose Edit.
- Adjust values and apply.
- Compare with Before/After and Undo/Redo.
- Attach the style-change summary to the draft.
| Area | Controls |
|---|---|
| Text | textContent, fontSize, lineHeight |
| Box | padding, margin |
| Color | text, background, border |
| flex | alignment, direction, gap |
| grid | 1–12 columns, gap |
Important limits
Changes are inline element.style values for this tab session only. Refreshing restores the page, and the codebase is never edited automatically.
- Text controls are hidden for non-text targets.
- flex/grid controls appear only for matching display values.
- Complex grid templates may be simplified.
- Reset and delete can be recovered within the session.
