Vor einiger Zeit habe ich guizang-ppt-skill als Open Source veröffentlicht, und später ist mir etwas aufgefallen, als ich es selbst zum Erstellen von Inhalten verwendet habe.
Die von ihm generierten Webseiten erhielten, wenn ich sie screenshottete und auf Bild-Text-Plattformen postete, viel besseres Feedback und Daten als meine manuellen Layouts.
Ich bin mir sicher, dass ihr schon einige Prompts oder Skills gefunden habt, die diese 3:4-Kartenbilder generieren.
Sie haben fast alle denselben Stil: Tailwind + große Farbblöcke + Emoji-Stapel + mittelmäßige Schrifthierarchie.
Nachdem ich sie mir angesehen habe, verstehe ich ungefähr, warum KI-generierte Bild-Text-Karten auf den ersten Blick so leicht zu erkennen sind – sie machen Webseiten, keine Magazine.
Bild-Text-Karten sind im Vergleich zu PPTs ein ganz anderes Biest: vertikale Bildschirme, eine 1-Sekunden-Entscheidung im Informationsfluss, ob man anhält oder nicht, und sie verlassen sich eher auf Bilder als auf Worte.
Andere Layouts, andere Rhythmen, andere Leser.
Also habe ich es aus dem PPT-Skill herausgelöst und zu einem eigenständigen guizang-social-card-skill (https://github.com/op7418/guizang-social-card-skill) gemacht.
Im Folgenden erkläre ich, warum es gut ist und warum ich bereit bin, so viel Zeit dafür aufzuwenden.
2. Warum genau ist es gut?
3:4-hochformatige Bilder sind das Hauptschlachtfeld für Bild-Text-Karten. Der Großteil der Designenergie dieses Skills floss in 3:4 – Schrifthierarchie, Layoutproportionen und Zeilenumbruchregeln.
Alles wurde auf das reale Szenario des Durchwischens in einem mobilen Informationsfluss kalibriert. 21:9 und 1:1 WeChat Official Account-Kopfzeilenbilder werden ebenfalls unterstützt.
Fangen wir mit dem an, was Bild-Text-Erstellern am wichtigsten ist.
2.1 Es unterscheidet, was du schreibst, und passt den passenden Stil an
Inhalte auf Bild-Text-Plattformen sind kategorisiert. Eine Filmkritik und eine Produktbewertung erfordern völlig unterschiedliche visuelle Sprachen;
Ein Reisetagebuch und Arbeitstipps sollten unterschiedliche Layouts verwenden.
Aber die meisten KI-Tools kümmern sich nicht darum; sie verwenden dieselbe Vorlage, egal was du schreibst.
Das Ergebnis ist, dass aller Karten aussehen, als kämen sie vom Fließband der WeChat Official Account-Cover.
Dieser Skill hat eingebaute Anpassungsregeln für 11 gängige Bild-Text-Kategorien:
- Reisen / Lifestyle: Magazinstil, warme Farbpalette, Vollbildbilder, große Serifenschriften;
- Arbeitsplatz / Tipps / Business-Einblicke: Rasterstil, dunkle Hintergründe, datenlastige Poster-Layouts;
- Film / Kultur: Kühltoniger Magazinstil, Filmplakat-Layouts, Nahaufnahmen von Charakteren werden priorisiert;
- Produktbewertungen / Digital: Rasterstil, Vergleichsmatrizen, Screenshots im Geräterahmen;
- Lesen / Notizen: Magazinstil, Serifenschriften, zentrierte Zitat-Layouts, maximaler Weißraum;
- Essen / Lokalbesuche: Hochgesättigter Magazinstil, Aufnahmen von oben priorisiert, Text an die Ecken verschoben;
Ich habe sogar speziell eine Kartenkomponente für Reiseblogger gemacht. Du kannst darauf Geschäftsstandorte und Reiserouten markieren, und die KI generiert automatisch Anmerkungen für dich.
Gib ihr denselben Text: Sag ihr, es ist eine Filmkritik, und sie gibt dir eine Karte im Filmplakat-Stil; sag ihr, es ist eine Produktbewertung, und sie gibt dir eine Vergleichstabelle mit Geräterahmen.
Noch wichtiger: Sie hat klare „No-Go“-Zonen:
- Fan-orientierte Inhalte: Die erforderliche visuelle Sprache ist völlig anders;
- Reine Werbeanzeigen: widerspricht ihrer Designphilosophie, die Inhalte betont;
- Lange Tutorials mit mehr als 12 Bildschirmen: Das Bild-Text-Format ist nicht der optimale Träger für lange Tutorials.
In diesen Szenarien wird dir der Skill gleich zu Beginn sagen: „Du solltest vielleicht ein anderes Tool verwenden.“
Ich habe das absichtlich so gelassen. Grenzen definieren ein Produkt mehr als die Fähigkeiten selbst; ein Skill, der alles kann, endet meistens darin, nichts gut zu können.
2.2 Wie man Text auf Bilder legt
Text auf Bilder zu legen ist der schwierigste Teil von Bild-Text-Karten und der Ort, an dem sich der „KI-Look“ am leichtesten zeigt.
Wenn es nicht gut gemacht wird, treten drei Arten von Fehlern auf:
- Text bedeckt Gesichter oder die Mitte des Produkts.
- Weißer Text auf hellem Hintergrund oder schwarzer Text auf dunklem Hintergrund ist unlesbar.
- Text erstreckt sich über das gesamte Bild und ruiniert eine ansonsten schöne Komposition.
Der Skill handhabt das in drei Schritten:
- Subjekte im Bild identifizieren: Gesichter, Produkte, textdichte Bereiche, und sie im Layout automatisch vermeiden;
- Farbe und Helligkeit des Landebereichs berechnen: Textfarbe festlegen, ob eine Maske hinzugefügt werden soll und wie tief der Schatten sein soll;
- Adaptive Schriftgröße und Zeilenumbruch: Schriftgröße und Zeilenumbruchpositionen dynamisch an die Größe des Landebereichs anpassen, anstatt eine Schriftgröße fest zu codieren, die überläuft.
Mit diesen Regeln stellt sich das „Premium-Gefühl“ der Karte ein. Leser können nicht unterscheiden zwischen „aufgedrücktem Text“ und „Text, der ursprünglich da war“.
2.3 Woher kommen die Bilder: Das ist der größte Unterschied zu anderen KI-Karten-Tools
Die meisten KI-Tools zur Generierung von Bild-Text-Karten bitten dich entweder, eigene Bilder hochzuladen, stattdessen Emojis zu verwenden oder Illustrationen zu generieren, die auf den ersten Blick wie KI aussehen.
Das Ergebnis ist, dass die manuelle Bildsuche anstrengend ist oder das Stapeln von Emojis unecht wirkt.
Dieser Skill ist standardmäßig mit drei kostenlosen kommerziell nutzbaren Bildbibliotheken verbunden:
- Pexels: unterstützt chinesische Suche, gut für allgemeine Szenarien;
- Unsplash: stärkste fotografische Textur, die erste Wahl für Inhalte über Menschen, Leben und Raum;
- Wallhaven: Spiele, Fotografie und Hintergrundbilder sind alle hier, auch wenn das Urheberrecht unübersichtlich ist.
Es verteilt automatisch Suchbegriffe basierend auf der Semantik der Textabsätze, ruft Bilder ab, beschneidet sie passend zum Layout und vermeidet das Abschneiden von Gesichtern oder Subjekten.
Du bekommst eine Karte mit echter Fotografie, keine Farbblock-Karte.
Und es ist nicht starr darin, Bilder zu finden, die absolut frei von Urheberrechtsproblemen sind. Es wird dir sagen, welche Bilder es gefunden hat, und du entscheidest, ob du Bilder mit unklarem Urheberrecht verwenden möchtest.
Außerdem sind Plattformen derzeit sehr streng mit KI-Wasserzeichen. Die meisten KI-generierten Bilder, die du jetzt verwendest, haben Wasserzeichen, die von Plattformen erkannt werden und zu Shadowbanning führen können. Das ist ein großer Schmerzpunkt.
2.4 Screenshots sind auch Bilder: Die Vier-Stück-Verschönerung
Ein Großteil unserer Inhalte kann keine Fotografie verwenden; es müssen Software-Screenshots, Chatverläufe oder Produktoberflächen sein.
Der Skill hat einen eingebauten Screenshot-Verschönerer:
Fügt macOS/iOS-ähnliche Geräterahmen hinzu (Browser-Chrome oder Telefonränder), verwendet verschiedene Hintergrundtexturen, um den Screenshot zu halten – Gitterpapier, Punktmatrix, warmweiß oder dunkel –, sodass der Screenshot nicht mehr mit weißem Hintergrund auf weißem Hintergrund schwebt;
Gleichzeitig passt es automatisch Schattenebenen und Eckenradius-Parameter basierend auf dem visuellen Stil an. Zwei Stile haben jeweils ein Screenshot-Rezept, das Konsistenz ohne manuelle Anpassung gewährleistet.
Einfach gesagt, ein beliebiger Screenshot, den du machst, sieht nach der Verarbeitung wie ein offizielles Produktwerbebild aus.
2.5 KI-Bildgenerierung: Mit Zurückhaltung einsetzen
Der Skill ruft nur dann zur KI-Bildgenerierung auf, wenn alle vorherigen Bildquellen kein geeignetes Material finden.
Beim Generieren von Bildern erzwingt es Stilbeschränkungswörter, um die mittelmäßige Optik von „offensichtlichen KI-Illustrationen“ zu vermeiden.
Ich hätte lieber, dass es weniger KI verwendet, als dass es KI auf eine Weise verwendet, die alle Bild-Text-Karten wie Schwestern aussehen lässt. Das vermeidet auch, dass die Inhaltsreichweite durch die Verwendung von KI-Bildern beeinträchtigt wird.
2.6 Visuelles System: Zwei Stile + 28 Layout-Skelette
Wer meinen vorherigen PPT-Skill kennt, wird das vertraut finden. Diese beiden visuellen Systeme und Layout-Skelette wurden aus dem PPT-Skill angepasst und neu kalibriert.
Ich werde die Details nicht wiederholen, aber hier ist, wie sie im Kontext der Bild-Text-Karte aussehen.
Zwei visuelle Systeme:
- Magazinstil: Die Art von Typografie, die man auf den Covern des New Yorker oder des Shanghai Translation Publishing House sieht. Große Weißräume, große Serifenüberschriften, asymmetrische Layouts und Text mit Atemraum.
- Rasterstil: In der Tradition von Massimo Vignellis und Helmut Schmids Schweizer Grafikdesign. Starke Raster, serifenlose Schriftarten, geometrisches Gefühl, zurückhaltende aber präzise Farbverwendung.
28 Layout-Skelette, die ich aus Magazinen, Postern, Albumcovern und Filmplakaten ausgewählt habe, die ich im letzten Jahrzehnt gesehen habe – solche, die einer kritischen Prüfung standhalten.
KI ist immer noch mittelmäßig im „freien Layout-Design“. Indem man ihr ein bewährtes Skelett gibt, wird ihre Aufgabe von „Designen“ auf „Befüllen“ heruntergestuft, und die Stabilität des fertigen Produkts verbessert sich sofort.
10 Sets von Themenfarbpaletten, feste Schriftkombinationen und begrenzte Icon-Bibliotheken – ich werde diese Details nicht einzeln auflisten.
Die Logik ist dieselbe: Einschränkungen sind keine Hindernisse, sie sind die Grundlinie.
Gib einem Content-Ersteller unendliche Farbwahlmöglichkeiten, und er wird eher etwas Hässliches machen; gib ihm 10 Sets bewährter Paletten, und die Wahrscheinlichkeit, dass er etwas Anständiges macht, nähert sich 100%.
3. Warum das Ganze?
3.1 Designperspektive: Magazin-Feeling ist sehr effektiv
Warum Magazin- und Rasterstile statt „modernerer“ Kartendesigns?
Das Wesen einer Bild-Text-Karte ist dasselbe wie das eines gedruckten Posters, einer Illustrierten oder eines Albumcovers. Ein statisches Bild verwenden, um einen Fremden in 1 Sekunde zum Anhalten zu überzeugen. Magazine und Poster haben das in den letzten hundert Jahren gründlich untersucht.
Webdesign-Sprache ist für scrollbare, interaktive Szenarien gemacht. Wenn man sie auf ein statisches Bild überträgt, wirkt sie gezwungen und die Informationen flach.
Also, alle „Warums“ der visuellen Entscheidungen dieses Skills:
- Warum viel Weißraum? Weißraum ist die Art des Magazins, dir zu sagen: „Der Fokus liegt hier.“
- Warum Serifenschriften priorisieren? Serifenschriften haben bei großen Größen das Gewicht von gedruckten Materialien.
- Warum asymmetrische Layouts? Asymmetrie erzeugt visuellen Rhythmus und lässt das Auge wissen, wo es zuerst hinschauen soll.
- Warum zurückhaltende Farben? In Social-Media-Feeds ist eine zurückhaltende Palette tatsächlich auffälliger als hohe Sättigung; sie sticht aus all den „laut schreienden“ Karten um sie herum hervor.
Diese Entscheidungen klingen „abstrakt“, aber sie sind alle spezifische Konstanten im Code. Schriftgrößenverhältnisse, Weißraumverhältnisse, Rasterspaltenanzahlen, Kontrastschwellen, Zeilenumbruchregeln. Diese Konstanten sind der wahre Burggraben dieses Skills.
3.2 Produktperspektive: Es ist ein Produkt, nicht nur ein Prompt
Nachdem ich so viele Skills gemacht habe, habe ich ein Urteil darüber gebildet, „was ein Skill eigentlich ist“:
Ein Skill ist im Wesentlichen ein kleines Produkt.
Angewandt auf dieses Projekt:
Ich habe eine PRODUCT.md dafür geschrieben, die klar erklärt, welches Problem es löst, für wen es ist und was es nicht tut. Das soll mich zwingen, klar darüber nachzudenken, „was ich eigentlich tue“. Wenn ich es nicht erklären kann, sollte der Skill nicht veröffentlicht werden.
Ich gebe ihm Versionsnummern (v0.5 / v0.9 / v0.10 / v0.12), und jede Version hat ein CHANGELOG. Ich kann dir sagen, warum v0.10 ein Fehlversuch war und wie v0.12 es behoben hat.
Ich habe eine HANDOVER.md dafür geschrieben, die erklärt, wie die Ergebnisse aussehen, wo die Grenzen sind und wann man andere Tools verwenden sollte. Ich hoffe, dass jeder, der es übernimmt, innerhalb von 30 Minuten ein vollständiges Verständnis davon hat.
Ich liste im Voraus auf, worin es nicht gut ist, um Benutzern Trial and Error zu ersparen.
Warum all diese Mühe?
Weil das größte Problem im Skill-Ökosystem ist, dass die meisten Skills damit zufrieden sind, „ich kann einen machen“, und nur wenige Menschen verfolgen „es bis zum Äußersten zu tun“.
Ein Skill sollte ein kleines Produkt sein, das eigenständig bestehen kann. Ein Prompt kann von einem Konkurrenten in zehn Minuten kopiert werden; ein Produkt nicht.
Die Kehrseite ist: Wenn ich nicht einmal die Grenzen meines eigenen Skills erklären kann, habe ich kein Recht, andere zu bitten, ihren Workflow an ihn zu übergeben.
Schlusswort
Dieser Skill hat mir geholfen zu verstehen, was mein PPT-Skill tatsächlich richtig gemacht hat.
Was es richtig gemacht hat, war, dass es von Anfang an als Produkt behandelt wurde. Viele Vorlagen, detaillierte Regeln und schöne Farben sind alles Nebenprodukte davon.
Wenn mich in Zukunft jemand fragt, was ein Skill ist, werde ich mit zwei Sätzen antworten:
Ein Skill ist ein Produkt. Um zu beurteilen, ob ein Skill gut ist, schau, ob er von seinem Autor bevorzugt wurde.
Wenn du auch Bild-Text-Inhalte erstellst, hoffe ich, dass es dir hilft, die guten Themen zu retten, die durch schlechtes Layout ruiniert wurden.
Wenn du auch Skills machst, hoffe ich, dass es dich dazu bringt, zu überdenken, ob das, was du gemacht hast, eine PRODUCT.md wert ist.
GitHub: https://github.com/op7418/guizang-social-card-skill
Sag deinem Codex, Xiaolongxia, ClaudeCode oder Workbuddy: Hilf mir, diesen Skill zu installieren: https://github.com/op7418/guizang-social-card-skill
