Cassi: AI を活用した CSS スタイル ガイド ジェネレーター

Cassi: AI を活用した CSS アシスタント

Cassi は、既存の CSS ファイルからマークダウンベースのドキュメントを生成するように設計された AI を活用したツールです。 AI モデルを活用して、各 CSS ルールに関する意味のある情報を生成します。このプロセスにより、複雑なスタイルシートの文書化がはるかに簡単になります。

大規模な CSS プロジェクトを文書化する際の課題

大量の CSS ルールがあり、複数のファイルに分散している可能性があるプロジェクトで作業するのは困難な場合があります。既存のツールはコンポーネント ライブラリに焦点を当てていることが多く、ルールにコメントを追加する必要があるか、または古いため、生の CSS スタイルを効果的に文書化することが困難です。

私は、既存の CSS ファイルを分析し、ルールごとにマークダウンベースのドキュメントを生成することで、この問題に対処するために Cassi を構築しました。

Cassi の主な特徴

Cassi が強力なツールとなる理由は次のとおりです:

1. ローカルまたはクラウド AI の統合
   • オープンソース モデルをローカルで使用するか、OpenAI や Anthropic モデルなどのホストされた AI サービスに接続します。
2. マークダウンベースのドキュメント出力
   • 11ty 互換の前付を備えたリッチなマークダウンベースのドキュメントを生成します。
3. カスタマイズ可能なテンプレート
   • プロンプト テンプレートを編集して、ニーズに応じて出力を調整します。
4. シームレスな統合
   • Markdown 出力は、11ty やその他のドキュメント プラットフォームなどのツールで簡単に機能します。

カッシの仕組み

これを書いている時点では、Cassi は Node JS スクリプトとプロンプト テンプレートにすぎません。いくつかの追加機能を追加する計画がありますが、それについては後で詳しく説明します。とりあえず、それがどのように機能するかを見てみましょう。

1. CSS 解析

   • 提供された glob パターンに基づいて CSS ファイルを読み取ります。
   • CSS ルールを解析してセレクターと宣言を抽出します。

2. AI を活用したマークダウン生成

   • 慎重に作成されたプロンプトとともに各ルールを AI モデルに送信し、ドキュメントを生成します。

3. Markdown ドキュメントの作成

   • AI モデルの応答を使用して、各ルールのマークダウン ファイルを作成します。

ご覧のとおり、このプロセスは比較的単純で、ローカル モデルでも作業する場合に正しいプロンプトを使用して何を達成できるかを示しています。

出力例

これは、Cassi が Ollama で qwen2.5-coder を使用して生成したマークダウン出力の例です。

 ---
    タイトル: 「.btn-primary のスタイリング」
    タグ: ["CSS"、"スタイル"、"セレクター"]
    パーマリンク: "/styles/btn-primary/"
    shortDescription: 「重要なアクションを強調表示するための主なボタンのスタイル。」
    セレクター:
    - 「.btn-primary」
    ---

    ＃＃ 概要

    `.btn-primary` ルールは、目立つべきボタンの主要なスタイルを定義します。通常は、「送信」や「保存」などの重要なアクションの呼び出しに使用されます。

    ＃＃ 使用法

    このルールを HTML で使用する方法は次のとおりです。

    「」

html
    



<h2>
  
  
  GitHub リポジトリ
</h2>

<p>コードを見たり、自分で試したり、ツールの改善に協力したい場合は、GitHub itlackey/cassi で Cassi リポジトリを見つけることができます。</p>

<h2>
  
  
  カッシの次は何でしょうか？
</h2>

<p>Cassi は、私が現在直面している問題を解決するために構築されました。チームが必要とするドキュメントを簡単に生成できるようになったので、ワークフローをさらに改善するために、さらにいくつかの機能を追加することに集中できるようになりました。追加を検討している機能は次のとおりです。</p>

• 11ty スターター キット - Cassi を含む事前設定された 11ty プロジェクト。Cassi によって作成されたファイルからスタイル ガイドを生成するように事前設定されています。
• 適切な CLI を使用すると、ドキュメントを生成するための cassigeneratestyles/*.css --output-dir docs のような構文、URL から CSS ファイルをダウンロードするための cassi download http://some.site、または への cassi build のような構文を使用できるようになります。 11ty を使用してスタイル ガイドを生成します。
• 増分更新 - どの CSS が追加/変更されたかを Cassi が判断できるようにするロジックを追加し、それに応じてマークダウン ドキュメントを追加/更新します。
• スタイルのグループ化 - ユーザーが CSS ルールをカテゴリまたはセクションにグループ化して、ナビゲーションを容易にできるようにします。

最終的な考え

CSS ドキュメントは、時間のかかる手動プロセスである必要はありません。 Cassi は、使いやすく、統合し、カスタマイズしやすい、マークダウンベースの豊富なドキュメントを迅速に生成できます。

どう思いますか? Cassi はあなたのプロジェクトに役立つでしょうか?以下のコメント欄でお知らせください!

以上がCassi: AI を活用した CSS スタイル ガイド ジェネレーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。