Einführung in Atomic Design

Jedes Frontend-Team steht irgendwann vor dem gleichen Problem: Komponenten vermehren sich, Namenskonventionen verwässern, und was als saubere Codebasis begann, wird zum Flickwerk aus Einzellösungen. Atomic Design löst das, indem es deiner Komponentenarchitektur eine klare, wiederholbare Struktur gibt — inspiriert von der Chemie. Statt zu raten, wo eine neue Komponente hingehört, folgst du einer Hierarchie, die vom einzelnen Button bis zur kompletten Anwendung skaliert.

Was ist Atomic Design?

Brad Frost stellte Atomic Design 2013 als Denkmodell für den Bau von Benutzeroberflächen vor. Die Kernidee ist einfach: So wie Materie in der Natur aus Atomen besteht, die sich zu Molekülen verbinden und dann zu komplexen Organismen werden, lassen sich Benutzeroberflächen in fünf hierarchische Ebenen zerlegen.

Die fünf Ebenen sind Atome, Moleküle, Organismen, Templates und Seiten. Jede Ebene baut auf der darunter liegenden auf. Die entscheidende Regel: Abhängigkeiten fließen nur nach unten — Atome importieren nichts, Moleküle importieren nur Atome, Organismen importieren Moleküle, und so weiter. Diese einzige Einschränkung eliminiert zirkuläre Abhängigkeiten und macht jede Komponente vorhersagbar.

Die fünf Ebenen erklärt

Ebene 1: Atome

Die kleinsten bedeutungsvollen UI-Elemente. Buttons, Eingabefelder, Labels, Überschriften, Icons, Badges, Bilder und Links. Sie können nicht weiter zerlegt werden, ohne ihren Zweck zu verlieren. Stelle sie dir als Periodensystem deines Design-Systems vor. Atome sind eigenständig — sie erhalten alle Daten über Props und stylen sich mit Design Tokens.

Ebene 2: Moleküle

Kleine Gruppen von Atomen, die als funktionale Einheit zusammenarbeiten. Eine SearchBar (Input + Button), ein FormField (Label + Input + Fehlermeldung), ein NavLink (Link + Icon), eine Card (Bild + Überschrift + Text). Der Schlüsseltest: Dient diese Gruppe einem einzigen, klaren Zweck? Wenn ja, ist es ein Molekül.

Ebene 3: Organismen

Komplexe, eigenständige Bereiche einer Seite. Ein Header (Logo + Navigation + SearchBar + Sprachumschalter), eine Hero-Sektion, ein Footer, ein Kontaktformular, eine BlogSidebar, eine Preistabelle. Organismen sind die erste Ebene, die sich wie ein echter Abschnitt einer Website anfühlt. Sie verwalten Layout und Koordination ihrer Kinder.

Ebene 4: Templates & Seiten

Templates definieren die Seitenstruktur — wo Organismen platziert werden und wie das Layout fließt. In Astro entsprechen Templates den Layout-Dateien (BaseLayout, BlogLayout). Seiten sind Templates gefüllt mit echten Inhalten — die tatsächlichen Routen-Dateien in src/pages/, die Nutzer sehen. Seiten übernehmen das Datenfetching und geben es an Layouts und Organismen weiter.

Atome in der Praxis

Atome müssen eigenständig sein. Sie erhalten alle Daten über Props und fetchen niemals selbst Daten oder importieren andere Komponenten. Sie stylen sich über Design Tokens (CSS Custom Properties), niemals über hartcodierte Werte.

---
interface Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}
const { variant = 'primary', size = 'md', disabled = false } = Astro.props;
---
<button
  class:list={['btn', `btn--${variant}`, `btn--${size}`]}
  disabled={disabled}
>
  <slot />
</button>

---
interface Props {
  type?: 'text' | 'email' | 'search' | 'password';
  name: string;
  placeholder?: string;
  required?: boolean;
}
const { type = 'text', name, placeholder, required = false } = Astro.props;
---
<input
  type={type}
  name={name}
  placeholder={placeholder}
  required={required}
  class="input"
/>

---
interface Props {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}
const { level = 2, size = 'lg' } = Astro.props;
const Tag = `h${level}`;
---
<Tag class:list={['heading', `heading--${size}`]}>
  <slot />
</Tag>

Moleküle: Der funktionale Klebstoff

Moleküle kombinieren zwei oder mehr Atome zu einer funktionalen Einheit. Der Schlüsselunterschied: Ein Molekül tut etwas, das seine einzelnen Atome allein nicht können.

Der Molekül-Test

Frage dich: „Dient diese Gruppe von Atomen einem einzigen, klaren Zweck?” Wenn ja, ist es ein Molekül. Wenn es mehrere Zwecke erfüllt oder andere Moleküle enthält, ist es wahrscheinlich ein Organismus.

Organismen: Echte Seitenabschnitte

Organismen sind die erste Ebene, die sich wie ein „Abschnitt” einer Seite anfühlt. Sie sind komplexe, eigenständige Komponenten aus Molekülen und Atomen.

Ordnerstruktur in Astro

src/
├── components/
│   ├── atoms/        → Button, Input, Heading, Icon, Badge, Image, Link
│   ├── molecules/    → SearchBar, FormField, NavLink, Card, Breadcrumbs
│   ├── organisms/    → Header, Footer, Hero, ContactForm, BlogSidebar
│   └── seo/          → SEO.astro, Schema-Komponenten
├── layouts/          → BaseLayout, BlogLayout (= Templates)
├── pages/            → index.astro, blog/[slug].astro (= Seiten)
├── styles/
│   ├── global.css
│   └── tokens/       → colors.css, typography.css, spacing.css
├── lib/              → utils.ts, constants.ts
└── types/            → TypeScript-Definitionen

Die goldene Regel

Jedes Atom braucht: saubere Prop-Interfaces, barrierefreies Markup, vollständige Zustandsabdeckung (Hover, Focus, Active, Disabled, Error) und Design-Token-Integration. Ein schlecht designtes Atom verbreitet seine Probleme überall.

Entwicklung eines Projekts

Häufige Stolperfallen

Warum Atomic Design gewinnt

Nach der Anwendung von Atomic Design in über 30 Produktionsprojekten sind dies die Vorteile, die sich konsistent zeigen:

Wie Atomic Design in einem echten Projekt mit über 45 Komponenten aussieht, erfährst du im Praxis-Artikel: Atomic Design mit Astro.