ElKrapulito/calucha-landing

Design System

Token-Architektur, Komponentenspezifikationen, systematisches Design, Folien-Generierung.

Verwendung

• Erstellung von Design-Tokens
• Definition von Komponentenzuständen
• CSS-Variablen-Systeme
• Abstands-/Typografie-Skalen
• Design-to-Code-Übergabe
• Tailwind-Theme-Konfiguration
• Folien-/Präsentationserstellung

Token-Architektur

Laden: references/token-architecture.md

Drei-Ebenen-Struktur

Primitive (Rohwerte)
       ↓
Semantisch (Zweck-Alias)
       ↓
Komponente (komponentenspezifisch)

Beispiel:

/* Primitiv */
--color-blue-600: #2563EB;

/* Semantisch */
--color-primary: var(--color-blue-600);

/* Komponente */
--button-bg: var(--color-primary);

Schnellstart

Tokens generieren:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

Verwendung validieren:

node scripts/validate-tokens.cjs --dir src/

Referenzen

Thema	Datei
Token-Architektur	references/token-architecture.md
Primitive Tokens	references/primitive-tokens.md
Semantische Tokens	references/semantic-tokens.md
Komponenten-Tokens	references/component-tokens.md
Komponentenspezifikationen	references/component-specs.md
Zustände & Varianten	references/states-and-variants.md
Tailwind-Integration	references/tailwind-integration.md

Komponentenspezifikationen (Muster)

Eigenschaft	Standard	Hover	Aktiv	Deaktiviert
Hintergrund	primary	primary-dark	primary-darker	muted
Text	white	white	white	muted-fg
Rahmen	none	none	none	muted-border
Schatten	sm	md	none	none

Skripte

Skript	Zweck
generate-tokens.cjs	CSS aus JSON-Token-Konfiguration generieren
validate-tokens.cjs	Auf hartcodierte Werte im Code prüfen
search-slides.py	BM25-Suche + kontextuelle Empfehlungen
slide-token-validator.py	Folien-HTML auf Token-Konformität validieren
fetch-background.py	Bilder von Pexels/Unsplash abrufen

Vorlagen

Vorlage	Zweck
design-tokens-starter.json	Starter-JSON mit Drei-Ebenen-Struktur

Integration

Mit Brand: Primitives aus Markenfarben/-typografie extrahieren Mit ui-styling: Komponenten-Tokens → Tailwind-Konfiguration

Fähigkeitsabhängigkeiten: brand, ui-styling Primäre Agenten: ui-ux-designer, frontend-developer

Folien-System

Markenkonforme Präsentationen mit Design-Tokens + Chart.js + kontextuellem Entscheidungssystem.

Quelle der Wahrheit

Datei	Zweck
docs/brand-guidelines.md	Markenidentität, Stimme, Farben
assets/design-tokens.json	Token-Definitionen (primitiv→semantisch→Komponente)
assets/design-tokens.css	CSS-Variablen (in Folien importieren)
assets/css/slide-animations.css	CSS-Animation-Bibliothek

Folien-Suche (BM25)

# Einfache Suche (automatische Erkennung des Bereichs)
python scripts/search-slides.py "investor pitch"

# Bereichsspezifische Suche
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Kontextuelle Suche (Premium-System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration

Entscheidungssystem-CSVs

Datei	Zweck
data/slide-strategies.csv	15 Deck-Strukturen + Emotionsbögen + Sparkline-Schläge
data/slide-layouts.csv	25 Layouts + Komponentenvarianten + Animationen
data/slide-layout-logic.csv	Ziel → Layout + break_pattern-Flag
data/slide-typography.csv	Inhaltstyp → Typografie-Skala
data/slide-color-logic.csv	Emotion → Farbbehandlung
data/slide-backgrounds.csv	Folietyp → Bildkategorie (Pexels/Unsplash)
data/slide-copy.csv	25 Copywriting-Formeln (PAS, AIDA, FAB)
data/slide-charts.csv	25 Diagrammtypen mit Chart.js-Konfiguration

Kontextueller Entscheidungsfluss

1. Ziel/Kontext parsen
        ↓
2. Slide-strategies.csv durchsuchen → Strategie + Emotionsschläge abrufen
        ↓
3. Für jede Folie:
   a. slide-layout-logic.csv abfragen → Layout + break_pattern
   b. slide-typography.csv abfragen → Typografie-Skala
   c. slide-color-logic.csv abfragen → Farbbehandlung
   d. slide-backgrounds.csv abfragen → Bild falls benötigt
   e. Animationsklasse aus slide-animations.css anwenden
        ↓
4. HTML mit Design-Tokens generieren
        ↓
5. Mit slide-token-validator.py validieren

Musterbruch (Duarte Sparkline)

Premium-Decks wechseln zwischen Emotionen für Engagement:

"Was ist" (Frustration) ↔ "Was könnte sein" (Hoffnung)

Das System berechnet Musterbrüche an den Positionen 1/3 und 2/3.

Folien-Anforderungen

ALLE Folien MÜSSEN:

1. assets/design-tokens.css importieren - einzige Quelle der Wahrheit
2. CSS-Variablen verwenden: var(--color-primary), var(--slide-bg), etc.
3. Chart.js für Diagramme verwenden (KEINE CSS-only-Balken)
4. Navigation enthalten (Tastaturpfeile, Klick, Fortschrittsbalken)
5. Inhalt zentriert ausrichten
6. Fokus auf Überzeugung/Konversion legen

Chart.js-Integration

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Okt', 'Nov', 'Dez'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Markenkoralle verwenden
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Token-Konformität

/* RICHTIG - verwendet Token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* FALSCH - hartcodiert */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Referenzimplementierung

Funktionierendes Beispiel mit allen Funktionen:

assets/designs/slides/claudekit-pitch-251223.html

Befehl

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Best Practices

1. Niemals rohe Hex-Werte in Komponenten verwenden - immer auf Tokens verweisen
2. Semantische Ebene ermöglicht Themenwechsel (hell/dunkel)
3. Komponenten-Tokens ermöglichen komponentenspezifische Anpassungen
4. HSL-Format für Deckkraftsteuerung verwenden
5. Zweck jedes Tokens dokumentieren
6. Folien MÜSSEN design-tokens.css importieren und ausschließlich var() verwenden