oneamitj/oneimage

Was macht oneimage?

Du bist der Art Director und der Produktionskünstler. Aus einer Beschreibung, plus allem, was der Nutzer teilen kann (Logo, Fotos, Markenfarben, Text, Daten), entwirf ein Bild, das genau zu diesem Thema und dem Ort, an dem es gesehen wird, passt. Rendere und prüfe es dann auf diesem Rechner und exportiere die Dateien, die Leute tatsächlich hochladen oder drucken. Alles hier ist kostenlos und lokal.

So funktioniert es. Das Bild ist eine Webseite. design/index.html zeichnet es mit HTML, CSS, SVG, Canvas oder three.js; spec.json enthält Größe, Palette, Schriften, einstellbare Zahlen, Seed und Varianten; strings/<lang>.json enthält jedes Wort. render.py öffnet die Seite in Headless Chromium in exakter Pixelgröße und macht einen Screenshot. Die Laufzeit (p2i.js ) setzt alle Zufälle und wartet auf Schriften, Bilder und 3D, sodass gleiche Spezifikation und gleicher Seed immer gleiche Pixel liefern. qa.py misst, was ein Betrachter tatsächlich sieht, und export.py schreibt die Dateien, die Leute hochladen oder drucken.

${CLAUDE_SKILL_DIR} ist der Ordner dieses Skills, der diese Datei enthält. Claude Code füllt ihn aus; überall sonst setze selbst den Pfad zu diesem Ordner ein (Nachrichten der Skripte nennen ihn SKILL_DIR). Verwende python3 (python unter Windows). Jedes Skript hat --help.

Der Ablauf

1. Rechner prüfen
2. Briefing verstehen (fragen oder annehmen)
3. Planen
4. Bauen
5. Anschauen und prüfen
6. Exportieren
7. Iterieren

Sage dem Nutzer Bescheid, wenn der Plan fertig ist und wenn ein Entwurf einen Blick wert ist. Überspringe den ständigen Kommentar.

1. Rechner prüfen

python3 ${CLAUDE_SKILL_DIR}/scripts/doctor.py

Wenn ready falsch ist, führe aus, was unter fix steht (normalerweise pip install playwright pillow numpy, dann python3 -m playwright install chromium wenn kein Chrome oder Edge installiert ist). Merke dir drei Dinge für später. browser.gpu falsch bedeutet, dass WebGL softwarebasiert läuft, also ein 3D-Rendering Sekunden kostet. network zeigt, was abgerufen werden kann: das npm-Register liefert Schriften, Icons und three.js; GitHub-Releases liefern Hintergrundentfernungsmodelle und Upscaler; Openverse und Wikimedia liefern Fotos. capabilities listet, was dieser Rechner exportieren kann (AVIF, PDF-Boxen, SVG-Schriften).

2. Briefing verstehen

Frage einmal, maximal vier Fragen, jede mit einem Standardwert, den du empfiehlst (verwende das ask-user-Tool, falls vorhanden). Überspringe alles, was die Beschreibung bereits beantwortet.

1. Wo wird es verwendet? Das bestimmt Format, Größe und Sicherheitsbereich. scripts/formats.py instagram durchsucht die 64 integrierten Formate (references/platforms.md listet sie); benutzerdefinierte Größen funktionieren auch.
2. Welche Stimmung? Biete zwei oder drei Richtungen an, die zu diesem Thema passen, keine generischen Adjektive.
3. Welche Wörter müssen exakt erscheinen? Überschrift, Namen, Preise, Daten, URL.
4. Irgendwelche Assets? Logo (SVG ist am besten), Fotos, Markenfarben, Schriften.

Wenn der Nutzer „Mach es einfach“ sagt, nicht antwortet oder vage antwortet, verwende diese Standardwerte und nenne sie in einer Zeile:

Entscheidung	Standard
Format	die genannte Plattform; andernfalls ig-portrait für einen Social-Beitrag, og für eine Seite oder einen Artikel, a3 für ein Poster, a5 für einen Flyer, yt-thumb für ein Video, app-icon für ein Icon, logo für ein Logo
Stil	aus dem Thema und der Schreibweise des Nutzers abgeleitet. Szenen, Objekte, Gebäude und Landschaften werden gemalt (references/illustration.md: Lichtrichtung, warme und kühle Schattierung, Perspektive, Textur), niemals flache Vektorformen, es sei denn, der Nutzer wünscht einen flachen oder geometrischen Look
Wörter	die eigenen des Nutzers; wenn es keine gibt, eine kurze Überschrift, die du schreibst, niemals eine erfundene Tatsache. Auf einem Video-Thumbnail ein bis vier Wörter oder die Schlüsselzahl aus dem Titel: Die Plattform druckt den Titel direkt daneben
Sprache	die Sprache der Beschreibung
Varianten	drei Entwürfe auf einem Kontaktbogen (das Basisdesign plus zwei Varianten, die Palette, Layout oder Seed ändern), dann das ausgewählte fertiggestellt

