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 规则分组为类别或部分，以便于导航。
最后的想法
css 文档不一定是一个手动且耗时的过程。 cassi 可以快速生成丰富的、基于 markdown 的文档，易于使用、集成和自定义。
你觉得怎么样？cassi 对你的项目有用吗？请在下面的评论中告诉我！
