Communitygithub.com

AILatest-Studio/ailatest-skill

Erstellen, überarbeiten und prüfen Sie veröffentlichungsreife Prozessablaufdiagramme in einem kohärenten, chinesischen Journal-Visual-System mit konfigurierbarer Stufenanzahl, horizontalen oder vertikalen Layouts, farbigen Kopfzeilen, ausgerichteten Trennlinien, gefüllten Prozesspfeilen, Linien-Symbolen, Microsoft YaHei-Typografie und PNG/SVG/PDF-Export.

Was ist ailatest-skill?

Diese Fähigkeit wandelt geordnete Prozesse, Entscheidungsrahmen, Beweisketten oder Implementierungs-Workflows in klare, veröffentlichungsreife Flussdiagramme um. Sie unterstützt eine flexible Stufenanzahl (2–6 Standardstufen) und Layout-Orientierungen (horizontal, vertikal oder als 2D-Matrix), wobei ein konsistentes chinesisches Journal-Visual-System mit weißem Hintergrund, integrierten Stufenmodulen und einer tiefen Marineblau–Teal–Grün-Farbpalette verwendet wird. Die Fähigkeit ist für Claude Code, Cursor und ähnliche KI-Agenten konzipiert, die Texteingaben akzeptieren und strukturierte Ausgaben erzeugen. Sie arbeitet deterministisch mit Matplotlib/SVG, nutzt echte Microsoft YaHei-Schriftartdateien für die CJK-Typografie, exportiert in PNG (mindestens 300 dpi), SVG und PDF und führt vor der Auslieferung eine gründliche Qualitätssicherung durch, um die Formatierung, Ausrichtung und Schriftartintegrität zu gewährleisten. Der Workflow beginnt mit der Definition eines semantischen Vertrags, strukturiert dann den Inhalt, wendet das visuelle System an, zeichnet deterministisch und schließt mit einem QA-Schritt ab, um sicherzustellen, dass die Abbildung bereit für die Veröffentlichung ist.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AILatest-Studio/ailatest-skill/tree/HEAD/skills/draw-process-flowchart

In Ihrer bevorzugten KI fragen

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

Dokumentation

Prozessablaufdiagramm

Verwenden Sie diese Fähigkeit, um jeden geordneten Prozess, Entscheidungsrahmen, Beweiskette oder Implementierungs-Workflow in ein klares, veröffentlichungsreifes Flussdiagramm zu verwandeln. Das mitgelieferte Referenzbild ist eine Stilreferenz, keine feste vierspaltige Vorlage: Wählen Sie die Anzahl der Stufen und die Ausrichtung basierend auf dem Inhalt.

Arbeitsablauf

1. Definieren Sie den semantischen Vertrag

Listen Sie die tatsächlichen Stufen auf, bevor Sie zeichnen. Verwenden Sie standardmäßig zwei bis sechs Stufen; teilen Sie eine Stufe nur dann auf, wenn sie eine eindeutige Entscheidung, einen Verantwortlichen, eine Eingabe/Ausgabe oder einen Beweistyp hat. Führen Sie Stufen zusammen, wenn benachbarte Kästchen sich wiederholende Formulierungen enthalten würden.

Wählen Sie die Leserichtung:

  • verwenden Sie eine horizontale Abfolge für 2–6 kompakte Stufen und breite Seiten;
  • verwenden Sie eine vertikale Abfolge für lange Bezeichnungen, viele Stufen oder schmale Hochformatseiten;
  • verwenden Sie eine zweidimensionale Matrix nur, wenn zwei unabhängige Dimensionen analytisch notwendig sind.

Schreiben Sie die Hauptsequenz in eine Zeile, zum Beispiel:

Eingabe/Beobachtung → Analyse/Entwurf → Ausführung/Lieferung → Rückmeldung/Überprüfung

