Artisign — Claude Code MCP server for UI design
Artisign lets coding agents build UI screens through MCP and review them in a local browser. Shared design tokens help keep screens visually consistent.
claude mcp add artisign -- npx -y artisignWhat Artisign does
Artisign gives AI coding agents a local workspace for interface design. An agent creates screens through MCP, while the developer reviews the rendered result in a browser, checks navigation flows, and adds comments. The preview supports live reload and side-by-side comparisons of screen variants.
A shared design system holds tokens and style variants that screens reference instead of duplicating values. Drift warnings flag differences from the established system. Project state lives in regular files, and the service runs on 127.0.0.1 without a database or user accounts.
Installation requires Node.js 22.4 or newer on macOS or Linux. Windows is unsupported. Screenshot and node-inspection tools need an existing Chrome, Edge, Brave, Chromium, or Firefox installation; other tools can run without a browser. On the first project write, Artisign runs git init when Git is available.
What it helps with
- Generate UI screens through a coding agent
- Keep screen styling aligned with shared design tokens
- Compare alternative layouts side by side
- Inspect navigation flows in a browser
- Spot differences from the design system
Example prompts for the agent
- Create an Artisign project in
/home/user/my-appand draft its home screen. - Open my Artisign project and compare alternative styles for the current screen side by side.
- Inspect the screen flows and identify differences from the shared design system.
How to install Artisign
Platform CLI
claude mcp add artisign -- npx -y artisignPlatform CLI
codex mcp add artisign -- npx -y artisignConfig file
{
"mcpServers": {
"artisign": {
"command": "npx",
"args": [
"-y",
"artisign"
]
}
}
}Config file
{
"servers": {
"artisign": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"artisign"
]
}
}
}Platform CLI
gemini mcp add artisign npx -y artisignStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Artisign
How do I install Artisign in Claude Code?
Register the MCP server with claude mcp add artisign -- npx -y artisign. Then run artisign to start the local service and open its preview, and restart Claude Code so it loads the new connection.
What does Artisign do?
Artisign lets AI agents create interface screens through MCP and review their output in a browser. Its shared design system stores reusable tokens and variants, while the preview displays screens and navigation flows.
Which platforms and browser requirements does Artisign have?
The local service requires Node.js 22.4 or newer on macOS or Linux; Windows is unsupported. Browser-based screenshots require an installed Chrome, Edge, Brave, Chromium, or Firefox.
