当前位置：首页 > 文章列表 > 文章 > 前端 > Cassi: An AI-Powered CSS Style Guide Generator

Cassi: An AI-Powered CSS Style Guide Generator

来源：dev.to 2024-12-04 10:22:01 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

文章不知道大家是否熟悉？今天我将给大家介绍《Cassi: An AI-Powered CSS Style Guide Generator》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

cassi：人工智能驱动的 css 助手

cassi 是一款人工智能驱动的工具，旨在从现有 css 文件生成基于 markdown 的文档。它利用 ai 模型生成有关每个 css 规则的有意义的信息。此过程使记录复杂样式表变得更加容易。

记录大型 css 项目的挑战

处理具有大量 css 规则（可能分散在多个文件中）的项目可能具有挑战性。现有工具通常专注于组件库，需要在规则中添加注释，或者已经过时，导致难以有效记录原始 css 样式。

我构建了 cassi 通过分析现有 css 文件并为每个规则生成基于 markdown 的文档来解决此问题。

卡西的主要特点

这就是 cassi 成为强大工具的原因：

本地或云端人工智能集成
- 在本地使用开源模型或连接到托管 ai 服务，例如 openai 或 anthropic 模型。
基于 markdown 的文档输出
- 生成丰富的、基于 markdown 的文档，并包含 11ty 兼容的前端内容。
可定制模板
- 编辑提示模板以根据您的需要定制输出。
无缝集成
- markdown 输出可轻松使用 11ty 或其他文档平台等工具。

卡西的工作原理

截至撰写本文时，cassi 只不过是一个 node js 脚本和一个提示模板。我确实计划添加一些附加功能，稍后会详细介绍。现在，让我们看看它是如何工作的。

css 解析
- 根据提供的 glob 模式读取 css 文件。
- 解析 css 规则以提取选择器和声明。
人工智能驱动的 markdown 生成
- 将每条规则发送到 ai 模型，并带有精心设计的提示以生成文档。
创建 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 规则分组为类别或部分，以便于导航。