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中文网其他相关文章！