Cassi: An AI-Powered CSS Style Guide Generator

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 输出示例：

    ---
    title: "Styling for .btn-primary"
    tags: ["CSS", "Styles", "Selectors"]
    permalink: "/styles/btn-primary/"
    shortDescription: "Primary button styling for highlighting important actions."
    selectors:
    - ".btn-primary"
    ---

    ## Overview

    The `.btn-primary` rule defines the primary styling for buttons that should stand out, typically used for important calls to action like "Submit" or "Save."

    ## Usage

    Here's how to use this rule in your HTML:

    ```

html
    <button class="btn-primary">Submit</button>


    ```

    ## CSS Declarations

    ```

css
    .btn-primary {
        background-color: #007bff;
        color: #fff;
        border: 1px solid #007bff;
        padding: 10px 15px;
        border-radius: 5px;
    }


    ```

    ## Developer Notes

    - Use `.btn-primary` sparingly to maintain emphasis on important actions.
    - Ensure sufficient contrast between the button text and its background for accessibility.

github 存储库

如果您想查看代码、亲自尝试甚至帮助改进该工具，可以在 github itlackey/cassi 上找到 cassi 存储库。

卡西的下一步是什么？

cassi 的诞生是为了解决我目前面临的问题。现在我可以轻松生成团队所需的文档，我们可以开始专注于添加更多功能以进一步改进我们的工作流程。以下是我正在考虑添加的一些功能：

• 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 对你的项目有用吗？请在下面的评论中告诉我！