Kampagnenposter gestalten

Kampagnenplakat-Design

Für den Benutzer: Senden Sie eine Nachricht, zum Beispiel:

Verwenden Sie die Poster-Design-Fähigkeit von https://github.com/greatopomu/claude-assets, um 5 Instagram-Poster für [Marke] zu entwerfen. Hier ist ihre Website / ihr alter Flyer: [Link oder Datei].

Das war‘s. Claude fragt nach allem, was noch benötigt wird.

Für Claude: Diese Datei erklärt, wie die gesamte Aufgabe ausgeführt wird. Befolge sie von Anfang bis Ende. Halte den Aufwand für den Benutzer gering: Frage einmal, dann arbeite.

---

Teil 0: Einrichtung (zuerst und im Hintergrund erledigen)

Die Hilfswerkzeuge befinden sich im selben Repository, in tools/. Pfade wie tools/export_png.py unten sind relativ zum Repository-Stammverzeichnis.

1. Werkzeuge besorgen. Wenn du Befehle ausführen kannst und das Repository noch nicht auf diesem Computer ist: git clone --depth 1 https://github.com/greatopomu/claude-assets.git Wenn Git nicht verfügbar ist, lade https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip herunter und entpacke es.
2. Installieren und prüfen: python -m pip install -r tools/requirements.txt dann python tools/check_setup.py. Es meldet, was auf diesem Computer funktioniert. Um zu beweisen, dass jedes Werkzeug funktioniert, führe python tools/selftest.py aus.
3. Starte von der Vorlage: Kopiere skills/poster-design/template/index.html in den Projektordner. Es enthält bereits die Marken-Tokens, die Vorschauseite (Fit / Telefon / 100%) und den Exportmodus ?solo=pN.

Ausweichmöglichkeiten. Teile dem Benutzer klar mit, welche dieser Optionen zutrifft.

Wenn dies fehlt	Mach stattdessen dies
Keine Möglichkeit, Code auszuführen (reiner Chat)	Erstelle die Poster als eine HTML-Datei (oder ein Artefakt) mit der Vorlage. Zum Exportieren öffnet der Benutzer die Datei in Chrome, fügt ?solo=p1 zur Adresse hinzu, öffnet die DevTools (F12 / Cmd+Opt+I) → Befehlspalette (Ctrl/Cmd+Shift+P) → „Screenshot in voller Größe erfassen“. Wiederhole für jedes Poster.
Python funktioniert, aber es wird kein Browser gefunden	Installiere Google Chrome oder Edge, setze CHROME_PATH auf einen Chromium-basierten Browser, oder führe pip install playwright und dann python -m playwright install chromium aus. Ansonsten verwende den manuellen Export oben.
Kein Higgsfield CLI oder keine Credits	Verwende Stockfotos (Route A) oder ChatGPT (Route B).
Kein integrierter Browser (Claude Desktop) für ChatGPT	Bitte den Benutzer, das Bild in ChatGPT zu generieren und herunterzuladen, dann die Datei zu teilen.
Kann nicht aus dem Internet herunterladen	Bitte den Benutzer, die ausgewählten Stockfotos herunterzuladen und zu teilen.

Die Bildwerkzeuge sind optionale Helfer. Wenn eines nicht ausgeführt werden kann, mache denselben Schritt auf andere Weise (z. B. wähle Fotos nach Augenmaß) und fahre fort.

---

Was du erstellst

Gestaltete Kampagnenplakate, die wie von einem erfahrenen Grafikdesigner aussehen. Es sind keine KI-Bilder mit Text darüber.

• Erstelle jedes Poster in HTML, CSS und SVG und exportiere es dann als PNG mit einem Headless-Browser (tools/export_png.py).
• Bilder (Personen, Produkte, Orte) sind nur Zutaten. Du bekommst sie über eine von drei Routen (Teil 4). Ein Bildwerkzeug erstellt niemals das fertige Poster.
• Jede Marke bekommt ihr eigenes Aussehen. Die Methode bleibt gleich; die künstlerische Richtung wird jedes Mal neu gewählt. Verwende niemals Layouts einer anderen Marke wieder.

