ACSS MCP服务器
 ](https://nodejs.org) 
MCP（模型上下文协议）服务器，为AI助手提供对完整的Automatic CSS v3.0文档的访问。此服务器使Claude和其他兼容MCP的AI助手能够搜索、浏览和检索有关ACSS类、变量和文档的详细信息。
目录
- 先决条件 - 标准安装 - Claude桌面配置 - Claude.ai Web的配置
特性
✨ 综合搜索 -在所有ACSS文档中进行模糊全文搜索 📖 页面检索 -获取包含代码示例的完整文档页面 🗂️ 类别浏览 -探索完整的文档结构 🎨 变量查找 -使用默认值搜索和过滤CSS自定义属性 🚀 快速和本地 -预先索引的数据用于即时响应 🔧 轻松集成 -适用于Claude Desktop和Claude.ai网站
这是什么？
此MCP服务器提供了四种与Automatic CSS文档交互的强大工具：
search_acss_docs-在所有ACSS v3.0文档页面上进行模糊全文搜索get_acss_page-检索特定文档页面的完整内容list_acss_categories-浏览所有文档类别及其结构get_acss_variables-搜索和过滤ACSS CSS自定义属性（变量）
借助此服务器，AI助手可以帮助您：
- 为您的设计需求找到合适的ACSS课程
- 查找CSS变量名及其默认值
- 了解ACSS功能和最佳实践
- 获取代码示例和实现指导
安装
先决条件
- Node.js 18或更高版本
- npm或其他包管理器
标准安装
- 克隆此存储库：
git clone
cd acss-mcp-server- 安装依赖项：
npm install- 构建TypeScript项目：
npm run build- 配置您的MCP客户端（例如Claude Desktop）以使用此服务器。
Claude桌面配置
将此服务器添加到您的Claude Desktop配置文件中：
MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"acss-docs": {
"command": "node",
"args": ["/absolute/path/to/acss-mcp-server/dist/index.js"]
}
}
}替换 /absolute/path/to/acss-mcp-server 使用克隆此存储库的实际路径。
Claude.ai Web的配置（MCP服务器设置）
如果您使用的是支持MCP的Claude.ai web界面，则可以使用以下字段添加此服务器：
服务器名称：
acss-docs命令（适用于本地服务器）：
node /absolute/path/to/acss-mcp-server/dist/index.js替换 /absolute/path/to/acss-mcp-server 使用您克隆和构建此存储库的实际路径。
注： 在本地运行时，将“HTTP URL（用于远程服务器）”字段留空。
用法
安装和配置后，重新启动MCP客户端（Claude Desktop或重新加载Claude.ai）。服务器将自动连接并使ACSS文档工具可用。
然后你可以问克劳德一些问题，比如：
- “哪些ACSS类可用于创建按钮？”
- “显示ACSS中的间距变量”
- “如何使用ACSS网格实用程序？”
- “主按钮颜色变量的默认值是多少？”
Claude将使用MCP服务器搜索文档并提供准确、详细的答案。
可用工具
search_ass_docs
对所有文档进行全文模糊搜索。
参数：
query（必填）-搜索查询（例如，“flexbox网格”、“btn变量”）category（可选）-按类别过滤limit（可选）-要返回的最大结果（默认值10，最大值50）offset（可选）-跳过N个结果进行分页
get_ass_page
获取特定文档页面的完整内容。
参数：
slug（必填）-页面滑块（例如“按钮链接/按钮变量”）
list_ass_类别
列出所有文档类别。
参数：
include_pages（可选）-包括每个类别的页面列表
get_ass_变量
搜索和浏览CSS自定义属性。
参数：
category（可选）-按变量类别筛选search（可选）-用于筛选变量的搜索词limit（可选）-最大结果（默认10，最大50）offset（可选）-跳过N个结果进行分页
发展
项目结构
acss-mcp-server/
├── src/
│ ├── index.ts # Server entry point
│ ├── server.ts # MCP server setup and tool registration
│ ├── tools/ # Tool implementations
│ │ ├── search-docs.ts
│ │ ├── get-page.ts
│ │ ├── list-categories.ts
│ │ └── get-variables.ts
│ └── scraper/ # Documentation scraper
├── data/ # Pre-scraped documentation data
│ ├── pages.json
│ ├── categories.json
│ └── variables.json
├── dist/ # Compiled JavaScript (generated)
└── package.json命令
在开发模式下运行（无需构建）：
npm run dev生产建设：
npm run build启动服务器（构建后）：
npm start更新文档数据：
npm run scrape运行测试：
npm test技术栈
- 运行时：Node.js 18+
- 语言：TypeScript 5.7
- MCP-SDK：@modelcontextprotocol/sdk v1.12+
- 搜索：Fuse.js（模糊搜索）
- 抓取：Cheerio（HTML解析）
- 验证：Zod（模式验证）
- 测试：Vitest
故障排除
服务器未连接
问题：Claude无法连接到MCP服务器
解决方案:
- 验证配置中的路径是绝对的（不是相对的）
- 确保你已经跑过了
npm run build和那个dist/文件夹存在 - 检查Node.js是否在您的系统PATH中
- 重新启动Claude Desktop或在配置更改后重新加载Claude.ai
未找到模块错误
问题：获取“找不到模块”错误
解决方案:
# Clean install
rm -rf node_modules package-lock.json
npm install
npm run build启动时服务器崩溃
问题：服务器立即退出并出现错误
解决方案:
- 检查Node.js版本：
node --version（必须为18+） - 验证数据文件是否存在于
data/目录 - 在Claude Desktop中检查服务器日志（帮助>查看日志）
文档版本错误
问题：文档似乎已经过时
解决方案:
# Re-scrape the latest documentation
npm run scrape
npm run build数据文件
服务器使用存储在 /data 目录：
pages.json-所有包含完整内容、代码示例和元数据的文档页面categories.json-类别结构、蛞蝓和组织variables.json-带有默认值和描述的CSS自定义属性
要更新此数据，请运行 npm run scrape （需要访问ACSS文档源）。
贡献
欢迎投稿！以下是您可以提供帮助的方式：
- 分叉存储库
- 创建要素分支:
git checkout -b feature/my-new-feature - 进行更改 并在适用的情况下添加测试
- 运行测试:
npm test - 构建以验证:
npm run build - 提交您的更改:
git commit -am 'Add some feature' - 推到分支:
git push origin feature/my-new-feature - 提交拉取请求
贡献领域
- 🐛 Bug修复和错误处理改进
- 📚 其他工具实现
- 🧪 测试覆盖范围扩展
- 📖 文档改进
- ⚡ 性能优化
- 🌐 支持其他MCP客户端
许可证
MIT许可证-有关详细信息，请参阅许可证文件
致谢
- 与 模型上下文协议SDK
- 文档内容来自 自动CSS
- 由...驱动 克劳德 和人类学
支持
MCP服务器问题：在此GitHub存储库上打开一个问题
ACSS产品支持：参观 自动CSS 或联系他们的支持团队
关于MCP协议的问题：检查 MCP文件
______________________________________________________________________
制作❤️ ACSS社区