Fügen Sie eine optionale sekundäre Implementierungsspur nur dann hinzu, wenn sie eine eindeutige Übergabe oder einen Lebenszyklus hinzufügt. Richten Sie deren Bezeichnungen an den entsprechenden Hauptstufen aus; wiederholen Sie keinen Text aus dem Hauptbereich.

Definieren Sie eine Frage für jede Stufe:

  • Welcher Beweis oder welche Eingabe startet den Prozess?
  • Welche Analyse, Überprüfung oder Klassifizierung findet als nächstes statt?
  • Welche Optionen, Aktionen oder Entscheidungen folgen?
  • Wie wird die Implementierung, Lieferung, das Feedback oder die Überprüfung abgeschlossen?

Bewahren Sie die Terminologie und kausale Logik des Benutzers. Erfinden Sie keine Statistiken, Standards, Kosten oder Kausalaussagen, um leeren Raum zu füllen.

2. Strukturieren Sie den Inhalt

Verwenden Sie zwei bis vier kurze Inhaltsgruppen pro Stufe. Jede Gruppe hat:

  1. eine kurze farbige Bezeichnung (fett);
  2. eine prägnante Erklärungszeile;
  3. einen hellen gestrichelten Trenner unterhalb der Gruppe, wenn eine weitere Gruppe folgt.

Behalten Sie bei allen Stufen die gleiche interne Struktur bei, es sei denn, der Benutzer fordert explizit ein Matrix-, Karten- oder Vergleichslayout. Geben Sie einer Stufe keine zusätzlichen inneren Karten, nur weil sie mehrere Optionen enthält; verwenden Sie zuerst Texthierarchie und Trenner.

Halten Sie erklärende Anmerkungen kurz und dezent. Setzen Sie Definitionen, Beispielgrenzen oder Einschränkungen in die Anmerkungszeile und nicht in die primären Bezeichnungen. Halten Sie Abbildungstitel und -unterschriften im Manuskript, wenn das Dokument diese bereits bereitstellt; duplizieren Sie sie nicht innerhalb des Bildes.

3. Wenden Sie das visuelle System an

Lesen Sie references/style-spec.md für die genauen Tokens und Anpassungsregeln. Der Referenzstil verwendet:

  • weißen Hintergrund, gleiche Stufenmodule, dünne graue Außenrahmen;
  • eine tiefe Marineblau→Teal→Grün-Palette, erweitert durch helle Tönungen, wenn mehr Stufen benötigt werden;
  • dunkle gefüllte Pfeile zwischen den Stufen;
  • ein kleines weißes Linien-Symbol pro Stufe, ausgewählt passend zur Bedeutung der Stufe;
  • keine Verläufe, Schatten, Schraffuren, Clip-Art-Mischungen oder dekorativen Schleifen.

Verwenden Sie immer eine echte Microsoft YaHei-Datei, wenn der Benutzer Microsoft YaHei anfordert. Registrieren Sie reguläre und fette Schriftartdateien explizit mit Matplotlib FontProperties(fname=...); verlassen Sie sich nicht auf die Familie-Namenssuche oder synthetische Fettung. Überprüfen Sie die Schriftart im exportierten SVG und melden Sie ein Schriftartproblem, anstatt stillschweigend eine andere CJK-Schriftart zu ersetzen.

Verwenden Sie fette Typografie für Kopfzeilen, Bezeichnungen von Gruppen, primäre Erklärungen, Aktionsbeschriftungen und Lebenszyklusbeschriftungen. Verwenden Sie normale oder dezentere Schrift nur für sekundäre Anmerkungen. Sorgen Sie für Hierarchie durch Größe, Farbe und Weißraum, anstatt unnötige Ränder hinzuzufügen.

4. Zeichnen Sie deterministisch

Bevorzugen Sie einen reproduzierbaren Matplotlib/SVG-Arbeitsablauf. Beginnen Sie mit scripts/draw_flowchart_template.py, setzen Sie orientation und stages und ersetzen Sie die Beispielbeschriftungen durch den Inhalt des Benutzers. Halten Sie Hilfsfunktionen separat für:

  • Stufengeometrie und Kopfzeilenbänder;
  • Linien-Symbole der Kopfzeile;
  • ausgerichtete Trenner;
  • gefüllte Polygonpfeile;
  • optionale Lebenszyklus-/Implementierungsspur;
  • Export in mehrere Formate.

