fuzzyplace/living-stage

Living stage: geführte Einrichtung

Du hilfst jemandem, seine eigene Version dieser Website zu erstellen: eine Figur mit einem eigenen Leben, Arme, die die Seite beim Scrollen drucken, deren Geschichte in ihren eigenen Worten. Die Engine funktioniert bereits. Deine Aufgabe ist es, sie zu kopieren, sie zu interviewen und an fünf Stellen auszufüllen. Schreibe keinen Engine-Code.

Die fünf Stellen, die ihnen gehören

Was	Datei
Wörter: Name, Tagline, Kapitel, Call-to-Action, Easter Eggs	src/content/site.ts
Links im Link-Baum	src/content/links.ts
Das Aussehen des Charakters	src/content/character.tsx (Voreinstellungen in src/art/looks.tsx)
Palette, Schriftart, Bewegung	design/tokens.json, gespiegelt in src/styles/tokens.css
Teilen-Bild und Icon	npm run og (aus den obigen generiert)

Du schreibst die Entscheidungen des Interviews auch in docs/STORY.md, und du darfst src/art/looks.tsx lesen, um eine voreingestellte Optik in src/content/character.tsx zu kopieren.

Alles andere (src/art/, src/audio/, src/components/, src/sections/, src/App.tsx) ist die Engine. Lies es nicht, um diese Aufgabe zu erledigen; es ist groß und du wirst es nicht brauchen. Lies docs/CHARACTER.md für die Aussehens- und Überschriftenregeln und docs/DESIGN_SYSTEM.md, bevor du Token anfasst. Öffne Engine-Dateien nur, wenn eine Prüfung fehlschlägt und der Fehler darauf hinweist.

Schritt 0: Code holen (schnell, keine Generierung)

Wenn der aktuelle Ordner bereits eine Kopie der Vorlage ist (er enthält src/content/site.ts und .claude/skills/living-stage/), überspringe Schritt 1.

Frage andernfalls, wo die neue Website leben soll (ein Ordnername), kopiere dann die Vorlage ohne ihre Historie und installiere sie:

npx degit fuzzyplace/lil_guy_portfolio meine-site
cd meine-site
git init
npm install

Starte dann den Dev-Server (npm run dev oder das Vorschau-Tool, falls vorhanden) und zeige ihnen die Beispielseite, damit sie wissen, was sie erstellen. Wenn du keinen Dev-Server ausführen oder ansehen kannst, verwende stattdessen Screenshots: npm run build && npm run verify schreibt screenshots/verify-desktop-hero.png (der Held, mitten im Stunt) und Freunde, und npm run looks schreibt Nahaufnahmen jedes Aussehens. (Erstes Mal: npx playwright install chromium.) Sage ihnen in zwei Zeilen, was als Nächstes passieren wird: ein kurzes Interview, eine Frage nach der anderen, dann baust du es, prüfst es und (mit ihrer Zustimmung) veröffentlichst du es.

Schritt 1: das Interview

Wie zu entscheiden ist (das ist am wichtigsten)

Entscheide von oben nach unten, eine Ebene nach der anderen, und frage niemals nach einer unteren Ebene, bevor die darüber festgelegt ist. Visuelles, das abgeschlossen ist, bevor die Geschichte und die Stimme festgelegt sind, führt zu Texten, die keinen Sinn ergeben.

1. Absicht: für wen die Seite ist, was sie fühlen sollen und was sie am Ende tun sollen.
2. Geschichte: der Bogen, von oben nach unten scrollend.
3. Textstil: Stimme, Satzform, Rahmengeräte.
4. Struktur: die Blöcke (Kapitel, ein Pop-out, Kontakt) und wofür jeder ist.
5. Zeilen: die eigentlichen Wörter, zuerst die Tagline.
6. Charakter: wie er aussieht.
7. Palette, Schriftart und Bewegung.
8. Links: der Link-Baum und der Call-to-Action.

Schreibe jede festgelegte Ebene in docs/STORY.md unter "LOCKED" (ersetze dabei die Einträge der Beispielpersona nach und nach). Alles darunter muss darauf zurückzuführen sein. Wenn eine spätere Idee einer festgelegten Ebene widerspricht, sage es und frage, bevor du etwas änderst.

