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 生成
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情 将每条规则发送到 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 ``` ## 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 对你的项目有用吗？请在下面的评论中告诉我！
以上就是Cassi: An AI-Powered CSS Style Guide Generator的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1151987.html
微信扫一扫 
支付宝扫一扫 
