ai-native-ui

AI Native UI

"Fluid, adaptive, and conversational. The interface morphs to serve the content."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Conversational First: The chat input or voice prompt is the primary navigation method, not a sidebar of links.
2. Generative States: Loading states aren't spinners; they are shimmering text, morphing gradients, or skeletal layouts that resolve smoothly into content.
3. Adaptive Components: Cards and blocks size themselves dynamically based on the generated content length.

Visual DNA

• Colors: Minimalist Slate combined with Electric Indigo or Neon Pulse gradients for the AI elements. The background is clean (white or dark grey), while the AI "presence" is represented by a shifting, iridescent gradient.
• Typography: Highly readable system fonts (Inter, SF Pro).
• Styling: Subtle glowing borders to indicate AI generation in progress.

Web Implementation

• CSS Example:

body {
  background-color: #FAFAFA;
  color: #1A1A1A;
  font-family: 'Inter', sans-serif;
}

/* The AI Chat Input */
.ai-prompt-box {
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  b