Cassi: AI を活用した CSS スタイルガイドジェネレーター-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-11-27 15:48:13

オリジナル

686 人が閲覧しました

Cassi: An AI-Powered CSS Style Guide Generator

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

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

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

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

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

Cassi の主な特徴

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

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

カッシの仕組み

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

CSS 解析
- 提供された glob パターンに基づいて CSS ファイルを読み取ります。
- CSS ルールを解析してセレクターと宣言を抽出します。
AI を活用したマークダウン生成
- 慎重に作成されたプロンプトとともに各ルールを AI モデルに送信し、ドキュメントを生成します。
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 ルールをカテゴリまたはセクションにグループ化して、ナビゲーションを容易にできるようにします。