Tell your AI

Paste this into your AI app. It sets itself up and gives you a code.

Tell your AI

Connect yourself to Nighty Design: read https://nightkilleryt.com/tools/ui-designer/ai-setup.txt and follow it (you may add its MCP server and run its pairing command), then tell me the pairing code.

Paste the line

Into Claude Code, Codex, Claude Desktop or another AI app.
Get your code

Your AI sets itself up and gives you a pairing code. You install nothing by hand.
Type it here

In Nighty Design: Preferences → Connect AI (MCP), turn it on and type the code. Connected.

Then start a new chat in your AI app: it connects by itself. The pairing lasts until you turn Connect AI off or close the browser.

What your AI can do

Build screens
Frames with auto layout (rows, columns, wrap, grid), text with rich runs, buttons, pictures, SVG icons, Roblox screens.
Every look
Gradients, image fills, strokes per side, shadows, blur, glass, corners, masks, blend modes, constraints.
A real system
Components with variants and properties, instances, styles, variables with modes, pages.
This site’s tools
Sunbursts, glows, halftone, speed lines, UIGradients, countdowns, 9-slice, palettes, recolor and resize, right in your design.
Any shape
Paths from points and curves, stars, rings, booleans, outlines, and Roblox UI that fits every device.
Motion and commands
Animation presets on the timeline, and every designer command that deletes nothing.
See its work
A screenshot after every step, of a layer, the page or your view, to check and improve.
Export
PNG, SVG, PDF, CSS, React or Roblox Studio code, saved where you ask.

Set it up yourselfOne command or button per app

Claude Code

Any version, Windows too. Needs Node.js 18 or newer.

Run in any terminal

claude mcp add --scope user nighty npx https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz

Or as a plugin (Claude Code 2.1.224 or newer)

Run in a terminal

claude plugin marketplace add https://nightkilleryt.com/claude/marketplace.json
claude plugin install nighty@nightycode

Codex

Needs Node.js 18 or newer.

Run in any terminal

codex mcp add nighty -- npx https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz

Or in ~/.codex/config.toml

Add

[mcp_servers.nighty]
command = "npx"
args = ["-y", "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"]

Claude Desktop
Open the downloaded file and choose Install. It brings its own Node.js.
Install in Claude Desktop
Or in claude_desktop_config.json (Settings > Developer > Edit Config)
Add
```
{
  "mcpServers": {
    "nighty": {
      "command": "npx",
      "args": [
        "-y",
        "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"
      ]
    }
  }
}
```

Cursor

Needs Node.js 18 or newer.

Add to CursorYour browser asks to open the app.

Or in ~/.cursor/mcp.json

Add

{
  "mcpServers": {
    "nighty": {
      "command": "npx",
      "args": [
        "-y",
        "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"
      ]
    }
  }
}

VS Code

For GitHub Copilot’s agent mode. Needs Node.js 18 or newer.

Install in VS CodeYour browser asks to open the app.

Or run in a terminal (macOS, Linux)

code --add-mcp '{"name":"nighty","type":"stdio","command":"npx","args":["-y","https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"]}'

Or in Command Palette > "MCP: Open User Configuration"

Add

{
  "servers": {
    "nighty": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"
      ]
    }
  }
}

Gemini CLI

Needs Node.js 18 or newer.

Run in a terminal

gemini mcp add -s user nighty npx https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz

Or in ~/.gemini/settings.json

Add

{
  "mcpServers": {
    "nighty": {
      "command": "npx",
      "args": [
        "-y",
        "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"
      ]
    }
  }
}

Windsurf and others

Any app that runs MCP servers (stdio): the command, or the settings file. Needs Node.js 18 or newer.

The command, for the app’s MCP settings

npx -y https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz

Or in Windsurf: ~/.codeium/windsurf/mcp_config.json; others: their MCP settings

Add

{
  "mcpServers": {
    "nighty": {
      "command": "npx",
      "args": [
        "-y",
        "https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz"
      ]
    }
  }
}

Then get your code

01
Run this, or ask your AI to
It prints the code at once, no restart needed.
Run in a terminal
```
npx -y https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz --pair
```
Type it in Nighty Design
Preferences → Connect AI (MCP), turn it on and type the code.
Start a new chat
Your AI app loads its Nighty tools and connects by itself.