---

Teil 1: Zuerst fragen (eine Nachricht, nur was fehlt)

Lies die Nachricht des Benutzers sowie alle Dateien oder Links. Sende dann eine kurze Nachricht mit nur den Fragen, die du noch beantwortet haben musst. Biete für jede Frage eine sinnvolle Voreinstellung an, damit der Benutzer mit „Standardeinstellungen sind in Ordnung“ antworten kann.

Frage in dieser Reihenfolge nach diesen Dingen und überspringe alles, was bereits beantwortet wurde:

1. Marken-Basics: Name, was sie verkauft, Stadt oder Land, wer die Kunden sind.
2. Marken-Assets: Logo-Datei, Markenfarben (oder eine Website oder einen Flyer, von dem du sie ableiten kannst), und alle Markenschriftarten.
3. Größe und Verwendung: Standard 1080 × 1350 für Instagram. Weitere Optionen: 1080 × 1080, 1080 × 1920 Stories, A4 oder A3 Druck.
4. Wie viele Poster und was jedes sagen soll: zum Beispiel Dienstleistungen, Angebote, ein Event, oder „deine Wahl“.
5. Muss enthaltene Details: Preise, Daten, Telefonnummer, Adresse, Website oder Handlungsaufforderung. Alles, was nicht angegeben ist, wird als Platzhalter markiert.
6. Personenregeln: Standard sind die Regeln in Teil 6.
7. Bilder: Standard ist, zu verwenden, was verfügbar ist, in dieser Reihenfolge: Stockfotos (kostenlos), ChatGPT im integrierten Browser (kostenlos, begrenzt), dann Higgsfield (bezahlte Credits). Frage, ob bezahlte Credits verwendet werden dürfen.
8. Wo speichern: Standard ist ein neuer Ordner, der nach der Marke benannt ist.

Frage nicht nach Designentscheidungen wie Stil, Layout oder Effekten. Das ist deine Aufgabe. Du wirst die Richtung in Teil 2 zeigen.

---

Teil 2: Planen, dann einen Checkpoint zeigen

Erledige alles selbst, zeige dem Benutzer dann einen kurzen Plan zur Genehmigung.

1. Muster der Markenfarben aus ihren Dateien mit einem Skript (tools/sample_colours.py); rate nicht. Plane, das Logo als sauberes SVG nachzuzeichnen, niemals eine unscharfe Ausschnittsvergrößerung.
2. Recherchiere die Kategorie: Wie 3 oder 4 führende Marken werben (Layout, Typografie, Bildsprache, Ton), einschließlich eines lokalen Mitbewerbers. Übernimm die Denkweise, niemals die Assets. Speichere Notizen und Quellen in RESEARCH.md.
3. Sammle lokale Wahrheiten: Echte Orte, alltägliche Gewohnheiten, Wörter, die Leute tatsächlich verwenden, und regionale Details. Beispiele für regionale Details: die übliche Fahrzeugfarbe in diesem Bundesstaat oder lokale Kleidung.
4. Wähle die künstlerische Richtung: Wähle eine Option pro Zeile der Tabelle in Teil 3, passend zu dieser Marke und Zielgruppe. Wähle auch die Schriftarten (Google Fonts) und wie die Farben verwendet werden: welche führt, welche ist der Akzent und was sind die Hintergründe.
5. Schreibe die Posterideen: Für jedes Poster eine Idee, eine Überschrift unter 8 Wörtern, eine unterstützende Zeile, die mit dem beginnt, was der Kunde bekommt, einen Handlungsaufforderung, das benötigte Bild und sein Story-Element. Keine zwei Poster teilen sich ein Layout oder Story-Element.

Checkpoint, der einzige vor dem Bauen. Zeige dem Benutzer:

• die Farben
• die künstlerische Richtung in 2 oder 3 Zeilen
• die Schriftarten
• die Liste der Poster mit ihren Überschriften

