Arnie936/cool-website-de

Cool Website

Standardeinstellungen

• Die Website-Sprache ist Englisch, sofern der Benutzer nicht ausdrücklich eine andere Sprache wünscht. Dies umfasst Navigation, Überschriften, Fließtext, Schaltflächen, Formulare, Validierungs- und Erfolgsmeldungen, Alternativtexte, Barrierefreiheitskennzeichnungen, Metadaten und generierte Downloads. Setze <html lang="en"> (oder das entsprechende regionale Tag wie en-GB, wenn es der Zielmarkt erfordert). Eigennamen bleiben erhalten.
• Generiere und bearbeite Rasterbilder standardmäßig mit dem integrierten image_gen-Tool von Codex. Befolge den verfügbaren Imagegen-Skill und das aktuelle Tool-Schema. Es ist kein externer Bild-API-Schlüssel erforderlich. Verwende bereitgestellte Assets, wenn geeignet.
• Für generierte Videos ist die offizielle Higgsfield-API der Standard und kie.ai die zweite Option. Respektiere die Wahl des Benutzers; verwende sonst COOL_WEBSITE_VIDEO_PROVIDER (Standard higgsfield). Higgsfield verwendet den REST-Workflow in references/higgsfield-api.md; KIE verwendet scripts/kie.mjs shot. Wenn der Benutzer noch kein Higgsfield-Konto hat, verweise ihn auf https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus, um sich anzumelden. Konfiguriere nur den ausgewählten Anbieter mit .env.example. Wechsle niemals leise den Anbieter oder verwende einen als Fallback zur Bildgenerierung.
• Die gesamte Browsersteuerung und visuelle Überprüfung erfolgt über den integrierten Browser via mcp__cua_repl.
• Biete optional datengesteuertes SEO mit DataForSEO direkt nach der ersten Interviewrunde an, noch bevor die Seitenstruktur festgelegt, Texte geschrieben oder Assets generiert werden. Befolge references/seo-dataforseo.md, wenn es gewählt wird. Behalte grundlegendes semantisches HTML und Metadaten, auch wenn die Recherche abgelehnt wird.
• Cool Website ist der Skill-Name, nicht die Marke des Kunden. Füge kein Skill-Branding, Urhebercredits, Beispielmarkennamen oder Genehmigungsansprüche zu einer Website hinzu. Behalte die mitgelieferte LIZENZ-Datei zusammen mit Kopien der Engine/Software.

Scrollen ist die einzige Eingabe, die jeder Besucher bereits zu nutzen weiß. Dieser Skill behandelt es als Zeitachse: Das Rad ist ein Spulenknopf, die Seite ein Film mit echtem Text darüber, und jeder Abschnitt verhält sich anders genug, dass der Besucher weitermacht, um herauszufinden, was der nächste tut.

Was du produzierst: ein Interview-Briefing, eine Seiten-Grammatik, eine Kundenreisekarte, eine Gefühlskurve mit einem konstruierten Höhepunkt, einen Scroll-Score, einen Signature Move, generierte Assets, echte HTML-Seite(n) auf einem tokengetriebenen Design-Floor und einen Streifen mit Screenshots, die belegen, dass sie bei jeder Scroll-Position hält.

Was dies nicht ist

Es ist nicht „einen Durchflug generieren und Text darauf legen.” Dieser Ansatz produziert ein Gerät, das auf einer ganzen Seite angewandt wird, und jede so gebaute Site ist auf den ersten Blick erkennbar: dieselbe Knet-Diorama, derselbe zentrierte Text, derselbe 01 / 06-Zähler, derselbe „Scroll to explore”-Hinweis. Fünf Abschnitte, die sich identisch verhalten, sind ein einziger Abschnitt, der fünfmal gezeigt wird.

Vier Regeln folgen daraus, und sie bilden das Rückgrat dieses Skills:

1. Abwechslung ist das Produkt. Eine Seite verwendet mindestens vier Gerätefamilien und niemals dasselbe Gerät zweimal hintereinander. Lese references/devices.md.
2. Die Welt ist fotografisch, es sei denn, die Marke ist wirklich illustriert. Sanft-matte, niedrig-polygone Knet-Dioramen sind als Standard verboten. Lese references/worlds.md.
3. Keine durchgehende Kamerafahrt. Ein einziger ununterbrochener Kamerflug ist das teuerste und zerbrechlichste, was man bauen kann, und er existiert nur, um Schnitte zwischen Szenen zu verstecken. Variiere stattdessen das Gerät, und der Schnitt verschwindet von selbst, weil der Besucher nicht einen einzigen Film verfolgt. Verwende eine Kamerafahrt nur, wenn das Briefing wörtlich „eine einzige durchgehende Reise” lautet.
4. Eine andere Welt ist nicht eine andere Seite. Der Geräte-Kit variiert, wie eine Seite aussieht. Struktur ist eine separate Achse, und sie muss bewusst entschieden werden, oder jeder Bau erbt dasselbe Grundgerüst. Die ersten vier Bauten haben genau das getan. Lese references/uniqueness.md.

