使用 MDN 感知助手编写更优质的 CSS
一个 MCP（模型上下文协议）服务器，提供来自 MDN 的最新 CSS 文档以及全面的 CSS 代码分析。任务：建议落地方案：通过 CLI 或配置文件安装 css-mcp 服务器，使 Claude Code 能够获取实时的 MDN 文档和浏览器兼容性数据。代理使用 get_docs 和 analyze_css 等工具检索属性详情，并评估样式表指标，如选择器复杂度和颜色调色板。人类开发人员审查生成的洞察结果，并手动将推荐的 CSS 更改应用到代码库中。；工具：Claude Code。人工角色：原始帖子没有说明人如何参与。；局限：需要 Node.js 20+ 和用于原生模块的构建工具。该服务器处于实验阶段，MDN API 调用的网络超时设置为 10 秒。输入限制包括每个 CSS 文件最大 10MB，总计最大 50MB。在应用分析建议的任何代码更改之前，需要人工批准。。
工具
Agent Work Atlas 发布日期:
概述
一个 MCP（模型上下文协议）服务器，提供来自 MDN 的最新 CSS 文档以及全面的 CSS 代码分析。
工作流程
建议落地方案：通过 CLI 或配置文件安装 css-mcp 服务器，使 Claude Code 能够获取实时的 MDN 文档和浏览器兼容性数据。代理使用 get_docs 和 analyze_css 等工具检索属性详情，并评估样式表指标，如选择器复杂度和颜色调色板。人类开发人员审查生成的洞察结果，并手动将推荐的 CSS 更改应用到代码库中。
原文报告的结果
来源未报告此工作流的测量业务成果或成功指标。它仅描述了工具的功能，例如缓存性能（缓存获取约 100ms）和分析深度（150+ 指标）。可衡量的验收检查是验证代理是否正确检索特定 CSS 属性的 MDN 数据，并在测试样式表中识别出已知的复杂性问题。
人工角色
原始帖子没有说明人如何参与。
局限
需要 Node.js 20+ 和用于原生模块的构建工具。该服务器处于实验阶段，MDN API 调用的网络超时设置为 10 秒。输入限制包括每个 CSS 文件最大 10MB，总计最大 50MB。在应用分析建议的任何代码更改之前，需要人工批准。
试一试
扮演一名使用安装了 css-mcp 服务器的 Claude Code 的 CSS 开发人员。我的目标是审计 [replaceable: 项目目录，例如 ./dist] 中的 CSS 复杂度和设计一致性。首先，使用 analyze_css 工具对单个样本文件 [replaceable: 一个 CSS 文件的路径] 进行试运行分析，设置 summaryOnly: true。向我展示输出结果，特别强调选择器复杂度和唯一颜色。等待我的确认后再继续。如果样本看起来正确，则对完整目录运行 analyze_project_css。不要修改任何文件。以 Markdown 格式输出最终报告，包含“高复杂度选择器”、“颜色调色板”和“建议重构”章节。如果 MCP 服务器连接失败，请报告错误并停止。确保未经我明确批准，不将任何更改推送到仓库。
来源报告未经独立核验。发布日期为本站案例发布日期，并非原始文章日期。