Cassi：人工智慧驅動的 CSS 樣式指南產生器

Cassi：人工智慧驅動的 CSS 助手

Cassi 是一款由人工智慧驅動的工具，旨在從現有 CSS 文件產生基於 markdown 的文檔。它利用 AI 模型產生有關每個 CSS 規則的有意義的資訊。此過程使記錄複雜樣式表變得更加容易。

記錄大型 CSS 專案的挑戰

處理具有大量 CSS 規則（可能分散在多個文件中）的項目可能具有挑戰性。現有工具通常專注於元件庫，需要在規則中添加註釋，或已經過時，導致難以有效記錄原始 CSS 樣式。

我建立了 Cassi 透過分析現有 CSS 檔案並為每個規則產生基於 markdown 的文件來解決此問題。

卡西的主要特點

這就是 Cassi 成為強大工具的原因：

1. 本地或雲端人工智慧整合
   • 在本地使用開源模型或連接到託管 AI 服務，例如 OpenAI 或 Anthropic 模型。
2. 基於 Markdown 的文件輸出
   • 產生豐富的、基於 Markdown 的文檔，並包含 11ty 相容的前端內容。
3. 可自訂模板
   • 編輯提示範本以根據您的需求自訂輸出。
4. 無縫整合
   • Markdown 輸出可輕鬆使用 11ty 或其他文件平台等工具。

卡西的工作原理

截至撰寫本文時，Cassi 只不過是一個 Node JS 腳本和一個提示模板。我確實計劃添加一些附加功能，稍後會詳細介紹。現在，讓我們看看它是如何工作的。

1. CSS 解析

   • 根據提供的 glob 模式讀取 CSS 檔案。
   • 解析 CSS 規則以擷取選擇器和宣告。

2. 人工智慧驅動的 Markdown 產生

   • 將每條規則傳送到 AI 模型，並附有精心設計的提示以產生文件。

3. 建立 Markdown 文件

   • 使用 AI 模型的回應為每個規則建立 markdown 檔案。

如您所見，該過程相對簡單，並且演示了在使用本地模型時，透過正確的提示可以實現什麼。

範例輸出

以下是 Cassi 在 Ollama 上使用 qwen2.5-coder 產生的 markdown 輸出範例：

 ---
    標題：“.btn-primary 的樣式”
    標籤：[“CSS”、“樣式”、“選擇器”]
    永久連結：“/styles/btn-primary/”
    簡短描述：“用於突出顯示重要操作的主按鈕樣式。”
    選擇器：
    - “.btn-primary”
    ---

    ＃＃ 概述

    `.btn-primary` 規則定義了應該突出的按鈕的主要樣式，通常用於重要的操作調用，例如「提交」或「儲存」。

    ＃＃ 用法

    以下是在 HTML 中使用此規則的方法：

    ````

html
    



<h2>
  
  
  GitHub 儲存庫
</h2>

<p>如果您想查看程式碼、親自嘗試甚至幫助改進該工具，可以在 GitHub itlackey/cassi 上找到 Cassi 儲存庫。 </p>

<h2>
  
  
  卡西的下一步是什麼？
</h2>

<p>Cassi 的誕生是為了解決我目前面臨的問題。現在我可以輕鬆產生團隊所需的文檔，我們可以開始專注於添加更多功能以進一步改善我們的工作流程。以下是我正在考慮添加的一些功能：</p>

• 11ty Starter Kit - 預先配置的 11ty 項目，其中包含 Cassi，並預先配置為從 Cassi 建立的檔案產生樣式指南。
• 正確的CLI 允許使用cassigenerate styles/*.css --output-dir docs 等語法來產生文檔，cassi download http://some.site 從URL 下載CSS 文件，或cassi build 到使用11ty生成風格指南。
• 增量更新 - 新增邏輯以允許 Cassi 確定新增/修改了哪些 CSS，並相應地新增/更新 Markdown 文件。
• 樣式分組 - 允許使用者將 CSS 規則分組為類別或部分，以便於導航。

最後的想法

CSS 文件不一定是一個手動且耗時的過程。 Cassi 可以快速產生豐富的、基於 Markdown 的文檔，易於使用、整合和自訂。

你覺得怎麼樣？ Cassi 對你的專案有用嗎？請在下面的評論中告訴我！

以上是Cassi：人工智慧驅動的 CSS 樣式指南產生器的詳細內容。更多資訊請關注PHP中文網其他相關文章！