Claude UI Design Handbook (1.x Overview)

This is the overview of the Open Claude UI handbook for Claude Desktop 1.x: a community analysis of the Claude UI design, from design tokens and colors to components, motion and desktop architecture. Every value in the handbook cites where it was found. Open Claude UI is an unofficial community project and is not affiliated with Anthropic.

Version: 1.0 (based on a full analysis of the production build of Claude Desktop, /Applications/Claude.app)
Analysis framework: the whole process relies on REA (Reverse Engineer Anything) for Vite/Rollup AST de-obfuscation, runtime behavior tracing and ASAR resource unpacking.
Purpose: a complete engineering guide for front-end engineers, UI designers and indie developers who want to reproduce the look and interactions of Claude pixel by pixel.

English edition: only Chapter 1 has been translated so far. The other chapters link to the Chinese originals (marked "Chinese").

---

Volume 1 outline and navigation

🎨 Chapter 1: Design Philosophy & Design Tokens

• 1.1 Design philosophy and visual tone
• 1.2 Surfaces and color scale
• 1.3 Control sizes and the border-radius matrix
• 1.4 Hairline borders, soft shadows and avoiding border bloat
• 1.5 Typography and icon alignment constraints
• 1.6 Motion tokens and the full set of easing curves

🧱 Chapter 2: Atomic Components & Interactive Controls (Chinese)

• 2.1 The full button control ladder
• 2.2 Segmented sliding pill selector
• 2.3 Status indicators and micro-motion kit
• 2.4 Modal confirmation dialog
• 2.5 Attachment tiles and context pills

💬 Chapter 3: Conversation Flow & Command Input Engine (Chinese)

• 3.1 Message bubble kit and typography rules
• 3.2 Thinking collapse and its timing state machine
• 3.3 The rich-text composer and command input engine
• 3.4 Model switcher and token usage gauge
• 3.5 Interactive tool calls and MCP decision cards

Live React demos for this chapter: React chat UI components.

⚡ Chapter 4: Motion Physics, Shaders & Ambient Light (Chinese)

• 4.1 Motion engine and keyframe specification
• 4.2 Dynamic light shaders and the reasoning ambience
• 4.3 Scroll-edge fade mask system

🎧 Chapter 5: Audio, Media & Artifact Interaction Physics (Chinese)

• 5.1 Voice mode and the Web Audio system
• 5.2 Multimodal media viewer and gallery transitions
• 5.3 Elastic two-pane split and collapse
• 5.4 Artifact preview sandbox and isolated messaging
• 5.5 Code diff and multi-threaded syntax highlighting

🖥️ Chapter 6: Desktop Architecture & Collaboration Topology (Chinese)

• 6.1 Deep macOS host integration and window materials
• 6.2 Sidebar conversation drag-and-drop reordering
• 6.3 Multi-agent board and the Cowork space
• 6.4 Streaming long output and scroll viewport physics
• 6.5 Container-query adaptive layout and squeeze protection
• 6.6 Full keyboard navigation grid and accessibility
• 6.7 Rate limiting, failure handling and business state machines

🛠️ Chapter 7: Engineering Config & Code Asset Overview (Chinese)

• 7.1 Ready-to-use Tailwind config and base CSS
• 7.2 Production source file inventory
• 7.3 Asset rules and system font / audio substitutes

🤖 Chapter 8: Front-end UI & Motion Guidelines for AI Agents (Chinese)

• 8.1 Agent role and design philosophy
• 8.2 Design tokens and the color reference contract
• 8.3 Motion physics: decision tree for four spring presets
• 8.4 Control atom rules and the single closed border principle
• 8.5 Interaction guards and edge cases
• 8.6 Quick assembly guide for the production component library (30 modules)
• 8.7 Agent self-check and quality gate checklist

---

Open Claude UI is MIT licensed (Copyright 2026 Caho1). Claude is a trademark of Anthropic; this handbook is a community analysis and is not affiliated with or endorsed by Anthropic.