CommunityBildgithub.com

Bild-Hintergrundbild

Verwandle ein Bild (Illustration, Gemälde, Foto) in einen Claude Desktop Hintergrund-Mod, mit passenden Seitenleisten-/Panel-/Menüfarben und optional einem Tag/Nacht-Paar, das dem Hell- oder Dunkelmodus des Fensters folgt.

Was ist Bild-Hintergrundbild?

Diese Fähigkeit erstellt aus einem Benutzerbild einen vollständigen Claude Desktop-Hintergrund-Mod. Sie extrahiert Vektorpfade aus dem Bild (anstatt es als Rastergrafik einzufügen, da der Desktop keine Rasterbilder im Hintergrund rendert), generiert daraus eine kleine Mod-Datei und berechnet automatisch passende Akzentfarben für Seitenleiste, Panels und Menüs. Unterstützt werden sowohl Einzelbilder als auch Paare für Tag (hell) und Nacht (dunkel), die dann automatisch je nach Fenstermodus wechseln. Die Fähigkeit ist für Claude Code und Claude Desktop gedacht, die Implementierung erfolgt über eine Plugin-Schnittstelle. Der Workflow umfasst das Nachzeichnen des Bildes mit VTracer, Optimierung mit SVGO und die Erstellung einer Preview-HTML zur Überprüfung. Wichtig: Es gibt strikte, stillschweigende Größenlimits (~259500 Zeichen gesamt, ~98000 pro SVG), deren Überschreitung zu einem leeren Hintergrund ohne Fehlermeldung führt.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kamioj/claude-picture-backdrop/tree/HEAD/skills/picture-backdrop

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Bild-Hintergrund

Der Desktop zeichnet den Hintergrund eines Mods nur als scene, die der Mod selbst rendert, und zeichnet kein Rasterbild darin. Daher wird das Bild in Vektorpfade nachgezeichnet, unter harte, stille Größenbeschränkungen gepackt und von einem kleinen Mod gezeichnet. Lies references/limits.md, bevor du etwas daran änderst, wie der Mod zeichnet; dort ist aufgeführt, was gemessen wurde und was stillschweigend fehlschlägt.

Ablauf

  1. Die Bilder besorgen. Ein Bild oder ein helles (Tag) und ein dunkles (Nacht) Bild. Querformat um 1600x1000 funktioniert; die App beschneidet mit xMidYMid slice, daher das Motiv nicht zu nah am oberen und unteren Rand platzieren. Malerische, weiche Kunst lässt sich viel besser pro Zeichen nachzeichnen als Cel-Art mit Kanten; Fotos funktionieren auch. Wenn der Benutzer die Kunst generiert, sag dies vorher.
  2. Die Werkzeuge in temporären Ordnern installieren (nicht im Mod):
    python -m pip install --target "$TMP/pb-vtracer" vtracer
    mkdir -p "$TMP/pb-svgo" && cd "$TMP/pb-svgo" && npm init -y >/dev/null && npm install svgo@4
    
  3. Den Mod-Ordner erstellen unter ~/.claude/skills/<id>/ (wird in jeder Sitzung geladen): assets/mod-template/ kopieren, dann make-colors.js und make-colors.d.ts aus dem Plugin-Erstellungs-Skill in sein hooks/ kopieren, unverändert. Jedes __PLATZHALTER__ ausfüllen (__ID__ ist der Ordnername, klein mit Bindestrichen). Für ein einzelnes Bild den anderen Import, dessen Szene und Look entfernen und auto auf das eine Bild zeigen lassen.
  4. Das Bild ansehen und seine Bereiche auflisten (zuschneiden und anzeigen): das Motiv, das Gesicht, Hautpartien, jede Seite. Eine Konfiguration pro Bild neben dem Mod schreiben (nicht in hooks/), unter Verwendung von references/tracing.md für Bereichsauswahl und Einstellungen, und assets/example-night.json (ein Mädchen, rechts von einem Eingang sitzend) als Vorbild. Für ein Paar jeder Konfiguration "scheme" und beide Budgets geben: {"FULL": 259500, "HALF": 129500}; für ein einzelnes Bild nur FULL und kein scheme.
  5. Nachzeichnen, im Hintergrund (ein Durchlauf dauert ein paar Minuten):
    python -I scripts/trace_scene.py night.json --vtracer "$TMP/pb-vtracer" --svgo "$TMP/pb-svgo" --preview "$TMP/pb-preview/night.html"
    
    Es zeichnet jeden Bereich bei jeder Option einmal nach, passt jedes Budget an (zuerst alle Bereiche, dann Details nach Priorität), und schreibt scene-<name>.ts. Zeige mit dem out der Konfiguration auf das hooks/ des Mods.
  6. Vorschau der HTML im Browser-Bereich (diene seinen Ordner mit python -m http.server). Überprüfe das Motiv bei 2-fachem Zuschnitt, da die App das Bild vergrößert. Korrigiere, was mit der Tabelle in tracing.md falsch aussieht, und zeichne erneut.
  7. Farben. Die Oberflächenfarben aus den Bildern mustern (der dominante Wand- oder Himmelsfarbton; der dunkle Modus bleibt dunkel) und makeColors ausführen; seine Problemliste darf keinen Eintrag "Desktop wird nicht malen" enthalten.
  8. Validieren und übergeben: claude plugin validate <mod-verzeichnis>. Sage dem Benutzer, das Fenster neu zu laden oder eine neue Sitzung zu starten, eine beliebige Nachricht zu tippen (das Thema wird bei der ersten Eingabe gesetzt) und /backdrop day|night|auto auszuprobieren. Bitte ihn, sich bestimmte Bereiche anzusehen; sein Screenshot ist der echte Test. Lösche danach die temporären Werkzeugordner.

Regeln, die zubeißen

  • Nur einfache Anführungszeichen in SVG, kein ", \ oder Backtick in einem SVG: Escaping zählt gegen die Gesamtzahl.
  • Die Svgs einer Szene zusammen ≤ ~259500 Zeichen; jedes SVG ≤ ~98000. Bei Überschreitung zeigt der Desktop nichts und sagt nichts; die Vorlage protokolliert zu große Szenen beim Sitzungsstart.
  • glass eingeschaltet lassen; tint aus einem Look herauslassen, der für beide Modi gedacht ist.
  • Keine image-, color-, gradient- oder vector-Hintergründe, <image> oder overrideColorScheme verwenden: keines davon zeichnet oder wirkt.
  • Das Thema bei prompt.submit setzen, nicht bei session.start.
  • Wenn ein Bereich verbessert wird, behalten, was der Benutzer als gefällig bezeichnet hat: diesen Bereich einen eigenen Bereich oder eine eigene Priorität geben, anstatt alles neu abzustimmen. Jede Änderung mit dem betroffenen Bereich melden.

Verwandte Skills