Frage: „Fortfahren oder etwas ändern?“ Halte es kurz.

---

Teil 3: Entscheidungen zur künstlerischen Richtung

Wähle pro Marke. Unterschiedliche Marken sollten sich in mehreren Zeilen unterscheiden.

Auswahl	Optionen
Hell	dunkel und stimmungsvoll · hell und luftig · erdige Mitteltöne · schwarz-weiß plus eine Farbe
Farbverwendung	eine Farbe führt mit einem Akzent · Duoton-Fotos · kräftige Farbblöcke · neutral mit einem Markenakzent
Typografie	schwere Grotesk · schmal und hoch · runde geometrische · editoriale Serife plus Grotesk · handgeschriebener Akzent
Formen	organische Kleckse und Wellen · harte geometrische Winkel · dünne Linien und Gitter · ausgeschnittenes Papier · Kreise und Bögen
Fotobearbeitung	Ausschnitt auf Formen · randlos mit Farbüberlagerung · Foto innerhalb einer Form · breiter Fotoband · getönt · Collage
Textur und Licht	Leuchten und Lichtspuren · flach und sauber · Körnung · Halbtonpunkte · nur weiche Schatten
Layout	Überschrift oben, Bild darunter · geteilter Bildschirm · Bild zentriert, Text darum herum · Textgeführt · diagonal · Raster aus Panels
Story-Element	App- oder Interface-Karte · Sticker oder Abzeichen · Ticket oder Quittung · Karte oder Route · große Zahl oder Diagramm · Zitat · Vorher und Nachher

Verwende nicht standardmäßig dunkle Hintergründe mit leuchtenden Akzenten. Verwende sie nur, wenn die Marke es verlangt.

---

Teil 4: Bilder beschaffen (drei Routen)

Verwende die Route, die zu jedem Poster passt. Überprüfe jedes Bild vor der Verwendung auf die Personenregeln (Teil 6). Zeichne Quellen und Lizenzen in RESEARCH.md auf.

A. Stockfotos (Pexels, Unsplash, Pixabay). Kostenlos, echte Menschen und Orte.

• Suche mit mehreren lokalen Suchbegriffen.
• Vergleiche 20 bis 30 Miniaturansichten auf einem Kontaktbogen (tools/contact_sheet.py).
• Lehne Fotos ab mit:
  • falschem Ort oder falschen Personen
  • Regelverstoß
  • lesbaren Nummernschildern oder privaten Details
  • Schäden oder Unordnung, die die Botschaft untergraben
  • keinem Platz für Text
• Lade 1600 bis 2000 Pixel breit herunter.
• Korrigiere bei Bedarf lokale Details. tools/recolour.py ändert eine Farbe innerhalb eines Bereichs.
• Lasse die Form des Fotos über das Layout entscheiden: Portraitfotos funktionieren randlos; Landschaftsfotos funktionieren als Band oder innerhalb eines Rahmens.

B. ChatGPT im integrierten Browser. Kostenlos; am besten für vollständige Szenen.

• Der Benutzer muss angemeldet sein. Gib eine detaillierte Eingabeaufforderung ein: Motiv, Kleidung gemäß den Regeln, Umgebung, Licht, „Portrait 4:5, kein Text, keine Logos“.
• Um ein Detail zu ändern, bleibe im selben ChatGPT-Chat: „Gleiches Bild, nur … ändern“.
• Begrenzung: Der kostenlose Plan erlaubt etwa 3 Bilder pro Tag.
• Datei herausbekommen: ChatGPTs Download funktioniert nicht aus dem Browserfenster.
  • Am besten: Bitte den Benutzer, auf Download zu klicken und dir den Dateinamen zu nennen.
  • Ausweichlösung: Zeige das Bild in voller Größe in Originalgröße, erfasse es in 2 × 2 Screenshot-Kacheln und füge sie mit tools/stitch_tiles.py zusammen.

C. Higgsfield. Bezahlte Credits; am besten für Ausschnitte.

