Visily UI Design

Name: Visily UI Design
Author: visily-app

by visily-appversion 0.1.1i★ –iRuns in the cloud

Registry nameio.github.visily-app/visily

Install

Overview

Description from the maker (original English)

UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi1 of 1 passedChecked from public information; code not scanned yet
UsageiNot measured yet★ –

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Runs in the cloud
Transport: Streamable HTTP
Category: Design, images & audio

Install

Pick the AI app you use, then copy the settings.

Before you install

Basic checks: 1 of 1 passed
Runs on the maker’s server: what you ask it goes through their server.
The registry lists no key to fill in.

You need

Runs in the cloudNothing to install; it connects over the internet

Which app do you use?

ClaudeClaude CodeCursorVS CodeChatGPT

Pick your app above. We remember it, so next time the button says “Install in …”.

Works in Claude on the web, desktop and mobile:

Open Settings → Connectors
Press Add custom connector
Paste the address below and press Add
If it asks you to sign in, sign in with the maker

https://app.visily.ai/api/mcp

Run this in your terminal

claude mcp add --transport http visily https://app.visily.ai/api/mcp

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "visily": {
      "url": "https://app.visily.ai/api/mcp"
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "visily": {
      "type": "http",
      "url": "https://app.visily.ai/api/mcp"
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

ChatGPT connects only to servers on the internet:

Open ChatGPT on the web → Settings → Connectors (Apps)
Press Create or Add (some plans need Developer mode under Advanced first)
Paste the address below, give it a name and save
If it asks you to sign in, sign in with the maker

https://app.visily.ai/api/mcp

Menu names can differ slightly by plan and over time.

Your choice stays on this device in a cookie; no account needed.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

We have not read this server’s tool list yet; we check endpoints in rotation.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 7, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account visily-app, which owns the repo
… Not checked yet
Still maintained
We have not read this repo from GitHub yet
… Not checked yet
Has a licence
We have not read this repo from GitHub yet
… Not checked yet
Endpoint responds
Not checked yet; we check endpoints in rotation
… Not checked yet
Sign-in with OAuth
Not checked yet; we check endpoints in rotation
… Not checked yet
No hidden instructions in tool descriptions
Not checked yet; we read the tool list when we check the endpoint

Compared with others in Design, images & audioi

More stars than 0% of the other 2202 servers in this category
Published to the registry more recently than 14% of the other 2202 servers in this category
Basic checks equal to or better than 100% of the other 2202 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is Visily UI Design safe?

It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.

Is it still maintained?

The GitHub repo last changed –, and the latest version (0.1.1) reached the registry 4 months ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.

What can I use instead?

In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Figma Context MCP

by GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Runs on your computer★ 16,165MITUpdated 5 months ago

Install

Claude Real Video

by HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Runs on your computer★ 2,284MITUpdated 2 months ago

Install

Figma MCP Server

by figma

Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.

Runs in the cloud★ 2,152Updated 13 months ago

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

Visily MCP

Visily is an AI design canvas that turns text prompts, screenshots, URLs & more into UI designs that are as easy to edit as a Google Slide. The Visily MCP server brings those designs into your AI coding agent: point it at a Visily board or screen and your agent can find it, turn it into application code, or pull its theme tokens.

[!NOTE]

Access requirement. The Visily MCP works only on workspaces on a Pro or Business

plan where you are the workspace creator or have an editor license. Free workspaces and

viewer/guest roles are not supported. This is enforced on every request.

What you can do

Turn a Visily design into code. Generate production-ready code from a Visily screen or board — whether the UI was AI-generated in Visily or hand-authored. The agent rebuilds semantic, responsive components (default stack: React + TypeScript + Tailwind v4 + shadcn/ui) instead of pasting a static export.
Find a board or screen and get its link. Ask for a design by description (*"the board I was working on for the 4.6 release"*) and the agent returns a link to open it — without leaving your editor.
Apply a board's theme. Pull a board's design system as shadcn/Tailwind v4 tokens and apply it to another app's styling.

Install & connect

Authentication is OAuth — your client prompts you to sign in to Visily on first use. There are no API keys to manage.

The current Visily MCP server URL is:

https://app.visily.ai/api/mcp

Each platform's drop-in files live under plugins/ /.

Claude Code

claude plugin marketplace add visily-app/mcp-plugins

claude plugin install visily@visily

Then reload Claude Code and run /mcp → select visily → complete the OAuth sign-in. Full walkthrough: installation-guides/claude.md.

Cursor

Cursor 2.5+ packaged plugin — install from a local clone in the agent chat:

/add-plugin ./plugins/cursor

Reload Cursor; the MCP server appears under Settings → MCP (OAuth on first use) and the Visily skill loads automatically. Details: plugins/cursor/README.md.

Cline

Cline can connect directly to the hosted Visily MCP server with Streamable HTTP:

"mcpServers": { "visily": { "type": "streamableHttp", "url": "https://app.visily.ai/api/mcp" } } }

Full agent-readable install guidance: llms-install.md.

Codex

codex plugin marketplace add visily-app/mcp-plugins

codex plugin add visily@visily

Authorize via OAuth on first use. Full walkthrough: installation-guides/codex.md.

ChatGPT

ChatGPT connects to remote MCP servers via Developer Mode custom connectors (Plus, Pro, Business, or Enterprise). Enable Settings → Connectors → Advanced → Developer mode, add a custom connector pointing at the server URL above, and complete OAuth. Then paste plugins/chatgpt/AGENTS.md into a Project/GPT's instructions. Steps: plugins/chatgpt/SETUP.md.

Antigravity

Copy plugins/antigravity/.agents/ into your project root and merge plugins/antigravity/mcp_config.json into your global MCP config. Details: installation-guides/antigravity.md.

Kiro

Copy plugins/kiro/ into your Kiro powers directory (it contains POWER.md, per-intent steering/ workflows, and mcp.json). Merge mcp.json into your Kiro MCP config and authorize via OAuth. The Power activates on Visily URLs and find/build/theme intents.

Replit Agent

Install the hosted Visily MCP server with a one-click Replit install link: installation-guides/replit.md.

Lovable

Commit plugins/lovable/AGENTS.md to your repo root and add the Visily MCP connector in the Lovable UI. Details: plugins/lovable/SETUP.md.

v0 (Vercel)

v0 supports custom MCP servers natively. Add the server URL above via Settings → MCP Connections (or Add MCP in the prompt form) and authorize via OAuth, then commit plugins/v0/AGENTS.md to your repo root. Details: plugins/v0/SETUP.md.

Other editors (Streamable HTTP)

Any client that supports Streamable-HTTP MCP can connect with this config:

"mcpServers": { "visily": { "url": "https://app.visily.ai/api/mcp" } } }