Wie zu fragen ist

• Eine Frage nach der anderen, in einfachem Chat-Text. Keine Formulare oder Dialoge mit mehreren Fragen.
• Vor jeder Frage, sage in einer Zeile, was sie entscheidet und was sie auf der Seite ändert.
• Zeigen, nicht beschreiben. Gib für Stil- und Aussehensfragen 3 oder 4 Optionen, jede auf ihren echten Inhalt geschrieben: die gleichen drei Momente jedes Mal (der Anfang, ein Kapitel, das Ende). Für den Charakter zeige die Voreinstellungen (?look=beanie|bun|hood|bot auf dem Dev-Server, oder npm run looks für Nahaufnahmen). Für Paletten zeige Farbfelder mit der Textfarbe auf dem Hintergrund.
• Empfehle eine Option und sage warum in einem Satz. Sie wählen, mischen oder lehnen ab.
• Nach jeder Antwort, wiederhole in einer Zeile, was jetzt festgelegt ist, schreibe es in docs/STORY.md, dann stelle die nächste Frage.
• "Deine Entscheidung" bedeutet, du entscheidest, protokolliere es unter "Entscheidungen" in docs/STORY.md und fahre fort.
• Behalte ein laufendes Kostenbewusstsein: lies keine Dateien, die du bereits gelesen hast, generiere nicht die gesamte Seite für jede Antwort neu, bearbeite nur die Zeilen, die sich geändert haben.

Was zu fragen ist, Ebene für Ebene

1. Absicht. Für wen ist das (Personalverantwortliche, Kunden, Mitarbeiter, Freunde)? Was sollen sie fühlen? Was ist das eine, was sie am Ende tun sollen (E-Mail, einen Anruf buchen, folgen, nichts)?
2. Geschichte. Frage zuerst nach dem Rohmaterial (was sie getan haben, jetzt tun, als Nächstes wollen, alles, was sie nebenbei machen), schlage dann 2 oder 3 Bögen in je einer Zeile vor. Der Standardbogen ist Vergangenheit, Gegenwart, ein Pop-out mit dem roten Faden, Zukunft, Kontakt; jede Reihenfolge von Kapiteln und Pop-outs funktioniert.
3. Textstil. Biete 3 oder 4 Stimmen an, die auf ihrem eigenen Material dargestellt werden, zum Beispiel: ruhige erste Person; Laborheft; Feldnotizen; Terminal-Log; oder eine Mischung. Empfehle eine.
4. Struktur. Die Liste der Blöcke, jeder mit seiner Aufgabe in einer Zeile, plus welche in der Kopfzeilen-Navigation erscheinen. Ein Block muss der Kontaktblock sein.
5. Zeilen. Schreibe jede Zeile in der festgelegten Stimme vor, zeige sie dann zusammen im Kontext (der Dev-Server, nachdem du site.ts geschrieben hast). Hol zuerst die Tagline richtig: lies "Überschriften" in docs/CHARACTER.md (2 bis 4 kurze Zeilen, ein echtes Wort in der ersten Zeile, große Buchstaben neben kurzen, ein Komma am Zeilenende; maximal 24 Zeichen pro Zeile). Auch: die Augenbraue, der Lede, das Footer-Easter-Egg, das Konsolen-Easter-Egg, die zwei Vertrauenszeilen, die 404-Zeile. Entwurfstext ist in Ordnung; nichts wird veröffentlicht, bis sie es genehmigen.
6. Charakter. Zeige die vier Voreinstellungen. Wenn keine passt, frage nach einer Ein-Satz-Beschreibung (Haare oder Hut, Kleidung, das eine, was das Licht einfängt) und zeichne eine individuelle Optik, indem du die nächste Voreinstellung in src/content/character.tsx kopierst und eine Form nach der anderen änderst. Folge den Box-, Gelenk- und Füllregeln in docs/CHARACTER.md. Zeichne niemals ein Foto oder das Abbild einer realen Person nach, es sei denn, es ist ihr eigenes und sie bitten darum. Die Voreinstellungen teilen parts.NECK und parts.SKULL (exportiert aus src/art/looks.tsx). Zeige das Ergebnis mit npm run looks (screenshots/look-current.png).
7. Palette, Schriftart und Bewegung. Biete 3 Paletten als Farbfelder an (die Standard-Tintengraustufen und zwei, die zu ihrer Geschichte passen), die Akzentfarbe und ob die Standardschriftarten beibehalten werden sollen. Bearbeite design/tokens.json zuerst, spiegele jede geänderte Farbe in src/styles/tokens.css (nur die Grauskala hat dort --md-ref-gray-* Variablen; jede andere Farbe sitzt direkt auf ihrem --md-sys-color-<Rolle>), dann npm run tokens:contrast: es prüft Textkontrast (4.5:1) und dass die beiden Dateien übereinstimmen. Der Nebel (fog-light, fog-mid, fog-deep, fog-edge) trägt die Stimmung der Palette: färbe alle vier. Halte den Akzent einen Hauch (docs/DESIGN_SYSTEM.md). Bewegung: Standard- Dauern oder ruhigere (längere).
8. Links. Frage nach jedem Link und wohin er geht (Connect, Work, Play oder umbenannte Gruppen). Echte URLs nur: alles, was sie noch nicht haben, ist href: null, status: 'soon' (wird in der Entwicklung angezeigt, in der Produktion ausgeblendet). Dann der Call-to-Action: ein Buchungslink, eine E-Mail oder ein Profillink.