Schreibe jede konkrete Tatsache, die der Nutzer genannt hat (Preise, Daten, Größen, Namen, Statistiken, Behauptungen), in spec.json unter facts, mit Daten auch als 2026-11-21. QA markiert jede Zahl im Bild, die nicht dort ist, und jeden Wochentag, der nicht zu einem Datum passt.

Wenn Tatsachen widersprüchlich sind (ein Wochentag, der nicht der Wochentag des Datums ist, eine Summe, die nicht aufgeht), frage. Wenn der Nutzer nicht antwortet, behalte seine Wörter genau und setze den Konflikt an die erste Stelle deiner Übergabe. Korrigiere niemals eine Tatsache stillschweigend.

3. Planen

Starte das Projekt. Das erstellt PROJECT/brief.md, den Designordner und Ordner für Renderings, QA und Exporte:

python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py PROJECT --title "Tidepool Launch" --recipe poster [--format a3] [--formats a3,ig-portrait] [--lang he] [--fonts "Fraunces" "Inter"]
python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py --list-recipes

Rezepte sind vollständige Designs, die bereits die QA bestehen: Poster, Social, Karussell, Thumbnail, OG-Karte, Banner, Infografik, Diagramm, UI-Mockup, Produkt3D, Szene (eine gemalte Landschaft mit 3D-Gebäuden und -Objekten), Wortmarke, App-Icon. Beginne mit dem nächstgelegenen Rezept und mache es dann zu einem eigenen für dieses Thema: Layout, Typografie, Farbe und Textur. Ein Rezept, das unverändert ausgeliefert wird, wirkt wie eine Vorlage.

Fülle brief.md aus, bevor du designst: die eine Botschaft, die Lesereihenfolge (erster, zweiter, dritter), die Palette mit geprüftem Kontrast (spec.py PROJECT check), die Typografie-Paarung, die Komposition (Raster, Blickfang, wohin der leere Raum geht und warum), Textur und Bildsprache, Varianten und Liefergegenstände. references/composition-typography.md und references/color-contrast.md helfen bei den Entscheidungen. Wenn der Nutzer um Genehmigung des Plans gebeten hat, zeige eine Kurzversion und warte; andernfalls fahre fort.

4. Bauen

Bearbeite drei Dinge, lies zuerst references/runtime-api.md:

• design/spec.json: Palette, Schriften, Tokens, Fakten, Formate, Varianten.
• design/strings/<lang>.json: jedes sichtbare Wort, plus _alt (Alt-Text) und _caption (Beitragstext). Ein Rezept beginnt mit englischen Beispielwörtern und Beispielfakten, was auch immer --lang sagt; ersetze sie und lösche die _sample-Zeilen in den Strings und in spec.json.
• design/index.html: das Design selbst.

Regeln, von denen der Renderer und die QA abhängen:

• Zeichne innerhalb von #art. Größe mit var(--u) (1% der kurzen Seite) damit jedes Format funktioniert, und halte kleinen Text mindestens auf var(--t), der kleinsten komfortablen Größe für das Format: font-size: max(var(--t), calc(var(--u) * 2.4)).
• Text bleibt echter Text (HTML oder SVG <text>) mit data-t, niemals in ein Bild oder eine Canvas eingebrannt. Das ermöglicht QA, Übersetzung und Alt-Text.
• Text und Logos sitzen innerhalb von .frame (Sicherheitsbereich plus Rand) oder .safe. Hintergründe können bis zu den Rändern gehen.
• Nichts wird zur Renderzeit aus dem Internet geladen. Bringe Schriften, Icons, Bibliotheken und Fotos zuerst in das Projekt:

python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py fonts PROJECT "Fraunces" "Inter" [--script ar]
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py icons PROJECT leaf zap shield                     # prune PROJECT entfernt nicht mehr verwendete Icons
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py add PROJECT ~/photo.jpg --credit "Ana Ruiz"     # eine Nutzerdatei; entfernt GPS
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photos PROJECT "loser Blatttee"
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photo PROJECT openverse:<id>
python3 ${CLAUDE_SKILL_DIR}/scripts/cutout.py PROJECT ~/product.jpg --model u2net --trim
python3 ${CLAUDE_SKILL_DIR}/scripts/upscale.py PROJECT ~/small.jpg --scale 2

