# Artisign

Artisign lets coding agents build UI screens through MCP and review them in a local browser. Shared design tokens help keep screens visually consistent.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 2
- Author: artisign
- License: AGPL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/artisign/artisign
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/artisign

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add artisign -- npx -y artisign
```

### Codex

**Platform CLI**
```bash
codex mcp add artisign -- npx -y artisign
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "artisign": {
            "command": "npx",
            "args": [
                "-y",
                "artisign"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "artisign": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "artisign"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add artisign npx -y artisign
```

## When to use it
- 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
- Create an Artisign project in `/home/user/my-app` and 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.

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36427
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7527
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6144
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md