Schritt 2: bauen und prüfen

1. Schreibe die Inhaltsdateien aus dem, was festgelegt ist. Setze site.url auf die Adresse, unter der die Seite leben wird (https://host, ohne abschließenden Schrägstrich). Noch keine Domain: verwende die Adresse des Hosts (z. B. https://ihre-seite.vercel.app) und aktualisiere sie später.
2. Führe npm run check aus (Typen, Tests einschließlich der Textregeln, Kontrast und Token-Abweichung, Build). Behebe, was fehlschlägt. Der Build warnt, während site.url noch auf die Demo der Vorlage zeigt (lil-guy-portfolio.vercel.app) oder der Call-to-Action auf example.com. Die Textregeln: keine em- oder en-Gedankenstriche, keine Ausrufezeichen, keine Standard-Füllwörter.
3. Führe npm run og für die Teilen-Karte und das Icon aus.
4. Führe npm run build && npm run verify aus (erstes Mal: npx playwright install chromium). Es prüft bei 1440 und 375, mit und ohne reduzierte Bewegung, dass der Charakter beim Laden erscheint, den Eintritt und den Titel-Stunt macht, beim Scrollen auf dem Bildschirm bleibt und dass nichts fehlerhaft ist. Wenn kein Stunt abgespielt wird, gibt die Tagline ihm nichts, worauf er stehen kann: überarbeite sie mit ihnen.
5. Zeige ihnen die Screenshots (screenshots/verify-desktop-hero.png und verify-mobile-hero.png für den Helden mitten im Stunt, verify-desktop.png und verify-mobile.png für das Ende der Seite) und den Dev-Server und frage, was geändert werden soll. Wiederhole, bis sie zufrieden sind. node scripts/shots-sections.mjs gibt einen Schnappschuss pro Kapitel.
6. Datenschutz-Durchgang. Lies jeden String in src/content/ noch einmal. Markiere alles, was sie möglicherweise nicht öffentlich haben möchten: eine Privatadresse, eine persönliche Telefonnummer oder E-Mail, die sie nicht teilen möchten, Familien- oder Gesundheits- details, Arbeitgeber oder Kunden, die sie nicht freigegeben haben. Entferne die Überreste der Beispielpersona: "Pim Lanternby", "PIM", "The Quiet Hour", Lampen- und Radiozeilen und alle example.com, example.org oder example.net Links, die sie dir nicht selbst gegeben haben, und die Demo-Adresse lil-guy-portfolio.vercel.app.

Schritt 3: veröffentlichen

Beim Veröffentlichen wird ihre Seite veröffentlicht, also frage vorher. Folge docs/DEPLOY.md (standardmäßig Vercel; Netlify und GitHub Pages funktionieren auch). Nachdem sie live ist, öffne die URL, überprüfe die Teilen-Karte mit dem veröffentlichten og.png und gib ihnen den Link.

Beende mit einer kurzen Zusammenfassung: was live ist, was noch soon ist und alles, was sie gesagt haben, dass sie später schicken würden.