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

Pattern: Generative Canvas

The generated output occupies the full viewport. Controls appear contextually.

┌─────────────────────────────────────────────┐
│                                             │
│     [ THE GENERATED OUTPUT IS THE UI ]      │
│                                             │
│     Takes 80%+ of the screen.               │
│     Minimal chrome.                         │
│     Controls on hover/gesture.              │
│                                             │
├─────────────────────────────────────────────┤
│  ◉ v3  ○ v2  ○ v1  ·  4.1% CTR            │  ← versions + one metric
│  [      Approve & Deploy      ]             │  ← ONE primary action
│                                             │
└─────────────────────────────────────────────┘

What to do:

• Make the AI-generated content the hero element
• Put controls on hover, not permanently visible
• Show ONE primary action, not 3+ buttons
• Use dots/pills for version switching, not tabs

What NOT to do:

• Don't surround the output with agent cards, progress bars, and dashboards
• Don't have multiple primary buttons (Deploy, Iterate, Export, Share)
• Don't use traditional sidebar + top-nav + content layout

Pattern: Ambient Activity

Show AI is working without visual noise.

CSS for ambient glow (Apple Intelligence-style):

@keyframes ai-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 20px rgba(251, 191, 36, 0.25); }
}
.ai-active { animation: ai-glow 1.8s ease-in-out infinite; }

Pattern: Control Transfer Loop

The defining interaction pattern for AI-native apps:

1. AI GENERATES → full output appears (user watches)
2. HUMAN EDITS → user modifies inline (click to edit)
3. AI ITERATES → agent revises based on feedback (streams update)
4. HUMAN APPROVES → one tap to finalize

What to do:

• Make every output element editable by default
• Show "AI edited this" badges that fade after 2 seconds
• Allow "regenerate this section" on any element (right-click or long-press)
• Stream updates in real-time, never show "loading..." spinners

Pattern: Version Morphing

Let users compare versions through gesture, not tabs.

Swipe left/right → creative morphs between versions
Score animates    → CTR counts up/down as you swipe
Context shown     → "v1: 1.2% → v2: 2.8% → v3: 4.1%"

Implementation (Framer Motion):

<AnimatePresence mode="wait">
  <motion.div
    key={version.id}
    initial={{ opacity: 0, scale: 0.95, x: 50 }}
    animate={{ opacity: 1, scale: 1, x: 0 }}
    exit={{ opacity: 0, scale: 1.05, x: -50 }}
    transition={{ type: "spring", stiffness: 300, damping: 30 }}
  >
    <GeneratedOutput data={version} />
  </motion.div>
</AnimatePresence>

Pattern: Contextual Trust

Safety info appears when needed, not as a permanent panel.

The streamUI Pattern (Vercel AI SDK)

Use generator functions with yield for loading states:

import { streamUI } from 'ai';

export async function generateUI(prompt: string) {
  const result = await streamUI({
    model: openai('gpt-4o'),
    prompt,
    text: ({ content }) => <div>{content}</div>,
    tools: {
      generateCreative: {
        description: 'Generate an ad creative',
        parameters: z.object({ headline: z.string(), image: z.string() }),
        generate: async function* ({ headline, image }) {
          yield <SkeletonCreative />;  // loading state
          const creative = await generateCreative(headline, image);
          return <CreativeDisplay data={creative} />;  // final
        },
      },
    },
  });
  return result.value;
}

Anti-Patterns (What to Avoid)

• The Chatbot Trap — Chat is often the wrong interface. Don't add conversation where a button suffices.
• Dashboard Fatigue — Don't show agent cards with progress bars. The output IS the progress.
• Hidden AI — Don't hide that AI is involved. Subtle badges build trust.
• Over-Decoration — Shimmer/glow should signal activity, not be a permanent style.
• No Fallback — Always work without AI. The pre-AI state must be a complete product.

References

• references/calm-tech.md — Amber Case's 8 principles for calm technology, applied to AI
• references/generative-ui-examples.md — How Claude Artifacts, ChatGPT Canvas, v0, and Cursor implement generative UI
• references/animation-patterns.md — Specific Framer Motion and CSS patterns for AI UI