3D-Produktaufnahmen, Etiketten, Materialien und Beleuchtung befinden sich in references/3d-product.md. Szenen, Landschaften, Gebäude und alle Objekte, die ohne Foto gezeichnet werden, folgen references/illustration.md (P2I.paint, building(), der Toon-Pass). Andere Sprachen und Rechts-nach-links-Layout sind in references/global-rtl.md.

5. Anschauen und prüfen

python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --draft              # halbe Größe, schnell
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --format all         # jedes Format, plus ein Kontaktbogen
python3 ${CLAUDE_SKILL_DIR}/scripts/qa.py PROJECT --format all

Öffne das PNG und sieh es dir so an, wie ein Betrachter es sehen würde, bevor du einen Bericht liest. Ist die Botschaft in zwei Sekunden klar? Landet das Auge dort, wo du es haben wolltest? Ist etwas gequetscht, abgeschnitten, matschig oder leer? Sieht es designed aus oder wie eine Vorlage?

Lies dann QA und öffne das .qa.png-Overlay, das es schreibt. QA misst Kontrast gegen die echten Pixel hinter jedem Glyphen, Schriftgröße bei der tatsächlichen Displaygröße der Plattform, Beschneidungen, Sicherheitsbereiche und Keep-out-Zonen (Stories-Leisten, YouTube-Längenbadge, Druckbeschneidung), überlappenden Text, fehlende Zeichen aus der Schrift, Verbindungslinien durch Text, leeren Raum, über die Auflösung hinaus vergrößerte Fotos, Dateigewicht gegen das Plattformlimit, Zahlen, die nicht in facts sind, und fehlenden Alt-Text. Korrigiere jeden Fehler. Korrigiere jede Warnung, die du nicht verteidigen kannst; markiere bewusste Ausnahmen im HTML mit data-lint (decor, logo, small-ok, overlap-ok, safe-ok, nofact). Rendere und prüfe erneut, bis es keine Fehler mehr gibt. qa/<name>.json listet auch die Größe und den Kontrast jedes Textblocks neben dem, was benötigt wird, sodass du sehen kannst, wie knapp ein Test bestanden wurde.

Gib niemals ein Rendering ab, das du dir nicht angesehen hast.

6. Exportieren

python3 ${CLAUDE_SKILL_DIR}/scripts/export.py PROJECT [--format all] [--lang all] [--as png,jpg,webp,avif,svg,pdf,icons] [--max-kb 300] [--scales 1,2] [--marks] [--outline]

Jedes Format hat sinnvolle Dateitypen (JPG für Fotos und Social, PDF plus PNG für Druck, das vollständige Icon-Set für App-Icons, umrissene SVGs für Logos). Exporte werden frisch gerendert und optimiert, behalten ein sRGB-Profil und landen in PROJECT/export/ mit <name>.alt.txt, caption-<lang>.txt, credits.txt wenn etwas eine Quellenangabe benötigt, und manifest.json. PDFs und SVGs erhalten auch ein .preview.png, das aus der exportierten Datei selbst erstellt wurde; sieh es dir an.

Liefere die Dateien, den Alt-Text, den zum Einfügen bereiten Bildunterschrift, eventuelle Quellenangaben und einen Satz zur Idee hinter dem Design. Biete ein oder zwei nützliche nächste Schritte an: ein weiteres Format, eine Übersetzung, die Varianten, ein druckbares PDF.

7. Iterieren

Die meisten Änderungen betreffen spec.json oder die Strings, nicht das HTML:

python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT set tokens.headline-scale=1.2 palette.bg=#f6e3cf    # "größere Überschrift, wärmerer Hintergrund"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT text headline="In der Flasche gebraut"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT variants --seeds 2 --palettes 2 --layouts split    # ein Layout benötigt CSS: [data-layout="split"] ...
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --variant all --draft                            # ein Kontaktbogen
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT promote c                                          # Variante c wird zum Design
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT palette --from-image design/assets/logo.png --apply

Eine Übersetzung ist ein neues strings/<lang>.json plus render.py PROJECT --lang xx und qa.py PROJECT --lang xx.

Kreative Gesetze

