ABOOAI/codex-skills

Textbild in HTML-Visual umwandeln

Zweck

Ein textlastiges Referenzbild in ein klareres, nutzerfreundlicheres HTML-Visual umwandeln. Die Fakten der Quelle bewahren, die Formulierung verbessern, die Informationsstruktur neu gestalten und erst nach Bestätigung des Nutzers einen hochauflösenden Screenshot exportieren.

Workflow

1. Quelle erfassen

   • Das eingereichte Bild visuell prüfen.
   • Entitäten, Bezeichnungen, Zahlen, Kategorien, Vergleiche, Schlussfolgerungen, Einschränkungen und Quellentext extrahieren.
   • Kernfakten von dekorativem Text, Wasserzeichen, Plattform-Branding, redundanten Bezeichnungen und Layout-Artefakten trennen.
   • Falls OCR unzuverlässig ist, die sichtbaren Informationen manuell transkribieren und unsichere Felder kennzeichnen.

2. Ausgabezweck definieren

   • Zielgruppe und Lesekontext ableiten: Social-Media-Bild, Artikelgrafik, Verkaufsvergleich, interner Bericht, Produktkarte, Checkliste, Dashboard usw.
   • Entscheiden, ob das beste Ergebnis eine Entscheidungsseite, Vergleichstabelle, Infografik, Zusammenfassungskarte, Berichtsseite oder eine karussellartige lange Seite ist.
   • Das Referenzlayout nicht einfach kopieren, es sei denn, der Nutzer wünscht ausdrücklich eine originalgetreue Nachbildung.

3. Text neu schreiben

   • Materiale Fakten, Zahlen, Produktnamen, Grenzen, Risikohinweise und Einschränkungen bewahren.
   • Dichte Formulierungen in kurze, nutzerorientierte Aussagen umschreiben.
   • Bevorzugt die Formulierung „Schlussfolgerung + Bedingung + Einschränkung“ verwenden.
   • Explizite Bezeichnungen wie „Am besten für“, „Achtung“, „Hauptvorteil“, „Grenze“, „Preisbeispiel“ und „Entscheidungspunkt“ verwenden, wenn sie die Seite besser lesbar machen.
   • Bei rechtlichen, medizinischen, versicherungs-, finanz- und compliance-relevanten Inhalten zurückhaltend bleiben; keine Empfehlungen erfinden, die nicht durch die Quelle gestützt werden.

4. Informationsarchitektur neu gestalten

   • Die wichtigste Schlussfolgerung zuerst platzieren.
   • Bei dichten Vergleichen einen oberen Zusammenfassungs- oder „Wie wählen“-Abschnitt hinzufügen.
   • Produkt-/Entitätskarten für die Positionierung einzelner Elemente verwenden.
   • Vor der vollständigen Detailtabelle einen Abschnitt mit den wichtigsten Unterschieden einfügen.
   • Detaillierte Matrizen nach der Zusammenfassung platzieren, nicht davor.
   • Zeilen, in denen alle Optionen identisch sind, herunterspielen, es sei denn, der Nutzer benötigt ein vollständiges Archiv.

5. HTML erstellen

   • Eine eigenständige HTML-Datei erstellen, es sei denn, der Nutzer hat ein Framework gewünscht.
   • CSS verwenden, das screenshot-freundlich ist: feste Exportbreite, stabile Rastermaße, hoher Kontrast, lesbare Schriftgrößen und ausreichender Zeilenabstand.
   • Dekorative Elemente vermeiden, die die Lesbarkeit beeinträchtigen.
   • Quellplattform-Branding, Wasserzeichen und nicht zusammenhängende Referenzbezeichnungen entfernen, es sei denn, der Nutzer bittet darum, sie zu behalten.
   • Das generierte HTML bearbeitbar und in sich geschlossen halten.

6. Vor dem endgültigen Screenshot bestätigen

   • Den HTML-Pfad oder den Vorschaustatus mitteilen.
   • Die Struktur und die wichtigsten Text-/Designentscheidungen zusammenfassen.
   • Vor der Erstellung des endgültigen hochauflösenden Screenshots um Bestätigung bitten, wenn der Nutzer die HTML-Richtung noch nicht genehmigt hat.
   • Wenn der Nutzer ausdrücklich „direkten Screenshot“ oder „gleich zum Endergebnis“ wünscht, kann die Bestätigung übersprungen werden.

7. Hochauflösenden Screenshot exportieren

   • scripts/export_highres_screenshot.py verwenden, wenn Chrome verfügbar ist.
   • Für dichten Text breite Exportformate bevorzugen:
     • Standard: Breite 2200–2600, Skalierung 2
     • Sehr dicht: Breite 2800–3200, Skalierung 2
   • PNG exportieren, dann unteren Leerraum abschneiden.
   • Abmessungen überprüfen und die Ausgabe visuell prüfen.

Designregeln

• Für das Verständnis auf den ersten Blick entwerfen, nicht für Pixelgenauigkeit.
• Hierarchie verwenden: Überschrift, Zusammenfassungskarten, Elementkarten, Hauptunterschiede, Detailtabelle.
• Zahlen und Grenzen visuell auffindbar machen.
• Farbe semantisch einsetzen:
  • Grün für relative Vorteile.
  • Orange oder Markenfarbe für Hauptunterschiede.
  • Rot für Grenzen, Ausschlüsse oder Risiken.
• Weniger Wörter pro Zelle verwenden; wenn eine Zelle viele Wörter benötigt, die Erklärung in eine Hauptunterschiedskarte verschieben.
• Vermeiden, aus dem gesamten Artefakt eine einzige riesige, dichte Tabelle zu machen.
• Für Screenshot-Arbeiten die HTML-Canvas-Breite und Schriftgrößen vor dem Export erhöhen, anstatt sich auf Bildhochskalierung zu verlassen.

Textregeln

Umschreibungsbeispiele:

• Dicht: „10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需“

• Klar: „医保内医疗费、质子重离子可 10 年保证续保；医保外、外购药和重疾特需不保证续保。“

• Dicht: „30天，意外伤害无等待期“

• Klar: „等待期 30 天；意外伤害无等待期。“

• Dicht: „医保内：5000元；医保外：1万“

• Klar: „医保内一般医疗免赔 5000 元；医保外免赔 1 万。“

Erforderliche Validierung

Vor der Übergabe:

• Bestätigen, dass keine wichtigen Fakten der Quelle verloren gegangen sind.
• Bestätigen, dass Quell-/Plattformtext auf Wunsch entfernt wurde.
• Lange Wörter und dichte chinesische Zeilen auf Überlappungen prüfen.
• Prüfen, ob das HTML bei der vorgesehenen Screenshotbreite funktioniert.
• Prüfen, ob die endgültigen PNG-Abmessungen und die Datei existieren.
• Wenn ein Screenshot erstellt wird, den Screenshot-Pfad angeben und nach Möglichkeit inline einbetten.

Für eine kompakte Checkliste references/visual-html-checklist.md lesen.