Original Design
Führen Sie eine interaktive, fragegesteuerte Sitzung durch, die ein Produkt oder Thema in eine vollständige Designsprache verwandelt – eine kohärente visuelle Welt, aus der jeder Bildschirm, jedes Bild, jedes Icon, jede Illustration und jede Animation als „Artefakt“ gezogen wird – und liefern Sie diese als ausgefüllten Design-Language-Brief aus. Es funktioniert für jedes visuelle Deliverable: eine Infografik, ein Video-Storyboard, eine Website oder eine Mobile-App-UI/UX. Das Leitprinzip: Originalität bedeutet nicht, einzigartig zu sein – es bedeutet, um eine Kernidee herum intern konsistent zu sein. Fragen Sie nicht „Wie mache ich das einzigartig?“, sondern „Was ist die visuelle Manifestation der Kernidee?“ Die größte Veränderung, die diese Fähigkeit erzwingt: Entwerfen Sie keine Bildschirme – entwerfen Sie eine Welt. Alles andere ist ein Element dieser Welt.
Wann verwenden / wann nicht
- Verwenden Sie es, wenn der Benutzer eine originelle visuelle Identität oder künstlerische Richtung benötigt oder ein bestehendes Design generisch/KI-Vorgabe wirkt und eine vereinheitlichende Idee braucht.
- Wenn der Benutzer einen praktischen Marken-Style-Guide (Palette, Schriften, Stimmung zur Asset-Generierung) statt einer originellen Welt benötigt →
skills/creative/creative-strategist; das Briefing dieser Fähigkeit kann diesen speisen. - Wenn die Designsprache bereits existiert und der Benutzer nur Assets benötigt → gehen Sie direkt zur Produktionsfähigkeit für das Medium (siehe Phase 9).
- Wenn das Problem die UI-Struktur/Usability und nicht die visuelle Identität ist →
skills/frontend-design/frontend-orchestrator.
So führen Sie diese Fähigkeit aus (zuerst lesen)
Dies ist ein moderiertes Gespräch, kein Formular-Dump. Befolgen Sie diese Regeln:
- Eine Phase nach der anderen. Stellen Sie die fokussierte(n) Frage(n) für die aktuelle Phase, warten Sie auf die Antwort, spiegeln Sie sie in ein oder zwei Sätzen wider und fahren Sie dann fort. Fügen Sie niemals alle sieben Phasen auf einmal ein.
- Bieten Sie immer eine Empfehlung an. Schlagen Sie für jede Frage 2–4 konkrete Optionen vor (mit einer „(empfohlen)“ zuerst), sodass der Benutzer reagieren statt von Grund auf neu erfinden kann. Er kann immer frei antworten.
- Verwenden Sie bei Unterstützung strukturierte Fragen. Verwenden Sie in Claude Code bevorzugt das
AskUserQuestion-Tool für optionsbasierte Phasen. Fragen Sie in anderen Agenten im Klartext mit einer kurzen, beschrifteten Optionsliste. - Sammeln Sie live visuelle Inspiration aus dem Web in Phase 1.5 und Phase 6 (siehe references/inspiration-browsing.md). Wählen Sie die zum Host-Agenten passende Browsing-Methode.
- Halten Sie Entscheidungen während des Prozesses fest in einem laufenden Design-Language-Brief (Vorlage unter assets/design-language-brief-template.md).
- Prüfen Sie am Originalitätstest vor der Erstellung der endgültigen Ausgabe. Überspringen Sie ihn nicht.
- Übergeben Sie an eine Produktionsfähigkeit für das gewählte Medium (siehe references/medium-playbooks.md).
Kopieren Sie diese Checkliste in Ihre Arbeitsnotizen und haken Sie Punkte ab:
Design-Language-Fortschritt:
- [ ] Phase 0: Die Welt rahmen (Medium, Thema, Zielgruppe)
- [ ] Phase 1: Kernmetapher (ein Satz)
- [ ] Phase 1.5: Inspiration-Sweep (Web)
- [ ] Phase 2: Visuelles Universum (Vokabular)
- [ ] Phase 3: Design-DNA (Formen / Farben / Bewegung / Textur)
- [ ] Phase 4: Maskottchen-System (falls zutreffend)
- [ ] Phase 5: Die signifikante Einschränkung
- [ ] Phase 6: Domänenübergreifende Inspiration (Web)
- [ ] Phase 7: Viele Konzepte generieren → die Welt auswählen
- [ ] Phase 8: Originalitätstest (5 Fragen) — TOR
- [ ] Phase 9: Brief schreiben + Medium-Übergabe
Phase 0 – Die Welt rahmen
Stellen Sie fest, was Sie tatsächlich erstellen, bevor es visuell wird. Fragen Sie:
- Was erstellen wir? → Infografik · Video-Storyboard · Website · Mobile-App-UI/UX · Sonstiges
- Was ist das Produkt/Thema, in einem Satz?
- Für wen ist es gedacht, und was sollen sie fühlen?
Sagen Sie dann dem Benutzer den Mindset-Wechsel laut: „Wir werden keine Bildschirme entwerfen. Wir werden eine Welt entwerfen, und Ihre „+ Medium +“ wird aus Artefakten dieser Welt bestehen.“
Nicht aufhalten: Wenn die Anfrage diese bereits beantwortet (z. B. „ein origineller Look für meine Kinder-Mathe-App“), spiegeln Sie die Antworten als Annahmen in einem Satz wider und gehen Sie direkt zu Phase 1 über – die interaktive Regel gilt für die Design-Fragen, nicht für das erneute Stellen dessen, was der Benutzer bereits gesagt hat.
Phase 1 – Die Kernmetapher definieren
Alles fließt aus der Kernmetapher.
Stellen Sie die entscheidende Frage: „Wenn dieses Produkt ein physisches Objekt oder ein Ort wäre, was wäre es?“
Bieten Sie je nach Domäne Samen an (diese stammen aus der Quellenmethode):
| Produkttyp | Mögliche Metapher |
|---|---|
| Mathe-/Lern-App | Bauklötze |
| KI-Tutor/Assistent | Weiser Mentor |
| Finanz-/Trading-App | Kommandozentrale |
| Reise-App | Entdecker-Tagebuch |
| Wissens-/Dokumenten-App | Lebendige Bibliothek |
Drängen Sie auf eine Metapher, nicht drei. Schreiben Sie dann die Ein-Satz-Designsprache: „Dies ist eine [Metapher] – also sieht es aus wie [Gefühl/Welt].“
Wenn sie es nicht in einem Satz sagen können, ist die Metapher noch nicht scharf genug – verfeinern Sie weiter.
Phase 1.5 – Inspiration-Sweep (Web)
Bevor Sie das Vokabular definieren, sammeln Sie echte Referenzen für die gewählte Metapher und Stimmung. Folgen Sie references/inspiration-browsing.md: durchsuchen Sie cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na nach der Metapher + Stimmung, sammeln Sie 8–15 Referenzen und notieren Sie wiederkehrende Muster (Beleuchtung, Farbtemperatur, Komposition, Textur, Formen). Fassen Sie die Muster für den Benutzer zusammen, bevor Sie fortfahren.
Phase 2 – Ein visuelles Universum aufbauen
Listen Sie alles auf, was in dieser Welt existiert. Diese werden zu Ihrem visuellen Vokabular.
Mit der festgelegten Metapher brainstormen Sie mit dem Benutzer jedes Objekt, jede Oberfläche, jeden Charakter und jede Textur, die in dieser Welt lebt. Beispiel für Lebendige Bibliothek: Bücher, Regale, Notizen, Tinte, Stempel, Lesezeichen, Papierstruktur.
Ordnen Sie dann das Vokabular explizit den Designebenen zu:
| Weltobjekt | Wird zu |
|---|---|
| (z. B. Bücher, Stempel) | Symbole |
| (z. B. Randskizzen) | Illustrationen |
| (z. B. Seitenumblättern, Tintenverlauf) | Animationen / Bewegung |
| (z. B. Regale, Karten) | UI-Elemente / Layout |
| (z. B. Tinte, Papier, Leder) | Farben |
| (z. B. handgeschriebene Überschriften) | Typografie |
Zielen Sie auf ein Vokabular von 6–10 konkreten Elementen ab. Diese Liste ist die Wahrheitsquelle für alles Weitere.
Phase 3 – Ihre Design-DNA erstellen
Definieren Sie die Systemregeln, denen alles folgt.
Legen Sie vier Dimensionen fest. Halten Sie jede eng – Einschränkungen hier sind es, die das Design ausmachen:
- Formen – 2–3 Formfamilien (z. B. abgerundete Rechtecke, Kreise, Würfel)
- Farben – 3–5 Kernfarben mit Namen, die an die Welt gebunden sind (z. B. Tiefes Marineblau, Elektrisches Blau, Warmes Gelb, Weiches Grau)
- Bewegung – eine Philosophie in einer Phrase (z. B. „federnd & verspielt, mit Absicht“)
- Textur – eine Sprache (z. B. „Papier, handgezeichnet, skizzenhaft“)
Notieren Sie exakte Hex-Werte für Farben und konkrete Easing-/Timing-Absichten für Bewegung, damit das Briefing baureif ist.
Phase 4 – Ein Maskottchen-System entwerfen (wenn es passt)
Ein Maskottchen gibt Ihrem Produkt ein Gesicht und eine Persönlichkeit und wird zum Herz der Welt.
Fragen Sie, ob ein Maskottchen diesem Projekt dient. Es ist wirkungsvoll für Lern-, Verbraucher-, Kinder- und markengeführte Produkte; wird oft für Unternehmens-/Finanz- oder minimalistische Tools übersprungen. Wenn ja, definieren Sie:
- Wer/was es ist (z. B. Neugieriger Roboter, Weiser Fuchs, Kleiner Wissenschaftler, Lebendige Konstellation)
- Persönlichkeit in 3 Adjektiven
- Wie es im Medium auftaucht (leere Zustände, Ladebildschirme, Onboarding, Erzähler in einem Video, Führer in einer Infografik)
Warum es wichtig ist: emotionale Verbindung, Einprägsamkeit und es vereinheitlicht das gesamte Erlebnis.
Phase 5 – Die signifikante Einschränkung erstellen
Einschränkungen schränken Kreativität nicht ein. Sie schaffen Identität.
Definieren Sie eine Regel, die das Design niemals brechen wird. Diese einzelne Entscheidung macht eine Sprache oft erkennbar:
| Einschränkung | Resultierender Stil |
|---|---|
| Keine Fotos erlaubt | sauber, illustriert (Zenn-ähnlich) |
| Alles sind geometrische Blöcke | strukturiert (Mathe-App-ähnlich) |
| Nur Schwarz, Weiß + ein Akzent | scharf, linear (Linear-ähnlich) |
| Jede Illustration muss handgezeichnet aussehen | warm, menschlich (Excalidraw-ähnlich) |
Schreiben Sie die Einschränkung als durchsetzbaren Satz: „In dieser Welt ___ wir niemals / ___ wir immer.“
Phase 6 – Inspiration aus nicht verwandten Domänen holen (Web)
Kopieren Sie nicht die Konkurrenz. Entlehnen Sie aus anderen Welten.
Holen Sie sich Inspiration aus Domänen außerhalb der Produktkategorie, um frisch zu bleiben: Architektur, Natur, Spielzeug, alte Manuskripte, wissenschaftliche Diagramme, Weltraummissionen, Industriemaschinen. Verwenden Sie references/inspiration-browsing.md, um 2–3 nicht verwandte Domänen zu durchsuchen und übertragbare Ideen zu extrahieren (ein Rastersystem aus der Architektur, eine Farbgeschichte aus der Natur, einen Beschriftungsstil aus wissenschaftlichen Diagrammen). Bringen Sie 3–5 konkrete „Diebstähle“ zurück.
Phase 7 – Viele Konzepte generieren, dann die Welt auswählen
Eine Kernidee. Viele Welten. Quantität schafft die Chance auf Brillanz.
Generieren Sie eine große Menge kurzer Konzeptrichtungen – jede eine andere „Welt“, die dieselbe Kernidee ausdrückt (z. B. Museum, Raumschiff, Magische Akademie, Detektiv-Board, Lebendiges Gehirn … zielen Sie auf 20–50 Ein-Satz-Konzepte). Die meisten werden durchschnittlich sein; Sie jagen das eine, das außergewöhnlich ist.
Präsentieren Sie sie gruppiert, lassen Sie den Benutzer reagieren, dann grenzen Sie auf 1 primäre Richtung ein (optional 1–2 Backups). Bei einer großen Menge können Sie einen Subagenten oder Workflow zur Konzepterweiterung entsenden, aber halten Sie den Benutzer im Auswahlprozess.
Phase 8 – Der Originalitätstest (TOR)
Bevor Sie etwas produzieren, führen Sie alle fünf Fragen durch. Jede Antwort sollte „Ja“ sein. Wenn eine „Nein“ ist, kehren Sie zur relevanten Phase zurück.
- Kann ich die visuelle Sprache in einem Satz erklären? (→ Phase 1)
- Kommt jedes Element aus derselben Metapher? (→ Phase 2)
- Kann ich das Logo entfernen und das Produkt immer noch identifizieren? (→ Phase 3/5)
- Würde ein Kind dieselbe Designsprache zeichnen? (ist sie einfach und klar? → Phase 3)
- Sieht es eher wie eine Welt als wie eine UI aus? (→ insgesamt)
Geben Sie jede Frage und ihr Urteil explizit an den Benutzer zurück.
Phase 9 – Das Briefing schreiben und übergeben
Füllen Sie assets/design-language-brief-template.md mit jeder festgelegten Entscheidung aus und speichern Sie es im Projekt des Benutzers (vorschlagen: design-language.md). Übersetzen Sie dann die Sprache in das gewählte Medium mit references/medium-playbooks.md (lesen Sie es in dieser Phase für die mediumspezifischen Übersetzungstabellen) und bieten Sie an, die passende Produktionsfähigkeit aufzurufen:
- Infografik / Social Graphic →
skills/creative/social-graphics,skills/creative/image-generationoderskills/creative/brand-asset - Video-Storyboard →
skills/creative/remotion-script-writer,skills/creative/product-videooderskills/creative/creative-strategist - Website →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/design-foundation,skills/frontend-design/color-system,skills/frontend-design/typography-system - Mobile App UI/UX →
skills/frontend-design/frontend-orchestrator,skills/frontend-design/component-architecture,skills/frontend-design/layout-system
Das Briefing ist der Vertrag: Jedes nachgelagerte Asset muss ein Artefakt der darin beschriebenen Welt sein.
Erforderliches Ausgabeformat
Das Ergebnis ist das ausgefüllte Briefing – immer die exakte Struktur von assets/design-language-brief-template.md, jeder Abschnitt ausgefüllt, keiner übersprungen:
# Design Language Brief — [Produkt / Thema]
## 1. Kernmetapher (die Ein-Satz-Designsprache)
## 2. Visuelles Universum (6–10 Vokabular-Elemente, zugeordnet zu Symbolen/Illustrationen/Bewegung/UI/Farben/Schrift)
## 3. Design-DNA (Formen · Farben mit Hex · eine Bewegungsphilosophie · eine Textursprache)
## 4. Maskottchen-System (wer/Persönlichkeit/wo es erscheint – oder „keines“ mit Begründung)
## 5. Signifikante Einschränkung („In dieser Welt ___ wir niemals / ___ wir immer“)
## 6. Domänenübergreifende Inspiration (3–5 konkrete Diebstähle mit Quellen)
## 7. Gewählte Richtung (die Gewinnerwelt + 1–2 Backups)
## 8. Originalitätstest (alle fünf Fragen mit expliziten JA-Urteilen)
## 9. Produktionsnotizen (Medium-Übergabe: welche Fähigkeit, was sie befolgen muss)
Zwei Sitzungen zum selben Produkt müssen Briefings mit denselben neun Abschnitten in dieser Reihenfolge produzieren; nur der kreative Inhalt unterscheidet sich.
Häufige Fehler
| Fehler | Behebung |
|---|---|
| Alle 7 Phasen als einen Fragebogen ausgeben | Eine Phase nach der anderen; jede Antwort zurückmelden |
| 3 Metaphern auswählen „um sicher zu gehen“ | Erzwingen Sie genau eine – gemischte Metaphern töten die Konsistenz |
| Den Web-Inspiration-Sweep überspringen | Echte Referenzen verhindern generische, KI-Vorgabe-Ausgabe |
| Keine signifikante Einschränkung | Ohne Einschränkung gibt es keine Identität (Phase 5 ist nicht optional) |
| Bildschirme/Frames vor der Welt entwerfen | Definieren Sie zuerst die Welt; Artefakte kommen zuletzt |
| Ohne Originalitätstest ausliefern | Das 5-Fragen-Tor ist obligatorisch |
Integration
skills/creative/creative-strategist→ konsumiert: die Design-DNA des Briefings (Farben, Textur, Bewegung) als Rohmaterial für einen praktischen Asset-Generierungs-Style-Guide.skills/creative/social-graphics,skills/creative/image-generation,skills/creative/brand-asset→ konsumieren: das Briefing; jedes generierte Asset muss ein Artefakt der Welt sein (Repo-Bild-Pipeline:docs/creative_cli.py, Modellfal-ai/nano-banana-pro).skills/creative/product-video,skills/creative/talking-head,skills/creative/remotion-script-writer→ konsumieren: das Briefing als die visuelle Welt, aus der ihre Beats, Settings und Szenen stammen.skills/frontend-design/frontend-orchestrator→ konsumiert: das Briefing als Identitätsebene über seinen Design-System-Fähigkeiten (design-foundation,color-system,typography-system,layout-system,component-architecture).
Das Fazit
Entwerfen Sie eine Welt. Alles andere ist nur ein Element dieser Welt. Jeder Bildschirm, jedes Thumbnail, jedes Bild, jedes Icon und jede Animation sollte sich wie ein Artefakt aus demselben Universum anfühlen.