06. UI/UX Design

Production AI applications require thoughtful UI/UX that handles the unique challenges of async processing and streaming. Users expect immediate feedback for long-running tasks. Visual indicators must communicate state clearly without overwhelming.

The document upload flow uses a three-state design: idle with instructions, uploading with progress, and completed with document preview. State transitions should animate smoothly to avoid jarring jumps.

/* Shared animation utilities */
.fade-enter {
  opacity: 0;
  transform: translateY(8px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.upload-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: #3b82f6;
  transition: width 150ms ease-out;
}

Chat interface design must accommodate variable response lengths. Messages should not cause layout shifts as content streams in. Pre-allocate message containers with minimum heights. Use a scroll anchor that keeps the latest message visible unless the user has scrolled up.

Accessibility requirements for AI interfaces are often overlooked. Streaming text creates challenges for screen readers. Implement pause/resume controls. Announce new messages with aria-live regions. Provide text alternatives for loading states.

Error states deserve as much design attention as success states. Network errors should show the specific failure and a retry action. Timeout errors should explain why and suggest shorter queries. Rate limit errors should show when the user can retry.

Loading skeletons improve perceived performance. Show placeholder shapes that match the content layout:

// shared/components/MessageSkeleton.tsx
export function MessageSkeleton() {
  return (
    <div className="flex gap-3 p-4">
      <div className="w-8 h-8 rounded-full bg-gray-200 animate-pulse" />
      <div className="flex-1 space-y-2">
        <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
        <div className="h-4 bg-gray-200 rounded w-1/2 animate-pulse" />
      </div>
    </div>
  );
}

Dark mode support is expected for developer tools. Use CSS custom properties for colors. Store user preference in localStorage and respect system preferences via prefers-color-scheme.