This covers VS Code (Copilot), Windsurf, Cline, Gemini CLI, and similar tools. Check your client's docs for where MCP server config lives; OAuth runs on first use.

[!NOTE]

Google AI Studio does not natively support MCP connectors yet (it only works through

third-party browser bridges, which we don't recommend). For a Google-native option, use

Firebase Studio, which supports MCP servers via .idx/mcp.json — drop the same url

config there. We'll add a first-class recipe when AI Studio ships native MCP support.

Prompting your agent

Give the agent a Visily link and a clear intent. The agent extracts the IDs from the URL — it doesn't open the page.

Examples

"Find the Visily board I was working on for the 4.6 release and give me the link."
"Build this Visily screen as React + Tailwind: https://app.visily.ai/projects/abc/boards/456/elements/789"
"Implement this board in Next.js, reusing my src/components/ui components."
"Apply my Visily board theme to this app's globals.css."

A Visily URL looks like:

https://app.visily.ai/projects/{projectId}/boards/{boardId}/elements/{elementId}

Structure your Visily file for better code

The more intent your design carries, the better the generated code:

Name your screens and key groups semantically in Visily — names flow into the export and into the link-matching for "find my board."
Lean on Visily's theme / design system so the agent can apply real tokens instead of guessing colors and radii.
Ask for one screen at a time for large boards — smaller selections produce more reliable results.

Tools

Tool	Use
`get_design_context`	Primary. Returns `designData` + theme + screenshot metadata for one element.
`get_screenshot`	Fetch a screenshot for visual verification.
`get_board_theme`	Board design system as shadcn tokens (`JSON` / `CSS` / `Tailwind`).
`list_workspaces`, `list_projects`, `list_boards`, `list_elements`	Discovery / find-a-board.
`get_workspace`, `get_project`, `get_board`, `get_element`, `get_element_export`	Advanced — metadata and raw exports rarely needed for the three use cases; prefer the tools above.

The server also ships prompts (e.g. find_visily_board, generate_code_from_element, apply_board_theme) and resources (visily://docs/...) that your agent reads on demand.

Custom rules (optional)

Set project-level guidance so output stays consistent — like onboarding notes for a new teammate.

Cursor (.cursor/rules/visily-quality.mdc):

---

description: Visily code-generation rules alwaysApply: false

Treat Visily designData as a reference, not final code — rebuild semantically.
Apply the Visily theme tokens; never hardcode hex, radii, or spacing.
Reuse existing components in src/components/ui instead of duplicating.
Verify against get_screenshot for 1:1 layout before finishing.

Claude Code (CLAUDE.md):

## Visily MCP rules

Treat Visily designData as a reference, not final code — rebuild semantically.
Apply the Visily theme tokens; never hardcode hex, radii, or spacing.
Reuse existing components instead of duplicating; verify with get_screenshot.

How this repo is built

plugins/ is generated from a single shared source (shared/) by scripts/build.mjs. To change the integration, edit shared/ and run npm run build — never edit plugins/ by hand. See CONTRIBUTING.md.

Visily UI Design

Overview

PopNx MCP’s three pillars

What you can do with it

Install

Before you install

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Compared with others in Design, images & audioi

Common questions

Alternatives

Figma Context MCP

Claude Real Video

Figma MCP Server

README from the maker

Visily MCP

What you can do

Install & connect

Claude Code

Cursor

Cline

Codex

ChatGPT

Antigravity

Kiro

Replit Agent

Lovable

v0 (Vercel)

Other editors (Streamable HTTP)

Prompting your agent

Structure your Visily file for better code

Tools

Custom rules (optional)

How this repo is built