Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@design-os-migration-mcp Migrate the Button component from the export to my React project"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server that bridges Design OS exported component packages into target projects with different CSS approaches, component libraries, icon libraries, and file conventions.
Node.js 18+
npm
Claude Code CLI
Related MCP server: Mimic AI
# 1. Clone or download this repo
git clone <repo-url>
cd design-os-migration-mcp
# 2. Install dependencies
npm install
# 3. Build
npm run buildRun from inside the project directory — $PWD resolves automatically.
npm run mcp:addEquivalent to:
claude mcp add design-os-migration -- node $PWD/dist/index.jsnpm run mcp:add:devEquivalent to:
claude mcp add design-os-migration-dev -- npx tsx $PWD/src/index.tsRestart Claude Code after source changes to reload the server.
npm run mcp:remove # production
npm run mcp:remove:dev # devBy default, the server is registered locally (current project only). Pass --scope to share it:
# Share with your team via .mcp.json
claude mcp add --scope project design-os-migration -- node $PWD/dist/index.js
# Available across all your projects
claude mcp add --scope user design-os-migration -- node $PWD/dist/index.jsEdit ~/.claude/mcp.json directly if you prefer not to use the CLI:
{
"mcpServers": {
"design-os-migration": {
"command": "node",
"args": ["/absolute/path/to/design-os-migration-mcp/dist/index.js"]
}
}
}Restart Claude Code after editing manually.
Script | Description |
| Compile TypeScript to |
| Run directly with |
| Run the compiled server |
| Register production server with Claude Code |
| Register dev server with Claude Code |
| Remove production registration |
| Remove dev registration |
| Open MCP Inspector UI against the built server |
| Open MCP Inspector UI against the |
The MCP Inspector gives you an interactive UI at http://localhost:6274 to call tools, fill in parameters, and inspect responses — no Claude Code needed.
# Test the built server
npm run mcp:inspect
# Test without building (uses tsx)
npm run mcp:inspect:devOnce open, you can:
Browse all registered tools, prompts, and resources
Call any tool with a generated form and see the JSON response
Iterate quickly without restarting Claude Code
Tool | Parameters | Description |
|
| List all sections with component counts and available files |
|
| Summarize the full export structure (sections, design system, shell, data model, instructions) |
|
| Read a component's source and parsed metadata (imports, Tailwind classes, icons, props, callbacks) |
|
| Read any file from the export by relative path |
|
| Detect framework, CSS approach, component library, icon library, TypeScript usage, and file conventions |
|
| List all doc files, or read a specific one |
|
| Build a full source→target mapping (colors, icons, CSS, components, imports, file structure, naming) |
Prompt | Parameters | Description |
|
| Ready-to-execute migration instructions for a single component |
|
| Migration instructions for an entire section (types → components → barrel → tests) |
|
| Token and theme translation from Design OS to the target styling system |
|
| Complete multi-phase migration plan covering design system, data model, shell, and all sections |
URI | Description |
| Product overview markdown |
| Design tokens, color reference, and typography |
| Data model README and TypeScript types |
| Section overview, types, and component list |
| One-shot implementation guide |
| Incremental milestone instructions |
| Design OS component pattern reference (import patterns, Tailwind conventions, callbacks) |
# 1. See what's in the export
list_sections exportPath=~/ravn/my-product/product-plan
# 2. Understand the target project
analyze_target_project targetPath=~/ravn/my-target-app
# 3. Get the full migration mapping
get_migration_context exportPath=~/ravn/my-product/product-plan targetPath=~/ravn/my-target-app
# 4. Generate migration instructions for a section
migrate-section exportPath=~/ravn/my-product/product-plan targetPath=~/ravn/my-target-app section=sessions
# 5. Or target a single component
migrate-component exportPath=~/ravn/my-product/product-plan targetPath=~/ravn/my-target-app section=sessions component=SessionList.tsxUnclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Design-system contract verification, scoring, and review tools for AI agents.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/dchavezp/design-os-migrator-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server