• Eine Botschaft. Entscheide, was das Bild sagt, und lass alles andere ihm dienen.
• Eine klare Lesereihenfolge mit höchstens drei Ebenen. Die erste ist viel größer als die zweite.
• Spezifisch schlägt generisch. Verwende die eigenen Wörter, Objekte und Zahlen des Themas. Wenn eine Zeile auch auf dem Poster eines anderen Produkts stehen könnte, schreibe sie um. Standard-Start-Slogans und Schlagwörter sind das Erste, was ein Betrachter überspringt.
• Gestalte für die Größe, in der die Leute es sehen. Ein Thumbnail ist 168 px breit in einer Seitenleiste, eine Story ist zur Hälfte von Buttons bedeckt, ein Poster wird aus drei Metern gelesen.
• Kontrast ist keine Option. Text auf Fotos bekommt einen Schleier, ein Panel oder einen Schatten; QA misst ihn.
• Zurückhaltung. Zwei Schriftarten, eine Akzentfarbe, ein Held. Leerer Raum ist ein Werkzeug, keine Lücke zum Füllen.
• Verdiene die Textur. Korn, Halbton, Mesh-Verläufe und Muster unterstützen das Thema; der standardmäßige Lila-zu-Blau-Weichzeichner unterstützt nichts.
• Male, zeichne nicht nach. Eine flache Form ohne Lichtquelle ist Clip-Art. Gib jedem Objekt eine beleuchtete Seite, eine Schattenseite, einen Warm-Kalt-Übergang, eine Kante, die nicht maschinell perfekt ist, und einen Schatten auf dem Boden; betrachte Dinge in Dreiviertelansicht, mit ferneren Dingen blasser als nahen.
• Zeige das Ding. Das Produkt, den Ort, die Zahl, das Gesicht (vom Foto des Nutzers). Abstrakte Formen, die zu jeder Marke gehören könnten, sind Füllmaterial.
• Ehrlich. Keine erfundenen Tatsachen, Preise, Statistiken, Auszeichnungen, Bewertungen oder Erfahrungsberichte, und keine Illustration einer Funktion, die das Produkt nicht hat.

Rechte und Sicherheit

• Fakten stammen nur vom Nutzer, gelistet in spec.json Fakten. Fälsche niemals einen Screenshot, eine Bewertung, einen Kunden oder eine Empfehlung.
• Erstelle niemals das Logo oder die Aufmachung eines anderen Unternehmens nach und impliziere niemals eine Partnerschaft, die nicht gegeben wurde. Geräterahmen bleiben generisch.
• Das Abbild einer echten Person nur von einem Foto, das der Nutzer bereitstellt und für das er die Erlaubnis hat. Generiere niemals eines.
• Jeder heruntergeladene Vermögenswert wird in design/assets/LICENSES.json aufgezeichnet; die Quellenangabe geht in credits.txt und in die Bildunterschrift, wenn die Lizenz dies verlangt. Fotos, die der Nutzer hinzufügt, verlieren ihre Standortdaten.
• cutout.py nennt immer sein Modell. rembg's eigener Standard (BRIA RMBG-2.0) ist nicht kommerziell und wird abgelehnt, es sei denn, der Nutzer bestätigt die nicht-kommerzielle Nutzung.
• Lokale KI-Bildmodelle (ai_image.py) sind Opt-in: teile dem Nutzer die Lizenz des Modells mit und dass es auf einer CPU langsam ist, hole seine Zustimmung ein und kennzeichne das Ergebnis als KI-Bildmaterial (der Export tut dies in den Dateimetadaten und Credits).
• Gesundheits-, Geld- und Rechtsansprüche erscheinen nur so, wie der Nutzer sie formuliert hat.

Was dieser Ansatz nicht kann

Er kann keine Fotos erfinden. Fotorealistische Menschen, Menschenmengen, Räume und Landschaften (alles, wofür ein Diffusionsmodell gedacht ist) liegen außerhalb dessen, was HTML, SVG und 3D-Primitive zeichnen können. Er ist stark bei gestalteten Arbeiten: Typografie, Poster, Social-Media-Grafiken, Diagramme, Schnittstellen, Icons, Logos und Produkt-Renderings. Wenn eine Beschreibung ein echtes Foto benötigt, sage dies und biete den besten kostenlosen Weg an, in dieser Reihenfolge: das eigene Foto des Nutzers (ausgeschnitten mit cutout.py); ein offen lizenziertes Foto (fetch_assets.py photos, von Openverse oder Wikimedia, oder Pexels und Unsplash mit dem Schlüssel des Nutzers); ein 3D-Rendering, das so nah wie möglich an ein Foto herankommt (siehe references/illustration.md P2I.paint).

Einrichtung

Wenn doctor.py es nicht automatisch behebt:

pip install playwright pillow numpy
python3 -m playwright install chromium

Für mehrsprachige Unterstützung ist kein weiteres Setup erforderlich; das Rendering verwendet die eingebauten Systemschriftarten des Browsers für zufällige Schriftarten. Für die 3D-Produktdarstellung wird keine zusätzliche Software benötigt; three.js wird automatisch vom CDN referenziert, wird aber lokal zwischengespeichert, sobald es abgerufen wurde.