Generate AI-Native UI Components with Adaptive Styling

AI Native UI is a design-style child skill ('fluid, adaptive, and conversational - the interface morphs to serve the content'), part of the design-it family and not meant to be triggered directly. Three core principles: Conversational First (a chat input or voice prompt is the primary navigation method, not a sidebar of links), Generative States (loading states are shimmering text, morphing gradients, or skeletal layouts that resolve smoothly into content instead of plain spinners), and Adaptive Components (cards and blocks size themselves dynamically based on the length of generated content rather than a fixed layout).

Use it when the user's request matches an AI-product aesthetic - chat interfaces, AI-assisted tools, or any UI where content is generated live and the interface should visually communicate that generation process. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA: Minimalist Slate combined with Electric Indigo or Neon Pulse gradients specifically for AI elements, a clean white or dark-grey background with the AI "presence" represented by a shifting, iridescent gradient, highly readable system fonts (Inter, SF Pro), and subtle glowing borders indicating AI generation in progress. The web implementation's AI prompt box uses a dual-layer background-image trick (linear-gradient(#fff,#fff), linear-gradient(90deg, #8A2387, #E94057, #F27121) with background-clip: padding-box, border-box) to render an animated gradient border, intensifying its shadow on focus; generative shimmer text uses a background-clip: text gradient animated via a shine keyframe that shifts background-position across 200% width.

.ai-generating-text {
  background: linear-gradient(90deg, #aaa 0%, #333 50%, #aaa 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  animation: shine 1.5s linear infinite;
}

SwiftUI reproduces the shimmer effect by animating a LinearGradient foreground style's offset endlessly with .repeatForever(autoreverses: false) over a 1.5s linear duration, paired with an AI input box using a sparkles system icon in purple to visually cue AI-assisted input - matching the web version's glow-border and shimmer-text language in a native SwiftUI idiom.

Designers and developers building AI-product interfaces - chat assistants, generative tools, or any UI where content streams in live - who want the interface itself to visually communicate generation-in-progress rather than using generic spinners on an otherwise static layout - the goal is for the UI to feel like it's thinking alongside the user, not just waiting on a request.