Kc1t/sites-pixel-perfect

Pixelgenaue Websites

Eine KI-Website wirkt aus drei Gründen generisch: vager Plan, Stock-Asset und niemand, der das Ergebnis prüft. Diese Skill behebt alle drei: Das Asset wird maßgeschneidert im Higgsfield generiert, der Plan ist ein pixelgenauer Prompt mit konkreten Werten, und das Ergebnis wird vor der Auslieferung per Screenshot geprüft.

Führen Sie die Schritte immer in der angegebenen Reihenfolge aus.

1. Anforderung lesen und entscheiden (ohne Rückfragen)

Treffen Sie diese fünf Entscheidungen und teilen Sie sie in einer kurzen Nachricht mit:

• Was und für wen: das Produkt oder die Person, und wen die Seite überzeugen soll.
• Die Stimmung in drei Wörtern (z.B. „ruhig, teuer, nächtlich“).
• Der Effekt, genau einer, der die Signatur der Seite ist (Rezepte in references/efeitos.md):
  • cursor: Eine Figur dreht den Kopf und folgt der Maus (Video, das der Maus folgt).
  • lanterna: Der Cursor öffnet einen Kreis, der zeigt, was im Inneren des Bildes ist.
  • loop: Ein Foto wird zu einem Loop-Video mit Parallax-Effekt in den Ebenen.
• Ausgabe: ein einzelnes index.html (Standard) oder der pixelgenaue Prompt ohne Montage (wenn nur der Prompt gewünscht ist).
• Umfang: nur der Hero-Bereich (Standard) oder die gesamte Landing Page.

Fragen Sie nur nach, wenn Sie ohne die Antwort nicht weitermachen können (z.B. der Name einer echten Marke).

2. Assets im Higgsfield generieren

Das Asset ist das, was die Seite teuer aussehen lässt. Reihenfolge der Präferenz:

1. Die Assets des Benutzers.
2. Im Higgsfield generieren, über den MCP, mit dem Rezept des gewählten Effekts aus references/efeitos.md.
3. Ohne Generierungsmöglichkeit: Seite nur mit Typografie und Bewegung. Niemals graue Boxen, Stock-Bilder oder erfundene URLs.

Regeln, die für jeden Effekt gelten:

• Bild zuerst, dann Video. Ein Bild kostet wenige Credits, ein Video Dutzende. Generieren Sie das Video erst, wenn die Bilder stimmen. Geben Sie die Kosten vor der Videogenerierung an.
• Das zweite Bild ist immer eine Bearbeitung des ersten (Nano Banana bearbeitet die Basis), mit „keep everything identical“ und der einzigen Änderung. Eine Neugenerierung von Grund auf bringt alles aus dem Gleichgewicht.
• Richtung relativ zum Bildrand, nicht zur Figur („head turned toward the LEFT edge of the image“). „Seine Linke“ führt beim Modell zu Fehlern.
• Nano Banana akzeptiert einen Job pro Mal. Senden Sie einen, warten Sie auf das Ende, senden Sie den nächsten. Zwei gleichzeitige Jobs geben einen Limit-Fehler zurück.
• Leere Hälfte für Text: Das Motiv in einer Hälfte, die andere Hälfte glatt.
• Hintergrund des Bildes = Hintergrund der Seite. Notieren Sie den Hex-Wert des Bildrands; er wird zu --bg.

3. Den pixelgenauen Prompt schreiben

Schreiben Sie den Prompt in acht Teilen, in dieser Reihenfolge, mit der Vorlage in references/especificacao.md: Schriftarten, Farben, Assets, Struktur, Animation, JavaScript, responsiv, Prüfung.

Alles mit konkretem Wert. Nichts von „schöner Farbverlauf“ oder „sanfte Animation“: Jedes Adjektiv wird mit der Zahl begleitet, die es erzeugt. Schreiben Sie auch den tatsächlichen Seitentext (Titel, Untertitel, Navigation, Buttons).

Wenn nur der Prompt gewünscht wurde, ist er die Auslieferung: Prüfen Sie mit references/revisao.md und stoppen Sie hier.

4. Montieren

Montieren Sie genau das, was der Prompt vorgibt:

• Ein index.html mit <style> und <script> darin, Schriften per Link, Bibliotheken per CDN mit fester Version.
• Die erste CSS-Regel setzt den Hintergrund auf html, body, damit kein weißes Blinken entsteht.
• Semantisches HTML, echte <title>, alt, sichtbarer Fokus und prefers-reduced-motion respektiert.
• Auf dem Handy (ohne Maus) und bei reduzierter Bewegung bleibt der Effekt in einem schönen Bild stehen.
• Kein Lorem Ipsum, keine Platzhalterboxen, keine Emojis als Icons.

5. Prüfen und korrigieren (Pflicht)

Machen Sie einen Screenshot der Seite auf Desktop (1440×900) und auf Handy (390×844) und betrachten Sie die Screenshots. Mit Playwright: npx playwright screenshot --viewport-size=1440,900 index.html desktop.png. Ohne Screenshot-Tool teilen Sie mit, dass die Seite nicht visuell geprüft wurde, und überarbeiten Sie den Code anhand von references/revisao.md.

Bewerten Sie mit dem Maßstab von references/revisao.md, korrigieren Sie die drei schwächsten Punkte mit konkreten Werten und machen Sie erneut einen Screenshot. Bis zu drei Runden, oder bis der Durchschnitt über 8 liegt und keine Einzelnote unter 7.

6. Veröffentlichen (falls gewünscht)

Der Higgsfield-MCP stellt die Seite unter einer .higgsfield.app-Adresse online (create_website und deploy_website; die Schritt-für-Schritt-Anleitung finden Sie in get_workflow_instructions mit website-builder-flow). Jedes Deployment ist sofort öffentlich: Informieren Sie vorher und hinterlassen Sie keine Schlüssel oder persönlichen Daten auf der Seite.

7. Ausliefern

• Die Datei und wie man sie öffnet.
• Der abschließende Desktop-Screenshot.
• Zwei oder drei Sätze über den Effekt und die getroffenen Entscheidungen.
• Die im Higgsfield verbrauchten Credits, pro Asset.
• Was ausgetauscht werden kann, falls etwas provisorisch ist.

Dateien

• references/efeitos.md: Die drei Rezepte mit den Generierungs-Prompts und dem Code.
• references/especificacao.md: Die Vorlage für den pixelgenauen Prompt in acht Teilen.
• references/revisao.md: Der Bewertungsmaßstab und der Korrekturzyklus.

Struktur (Anforderung → Medien → Spezifikation → Montage → Screenshot) adaptiert vom MotionSites Web Builder, MIT-Lizenz (siehe LICENSE.md). Prompts, Rezepte und Code dieser Skill sind unser Eigentum.