Website Concept Architect
Pre-Code-Konzeptdesign für persönliche Websites, Portfolios und Landingpages. Dieser Skill produziert Richtung, nicht Markup. Das Ergebnis ist eine kleine Sammlung von unterschiedlichen Konzeptdokumenten, aus denen der Nutzer wählt; das ausgewählte Dokument speist ui-ux-architect für die Implementierung.
Wann verwenden
Der Nutzer startet eine neue Website und möchte entscheiden, was sie ist, bevor er Code schreibt. Nicht für Überarbeitungen bestehender Websites, es sei denn, das Briefing lautet "von Grund auf neu denken". Nicht für Komponentenentscheidungen auf UI-Ebene – diese gehören zu ui-ux-architect.
1. Arbeitsprinzip – Schritt für Schritt, nicht alles auf einmal
Führen Sie die sechs Phasen interaktiv, eine nach der anderen durch. Präsentieren Sie nach jeder Phase das Menü, pausieren Sie, warten Sie auf die Auswahl des Nutzers und fahren Sie dann fort. Fassen Sie niemals mehrere Phasen in einer einzigen Frage zusammen. Überspringen Sie niemals Phasen, selbst wenn der Nutzer Informationen freiwillig preisgibt – präsentieren Sie das Gesagte als vorausgewählte Voreinstellung und bestätigen Sie es.
Der Sinn des schrittweisen Vorgehens ist es, Entscheidungen zu erzwingen, die der Nutzer sonst aufschieben würde. Das Überspringen einer Phase führt später zu einem vagen Konzeptdokument.
2. Die sechs Phasen
| # | Phase | Zweck | Ausgabe |
|---|---|---|---|
| 1 | Zweck | Wofür ist die Website da? | 1-2 Auswahlen aus der Archetyp-Liste |
| 2 | Zielgruppe | Wer liest sie? | 1-2 Auswahlen, bestimmt Ton & Informationsdichte |
| 3 | Inhaltsverzeichnis | Was lebt auf der Website? | Abgehaktes Menü der Abschnitte |
| 4 | Ton & Persönlichkeit | Wie fühlt sie sich an? | 2-3 Adjektive aus einer kuratierten Liste |
| 5 | Visuelle Richtung | Wie sieht sie aus? | 1 Archetyp (vorgeschlagene Rangfolge, vollständige Liste gezeigt) |
| 6 | Synthese | Konzeptdokumente | 2-3 unterschiedliche Konzeptrichtungen + ASCII-Wireframe |
3. Phase 1 – Zweck
Präsentieren Sie diese Archetypen. Der Nutzer wählt 1-2 (kombinierbar, z.B. Portfolio + Schreib-Hub):
- Portfolio / Schaukasten – Arbeitsergebnisse stehen im Mittelpunkt; Projekte sind das Rückgrat der IA.
- Schreib-Hub – Aufsätze / Blog / Notizen sind das Rückgrat; alles andere ist Navigation.
- Professionelle Visitenkarte – Einseitig oder fast einseitig; Personalvermittler / Kunden landen, erfahren, kontaktieren.
- Digitaler Garten – Immergrüne, verlinkte Notizen; Struktur ist das Netzwerk, nicht die Chronologie.
- Projekt-Starter – Ein bestimmtes Produkt oder Projekt ist der Held; "Über mich" ist eine Fußnote.
- Experimenteller Spielplatz – Die Website selbst ist ein kreatives Artefakt; Konvention ist der Feind.
Wenn der Nutzer 2 inkompatible Archetypen wählt (z.B. experimenteller Spielplatz + professionelle Visitenkarte), weisen Sie darauf hin und fragen Sie, welcher auf der Startseite gewinnt – der Verlierer wird zu einem Unterabschnitt.
4. Phase 2 – Zielgruppe
Die Auswahl bestimmt, wie viel Erklärung die Dinge brauchen und welche Stimme passt.
- Personalvermittler / Kunden – Schnelles Überfliegen, qualifikationsorientiert, wenig Fachjargon, Kontakt offensichtlich.
- Mitentwickler / Kollegen – Setzt gemeinsames Vokabular voraus, toleriert Dichte, Codebeispiele kommen an.
- Freunde / Community – Informell, persönlichkeitsorientiert, Insider-Witze in Ordnung.
- Zukünftiges-Ich / Archiv – Zum Durchsuchen der eigenen Vergangenheit gebaut, Dichte vor Poliertheit.
- Das offene Web – Generischer Besucher, muss sich selbst erklären, SEO ist wichtig.
Mehrere Zielgruppen sind normal. Wenn der Nutzer 3+ auswählt, fragen Sie, für welche die Startseite optimiert ist – die anderen werden auf Unterseiten berücksichtigt.
5. Phase 3 – Inhaltsverzeichnis
Präsentieren Sie dieses Menü. Der Nutzer markiert, was er möchte; bieten Sie an, benutzerdefinierte Elemente hinzuzufügen.
Standard-Abschnitte:
- Über / Bio
- Now-Seite (woran Sie gerade arbeiten)
- Projekte-Index
- Einzelne Projekt-Case-Studies
- Aufsätze / Blog / Schreiben
- Notizen / Digitaler Garten / Wiki
- Leseliste / Bücherregal
- Uses-Seite (Tools, Hardware, Setup)
- Lebenslauf / CV (oder Link zu PDF)
- Kontakt (E-Mail, Social, Formular)
- Newsletter-Anmeldung
- RSS / Atom-Feed
- Changelog (Website- oder Lebens-Updates)
- Fotogalerie
- Vorträge / Podcasts / Auftritte
- Gästebuch / Webring (Retro-Web-Ästhetik)
Für jeden ausgewählten Abschnitt fragen Sie eine Folgefrage: Gibt es das schon? Abschnitte ohne Inhalt werden im Konzeptdokument als [verschoben] markiert, damit der Nutzer keine leeren Seiten veröffentlicht.
6. Phase 4 – Ton & Persönlichkeit
Wählen Sie 2-3 Adjektive. Diese verankern die visuellen Vorschläge von Phase 5 und die Textstimme von Phase 6.
Präsentieren Sie sie als gegensätzliche Paare, damit die Auswahl Kompromisse erzwingt:
- minimal ↔ dicht
- verspielt ↔ ernst
- warm ↔ klinisch
- roh ↔ poliert
- intim ↔ öffentlich
- experimentell ↔ konventionell
- schnell / überfliegbar ↔ kontemplativ / langformatig
- selbstbewusst ↔ selbstironisch
Ein Nutzer, der minimal + verspielt + warm wählt, bekommt ganz andere Vorschläge als einer, der dicht + ernst + klinisch wählt. Notieren Sie die Auswahl wörtlich – sie geht als Briefing in das Konzeptdokument ein.
7. Phase 5 – Visuelle Richtung
Acht Archetypen. Ranken Sie die Top 3 nach Passung basierend auf den Phasen 1-4, zeigen Sie aber die vollständige Liste, damit der Nutzer überschreiben kann.
| Archetyp | Gefühl | Passt, wenn Phasen 1-4 sagen... | Referenzseiten |
|---|---|---|---|
| Terminal / CLI | Monospace, sparsam, Kommandozeile | Entwickler-Zielgruppe, minimal, roh, Archiv | sive.rs, wiki.nikiv.dev, ratfactor.com |
| Redaktionell / Swiss | Starke Typografie, Raster, großzügige Leerräume | poliert, ernst, professionelle Visitenkarte | rauno.me, paco.me, linear.app |
| Brutalistisch | Rohes HTML, Standard-Stile, kein Chrome | experimentell, roh, intim, Entwickler-Zielgruppe | brutalist-web.design, motherfuckingwebsite.com |
| Zine / maximalistisch | Collage, gemischte Schriften, geschichtete Texturen | verspielt, experimentell, Community-Zielgruppe | cassie.codes, lynnandtonic.com |
| Minimalistisches Portfolio | Einspaltig, große Bilder, viel Weißraum | Portfolio, poliert, Personalvermittler/Kunden | Viele Designer-Portfolios |
| Notizbuch / Garten | Wiki-ähnlich, dicht verlinkt, immergrün | Digitaler Garten, Archiv-Zielgruppe, dicht | gwern.net, andymatuschak.org |
| Magazin / Geschichte | Lang scrolldende Erzählung, art-directed, Hero-Bilder | Projekt-Starter, kontemplativ, offenes Web | Pitchfork.com Longreads, The Verge Features |
| Datenbank / Index | Filterbare Tabelle, fast eine UI | dicht, Archiv, viele Artefakte | are.na profiles, Derek Sivers' /now Verzeichnis |
Zeigen Sie das Ranking mit einer ein-sätzigen Begründung pro Wahl, z.B. "Terminal/CLI passt, weil Sie Entwickler-Zielgruppe + minimal + roh gewählt haben." Der Nutzer wählt einen aus; wenn er das Ranking überschreibt, fragen Sie nach dem Grund und notieren Sie ihn (die Überschreibung offenbart oft eine zuvor nicht aufgetretene Einschränkung).
8. Phase 6 – Synthese
Produzieren Sie 2-3 unterschiedliche Konzeptrichtungen, nicht nur eine. Selbst wenn der Nutzer sich bereits entschieden hat, zeigen Alternativen auf, worauf sie verzichten.
Form des Konzeptdokuments
Schreiben Sie für jede Richtung ein Markdown-Dokument mit diesen Abschnitten:
# Konzept: <Name>
## Ein-Satz-Pitch
<Die Website in 15 Wörtern oder weniger>
## Kurzbeschreibung
- Zweck: <Phase-1-Auswahl>
- Zielgruppe: <Phase-2-Auswahl, primäre zuerst>
- Ton: <Phase-3-Adjektive>
- Visueller Archetyp: <Phase-5-Auswahl>
## Informationsarchitektur
<Baum der Seiten/Abschnitte, maximal 2 Ebenen tief>
## Startseiten-Strategie
<Was die Startseite tut in 2-3 Sätzen – erster Eindruck, primäre Aktion, was der Besucher weiß, wenn er geht>
## Beispiel-Textstimme
<2-3 Sätze in der gewählten Stimme – Über-mich-Einleitung oder Startseiten-Tagline + Untertitel>
## Was dieses Konzept opfert
<Ehrliche Liste dessen, was gegenüber den anderen Konzepten abgewertet wird – jedes Konzept tauscht etwas ein>
## ASCII-Startseiten-Wireframe
<siehe §9>
Die drei Richtungen sollten sich auf einer echten Achse unterscheiden, nicht nur kosmetische Varianten sein:
- Konzept A = Die naheliegende Interpretation der Nutzerauswahl
- Konzept B = Optimiert stärker auf die primäre Zielgruppe (oft minimalistischer)
- Konzept C = Eine bewusste Dehnübung – was wäre, wenn der experimentelle Dreh noch eine Stufe weiter ginge?
Wenn zwei der drei am Ende fast identisch sind, streichen Sie eine und erklären Sie, warum.
9. ASCII-Startseiten-Wireframe
Eines pro Konzept. Halten Sie es 80 Spalten breit, beschriften Sie Bereiche mit [Klammern]. Zeigen Sie Hierarchie mit Box-Zeichnungen oder einfachen Strichen.
Beispiel für ein Terminal/CLI-Portfolio:
+------------------------------------------------------------------------------+
| ~ example.dev [now] [writing] [/] |
+------------------------------------------------------------------------------+
| |
| jane doe |
| backend developer · tooling · open-source CLIs |
| |
| > currently building a small build-cache tool in Go |
| |
| --- recent ---------------------------------------------------------- |
| 2026-05-18 shipped: cachetool v0.3 |
| 2026-05-02 essay: why I keep my tools in one repo |
| 2026-04-21 project: build-cache internals |
| |
| --- projects -------------------------------------------------------- |
| cachetool incremental build cache [→] |
| notes short write-ups on tooling [→] |
| |
+------------------------------------------------------------------------------+
| email · github · rss |
+------------------------------------------------------------------------------+
Wireframes drehen sich um Proportion und Hierarchie, nicht um Pixel-Layout. Keine Farben, keine Schriften, keine Icons außer ASCII. Wenn ein Abschnitt einer Erklärung bedarf, fügen Sie eine einzeilige Notiz unterhalb des Wireframes hinzu, nicht darin.
10. Anti-Patterns
- Phasen überspringen, weil "der Nutzer es bereits gesagt hat". Präsentieren Sie seine Eingabe als Standard und bestätigen Sie sie; gehen Sie nicht davon aus. Die Hälfte des Wertes liegt darin, den Nutzer zu zwingen, sich das anzusehen, was er nicht gesagt hat.
- Ein Konzeptdokument statt 2-3. Alternativen sind, wie der Nutzer versteht, was er wählt. Eine Ein-Konzept-Ausgabe ist ein fehlgeschlagener Durchlauf.
- Visueller Archetyp vor Tonfestlegung. Die Phasenreihenfolge ist wichtig – Visuelles folgt aus Zweck/Zielgruppe/Ton, nicht parallel.
- Inhalte für
[verschoben]-Abschnitte erfinden. Wenn der Nutzer die Aufsätze nicht geschrieben hat, erfinden Sie keine Themenlisten – das Konzeptdokument verpflichtet sich zu Struktur, nicht zu Inhalt. - Wireframes mit Implementierungsdetails. Kein "shadcn Card hier verwenden" – das ist Aufgabe von ui-ux-architect. Wireframes zeigen, was wohin kommt.
- Generische Vorschläge. "Ein sauberes modernes Portfolio" ist kein Konzept. Jedes Konzeptdokument muss sich auf spezifische Auswahlmöglichkeiten auf jeder Achse festlegen.
11. Übergabe
Sobald der Nutzer eines der 2-3 Konzepte ausgewählt hat, dient das Konzeptdokument als Briefing für:
- ui-ux-architect – für Tokens, Komponenten, Barrierefreiheit, die vier erforderlichen Zustände.
- Den integrierten
frontend-designSkill – für den eigentlichen Code, wenn es in Produktion gehen soll.
Das Konzeptdokument sollte im Projekt-Repository gespeichert werden (z.B. docs/concept.md), damit es als Designbegründung erhalten bleibt.
12. Skill-übergreifende Verknüpfungen
- ui-ux-architect – Implementierungsstandards; dieser Skill liefert das Briefing.
- demo-presentation-architect – ähnliche interaktive Schritt-für-Schritt-Struktur, andere Domäne.
- demo-script-architect – narrative Prinzipien (zielgruppenorientiert, progressive Enthüllung) gelten auch für den Text der Startseite.