天度 AI 实战库浏览全部案例 ↗

使用 MDN 支持的工具来编写更优质的 CSS

一个查询 MDN 文档、报告浏览器兼容性并分析用户 CSS 的智能体 MCP 服务器。

使用工具Claude Code
具体怎么做
通过 `npx` 命令,将智能体添加到 Claude Code、VS Code 或其他 MCP 客户端中。随后,该智能体可调用工具来获取 CSS 功能的 MDN 文档、获取浏览器兼容性数据,并分析粘贴的 CSS 或项目构建后的 CSS 文件。分析结果默认为简短摘要,您可以用简单的语言进行提问。
做到了什么
README中未提供实际结果。其中列出了约 400-500ms 的首次获取时间,以及约 100ms 的缓存获取时间。总结分析大约需要 1-2k 个词元。
上手要点
完整的150+项指标分析需要约10k+个标记,因此请保持默认总结模式。该工具需要Node 20及以上版本以及原生构建工具来处理SQLite缓存。

你可以这样试

使用 Claude Code

查看 [样式表或项目路径] 中的 CSS,并对照 MDN 文档检查每个有疑问的属性或功能在 [浏览器,例如 Safari 和 Chrome 的最新两个版本] 中的支持情况。修复你发现的问题,如不受支持的属性或冗余规则,并说明每次修改的原因。最后编制一份简短的兼容性报告,列出哪些内容可以安全发布,哪些需要采用替代方案。