Hero-Komposition

Dimensionale Schichtung ist eine Grundvoraussetzung für einen erstklassigen Marketing-Hero. Plane unabhängig bewegte Hintergrund-, Motiv-, Vordergrund- und Atmosphären-Ebenen, bevor du Assets anforderst. Ein schöner einzelner Hintergrund mit Texteinblendungen erfüllt diese Präferenz nicht. Tiefe muss durch sichtbare Trennung, Verdeckung und kontrollierte Bewegungsunterschiede kommen, während die Überschrift lesbar bleibt und die Szene eine klare Geschichte erzählt.

Lese references/hero-depth.md, bevor du den Hero planst oder seine Assets generierst. Es behandelt Clean Plates, echte Alphakanal-Ausschnitte, gemeinsame Kontaktanker, Typografie zwischen den Ebenen, zurückhaltende Scroll-Choreographie, Mobile Art Direction und visuelle Abnahme. Verwende die Komposition, die zur gewählten Grammatik passt; wiederhole keine Beispielszene oder zwinge eine Fixierung auf, wenn die Grammatik sie verbietet. Halte explizite statische oder einfachere Anweisungen ein und bewahre die Tiefe in der statischen Komposition, wenn die Bewegung reduziert wird.

Design- und Lieferstandard

Lese references/design-standard.md, bevor du eine Marketing-Site planst. Es behandelt Markenrecherche, unabhängige visuelle Ebenen, nützliche Interaktionen, Mobile-Komposition und finale Browser-Checks. Diese Prinzipien leiten eine benutzerdefinierte Seite; sie sind keine feste Seitenvorlage.

Schritt 0: Das Briefing und die kreative Autorisierung

Erstelle das Briefing, bevor du irgendetwas generierst. Verwende bereits bereitgestellte Antworten und Assets wieder. Wenn der Benutzer die kreative Richtung explizit delegiert (z.B. „entscheide du” oder „ich möchte dir nicht im Weg stehen”), schreibe ein Selbst verfasst unter expliziter kreativer Delegation-Briefing und fahre fort. Decke die acht untenstehenden Themen ab, unterscheide Belege von Annahmen, und erfinde keine Benutzerzitate oder erzwinge einen weiteren Interview-/Genehmigungsstopp.

Andernfalls interviewe für die fehlenden Entscheidungen. Stelle echte Fragen, notiere die Antworten und vermeide es, eine gesamte Marke aus ihrem Namen abzuleiten.

Füge das Angebot, die Zielgruppe, die Hauptbesucheraktion und die bestehende Website/Domain in der ersten Runde hinzu, wenn unbekannt. Behandle die acht Designthemen unten als Checkliste; gruppiere verwandte Themen und stelle maximal drei kurze Fragen pro Runde. Biete nach den ersten Antworten Schritt 0a an, bevor du weitere Designdetails erfragst. Verwende Fakten aus den Design- und SEO-Interviews wieder.

Der Skill ist ein Bereichsinstrument, kein Hausstil. Der Mensch bringt Absicht und die Assets mit, die er besitzt; das Interview ist der Ort, an dem dies in die richtige Art von Seite umgesetzt wird: eine ungebrochene Welt, verschiedene Szenen, gedruckte Kapitel, eine lebendige Oberfläche. Der Skill kann jede davon. Das Interview entscheidet, welche.

Decke diese acht Themen ab, ohne alle acht Fragen in einem Durchgang zu erzwingen:

1. Stimmung in drei bis fünf Wörtern, plus bis zu drei Referenzen aus beliebigen Medien. Ein Film, ein Albumcover, ein Geschäft, eine Zeitschrift, ein Spiel. Nicht „Websites, die dir gefallen”: das Nennen von Websites führt dazu, dass eine Seite wie eine bestehende Website aussieht.
2. Die Scroll-Reise, Abschnitt für Abschnitt, in ihren eigenen Worten. Worauf der Besucher zuerst treffen soll, was als Nächstes kommt, was das Letzte ist. Ihre Reihenfolge, kein von dir angebotenes Menü.
3. Die Energiekurve. Wo es sich ruhig anfühlen soll, wo intensiv. Eine Seite, die durchgehend laut ist, ist genauso flach wie eine, die durchgehend leise ist.
4. Wie soll sich jemand beim Scrollen fühlen, Etappe für Etappe, und was ist der EINE Moment, an den sie sich erinnern sollen? Energie ist Lautstärke. Das ist Emotion, und beides deckt sich nicht: Auf einer lauten Seite kann die stille Handlung die intensivste sein. Die etappenweise Antwort wird zur Gefühlskurve, der eine Moment wird zum Höhepunkt. Beide sind in BRIEF.md erforderlich. Siehe references/feel.md.
5. Eine Sache, die diese Seite tun soll, die keine andere Seite tut, die sie gesehen haben. Dies ist der Keim des Signature Move. Bestehe auf einer echten Antwort; „einprägsam sein” ist keine.
6. Wie weit von Premium-Minimal sie gehen wollen. Biete die Bandbreite in uniqueness.md §5: Brutalismus, Maximalismus, Verspielt, Retro, Dicht, Redaktionell, Premium-Minimal. Ihre Antwort bestimmt die ästhetische Familie, nicht dein Geschmack.
7. Eine ungebrochene Welt oder verschiedene Szenen? Soll sich die ganze Seite wie ein einziger durchgehender Ort anfühlen, durch den der Scroll fliegt (Worldflight, siehe references/worldflight.md), oder wie separate Szenen, Kapitel oder Schnitte? Dies ist die mit Abstand größte strukturelle Weggabelung, und es ist ihre Entscheidung, kein Gerät, das du später wählst. Biete beide neutral an; keiner ist die Voreinstellung.
8. Welche Assets haben sie bereits? Filmmaterial, Fotos, Produktaufnahmen, ein Brand Kit, Clips von sich selbst. Echte Assets verankern die Welt und senken die Generierungskosten; die Antwort entscheidet, was be- und codiert wird gegenüber dem, was generiert wird. „Nichts” ist eine gute Antwort und bedeutet eine vollständig generierte Welt.

Schreibe die Antworten in <workspace>/builds/<name>/BRIEF.md, vor jeglicher Aktplanung, in ihren eigenen Worten, nicht umschrieben in Marketingprosa. Alles Nachgelagerte liest aus dieser Datei.

BRIEF.md muss mindestens enthalten:

• Die acht Themen, mit wörtlichen Benutzerantworten, wo geliefert, und klar gekennzeichneten eigenen Entscheidungen, wo delegiert.
• Die Gefühlskurve. Eine Zeile pro Akt: die Emotion, dann was auf dem Bildschirm sie verursacht. Geschrieben, bevor die Akte existieren, ergänzt, während die Bewertung ausgefüllt wird.
• Der Höhepunkt. Der eine Moment, geschrieben als der Satz, den ein Besucher einem Freund sagen würde, plus in welchem Akt er sich befindet.
• Der vervollständigte „Sag-es-jemandem”-Satz. „Es ist die Website, auf der ___”, gefüllt mit einer Erfahrung, nicht einem Gerätenamen.
• Jegliche selbst verfasste Stille, damit der Verifikationsdurchlauf sie von toten Scroll-Bereichen unterscheiden kann.

references/feel.md ist die Spezifikation für alle vier.

Wenn der Mensch wirklich nicht erreichbar ist und der Durchlauf vollständig autonom ist, schreibe BRIEF.md selbst: beantworte alle acht Fragen in der Stimme der Marke, markiere die Datei oben mit Selbst verfasst, nicht interviewt und teile dies im Abschlussbericht mit. Ein selbst verfasstes Briefing ohne Delegation ist eine Notlösung. Die explizite Delegation oben ist ein normaler, unterstützter Workflow und erfordert nicht, dass der Mensch unerreichbar ist.

Schritt 0a: Frühe SEO-Auswahl

Stelle nach den ersten Interviewantworten (in der Sprache des Benutzers) die Frage: „Soll ich die Website auch für Google optimieren? Mit DataForSEO kann ich relevante Suchbegriffe und Wettbewerber prüfen und die Ergebnisse direkt in Seitenstruktur und Texte einfließen lassen.” Biete an: „Ja, mit DataForSEO”, „Nur technische Grundlagen”, „Später”. Überspringe diese Frage, wenn der Benutzer sich bereits für SEO entschieden hat. Kreative Delegation allein autorisiert nicht die Installation eines externen Dienstes oder den Verbrauch von API-Guthaben.

