Cassi: Ein KI-gestützter CSS-Styleguide-Generator

Cassi: Ein KI-gestützter CSS-Assistent

Cassi ist ein KI-gestütztes Tool, das entwickelt wurde, um Markdown-basierte Dokumentation aus vorhandenen CSS-Dateien zu generieren. Es nutzt KI-Modelle, um aussagekräftige Informationen zu jeder CSS-Regel zu generieren. Dieser Prozess erleichtert die Dokumentation komplexer Stylesheets erheblich.

Herausforderungen bei der Dokumentation großer CSS-Projekte

Die Arbeit an Projekten mit einer großen Menge an CSS-Regeln, die möglicherweise über mehrere Dateien verteilt sind, kann eine Herausforderung sein. Bestehende Tools konzentrieren sich oft auf Komponentenbibliotheken, erfordern das Hinzufügen von Kommentaren zu den Regeln oder sind veraltet, was eine effektive Dokumentation roher CSS-Stile erschwert.

Ich habe Cassi erstellt, um dieses Problem zu beheben, indem ich vorhandene CSS-Dateien analysiert und eine Markdown-basierte Dokumentation für jede Regel generiert habe.

Hauptmerkmale von Cassi

Das macht Cassi zu einem leistungsstarken Werkzeug:

1. Lokale oder Cloud-KI-Integration
   • Verwenden Sie Open-Source-Modelle lokal oder stellen Sie eine Verbindung zu gehosteten KI-Diensten wie OpenAI oder Anthropic-Modellen her.
2. Markdown-basierte Dokumentationsausgabe
   • Erzeugt eine umfangreiche, auf Markdowns basierende Dokumentation mit 11ty-kompatiblem Titelblatt.
3. Anpassbare Vorlagen
   • Bearbeiten Sie die Eingabeaufforderungsvorlage, um die Ausgabe an Ihre Bedürfnisse anzupassen.
4. Nahtlose Integration
   • Die Markdown-Ausgabe funktioniert mühelos mit Tools wie 11ty oder anderen Dokumentationsplattformen.

Wie Cassi funktioniert

Zum Zeitpunkt des Verfassens dieses Artikels ist Cassi nicht viel mehr als ein Node JS-Skript und eine Eingabeaufforderungsvorlage. Ich habe vor, einige zusätzliche Funktionen hinzuzufügen, dazu später mehr. Schauen wir uns zunächst an, wie es funktioniert.

1. CSS-Parsing

   • Liest CSS-Dateien basierend auf den bereitgestellten Glob-Mustern.
   • Parst CSS-Regeln, um Selektoren und Deklarationen zu extrahieren.

2. KI-gestützte Markdown-Generierung

   • Sendet jede Regel mit einer sorgfältig ausgearbeiteten Aufforderung an ein KI-Modell, um eine Dokumentation zu erstellen.

3. Markdown-Dokumentation erstellen

   • Erstellt Markdown-Dateien für jede der Regeln unter Verwendung der Antwort des KI-Modells.

Wie Sie sehen, ist der Prozess relativ einfach und zeigt, was Sie mit der richtigen Eingabeaufforderung erreichen können, selbst wenn Sie mit lokalen Modellen arbeiten.

Beispielausgabe

Hier ist ein Beispiel für die Markdown-Ausgabe, die Cassi mit qwen2.5-coder auf Ollama generiert:

 ---
    Titel: „Styling für .btn-primary“
    Tags: ["CSS", "Styles", "Selektoren"]
    Permalink: „/styles/btn-primary/“
    shortDescription: „Primäre Schaltflächengestaltung zum Hervorheben wichtiger Aktionen.“
    Selektoren:
    - „.btn-primär“
    ---

    ## Übersicht

    Die „.btn-primary“-Regel definiert den primären Stil für Schaltflächen, die hervorstechen sollen und typischerweise für wichtige Handlungsaufforderungen wie „Senden“ oder „Speichern“ verwendet werden.

    ## Nutzung

    So verwenden Sie diese Regel in Ihrem HTML:

    „

html
    <schaltfl>



<h2>
  
  
  GitHub-Repository
</h2>

<p>Sie finden das Cassi-Repository auf GitHub itlackey/cassi, wenn Sie den Code sehen, ihn selbst ausprobieren oder sogar bei der Verbesserung des Tools helfen möchten.</p>

<h2>
  
  
  Was kommt als nächstes für Cassi?
</h2>

<p>Cassi wurde entwickelt, um ein Problem zu lösen, mit dem ich derzeit konfrontiert bin. Da ich nun ganz einfach die Dokumentation erstellen kann, die mein Team benötigt, können wir uns darauf konzentrieren, ein paar weitere Funktionen hinzuzufügen, um unseren Workflow noch weiter zu verbessern. Hier sind einige Funktionen, die ich hinzufügen möchte:</p>

<ul>
<li>
<strong>11ty Starter Kit</strong> – Ein vorkonfiguriertes 11ty-Projekt, das Cassi enthält und vorkonfiguriert ist, um aus den von Cassi erstellten Dateien einen Styleguide zu generieren.</li>
<li>
<strong>Korrekte CLI</strong>, um eine Syntax wie „Cassi“ zu ermöglichen Generieren Sie einen Styleguide mit 11ty.</li>
<li>
<strong>Inkrementelle Aktualisierungen</strong> – Fügen Sie eine Logik hinzu, damit Cassi feststellen kann, welches CSS hinzugefügt/geändert wurde, und die Markdown-Dokumente entsprechend hinzufügen/aktualisieren.</li>
<li>
<strong>Stilgruppierung</strong> – Ermöglichen Sie Benutzern, CSS-Regeln zur einfacheren Navigation in Kategorien oder Abschnitte zu gruppieren.</li>
</ul>

<h2>
  
  
  Letzte Gedanken
</h2>

<p>CSS-Dokumentation muss kein manueller, zeitaufwändiger Prozess sein. <strong>Cassi</strong> kann schnell umfangreiche, markdownbasierte Dokumentation erstellen, die einfach zu verwenden, zu integrieren und anzupassen ist.</p>

<p><strong>Was denken Sie?</strong> Wäre Cassi bei Ihren Projekten hilfreich? Lass es mich unten in den Kommentaren wissen!</p>


          

            

            
        </schaltfl>

Das obige ist der detaillierte Inhalt vonCassi: Ein KI-gestützter CSS-Styleguide-Generator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!