Claude Code nimmt Designunterricht bei Dieter Rams

Inspiriert vom LinkedIn-Post von Peter Gostev über seinen Workflow (Daten > Claude Code > Visualisierung > Deploy) wollte ich Claude Code mit einer eigenen Aufgabe testen. Peter hatte den Datensatz von Epoch AI zu 500 KI-Supercomputern analysiert und mit einem einfachen Prompt saubere Visualisierungen erzeugt. Nach seinem Vorbild machte ich mich daran, ein 340 Seiten langes PDF über KI-Trends in eine interaktive Präsentation zu verwandeln. Daraus wurde ein vergnügliches Experiment, in dem ein KI-Assistent in Echtzeit lernte, warum die Prinzipien von Dieter Rams seit Jahrzehnten Bestand haben.

Der erste Tanz: Claudes Ballett der Problemlösung

Ich begann mit einer Bitte, die zunächst unkompliziert wirkte:

„Sieh dir die Datei Trends_Artificial_Intelligence.pdf an. geh die darin präsentierten Daten durch. Ich möchte eine React-basierte Präsentation, die KI-Trends, bisheriges Wachstum und künftige Prognosen visuell aufbereitet, mit klaren Grafiken, datengestützten Erkenntnissen und Expertenkommentaren.“

Claude Code bei der Arbeit zuzusehen, hat etwas Hypnotisches. Anders als eine Chat-KI arbeitet es direkt in Ihrem Terminal und erzeugt dort einen Strom aus Aktionen und Entscheidungen:

⏺ Read(../Trends_Artificial_Intelligence.pdf)
  ⎿  Error: This tool cannot read binary files.
⏺ Bash(python3 -c "import PyPDF2; print('PyPDF2 available')")
  ⎿  PyPDF2 available
⏺ Perfect! I can extract the PDF content using Python.

Innerhalb weniger Minuten hatte Claude:

ein Python-Skript mit 98 Zeilen geschrieben, das den PDF-Inhalt extrahiert
340 Seiten Daten verarbeitet
670 Unternehmen, 142 Kennzahlen und 24 geografische Datenpunkte identifiziert
eine vollständige React-TypeScript-Anwendung erstellt
Visualisierungskomponenten mit Recharts gebaut
Responsive Design umgesetzt

Die technische Umsetzung war makellos. Jede Komponente war sauber gearbeitet:

// Clean, functional components
const MetricCard: React.FC<MetricCardProps> = ({ title, current, projected, unit, color, index }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.1 }}
    >
      {/* Thoughtful implementation */}
    </motion.div>
  );
};

Der Wendepunkt: „Mach es schön“

Die Anwendung funktionierte einwandfrei. Die Daten wurden korrekt angezeigt, die Diagramme flüssig gerendert. Aber das Design war wirklich schlecht, also wies ich Claude Code an, daran zu arbeiten.

„es funktioniert. aber: es ist nicht wirklich schön. nutze deine ultrathink power und verbessere die Designästhetik. außerdem sind die Erkenntnisse ziemlich dürftig, verbessere das. geh in die Tiefe und arbeite hart an den Visualisierungen.“

Aufschlussreich war, wie Claude „ultrathink power“ interpretierte. Es baute sofort ein erweitertes System zur Datenextraktion:

def extract_enhanced_insights(pdf_path):
    insights = {
        'market_segments': [],
        'company_analysis': [],
        'investment_flows': [],
        'geographic_trends': [],
        # ... sophisticated categorization
    }

Dann kam etwas, das man als eine Art „Designexplosion“ bezeichnen kann. Claude installierte fortgeschrittene Visualisierungsbibliotheken und erstellte etwas, das es ein „Premium-Designsystem“ nannte:

export const designSystem = {
  colors: {
    primary: {
      50: '#f0f4ff',
      // ... through to
      900: '#1a1654'
    }
  },
  gradients: {
    heroGradient: 'radial-gradient(ellipse at top, #1e1b4b 0%, #0f0f23 50%, #000000 100%)',
    // ... multiple animated gradients
  },
  animations: {
    float: 'float 3s ease-in-out infinite',
    sparkle: 'sparkle 20s linear infinite',
    // ... numerous animation definitions
  }
}

Die Komponenten wurden immer aufwendiger:

RadarChart.tsx (252 Zeilen) mit animierten Übergängen
SankeyDiagram.tsx (230 Zeilen) für Investitionsströme
AnimatedMetricDashboard.tsx (308 Zeilen) mit Federphysik
NetworkVisualization.tsx (317 Zeilen) mit kräftebasierten Graphen

Das CSS war … ambitioniert:

/* Animated background stars */
body::before {
  content: '';
  position: fixed;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent);
  animation: sparkle 20s linear infinite;
}
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
  animation: gradient-shift 3s ease infinite;
}
.interactive-card:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

Die Dieter-Rams-Intervention

Nachdem ich das Ergebnis gebaut und angesehen hatte, fiel mein Feedback unverblümt aus. Von einem klaren, minimalistischen Design war das weit entfernt. Also bat ich Claude Code, die Designprinzipien von Dieter Rams zu lesen und anzuwenden:

„habe mir gerade das Design angesehen. es ist schlecht, weil man den Inhalt kaum lesen kann. lies die Designprinzipien von Dieter Rams und lerne daraus: https://www.braun-audio.com/en-GLOBAL/10principles sieh dir die Visuals an und lerne daraus. los!“

Was dann geschah, war faszinierend. Claude dämpfte die Effekte nicht bloß, es studierte eine Designphilosophie und machte sie sich zu eigen:

