AI-Native UI Design

Design interfaces where the AI's output IS the primary interface — not a sidebar, chat panel, or dashboard bolted onto traditional software.

The 10 Foundational Principles

1. Output IS the Interface — The generated content takes 80%+ of the screen. Chrome (menus, sidebars, controls) is minimal and contextual.
2. Intent Over Navigation — Users express what they want; the system decides how to show it. No complex menus or navigation hierarchies.
3. Stream Everything — Content never "pops in." Always stream with visible progress. Use yield <Loading /> before return <Component />.
4. Calm, Not Clamorous — AI activity is ambient (subtle glows, shimmers), never overwhelming (no progress bars, no dashboard cards). See references/calm-tech.md.
5. Interruptibility by Default — Users can always pause, review, and redirect. Pause/veto/rollback are primary actions, not edge cases.
6. Transparency Without Noise — Show what the AI is doing and why, but keep it peripheral. Hover/click for details, don't dedicate screen real estate.
7. Control Transfer, Not Handoff — AI generates → human edits → AI iterates. The user never loses control. Always allow inline editing.
8. Design for Failure — Every AI feature needs all 4 states: idle → loading → success → error. Graceful degradation is mandatory.
9. Progressive Disclosure — Show the simple prompt input first, reveal advanced options on demand. Never overwhelm with all capabilities at once.
10. Pre-AI State Must Work — The interface before AI activates must be a complete, usable design. Not a degraded "you're missing out" experience.

Core Patterns