Without npx: download nighty-mcp.mjs and run node nighty-mcp.mjs --setup for its lines.

Disconnect or removePer app

For now: ask your AI to unpair, press Stop, or turn off Connect AI in Nighty Design. That also ends the pairing. To take Nighty MCP out of your app:

Claude Code
Run in a terminal
```
claude mcp remove nighty -s user
```
The plugin: claude plugin uninstall nighty@nightycode
Codex
Run in a terminal
```
codex mcp remove nighty
```
Claude Desktop

Settings > Extensions > Nighty Design > Uninstall (or delete "nighty" from claude_desktop_config.json).
Cursor

Cursor Settings > MCP: turn off or delete "nighty".
VS Code

Command Palette > "MCP: List Servers" > nighty > Uninstall.
Gemini CLI
Run in a terminal
```
gemini mcp remove -s user nighty
```
Windsurf and others

Delete "nighty" from the app’s MCP settings.

End every pairing with this computer: npx -y https://nightkilleryt.com/assets/designer/nighty-mcp-1.0.5.tgz --forget

Safe by design

On your computer only
Nighty MCP talks to your browser at 127.0.0.1. Nothing goes through this website, and your design stays in your browser.
You let it in
Only the Nighty Design page may connect, after you type the code. Turning it off or closing the browser ends the pairing.
Stop any time
While an AI works, "AI connected" shows at the top of the canvas. Connect AI lists every AI app with its own Disconnect, and Disconnect all (Stop on the pill). Or ask your AI to unpair. Unused for 10 minutes, it ends by itself.
Undo works
Every AI change is one undo step named "AI: …", and the AI can only undo its own. It can’t delete projects or open files.

Troubleshooting

Chrome or Edge asks to "access apps on this device"

Choose Allow: it lets Nighty Design reach Nighty MCP on your own computer. If you blocked it, click the icon left of the address, allow it, then turn Connect AI off and on.

It doesn’t connect in Safari

Safari may block a website from reaching programs on your computer. Use Chrome, Edge or Firefox for this.

My AI asks before it adds the server

Adding an MCP server changes the AI app’s settings, so some apps ask you first (or block it in an automatic mode). Allow it: it adds only the “nighty” server.

The AI says Node.js is missing

Nighty MCP needs Node.js 18 or newer: your AI can install it (it asks you first), or get the LTS from nodejs.org.

Claude Desktop’s extension needs nothing: Install in Claude Desktop.

The AI doesn’t see the Nighty tools yet

AI apps load their tools when a chat starts: start a new chat (Claude Code in a terminal: /exit, then claude --continue). It connects by itself while Connect AI stays on.

Connect AI keeps waiting

Your AI app must be running with Nighty MCP. If another program uses ports 47823 to 47825, close it or restart the computer, then try again.

It asks for a code again

The pairing ends when you turn Connect AI off, your AI unpairs, it is unused for a while (10 minutes unless you change it in Connect AI), or you close the browser. Ask your AI for a new code. After five wrong tries a code is replaced too.

Can two AI apps work at once?

Yes: Claude Code, Codex and others can share one tab (the pill names them all). Each change is its own undo step, and each AI undoes only its own. Disconnect one in Connect AI and the others keep working; a new chat of that app connects again without a code.

For AI agents

The setup an AI follows by itself, in plain text: /tools/ui-designer/ai-setup.txt.

Bringing designs into Roblox Studio? See the Nighty plugin guide.

Ready? Open Nighty Design Then Preferences → Connect AI (MCP). Open it

Connect an AI

Tell your AI

01 Paste the line

02 Get your code

03 Type it here

What your AI can do

Build screens

Every look

A real system

This site’s tools

Any shape

Motion and commands

See its work

Export

Claude Code

Codex

Claude Desktop

Cursor

VS Code

Gemini CLI

Windsurf and others

Then get your code

Run this, or ask your AI to

Type it in Nighty Design

Start a new chat

Claude Code

Codex

Claude Desktop

Cursor

VS Code

Gemini CLI

Windsurf and others

Safe by design

On your computer only

You let it in

Stop any time

Undo works

Troubleshooting

For AI agents

Paste the line

Get your code

Type it here