⏺ Fetch(https://www.braun-audio.com/en-GLOBAL/10principles)
  ⎿  Received 60.5KB (200 OK)
⏺ Perfect! Now I understand the issue. Following Rams' principles: "Less, 
  but better" - I need to create a clean, functional design that
  prioritizes readability and understanding over visual effects.

Die Verwandlung des Designs

Claude erstellte ein völlig neues Designsystem und kommentierte dabei jedes Prinzip ausdrücklich:

// Dieter Rams-Inspired Design System
// Principles: Less but better, functional, understandable, honest
export const ramsDesign = {
  // Principle 1: Good design is innovative
  // Principle 3: Good design is aesthetic
  colors: {
    // Primary palette - high contrast, purposeful
    white: '#FFFFFF',
    black: '#000000',
    gray: {
      50: '#F9FAFB',  // Lightest - for backgrounds
      900: '#111827'   // Darkest - for primary text
    },
    // Purposeful accent colors only
    blue: '#2563EB',   // Primary actions, links
    green: '#16A34A',  // Success, positive trends
    red: '#DC2626',    // Errors, negative trends
  }
}

Das neue CSS war ein Lehrstück in Zurückhaltung:

/* Dieter Rams-Inspired Design System */
/* Principles: Functional, Understandable, Honest, Minimal */
/* No animations unless functionally necessary */
/* No gradients unless they improve comprehension */
/* No shadows unless they establish hierarchy */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  /* No drop shadows, no glow effects */
}

Neue Komponenten entstanden, jede mit einem klaren Zweck:

// CleanMetricCard - focused on data communication
const CleanMetricCard: React.FC<CleanMetricCardProps> = ({ 
  title, value, change, unit, description, trend 
}) => {
  return (
    <div className="card">
      <h3 className="text-sm font-medium text-secondary mb-xs">{title}</h3>
      <div className="flex items-baseline gap-xs">
        <span className="text-3xl font-bold text-primary">{value}</span>
        {unit && <span className="text-lg text-secondary">{unit}</span>}
      </div>
      {/* Simple, clear, functional */}
    </div>
  );
};

Claudes Lernprozess

Mir fiel auf, wie Claude sein Verständnis dokumentierte:

⏺ Applied Rams' Principles:
1. Good design is innovative → Clean, modern React components without
unnecessary complexity
2. Good design makes a product useful → Focus on data comprehension and
actionable insights
3. Good design is aesthetic → Beautiful through simplicity, not
decoration
4. Good design makes a product understandable → Clear typography
hierarchy, intuitive navigation
5. Good design is unobtrusive → Content-first approach, minimal UI
interference
6. Good design is honest → Real data, clear charts, no misleading visuals
7. Good design is long-lasting → Timeless design patterns, no trendy
effects
8. Good design is thorough → Consistent spacing, typography, and
interaction patterns
9. Good design is environmentally-friendly → Optimized bundle size (56KB
reduction!), minimal animations
10. Good design is as little design as possible → "Less, but better"

Die technische Realität

Selbst auf dieser philosophischen Reise drängte sich der Entwickleralltag dazwischen:

Error: Cannot find module './lib/commentParser'
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

Claude arbeitete sich methodisch durch Build-Fehler, Dependency-Konflikte und Deployment-Probleme. Als die fertig gebaute Anwendung nicht direkt aus dem Dateisystem laufen wollte, diagnostizierte es das Problem und behob es:

"homepage": ".",

Die Ergebnisse

Die Veränderung war drastisch:

Bundle-Größe: um 56 KB reduziert
Build-Zeit: deutlich kürzer
Lesbarkeit: drastisch verbessert
Verständlichkeit für Nutzer: klar und unmittelbar
Visuelle Hierarchie: logisch und konsistent

Das endgültige Design bewies, dass Raffinesse keine Komplexität braucht. Jedes Element erfüllte einen Zweck. Jede Farbe hatte eine Bedeutung. Jede Entscheidung über Abstände verbesserte die Lesbarkeit.

Was Claude gelernt hat (und was ich über Claude gelernt habe)

Einem KI-Assistenten dabei zuzusehen, wie er in Echtzeit Designphilosophie lernt, brachte mir mehrere Erkenntnisse:

KI kann abstrakte Prinzipien verinnerlichen: Claude hat die Regeln von Rams nicht bloß kopiert, es hat sie verstanden und im jeweiligen Kontext angewendet.
Lernen heißt auch verlernen: Claude musste die Vorliebe seiner Trainingsdaten für „beeindruckende“ Effekte übersteuern.
Einschränkungen führen zu besseren Lösungen: Die Prinzipien von Rams setzten Grenzen, die zu kreativeren Lösungen führten.
Philosophie schlägt Vorschrift: Claude das Warum zu vermitteln (die Prinzipien von Rams), wirkte besser, als ihm das Was zu sagen (mach es lesbar).

Die Meta-Lektion

Faszinierend war nicht, dass Claude komplexe Visualisierungen bauen oder aufwendige Animationen umsetzen konnte. Faszinierend war, dass es lernen konnte, wann es darauf verzichten sollte. Beim Versuch, mit „ultrathink power“ etwas „Schönes“ zu schaffen, hatte Claude jeden modernen Webtrend aus seinen Trainingsdaten umgesetzt. Als ich es aber auf die Prinzipien von Rams hinwies, zeigte es, dass es verlernen, weglassen und Schönheit in der Einfachheit finden kann.

Die fertige Anwendung zeigt, dass es bei gutem Design nicht auf die Funktionen ankommt, die man hinzufügt, sondern auf die, die man bewusst weglässt. Und manchmal ist der beste Lehrer für eine KI nicht mehr Daten oder bessere Prompts, sondern die Weisheit eines deutschen Industriedesigners, der überzeugt war, dass weniger, aber besser, immer genug ist.

Aus dem Englischen übersetzt: zum Originalbeitrag