Cassi : un générateur de guide de style CSS alimenté par l'IA

Cassi : un assistant CSS alimenté par l'IA

Cassi est un outil basé sur l'IA conçu pour générer une documentation basée sur le markdown à partir de fichiers CSS existants. Il exploite des modèles d'IA pour générer des informations significatives sur chaque règle CSS. Ce processus facilite grandement la documentation de feuilles de style complexes.

Défis liés à la documentation des grands projets CSS

Travailler sur des projets comportant un grand nombre de règles CSS, éventuellement dispersées dans plusieurs fichiers, peut s'avérer difficile. Les outils existants se concentrent souvent sur les bibliothèques de composants, nécessitent l'ajout de commentaires aux règles ou sont obsolètes, ce qui rend difficile la documentation efficace des styles CSS bruts.

J'ai construit Cassi pour résoudre ce problème en analysant les fichiers CSS existants et en générant une documentation basée sur les démarques pour chaque règle.

Principales caractéristiques de Cassi

Voici ce qui fait de Cassi un outil puissant :

1. Intégration de l'IA locale ou cloud
   • Utilisez des modèles open source localement ou connectez-vous à des services d'IA hébergés tels que les modèles OpenAI ou Anthropic.
2. Sortie de documentation basée sur Markdown
   • Génère une documentation riche basée sur les démarques, complète avec des éléments préliminaires compatibles 11ty.
3. Modèles personnalisables
   • Modifiez le modèle d'invite pour adapter le résultat en fonction de vos besoins.
4. Intégration transparente
   • La sortie Markdown fonctionne sans effort avec des outils comme 11ty ou d'autres plateformes de documentation.

Comment fonctionne Cassi

Au moment d'écrire ces lignes, Cassi n'est rien de plus qu'un script Node JS et un modèle d'invite. J'ai l'intention d'ajouter des fonctionnalités supplémentaires, j'en reparlerai plus tard. Pour l'instant, regardons comment cela fonctionne.

1. Analyse CSS

   • Lit les fichiers CSS en fonction des modèles globaux fournis.
   • Analyse les règles CSS pour extraire les sélecteurs et les déclarations.

2. Génération de démarques alimentée par l'IA

   • Envoie chaque règle à un modèle d'IA avec une invite soigneusement conçue pour générer de la documentation.

3. Créer une documentation Markdown

   • Crée des fichiers de démarques pour chacune des règles en utilisant la réponse du modèle d'IA.

Comme vous pouvez le constater, le processus est relativement simple et démontre ce que vous pouvez réaliser avec la bonne invite lorsque vous travaillez même avec des modèles locaux.

Exemple de sortie

Voici un exemple de sortie de démarque que Cassi génère à l'aide de qwen2.5-coder sur Ollama :

 ---
    title : « Style pour .btn-primary »
    balises : ["CSS", "Styles", "Sélecteurs"]
    lien permanent : "/styles/btn-primary/"
    shortDescription: "Style du bouton principal pour mettre en évidence les actions importantes."
    sélecteurs :
    - ".btn-primaire"
    ---

    ## Aperçu

    La règle « .btn-primary » définit le style principal des boutons qui doivent se démarquer, généralement utilisés pour les appels à l'action importants comme « Soumettre » ou « Enregistrer ».

    ## Utilisation

    Voici comment utiliser cette règle dans votre HTML :

    ```

HTML
    <bouton>



<h2>
  
  
  Dépôt GitHub
</h2>

<p>Vous pouvez trouver le référentiel Cassi sur GitHub itlackey/cassi si vous souhaitez voir le code, l'essayer vous-même ou même contribuer à améliorer l'outil.</p>

<h2>
  
  
  Quelle est la prochaine étape pour Cassi ?
</h2>

<p>Cassi a été conçu pour résoudre un problème auquel je suis actuellement confronté. Maintenant que je peux facilement générer la documentation dont mon équipe a besoin, nous pouvons commencer à nous concentrer sur l'ajout de quelques fonctionnalités supplémentaires pour améliorer encore plus notre flux de travail. Voici quelques fonctionnalités que j'envisage d'ajouter :</p>

<ul>
<li>
<strong>11ty Starter Kit</strong> - Un projet 11ty préconfiguré qui inclut Cassi et est préconfiguré pour générer un guide de style à partir des fichiers créés par Cassi.</li>
<li>
<strong>CLI appropriée</strong> pour autoriser une syntaxe telle que cassi generate styles/*.css --output-dir docs pour générer de la documentation, cassi download http://some.site pour télécharger des fichiers CSS à partir d'une URL ou cassi build vers générer un guide de style en utilisant 11ty.</li>
<li>
<strong>Mises à jour incrémentielles</strong> - Ajoutez une logique pour permettre à Cassi de déterminer quel CSS a été ajouté/modifié, et d'ajouter/mettre à jour les documents de démarque en conséquence.</li>
<li>
<strong>Regroupement de styles</strong> : permet aux utilisateurs de regrouper les règles CSS en catégories ou sections pour une navigation plus facile.</li>
</ul>

<h2>
  
  
  Pensées finales
</h2>

<p>La documentation CSS ne doit pas nécessairement être un processus manuel et fastidieux. <strong>Cassi</strong> peut générer rapidement une documentation riche, basée sur des démarques, facile à utiliser, à intégrer et à personnaliser.</p>

<p><strong>Qu'en pensez-vous ?</strong> Cassi serait-elle utile dans vos projets ? Faites-le-moi savoir dans les commentaires ci-dessous !</p>


          

            

            
        </bouton>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!