Site-Erstellung im Kinostil

Was macht Site-Erstellung im Kinostil?

Jede neue Website folgt einem einheitlichen Muster, das aus fünf Skills in dieser Reihenfolge besteht, jeder mit einer eigenen Rolle. Eine davon zu überspringen oder die Reihenfolge zu ändern, führt zu einem dieser drei Ergebnisse: hübsch aber ohne Conversion, konvertierend aber ohne Finish, oder auf dem Handy kaputt.

Vorbereitung

1. Lies, was über das Unternehmen existiert: identidade.md, site.json, _memoria/ oder das Briefing des Bedieners. Die Fakten (Name, Telefon, Adresse, Preise, Note, Bewertungen, Fotos) stammen ausschließlich daraus und aus öffentlichen Quellen des Unternehmens. Bewertung auf der Website nur, wenn sie zu 100 % positiv ist: ausgeschlossen sind solche, die Mängel, Probleme, Beschwerden, abgebrochene Geschäfte oder irgendeinen Punkt nennen, der Zweifel aufkommen lässt, selbst wenn sie mit Lob enden. Im Zweifelsfall nicht aufnehmen. Auch wird an anderer Stelle der Website nicht erwähnt, wer eine ausgeschlossene Bewertung geschrieben hat.
2. Farben der gesamten Marke, nicht nur der Akzent. Wenn das Logo oder die Fassade zwei Farben verwenden (z.B. Orange und Blau), erscheinen beide auf der Website in den Tönen der Fassade oder des Logos. Fast schwarzer Hintergrund zählt nicht als zweite Farbe.
3. Definiertes Logo wird zum Tab-Symbol. Wenn das Unternehmen ein Logo hat (vom Inhaber gesendet, Linktree, Website, Leuchtschild oder neu gestaltet und genehmigt), wird es zum Favicon der Website: Datei img/favicon.png (quadratisch, basierend auf dem Logo ohne Hintergrund, mit Rand, 64 und 180 px) verlinkt im <head> durch <link rel="icon"> und <link rel="apple-touch-icon">. Logo zu breit, um bei 16 px lesbar zu sein: Verwende das zentrale Element (das Etikett, das Monogramm, den Anfangsbuchstaben in der Logoschrift), niemals einen anderen Buchstaben oder ein erfundenes Symbol. Ohne Logo wird das Favicon zum Anfangsbuchstaben in den Markenfarben.
4. Beginne mit der enthaltenen Vorlage: ${CLAUDE_SKILL_DIR}/template/ (die README.md erklärt Platzhalter, Fotos und das Skript personalizar.sh). Geeignet für jeden lokalen Laden oder Dienst; tausche die Abschnitte aus, die für die Nische keinen Sinn ergeben. Eine andere Vorlage nur, wenn die Nische eine Struktur erfordert, die diese nicht hat, und selbst dann mit dem Finish dieser Vorlage.
5. Technische Basis: Statisches HTML (eine index.html mit CSS und JS in derselben Datei, plus img/). Liefert das gleiche Aussehen und die gleichen Animationen, verbraucht weniger Tokens, wird ohne Build veröffentlicht und bricht nicht durch Abhängigkeiten. Next.js nur, wenn die Website einen Server benötigt: Formular, das in einer Datenbank speichert oder einen Webhook mit geheimem Schlüssel auslöst, Login-Bereich, Blog mit vielen generierten Seiten, oder wenn das Projekt bereits in Next.js existiert (dann behalte die Basis bei).
6. Bei einer bereits bestehenden Website speichere die aktuelle Version (versoes/vN-antes-vN+1/), bevor du Änderungen vornimmst.

Die Sequenz (ein Skill nach dem anderen, in dieser Reihenfolge)

1. frontend-design: visuelle Ausrichtung mit der tatsächlichen Markenidentität (Logofarbe, Plakatschriftart, Abschnittskontrast). Endet, wenn Palette, Schriftarten und Abschnittsstruktur festgelegt sind.
2. landing-page-cinematografica: Bewegung und Finish (gestaffelter Einstieg, Rauschen, Tasten mit Gewicht, Hervorhebung von Bewertungen, Zähler, lebendige oder diagonale Ecken). Endet, wenn keiner der verbotenen Punkte aus ihrer Liste mehr erscheint.
3. revenue-centric-design (öffne references/conversion-and-landing-pages.md): Hero, der den 5-Sekunden-Test besteht, Nachweis im ersten Bildschirm auf dem Handy, spezifischer CTA mit einer Garantiezeile darunter, CTA alle 1,5 Abschnitte, weniger Klicks nach außen. Endet, wenn das Versprechen nicht größer ist als der Beweis.
4. copywriting (Basis Eugene Schwartz): Alle Texte in der Sprache des Endkunden, ohne Fakten zu erfinden. Endet, wenn jeder Satz der Website in einer Quelle des Unternehmens überprüfbar ist.
5. adaptar-mobile, immer als letztes: 360 und 375 px, und prüfen, dass 1440 px nicht kaputt gegangen ist. Endet mit geöffneten und betrachteten Screenshots.

Abschluss

• Lokal bereitstellen und den Link senden (http://localhost:PORT). Veröffentlichen nur, wenn der Bediener darum bittet.
• Gib bei der Übergabe an, welche der fünf Skills ausgeführt wurden und was ohne Nachweis blieb (nicht bestätigte Tatsache, nur in Emulation getestet).