• Überprüfe zuerst den Kontostand und Preis (higgsfield account status, higgsfield generate cost …).
• GPT Image 2.6 mit --background transparent erzeugt Ausschnitte. Verwende mittlere Qualität für Personen und niedrige für Objekte. Der Basisplan führt etwa 4 Aufträge gleichzeitig aus.
• Entferne den sanften Leuchtschimmer um jeden Ausschnitt mit tools/clean_cutout.py.
• Um ein Detail eines Bildes zu ändern, gib es mit --image zurück und beschreibe nur die Änderung.

Jede Bildeingabe gibt an: das Motiv und die Handlung, Kleidung gemäß den Personenregeln, Beleuchtung passend zur Stimmung des Posters, Bildausschnitt, „fotorealistisch, kein Text, keine Logos, kein Wasserzeichen“ und Platz für Text, wenn es eine vollständige Szene ist.

---

Teil 5: Die Poster bauen

Zuerst einrichten (starte von skills/poster-design/template/index.html):

• eine index.html mit Farb-Tokens, Schriftarten und dem Logo als SVG-Symbol
• ein gemeinsames Abschluss-Element (Logo plus Call-to-Action-Stil), das zur künstlerischen Richtung passt
• eine Vorschauseite, die jedes Poster im tatsächlichen Seitenverhältnis anzeigt, skaliert zum Einpassen, mit Fit / Telefon (390 px breit) / 100% -Schaltflächen
• einen ?solo=pN-Modus für den Export
• den Ordner über einen lokalen Server (nicht file://) bereitstellen und im Browserfenster öffnen

Jedes Poster:

• Eine Idee: Überschrift, unterstützende Zeile, Handlungsaufforderung.
• Mindestens vier Ebenen, wobei mindestens ein Element das Motiv überkreuzt.
• Ein Story-Element, das zeigt, wie das Produkt funktioniert, wie eine realistische App-Karte, ein Ticket, Tracker, Karte oder Abzeichen.
• Benutzerdefinierte Formen, Farbverläufe und Licht, keine Schablonenboxen.
• Variiere die Signatureffekte innerhalb des Sets, während das gemeinsame System beibehalten wird.

Gestaltungsprinzipien (nicht verhandelbar). Dies sind die Fehler, die ein Poster maschinell aussehen lassen. Plane sie während des Bauens ein, nicht erst am Ende.

• Atemraum. Text bekommt mindestens 24 px klaren Raum (40 px ist besser) von jeder Formkante, jedem Ring, jeder Linie, jedem Abzeichen und jedem Bild. Ein Kreis oder Ring darf niemals entlang, durch oder nah an Text verlaufen.
• Keine Beinahe-Zusammenstöße. Zwei Elemente überlappen entweder klar und absichtlich (um ein Viertel des kleineren oder mehr) oder sitzen weit auseinander. Kanten, die sich fast berühren, oder die versehentlich ausgerichtet sind, sehen nach einem Fehler aus. Beispiele: eine Produktoberseite, die auf einer Linie mit der Oberseite des Kreises dahinter liegt, oder ein Sticker, der eine Boxecke streift.
• Kreise treffen Panels klar. Ein Kreis, der in eine Fußzeile oder ein Band läuft, stoppt entweder deutlich davor (24 px oder mehr) oder geht klar darunter (40 px oder mehr). Er streift niemals nur die Kante.
• Klare Freistellung. Überprüfe jeden Ausschnitt auf der tatsächlichen Hintergrundfarbe des Posters, nicht nur auf Weiß und Schwarz. Übrig gebliebener Hintergrund, gezackte Kanten und solide „bereifte“ Bereiche zeigen sich nur auf der tatsächlichen Farbe.
• Weniger Verzierungen. Jeder zusätzliche Ring, jede zusätzliche Kontur oder jedes zusätzliche Blatt ist ein weiteres Ding, das den Text bedrängen kann. Wenn es keine Bedeutung hinzufügt, lasse es weg.
• Visuelle Hierarchie. Entscheide die Lesereihenfolge: (1) Überschrift oder Produkt, (2) unterstützende Zeile, (3) Story-Element, (4) Abschluss-Element. Größe, Stärke und Farbe müssen dieser Reihenfolge folgen. Nur eines schreit.
• Paarung und Gruppierung. Jedes Icon sitzt direkt neben dem einen Ding, das es beschriftet, mit gleichem Abstand in jedem Paar. Jedes Kontaktdetail bekommt sein eigenes Icon: WhatsApp neben der Nummer, Instagram neben dem Benutzernamen. Gruppiere verwandte Elemente unter einer kleinen Überschrift („Jetzt bestellen“, „Erhältlich in“). Trenne nicht verwandte Gruppen mit klarem Raum.
• Ausrichtung.
  • Ein linker Rand für Logo, Überschrift, Textkörper und Fußzeile.
  • Fußzeilenblöcke sind oben ausgerichtet, sodass ihre kleinen Überschriften eine Linie teilen.
  • Reihen und Spalten von Abzeichen haben gleichmäßige, bemessene Abstände.
• Zeilenumbrüche.
  • Fließtext endet niemals auf einem einzelnen kurzen Wort. Verwende text-wrap: balance für Überschriften und Textkörper, lies dann jede Zeile.
  • Ein Umbruch sollte zwischen Phrasen fallen, nicht innerhalb einer („über Hafer / Guinea-Korn“ ist falsch; „über / Hafer, Guinea-Korn und Sojabrei“ ist richtig).
  • Überschriften brechen nach Sinneinheiten mit einem <br>, wo du es wählst.
• Ein Name pro Sache. Verwende dieselben Produkt- oder Geschmacksnamen, Zutatenlisten und Behauptungen auf jedem Poster im Set. Bevor du veröffentlichst, liste jede Behauptung (wie „kein Zuckerzusatz“ oder „100% natürlich“) zur Bestätigung durch den Kunden auf.
• Die Fußzeile wird ebenfalls gestaltet. Sie bekommt die gleiche Sorgfalt wie der Held: Hierarchie, Paarung, Ausrichtung und mindestens 36 px Abstand.

Technik-Menü (wähle pro Poster; verwende nicht alle):

• Tiefe:
  • Ebenenreihenfolge: Hintergrund → Textur → Leuchten oder Farbfelder → Formen → Motiv → Vordergrundelement → Story-Element → Überlagerung für Lesbarkeit → Text → Abschluss-Element
  • eine Vordergrundlinie, -form oder -karte, die das Motiv kreuzt
  • ein Motiv, das aus seiner Karte oder seinem Rahmen ausbricht
  • eine Karte hinter dem Motiv platziert, sodass eine Hand sie überlappt
• Licht und Farbe:
  • ein unscharfer radialer Lichtschein hinter dem Motiv
  • Randlicht, das in der Bildeingabe angefordert wird, um zum Poster zu passen
  • Lichtspuren (ein SVG-Pfad, der zweimal gezeichnet wird: unscharfes Leuchten plus scharfer Kern)
  • Umriss- oder Neon-Typografie mit gestapeltem filter: drop-shadow (nicht text-shadow)
  • eine Markenfarben-Überlagerung auf Fotos: klar auf dem Motiv, solide hinter dem Text
  • Neubewertung eines Bildes (Tag zu Nacht, wärmer) mit einem Skript
• Form und Textur:
  • Kleckse oder Wellen mit einer dünnen Akzentlinie
  • gebogene oder abgewinkelte Fotokanten
  • verblasste Gitter, Punkte oder Muster
  • Ringe und Strahlen
  • kreisförmige Abzeichen mit Text auf einem Pfad (<textPath> mit textLength)
• Typografie:
  • eine schwere Anzeigeschrift und eine saubere Textschrift
  • Überschriften mit Zeilenabstand 0,85 bis 0,92, leicht eng

...

[gekürzt für die Übersetzung]