ai-output-designlisted

# AI Output Design ## The Law ``` AI OUTPUT IS NOT STATIC CONTENT. "Just render the markdown" and "the model formats it" both ship walls of unstyled text with no hierarchy, no confidence signals, and no accessibility layer. Defined rendering rules + typographic hierarchy + confidence signals IS output design. ``` ## When to Use Trigger when: - Designing how model responses are displayed in any UI surface - Adding markdown rendering to an AI response container - Designing how structured data from the model (tables, lists, code) is presented - Designing the visual treatment for uncertainty or low-confidence responses - Reviewing whether existing AI output rendering is production-quality ## When NOT to Use - Output that is always structured JSON consumed by the system, not displayed to users - Backend pipelines where no human reads the model output directly ## The Output Rendering Stack ### 1 — Markdown Rendering Model responses contain markdown. Define which elements to render and how: | Element | Render as | Notes | |---|---|---| | `# H1` | Use sparingly in responses — demote to H3 | H1 inside a response clashes with page hierarchy | | `**bold**` | `<strong>` | Full weight only; no extra color | | `_italic_` | `<em>` | Used for emphasis, not decoration | | `` `inline code` `` | `<code class="inline">` | Monospace, tinted background | | ` ```code block``` ` | Syntax-highlighted `<pre><code>` | Language label, copy button, max-height with scroll | | `- list` | `<ul>` w