Content
# Tool List
> Note: This project is not an official product of Digital Agency. It is an unofficial implementation based on the public information of DADS.
MCP Server for Digital Agency Design System (DADS) v2.12.0, allowing reference to guidelines, design tokens, and component specifications from AI editors via Model Context Protocol.
## Status
- Available for local use (stdio transport, no external port exposure)
- Clone & build from GitHub repository to run
## Capabilities
| Tool | Overview |
|--------|------|
| `search_guidelines` | Search guidelines by keyword |
| `get_guideline` | Get detailed information by section ID |
| `get_color_tokens` | List color tokens |
| `get_component_spec` | Component specifications (Do/Don't/Accessibility) |
| `get_typography_spec` | Typography specifications |
| `get_spacing_tokens` | List spacing tokens |
| `validate_color_usage` | WCAG contrast ratio verification |
### Resources
| URI | Content |
|-----|------|
| `dads://foundations/color` | Color system |
| `dads://foundations/typography` | Typography system |
| `dads://foundations/spacing` | Spacing system |
| `dads://foundations/layout` | Layout system |
## Usage
### 1. Local Use from Repository
The most reliable way to use this server is to clone the repository, build it locally, and register it in your MCP settings.
```bash
git clone https://github.com/keisato848/design-system-mcp.git
cd design-system-mcp
npm install
npm run build
```
### 2. Register MCP Server in AI Editor
#### VS Code
`.vscode/mcp.json`:
```json
{
"servers": {
"dads-design-system": {
"type": "stdio",
"command": "node",
"args": ["dist/index.js"],
"cwd": "${workspaceFolder}"
}
}
}
```
This repository includes a [.vscode/mcp.json](.vscode/mcp.json) for single workspace usage and a sample [.mcp.json](.mcp.json).
#### Claude Desktop
`claude_desktop_config.json`:
```json
{
"mcpServers": {
"dads-design-system": {
"command": "node",
"args": ["/absolute/path/to/design-system-mcp/dist/index.js"]
}
}
}
```
#### Cursor
`.cursor/mcp.json`:
```json
{
"mcpServers": {
"dads-design-system": {
"command": "node",
"args": ["/absolute/path/to/design-system-mcp/dist/index.js"]
}
}
}
```
### 3. Restart Editor and Verify Connection
After connecting, you can verify the functionality with queries like:
```text
"Tell me the primary color of DADS"
"Show me the Do/Don't for the button component"
"Verify the contrast ratio between #333333 and #FFFFFF"
```
## For Developers
### Setup
```bash
npm install
```
### Commands
```bash
npm run build
npm test
npm run audit
npm run dev
```
### Local Execution Model
- Communication method: stdio (JSON-RPC 2.0)
- Runs as a local process per user
- No API keys or external servers required
- No external port exposure
## Technical Stack
- TypeScript 5.x
- `@modelcontextprotocol/sdk` v1.29.0
- Zod
- Vitest
## License and Data Source
### Source Code
The implementation code in this repository is provided under the [MIT License](LICENSE).
### Data Source
The data in this project is sourced from [Digital Agency Design System β version (DADS)](https://design.digital.go.jp/dads/) v2.12.0.
### Public Data Usage Conditions
DADS public data is provided under the [Public Data Utilization Regulations Version 1.0 (PDL1.0)](https://www.digital.go.jp/resources/open_data/public_data_license_v1.0), compatible with CC BY 4.0.
This project adheres to the following:
- Source URL is clearly stated in each data file and tool output
- The processing of DADS public information into TypeScript data is explicitly stated
- Logos, symbol marks, and other inapplicable materials are not included
## Contributing
Please use [GitHub Issues](https://github.com/keisato848/design-system-mcp/issues) for issue/bug reports.
## Acknowledgments
This project utilizes information from the design system published by Digital Agency, but it is not officially provided or recommended by Digital Agency.