Bei „Ja” folge seo-dataforseo.md: Schließe die fokussierte Aufnahme ab, verbinde oder biete die Installation des MCP an, erstelle das Recherchebudget, recherchiere den gewählten Markt und verwende die Ergebnisse während des gesamten Baus. Lese dataforseo-setup.md nur für Setup/Auth und Guthaben-Hinweise. Eine Server-URL allein reicht aus, um die Remote-Verbindung zu identifizieren; die Kontoauthorisierung muss dennoch abgeschlossen werden.

Halte in BRIEF.md fest: SEO: aktiviert | nur-Basics | verschoben | blockiert, plus Zielmarkt und Budget, wenn aktiviert. Nur-Basics oder verschoben fährt ohne MCP-Installation oder kostenpflichtige Recherche fort. Wenn die Verbindung blockiert ist, setze die unabhängige Design- und technische Arbeit fort; markiere Keyword-Entscheidungen als vorläufig. Präsentiere keine ausstehenden DataForSEO-Recherchen als abgeschlossen.

Bootstrap

Umgebung, keine Phase der Arbeit. Erledige es, sobald das Interview beantwortet ist und vor Schritt 1.

Führe den Preflight aus, anstatt manuell zu prüfen. Er kennt die Fehlermodi, die sonst später als irreführende Fehler auftauchen, hauptsächlich ein ausgedünntes ffmpeg, das einen fehlenden Filter als Syntaxfehler in deinem Befehl meldet:

node <skill>/scripts/doctor.mjs

Es meldet Node, einen vollständigen ffmpeg-Build, den optionalen API-Schlüssel und den aufgelösten Workspace. Füge --video nur hinzu, wenn Videogenerierung geplant ist. Erforderliche Fehler beenden mit einem von Null verschiedenen Exit-Code. Browsersteuerung und -verifikation verwenden den integrierten Browser von Codex via mcp__cua_repl; es ist kein separates Browser-Automatisierungspaket oder eine lokale Browser ausführbare Datei erforderlich.

Der Workspace

Builds und das Fingerprint-Register leben in einem Verzeichnis, und es wird aufgelöst, niemals angenommen:

node <skill>/scripts/workspace.mjs --ensure     # gibt ihn aus, erstellt ihn, initialisiert das Register

Auflösungsreihenfolge, der erste Treffer gewinnt:

1. COOL_WEBSITE_HOME
2. die nächste .cool-website.json auf dem Weg nach oben vom cwd, { "workspace": "..." }
3. <Projektstamm>/cool-website, wobei der Projektstamm der nächste Vorfahre mit einem .git ist

Ein Build-Ordner ist also <workspace>/builds/<name>/ und das Register ist <workspace>/FINGERPRINTS.md. Das Register startet leer: Die Sperre existiert, um zu verhindern, dass du dich wiederholst, also hat dein erster Build nichts zu löschen.

Wenn du Builds bereits woanders aufbewahrst, lege eine .cool-website.json in deinem Projektstamm ab, die darauf verweist, und nichts bewegt sich.

Der Rest

1. Bilder verwenden das integrierte Bildmodell; kein externer Schlüssel ist nötig. Für generierte Videos kopiere .env.example als .env in das Website-Projektverzeichnis, fülle nur den ausgewählten Anbieter aus und führe doctor.mjs --video aus. --provider higgsfield|kie überschreibt den konfigurierten Anbieter für diese Prüfung. Higgsfield (Standard) verwendet HF_API_KEY_ID plus HF_API_KEY_SECRET und seine Konsole für Guthaben/Preise; neue Konten melden sich unter https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus an. KIE verwendet KIE_AI_API_KEY und scripts/kie.mjs probe. Befolge references/assets.md. Halte Anbieter, Modell und autorisiertes Budget in BRIEF.md fest. Geliefertes Filmmaterial benötigt keinen API-Aufruf.
2. Ein Brand Kit, falls vorhanden (Farben, Logo, Schriftarten, vorhandene Produktaufnahmen). Wenn die Marke einen Ordner in diesem Repo hat, lies ihn, bevor du etwas generierst, und befolge seine harten Regeln. Eine Marke, die erfundene Zahlen verbietet, bedeutet keine Statistikzähler, egal wie gut sie aussehen.

Kopiere engine/cool-website.js, engine/cool-website.css und LICENSE in den Build-Ordner. Bearbeite die Engine niemals projektbezogen; sie ist drin