site-inspirado

Was macht site-inspirado?

Was eine gewöhnliche von einer unvergesslichen Website unterscheidet, ist nicht der Code, sondern der Prozess: visuelle Referenz → Fragen → Recherche → Bilder im gleichen Stil → Seite mit Bewegung → prüfen, ob die Person den Button noch findet.

S=<Pfad zu diesem Skill> · T=<Pfad zur Website> (eine pro Website; verwende den von der Person angegebenen Pfad, z.B. ~/meine-seite; ohne Angabe ~/projekte/output/site-inspirado/<slug>). Arbeite immer innerhalb von T.

Die finale Website verwendet NICHT das INEMA-Design (schwarz+gelb). Der Stil stammt aus den Referenzen der Person. Das INEMA-Design gilt nur für den Kit-Leitfaden.

Die 6 Schritte (in Reihenfolge; jeder Schritt hat ein Tor)

#	Schritt	Du erstellst	Tor
1	Referenzen	T/refs/ (2 bis 5 Bilder)	Die Person hat bestätigt, dass es die Stimmung ist
2	Fragen + Recherche	T/BRIEF.md	Alle Fragen des richtigen Blocks sind beantwortet; nichts erfunden
3	Stil	T/estilo.json	Gemessene Palette + prompt_estilo mit Blick auf die Referenzen erstellt; Textkontrast ≥ 4,5
4	Bilder	T/img/*.jpg + T/img/folha.jpg	Du hast das Blatt ANGESCHAUT: gleicher Stil, keine gezeichneten Buchstaben, keine krummen Hände
5	Seite	T/index.html	Ein data-cta am Hauptbutton; Übergänge durch movimento.js
6	Tor + Veröffentlichung	Torbericht, Fotos	portao.js gibt 0 aus; danach veröffentlichen (GitHub Pages / Vercel des Kunden)

1. Referenzen

Bitte um 2 bis 5 Bilder: was die Person bereits hat (Einladung, Logo, Ladenfoto) + Inspiration (Pinterest: „Bäckerei-Website“, „Hochzeitswebsite watercolor“). Falls sie keine hat, generiere 2 über Codex (image_gen) und zeige sie, bevor es weitergeht. Speichere sie in T/refs/.

2. Fragen und Recherche (bevor IRGENDWAS generiert wird)

Sag der KI (oder tu es selbst): „Bevor du etwas generierst, frage mich alles, was du brauchst, und recherchiere, was eine Website dieser Art normalerweise hat.“ Verwende den Block aus referencias/perguntas.md des Website-Typs (Event, lokales Geschäft, Dienstleistung/Consulting, Portfolio). Recherchiere FAKTEN (wie man hinkommt, Wetter zu der Jahreszeit, nahegelegene Ausflugsziele) und markiere im BRIEF, was von der Person und was aus der Recherche stammt. Entscheide im BRIEF den Typ der Seite: negocio (das Ziel ist eine Handlung: bestellen, buchen, anrufen) oder visual (Event, Portfolio, Einladung: darf mehr Bewegung haben).

3. Stil messen

python3 $S/scripts/estilo.py T/refs T/estilo.json --prompt "<Stil auf Englisch, mit Blick auf die Referenzen>"

Das Skript misst die Palette und schlägt Hintergrund-/Text-/Akzentfarbe mit berechnetem Kontrast vor. Du legst die finalen Farben fest (dunkle die Textfarbe ab, falls der Kontrast < 4,5 ist). Der prompt_estilo beschreibt TECHNIK + LICHT + PALETTE (z.B. „loose watercolor on cotton paper, burgundy, sage and cream, thin gold ink accents“).

4. Bilder im gleichen Stil

Schreibe T/plano.json (eine Zeile pro Bild: nome, prompt des MOTIVS, largura, altura) und generiere:

python3 $S/scripts/imagens.py T/plano.json T/estilo.json T/img --refs T/refs

Jedes Bild bekommt die Referenzen + das erste generierte Bild (Anker) als Referenz: die Serie wird aus einer Hand erstellt. Ein Bild nach dem anderen; das Skript wartet, falls der freie Arbeitsspeicher unter 30 GB fällt. Öffne T/img/folha.jpg und wiederhole mit --so name für das, was abweicht. Personen: von hinten oder klein in der Landschaft (erfundene Gesichter von „echten Paaren“ täuschen). Videomotor (animierter Clip aus einem Bild: Kling, Magnific, etc.) ist optional und nur mit Zustimmung der Person für diesen Dienst. Ohne ihn wird die Bewegung in Code umgesetzt (Schritt 5).

5. Seite mit Bewegung

Eine Seite pro Website, thematisch gestaltet (niemals einen anderen Piloten kopieren). Verwende:

• cp $S/runtime/movimento.js T/ und <script src="movimento.js"> (immer innerhalb von T, vor dem Tor): data-revela (hoch/rein/seite/zoom/vorhang), data-parallax, data-intro (Schleier ≤ 1,2 s), data-conta, data-contagem. Alles stoppt, wenn das System „Bewegung reduzieren“ verlangt.
• Der Hauptbutton bekommt data-cta. Bei negocio bleibt er im ersten Bildschirm, ohne Eingabe-Animation, und auf dem Handy erhält er eine feste Leiste.
• Bilder mit width/height, loading="lazy" unterhalb des Falzes und alt, das die Szene beschreibt.

Maß für die Menge der Bewegung: referencias/visual-x-conversao.md.

6. Tor und Veröffentlichung

node $S/scripts/portao.js T/index.html --tipo negocio|visual --fotos T/fotos

Prüft bei 1440×900 und 390×844, mit und ohne „Bewegung reduzieren“: CTA (im 1. Bildschirm in 1,5 s, wenn negocio), 0 Konsolenfehler, 0 defekte Datei, kein horizontales Scrollen, Bilder geladen, keine laufende Animation bei „Bewegung reduzieren“, Gewicht (negocio < 3 MB, visual < 8 MB). Nur mit PASSA veröffentlichen. Erstmal: cd $S/scripts && npm install && npx playwright install chromium.