michael.design
  • michael.design
  • user experience

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

Your browser does not support the video tag.

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

Claude style guide - light
Claude style guide - dark

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

designing and building digital experiences
that transform organizations.

let's work together

Michael Higgins

product designer driving user-centric digital transformation

© copyright 2025. all rights reserved.

links

  • LinkedIn
  • Twitter
  • Instagram

email

michael@michael.design

michael@michael.art

artist page

michael.art