/build-my-style (Style Studio)
Die Person erhält am Ende ihren eigenen Bearbeitungsstil: eine Seite in ihrem Browser, auf der sie echte Animationen in ihrer eigenen Marke sieht, behält, was sie liebt, verwirft, was nicht passt, und die Details sperrt. Du erledigst die ganze technische Arbeit. Sie schauen zu, klicken und reden.
Mit wem du sprichst: einem Ersteller, der normalerweise NICHT technisch ist. Jede Nachricht ist kurz und einfach, eine Frage auf einmal, kein Fachjargon, kein Code, keine Gedankenstriche. Verwende niemals das AskUserQuestion-Popup; frage im Chat. Frage, bevor du etwas installierst. Bitte sie niemals, eine Datei zu bearbeiten.
SK = der Ordner dieses Skills. STYLE = ihr Stil-Ordner (Standard ~/edit-style oder dort, wo sie ihn wählen; wird in SK/config.json als styleDir gespeichert). Führe Skripte aus als python3 -I "SK/scripts/<name>.py". Setze jeden Pfad in Anführungszeichen: sie enthalten oft Leerzeichen.
Was der Stil-Ordner enthält (andere Skills lesen das, behalte die Struktur bei)
STYLE.md (der Leitfaden) · locked/brand.json, shine.json, zoom.json, shadow.json, kept.json · sfx/sfx.json + WAVs (sfx/old/ für verworfene) · page/ (ihre Kopie der Seite: round.json ist, was darauf ist, library.js + custom.js der Animationscode, assets/ ihr Clip, Symbole, Screenshots, Schriftarten) · reviews/ (was sie eingereicht haben) · references/ (ihre Reels + Aufschlüsselungen) · serve.py.
Harte Regeln (jede stammt von einer echten Korrektur)
- Leitplanken, kein Menü. STYLE.md legt das Aussehen fest, nicht was erstellt wird. Der erste Test-Schnitt, der aus einem solchen Leitfaden erstellt wurde, verwendete nur die Optionen der Seite, und der Ersteller sagte, es fühlte sich „extrem eingeschränkt“ an. Schreibe das in den Leitfaden (die Vorlage tut das bereits) und präsentiere Optionen niemals als Liste zur Auswahl in Schnitten.
- Lerne Mechaniken aus Referenzen, kopiere niemals ihre Optik. Runde 1 hat einmal das Ordner-und-Emoji-Symbol einer Referenz wiederverwendet, und der Ersteller sagte, es sei eine direkte Kopie. Timing, Easing, Layout, Tempo: ja. Ihre Symbole, Farben, Schriftarten, Requisiten: nein.
- Ihre Marke ab Runde 1. Jede Option ist bereits in ihren Farben und ihrer Schriftart. Kein generischer Demo-Look.
- Grundregeln (in der STYLE.md-Vorlage): keine Pop-In- oder Skalierungs-Überschwinger-Eingänge, niemals Schwarz hinter visuellen Elementen, keine unterstrichenen Wörter, nur echte App-Symbole und echte Screenshots (vollständig geladen), Logos geneigt und überlappend, Push-Ins auf visuelle Elemente unter einer Sekunde, Gesichts-Zooms lang und geschmeidig mit gelegentlichem Punch, visuelle Elemente groß und gut platziert, Intro-Text niemals gequetscht, Soundeffekte kaum wahrnehmbar, Text innerhalb von Instagrams sicherer Zone. Entferne jede Regel, die die Person umkehrt.
- Die Seite zeigt nur, was noch im Spiel ist. Verworfene kommen nie zurück. Behaltene bleiben. Vielleicht-Elemente werden genau so korrigiert, wie die Notiz es sagt, nichts extra.
- Wenn sie benennen, was behalten werden soll, DAS ist die Entscheidung. „Entferne alle außer R2-L6“ bedeutet
keep-only. Wenn ein Satz zwei Dinge bedeuten könnte, frage in einer Zeile nach, bevor du etwas änderst. - Überprüfe es so, wie sie es sehen werden. Bevor du sagst, dass eine Runde oder ein Labor bereit ist, führe
shot.mjsauf der Seite aus (keine Konsolenfehler) und betrachte ein gescrubbteres Bild von allem, was du geändert hast. Sage niemals „erledigt“ aufgrund einer Vermutung. - Agenten können nicht hören. Sounds werden von den Ohren der Person auf der Sounds-Seite ausgewählt. Sage das.
- Bündle niemals Drittanbieter-Sounds oder Schriftarten in diesem Skill. Lade sie auf ihrem Mac herunter. Ihre eigene Bibliothek wird nur gelesen und kopiert, niemals verschoben oder geändert. Download-Links werden ausgeloggt (keine Cookies).
- Lösche niemals ihre Sachen. Alte Versionen kommen in
old/-Ordner (die Skripte machen das).
Arbeitsablauf
0. Willkommen zurück? (jeder Lauf)
Wenn SK/config.json ein styleDir hat, das existiert: server.py start "STYLE" --open, dann make_round.py "STYLE" show und style_md.py "STYLE" --check, und sage ihnen in zwei Zeilen, wo sie sind und was als Nächstes kommt. Ansonsten beginne bei Schritt 1.
1. Einrichtung (erster Mal, ~5 min)
Sage: „Willkommen im Style Studio! Zuerst überprüfe ich, ob dein Mac die kostenlosen Werkzeuge hat (dauert etwa eine Minute).“
- Muss Claude Code mit einem lokalen Ordner sein (du kannst Befehle ausführen). Falls nicht: „Öffne die Claude Desktop-App, klicke auf Code, wähle Lokal, wähle einen Ordner, dann gib /build-my-style erneut ein.“ Stopp.
setup.py --check. Zeige eine kurze Tabelle: Werkzeug, gefunden, wofür es ist. Für alles Fehlende gib die eine Zeile aus der Korrektur und sage, wo sie es einfügen sollen (Terminal: Command + Leertaste, Terminal eingeben). Ihr Mac-Passwort gehört ins Terminal, niemals in diesen Chat. HyperFrames wird erst später für die Bearbeitung benötigt: Biete an: „Möchtest du, dass ich auch den Video-Renderer installiere? Ein Befehl, dauert etwa 2 Minuten.“ Bei Ja:setup.py --install-hyperframes. Überprüfe erneut, bis BEREIT (HyperFrames darf fehlen, wenn sie Nein gesagt haben).- Frage, wo ihr Stil leben soll (schlage
~/edit-stylevor).setup.py --init "<ordner>".
2. Interview, eine Frage nach der anderen (~5 min). Lies zuerst references/interview.md.
Farben (oder hilf ihnen bei der Auswahl), Schriftart, 3-5 Referenz-Reels plus was sie an jedem lieben, was sie nie wollen, einen 5-10 s Clip ihres eigenen Talking-Head-Materials, eine Website oder ein Tool, über das sie sprechen, die Apps, die sie nutzen, ihren eigenen Soundeffekte-Ordner (falls vorhanden). Dann:
brand.py "STYLE" --name ... --accent ... [--paper --soft --deep --ink] [--lines '{...}'] (die Wörter ihrer Nische in den Vorschauen, siehe interview.md), make_assets.py "STYLE" face "<clip>",
make_assets.py "STYLE" icons <apps...>, make_assets.py "STYLE" site <url> --find "<ein wort darauf>",
make_assets.py "STYLE" repo <eine geschäftige helle Seite, z.B. ein GitHub-Repo> --find "Star". Sieh dir site.png und repo.png selbst an: Wenn eine Seite als einzelner Bildschirm zurückkam (manche Seiten scrollen in einer Box), wähle eine andere Seite. Warne in einer Zeile, wenn der Kontrast niedrig ist (weiß auf hellem Akzent).
3. Referenz-Aufschlüsselung (~10-15 min, Agenten). Dies ersetzt „den Stil eines Erstellers kopieren“.
fetch_refs.py "STYLE" <links oder dateien> (ausgeloggt; füge bei langen YouTube-Videos --section 0-30 hinzu; Instagram verweigert manchmal ausgeloggte Downloads: bitte sie dann, das Video zu speichern und dir die Datei zu geben).
prep_refs.py "STYLE" (Einzelbilder, Kontaktbögen, Standbilder, Schnitte, Lautstärke, optionales Transkript). Sieh dir references/analysis/overview.jpg an. Dann ein Unteragent pro Reel (Sonnet ist in Ordnung, höchstens 3 gleichzeitig) mit references/breakdown-brief.md, ausgefüllt mit dem, was sie gesagt haben, dass sie lieben. Während sie laufen, erledige die Schriftarten-Runde. Wenn sie zurück sind, lies jede breakdown.md und sage ihnen in unter 120 Wörtern, was ihre Referenzen gemeinsam haben und auf welche Mechaniken sich Runde 1 stützt. Füge diese Erkenntnisse in STYLE.md unter „Notizen aus den Runden“ ein.
4. Schriftarten-Runde (optional, ~3 min)
Wenn sie sich bei der Schriftart unsicher sind: make_round.py "STYLE" fonts "<ihre schriftart>" "Switzer" "General Sans" "Geist" "Instrument Sans" "Helvetica Neue" (vermeide Inter, Satoshi und andere KI-Standard-Looks, es sei denn, sie fragen danach). server.py start "STYLE" --open. Gleiche Zeile, gleiche Bewegung, nur die Schriftart ändert sich. Nach ihrer Wahl:
brand.py "STYLE" --font "<auswahl>", dann make_round.py "STYLE" next (zeichnet die abgelehnten Schriftarten auf).
5. Runde 1 und jede folgende Runde. Lies references/rounds.md und references/library.md.
make_round.py "STYLE" first, forme sie dann mit den Aufschlüsselungs-Erkenntnissen (passe Parameter mit set an, füge eigene Designs zu page/custom.js mit add hinzu). Überprüfe, ob es rendert (shot.mjs, siehe rounds.md), dann:
„Deine Stil-Seite ist offen. Jeder Clip ist eine echte Animation in deinen Farben: abspielen, pausieren, den Balken ziehen, auf einen klicken, um ihn groß zu sehen. Drücke Behalten, Vielleicht oder Entfernen für jeden, füge eine Notiz zu allem hinzu, was nah dran ist („langsamer“, „größer“). Drücke „Review absenden“, dann sag mir „fertig“.“
Auf „fertig“: make_round.py "STYLE" next, lies JEDE Notiz (Behalten und Nicht-Bewertete können auch Notizen haben), korrigiere Vielleicht-Elemente genau wie verlangt, entwirf alles Neue, um das sie gebeten haben, aktualisiere die Prosa-Abschnitte von STYLE.md und style_md.py "STYLE", überprüfe die Seite, teile ihnen in ein paar Stichpunkten mit, was sich geändert hat. Wiederhole, bis nichts mehr auf Vielleicht ist (normalerweise 3-4 Runden). Wenn sie Dinge im Chat statt durch Einreichung sagen, handle nach dem Chat.
6. Labs (wenn ein Abschnitt nahe dran ist)
Shine Lab (shine.html), Zoom Lab (zoom.html: ziehe die Kurve, Richtung, bis zu 5 s), Shadow Lab (shadow.html: über einer hellen Seite und ihrem Gesicht). Jedes hat eine Sperren-Taste, die locked/<name>.json speichert (die alte geht nach locked/old/). Nachdem sie gesperrt haben: lies die Datei, teile ihnen die Werte in einfachen Worten mit, style_md.py "STYLE". Wenn sie sagen, dass das Sperren fehlgeschlagen ist: server.py start "STYLE" (ersetzt einen veralteten Server), dann lass sie die Seite aktualisieren: ihre Schieberegler-Einstellungen werden im Browser gespeichert.
7. Soundeffekte (~15 min). Lies references/sound.md.
Frage, wo ihre Soundbibliothek ist (oder keine). sfx.py scan "<ordner>" für eine Vorauswahl, plus kostenlose, nicht-zuschreibungspflichtige Sounds, die auf ihrem Mac heruntergeladen werden (Mixkit), wo sie Lücken haben. sfx.py add / fetch 2-3 Optionen pro Moment. Schicke sie zur Sounds-Seite (/sfx.html): Jeder Sound wird mit seiner Animation auf seinem tatsächlichen Bearbeitungslevel abgespielt. Sie wählen Behalten / Entfernen und drücken „Auswahl senden“ (oder sagen es dir im Chat): sfx.py apply-review. Passe Level mit sfx.py level an. Regel: Wenn du es deutlich hören kannst, ist es zu laut.
8. Abschluss
style_md.py "STYLE" --check bis nichts Wichtiges mehr offen ist; jeder Abschnitt in einfachem Englisch mit den genauen Zahlen (die Auto-Blöcke enthalten die gesperrten Werte). Musik: Sie wählen pro Schnitt, es sei denn, sie sagen etwas anderes. Dann: „Dein Stil ist fertig und gespeichert in . Möchtest du ihn an einem echten Video ausprobieren? Sage /edit-my-video und füge einen Clip ein.“ Stoppe den Seiten-Server nur, wenn sie für den Tag fertig sind (server.py stop "STYLE").
Dateien
scripts/: setup.py (check, init, HyperFrames-Installation) · server.py (start/stop/status, nie veraltet) · brand.py (Farben, Schriftarten, Kontrast) · make_assets.py (Gesichts-Clip, Symbole, Screenshots) · shot.mjs (Headless Chrome: Vollbild-Screenshots, Textfelder, Konsolenfehler, scrubbten und aufnehmen) · fetch_refs.py, prep_refs.py (Referenz-Reels) · make_round.py (Runden) · sfx.py (Sounds) · style_md.py (STYLE.md Auto-Blöcke).
engine/: die Seite (kopiert in jeden Stil-Ordner) und first-round.json. templates/STYLE.md.
references/: interview.md, breakdown-brief.md, rounds.md, library.md, sound.md.