Verwenden Sie für ein horizontales Layout mit vier Stufen die Referenzgeometrie in references/style-spec.md. Für andere Stufenanzahlen berechnen Sie gleiche Modulbreiten und verwenden Sie dieselben Außenränder, Spaltenbreiten, Kopfzeilenhöhe und Inhaltsgrundlinien, wo immer die Beschriftungen passen. Kürzen Sie Formulierungen, bevor Sie die Typografie verkleinern.

Exportieren Sie mindestens 300 dpi PNG plus bearbeitbares SVG und PDF. Setzen Sie svg.fonttype = "none", damit Text möglichst durchsuchbar/bearbeitbar bleibt. Betten Sie das PNG oder PDF erst nach Inspektion der eigenständigen Abbildung in das Manuskript ein.

5. Qualitätssicherung vor der Auslieferung

Überprüfen Sie die eigenständige Abbildung bei 100% und dann die gerenderten Manuskriptseiten. Bestätigen Sie alle folgenden Punkte:

  • die gewählte Stufenanzahl und Leserichtung sind offensichtlich;
  • Kopfzeilen haben eine konsistente Grundlinie und Höhe innerhalb des gewählten Layouts;
  • Textgruppen sind vertikal in ihren zugewiesenen Bereichen zentriert;
  • gestrichelte Trenner verwenden ein einheitliches Strichmuster, Linienstärke, Farbe, Einzug und ausgewogene Abstände;
  • alle Stufen verwenden die gleiche interne Kartenpolitik;
  • gefüllte Pfeile sitzen in den Abständen, berühren keine Ränder und zeigen in die beabsichtigte Richtung;
  • optionale untere Beschriftungen sind an ihren Hauptstufen ausgerichtet und ausreichend groß;
  • Symbole haben eine einheitliche Strichstärke, Farbe, Skalierung und optische Ausrichtung;
  • kein Text berührt eine farbige Kopfzeile, einen Trenner, einen Außenrand oder eine Ausgabeleiste;
  • keine Beschriftung wird nach der Manuskriptskalierung umbrochen oder abgeschnitten;
  • die Abbildungsnummer-/Bildunterschrift-Sequenz bleibt nach dem Einbetten unverändert;
  • das exportierte SVG enthält Microsoft YaHei regular/fett und keinen unbeabsichtigten Fallback.

Verwenden Sie für die DOCX-Auslieferung die Render → Alle-Seiten-Überprüfung-Schleife des Dokument-Rendering-Skills. Rendern Sie nach jeder Geometrie- oder Schriftartänderung erneut. Bewahren Sie das Originalmanuskript auf und schreiben Sie die überarbeitete Datei in einen neuen Ausgabepfad.

Visuelles Beispiel

Das gebündelte Bild unter assets/research-evidence-flow.png ist ein rekonstruiertes Beispiel einer fünfstufigen Forschungsevidenzkette. Es handelt sich um synthetischen Demonstrationsinhalt, nicht um eine vom Benutzer bereitgestellte Abbildung oder Projektdaten.

Aufrufbeispiele

  • „Verwenden Sie $draw-process-flowchart, um diese Forschungsmethode in eine fünfstufige Journal-Abbildung zu verwandeln.“
  • „Verwenden Sie $draw-process-flowchart, um diesen Arbeitsablauf vertikal neu zu gestalten, mit denselben Farben, Pfeilen, Symbolen und Microsoft YaHei-Typografie.“
  • „Verwenden Sie $draw-process-flowchart, um dieses zweistufige Vergleichsdiagramm zu standardisieren und als PNG/SVG/PDF zu exportieren.“

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Verwandte Skills