grimdevdesignlayout-previewslisted

# Layout Previews Turn a spatial design decision into a **side-by-side visual choice** by drawing each option as an aligned ASCII / box-drawing mockup inside the `AskUserQuestion` option `preview` field. A label like "Info-rich HUD" tells the user almost nothing. A tiny rendered frame tells them everything. When the choice is about *where things go*, show it. --- ## When To Use Use it when the decision involves a concrete **spatial or visual artifact** the user benefits from seeing: - UI / HUD layouts, screen arrangements, panel or component placement - Navigation / information hierarchy variants - Diagram or architecture-shape variations - Config or code-snippet structure choices where shape matters Do NOT use it for: - Simple preference questions where the label already says it all ("Dark or light mode?", "Ship now or after tests?") - Non-visual tradeoffs (naming, yes/no, scope) — plain options are clearer there. --- ## How It Works - Put the mockup in each option's `preview` field. - **Single-select only.** With previews on a single-select question, the UI switches to a side-by-side layout: option list on one side, the highlighted option's `preview` on the other. Multi-select does not render previews this way. - Multi-line text is supported. Use it. - Keep each mockup compact and legible inside a monospace box — a few rows, not a full screen. --- ## Mockup Craft - **Align every column.** Misaligned box edges read as broken, not as a layout. Count characters; pa