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 对你的项目有用吗?请在下面的评论中告诉我!
以上就是Cassi: An AI-Powered CSS Style Guide Generator的详细内容,更多请关注慧达安全导航其它相关文章!
免责 声明
1、本网站名称:慧达安全导航
2、本站永久网址:https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营,本站所有资源不支持联网运行!只允许调试,参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
7、为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
8.若资源侵犯了您的合法权益,请持 您的版权证书和相关原作品信息来信通知我们!QQ:1247526623我们会及时删除,给您带来的不便,我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
11、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需
12、因源码具有可复制性,一经赞助,不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系1247526623@qq.com
转载请注明出处: 慧达安全导航 » Cassi: An AI-Powered CSS Style Guide Generator
发表评论 取消回复