Preview UI Before Building - Fluent AI Skills
How-to Guide
Author:
Fluent Commerce
Changed on:
31 Mar 2026
Key Points
[Warning: empty required content area]Prerequisites
Steps
Prompt, What Happens, Artifacts
`Preview what the appeasement card looks like on the order detail page``/fluent-mystique-preview` operates in three modes:| Mode | What it does | When to use |
| ADD | Injects a new component into the live app via JavaScript | You're building a new section/card |
| MODIFY | Overlays changes on an existing component | You're updating an existing page element |
| REMOVE | Hides an existing component temporarily | You're removing a section |
- AI builds a preview spec — component type, data sources, layout, and injection point
- Reads live app DOM —
`take_snapshot`maps the current page structure - Injects preview via JavaScript — no manifest changes, no deploy required
- Takes before/after screenshots — annotated with green (ADD), amber (MODIFY), red (REMOVE) glow
- Iterative refinement loop — you give feedback ("move it above the status bar", "change the label"), AI adjusts and re-injects
- Approval or skip —
`preview: "APPROVED"`in status.json gates the manifest build
| Artifact | Path |
| Before screenshot | `accounts/<PROFILE>/reports/preview/before-<timestamp>.png` |
| After screenshot | `accounts/<PROFILE>/reports/preview/after-<timestamp>.png` |
| Preview spec | `accounts/<PROFILE>/reports/preview/preview-spec.json` |
| Status updated | `features/<slug>/status.json` → `preview: "APPROVED"` |
`fluent-mystique-preview` → (on approval) → `fluent-mystique-builder` → `fluent-mystique-assess`Read-only phase (preview) has no planning gate. The manifest build that follows requires an approved plan.
