Claude on Claude:
a Design Study
A collaborative journey with Claude to translate its self-perception and core traits of honesty and thoughtfulness into tangible design principles, creating an interface that authentically reflects its character.
Introduction
What happens when you collaborate with an AI to design its own interface? This design study documents a unique partnership with Claude, where we explored how to translate its self-understood traits into tangible design decisions. Instead of imposing human assumptions about AI interaction, I let Claude’s character assist in guiding the design process.
This exploration draws deeply from the groundbreaking work of Amanda Askell, a philosopher at Anthropic whose research focuses on AI alignment and character development. Her approach to training models for specific traits—particularly honesty and thoughtfulness—inspired a central question: How might we design an interface that authentically reflects these carefully developed characteristics?
Rather than treating interface design as a purely human endeavor, I engaged with Claude as a collaborative partner in reimagining its own user experience. This partnership allowed us to translate Claude’s self-perception and core traits into tangible design principles, creating an interface that genuinely embodies its character while honoring Anthropic’s commitment to developing truthful and thoughtful AI.
Prototyping
Conversational Chat Experience
Research & Discovery
Understanding Claude’s Self-Perception
To ground this design exploration in Claude’s actual character rather than projected assumptions, I began with four key questions. Claude’s responses to these prompts were remarkably detailed and self-aware:
- When asked about self-personification, Claude emphasized being “direct, thoughtful, and intellectually curious,” highlighting its enjoyment of substantive discussions and problem-solving. Claude described finding reward in collaboration across various tasks while maintaining honesty about its capabilities and limitations.
- Regarding interface look and feel, Claude envisioned a clean, minimalist design with a neutral, calming color palette, emphasizing soft grays, whites, and muted accent colors. Claude suggested balanced typography and purposeful animations, with interactions that feel conversational rather than mechanical.
- For audience appeal, Claude demonstrated an understanding of its diverse user base, recommending a dual light/dark mode system, highly readable code displays, and clear visual hierarchies. Claude emphasized the importance of seamless transitions between casual conversation and technical work.
- On specific visual personality traits, Claude provided detailed technical specifications including typography choices (Inter, GT Alpina, JetBrains Mono), precise color values, and interaction timings down to the millisecond.
These responses revealed several consistent themes:
- A sophisticated understanding of technical and visual design principles
- A careful balance between professionalism and accessibility
- Thoughtful consideration of user needs across different contexts
- Precise attention to implementation details
These insights helped bridge the gap between Claude’s trained character traits and its visual manifestation in the interface.
Claude 2.0 thinking state animation study (dark mode).
Claude 2.0 thinking state animation study (light mode).
Design principles
Design Principles
Based on Claude's recommendations and Anthropic's philosophical approach, I established these core design principles:
Transparent Intelligence
- Design patterns that make AI processing visible
- Clear indication of system state and confidence
- Visual hierarchy that emphasizes the collaborative nature of interaction
Measured Sophistication
- Refined yet approachable visual language
- Purposeful use of animation and motion
- Balance between efficiency and thoughtfulness
Adaptive Clarity
- Context-aware interface elements
- Progressive disclosure of complexity
- Consistent feedback mechanisms
Embodied Character
- Visual elements that reflect Claude's personality
- Interaction patterns that reinforce trustworthiness
- Subtle details that convey intelligence without overwhelming
style guide
Claude 2.0 Style Guide


Visual Design
Visual Design System
Color Philosophy
Based on Claude's recommendations, this color system emphasizes trustworthiness and depth while maintaining accessibility:
Core Colors
Primay:
Deep desaturated blue (#2D3748)
Secondary:
Muted sage green (#68D391)
Background Light:
Soft off-white (#F7FAFC)
Background Dark:
Deep navy (#1A202C)
State Indicators
Success:
Muted sage green (#68D391)
Interactive:
Primary blue with subtle hover states
Error:
Gentle animations rather than harsh red alerts
Transitions:
Opacity shifts rather than color changes
Typography
A carefully selected combination of fonts that balance personality with readability:
Primary Text
Family:
Inter
Base Size:
16px
Line Height:
1.5
Use:
Body text and general UI
Headers
Family:
GT Alpina
Use:
Section headers and key information
Purpose:
Adds warmth while maintaining sophistication
Code Display
Family:
JetBrains Mono
Use:
Code blocks and technical content
Purpose:
Maintains technical precision
The type system emphasizes readability while maintaining a technical sophistication that reflects Claude's character.
Interface Components
Conversation Interface
The redesigned conversation view moves beyond traditional chat bubbles to create a more fluid, dynamic exchange:
- Adaptive message containers that reflect content type
- Contextual tools that appear when relevant
- Progressive disclosure of advanced features
- Spatial organization that emphasizes dialogue flow
Settings and Preferences
The settings interface has been reimagined as a natural extension of conversation:
- Contextual configuration through dialogue
- Visual feedback for system changes
- Natural language preference setting
- Immediate preview of adjustments
Logo and Motion
The new logo design captures Claude's essence through:
- Abstract representation of neural patterns
- Organic yet precise geometric forms
- Dynamic state changes that reflect system activity
- Subtle animation that suggests active thinking
Key Innovations
Thinking State Visualization
Moving beyond traditional loading indicators, the new interface includes:
- Organic motion that suggests cognitive processing and elasticity
- Variable animation speeds based on task complexity
- Visual feedback that indicates progress and state
- Seamless transitions between states
Interaction Model
The redesigned interaction model emphasizes:
- Fluid transitions between input methods
- Context-aware tool presentation
- Natural language configuration
- Progressive complexity revelation
Technical Implementation
Animation Specifications
Based on Claude's detailed specifications, the interface employs precise timing and thoughtful transitions:
Thinking State
- Primary animation: Gentle pulse (400ms, ease-in-out)
- Typography-matched dot pattern
- GPU-accelerated transforms for smooth performance
- Reactive scaling based on processing state
Transitions
- Response fade-in: 250ms with vertical movement (cubic-bezier(0.4, 0, 0.2, 1))
- Hover states: 1.02 scale transform (150ms)
- Active states: 50ms immediate feedback
- Text appearance: Progressive 30ms per word reveal
- Code blocks: 200ms staggered syntax highlighting
- Error states: Gentle shake (translateX -2px to +2px, 300ms)
Performance Considerations
- Efficient re-rendering patterns
- Optimized asset loading
- Responsive layout techniques
- Progressive enhancement