DSFR MCP服务器
一 主控程序 （模型上下文协议）服务器，用于公开 法国国家设计体系 (DSFR -国家设计系统）至人工智能助理。
为什么？
当将基于DSFR的Figma模型集成到React（或任何其他）代码库中时，AI助手需要访问官方文档以生成符合要求的组件：正确的HTML结构、CSS类、变体和可访问性要求。
此MCP服务器使助手能够直接在对话上下文中结构化地访问完整的DSFR文档。
快速开始
通过npx（推荐）
无需安装——只需配置您的MCP客户端：
{
"mcpServers": {
"dsfr": {
"command": "npx",
"args": ["dsfr-mcp"]
}
}
}来源
pnpm install
pnpm run setup # Fetches DSFR docs and builds the server可用工具
| 工具 | 说明 |
|---|---|
list_components | 列出所有DSFR组件、基础和模式及其名称、法语标题、描述和可用文档部分。 |
get_component_doc | 返回特定组件部分的文档(overview, code, design, accessibility, demo).默认为 code。如果找不到组件名称，则建议替代方案。 |
search_components | 对所有DSFR文档（元数据和降价内容）进行全文搜索。返回带有摘录的匹配组件。 |
search_icons | 按名称或类别搜索DSFR图标。返回图标名称、类别、变量（填充/行）和CSS类。支持按类别筛选(arrows, system, business等等）。 |
get_color_tokens | 返回按上下文筛选的DSFR颜色标记(background, text, artwork)，功能使用(action, error, disabled等），或颜色家族(blue-france, grey, green-tilleul-verveine等等）。包括亮/暗主题映射。 |
配置
克劳德代码
适用于您的所有项目（推荐）：
claude mcp add dsfr --scope user -- npx dsfr-mcp或者对于单个项目，添加到您的 .mcp.json:
{
"mcpServers": {
"dsfr": {
"command": "npx",
"args": ["dsfr-mcp"]
}
}
}克劳德桌面版
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"dsfr": {
"command": "npx",
"args": ["dsfr-mcp"]
}
}
}光标
使用命令在游标设置中添加MCP服务器 npx 和争论 dsfr-mcp.
DSFR版本
文档是从固定版本的 官方DSFR存储库。当前DSFR版本在中跟踪 docs/meta.json 在构建时可见。
要获取特定版本，请执行以下操作：
DSFR_TAG=v1.14.3 pnpm run fetch-docs发展
pnpm build # Compile TypeScript
pnpm test # Run tests
pnpm test:watch # Run tests in watch mode
pnpm run fetch-docs # Re-fetch DSFR documentation发布
fix:--补丁发布feat:--轻微释放feat!:或BREAKING CHANGE:--重大发布
推到 main 触发发布工作流，发布到npm并创建GitHub release。
必需的秘密
NPM_TOKEN--用于发布的npm访问令牌
许可证
麻省理工学院