Visily UI Design

Visily MCP

Visily 是一个 AI 设计画布，可将文本提示词、截图、URL 等转换为 UI 设计，让编辑变得像编辑 Google Slide 一样简单。Visily MCP 服务可将这些设计带入你的 AI 编码 Agent：让 Agent 访问 Visily 看板或屏幕，即可查找设计、将其转换为应用代码，或提取其主题令牌。

说明

访问要求。 Visily MCP 仅适用于你是工作区创建者或持有 editor 许可证的 Pro 或 Business 计划工作区。不支持免费工作区和查看者／访客角色。每次请求都会执行此限制。

你可以做什么

• 将 Visily 设计转换为代码。 根据 Visily 屏幕或看板生成可用于生产环境的代码——无论 UI 是在 Visily 中由 AI 生成，还是手动创作。Agent 会重建语义化、响应式组件（默认技术栈：React + TypeScript + Tailwind v4 + shadcn/ui），而不是粘贴静态导出内容。
• 查找看板或屏幕并获取链接。 按描述请求某个设计（“我为 4.6 版本一直在做的那个看板”），Agent 就会返回可打开的链接——无需离开编辑器。
• 应用看板主题。 将看板的设计系统提取为 shadcn/Tailwind v4 令牌，并将其应用到另一个应用的样式中。

安装与连接

身份验证采用 OAuth——客户端会在首次使用时提示你登录 Visily。 无需管理 API 密钥。

当前 Visily MCP 服务 URL：

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

各平台的即用文件位于 plugins/<platform>/ 下。

Claude Code

claude plugin marketplace add visily-app/mcp-plugins
claude plugin install visily@visily

然后重新加载 Claude Code，运行 /mcp → 选择 visily → 完成 OAuth 登录。完整指南：installation-guides/claude.md。

Cursor

Cursor 2.5+ 打包插件——在 Agent 聊天中从本地克隆安装：

/add-plugin ./plugins/cursor

重新加载 Cursor；MCP 服务会显示在 Settings → MCP 下（首次使用时进行 OAuth），Visily 技能也会自动加载。详情：plugins/cursor/README.md。

Cline

Cline 可通过 Streamable HTTP 直接连接托管的 Visily MCP 服务：

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

面向 Agent 的完整安装指南：llms-install.md。

Codex

codex plugin marketplace add visily-app/mcp-plugins
codex plugin add visily@visily

首次使用时通过 OAuth 授权。完整指南： installation-guides/codex.md。

ChatGPT

ChatGPT 通过 Developer Mode 自定义连接器连接远程 MCP 服务（适用于 Plus、Pro、Business 或 Enterprise）。启用 Settings → Connectors → Advanced → Developer mode，添加指向上述服务 URL 的自定义连接器，并完成 OAuth。然后将 plugins/chatgpt/AGENTS.md 粘贴到某个 Project/GPT 的指令中。 操作步骤：plugins/chatgpt/SETUP.md。

Antigravity

将 plugins/antigravity/.agents/ 复制到项目根目录，并将 plugins/antigravity/mcp_config.json 合并到全局 MCP 配置中。详情：installation-guides/antigravity.md。

Kiro

将 plugins/kiro/ 复制到 Kiro powers 目录（其中包含 POWER.md、按意图划分的 steering/ 工作流和 mcp.json）。将 mcp.json 合并到 Kiro MCP 配置中，并通过 OAuth 授权。该 Power 会在遇到 Visily URL 以及查找／构建／主题相关意图时激活。

Replit Agent

通过一键 Replit 安装链接安装托管的 Visily MCP 服务： installation-guides/replit.md。

Lovable

将 plugins/lovable/AGENTS.md 提交到仓库根目录，并在 Lovable UI 中添加 Visily MCP 连接器。详情： plugins/lovable/SETUP.md。

v0 (Vercel)

v0 原生支持自定义 MCP 服务。通过 Settings → MCP Connections（或提示词表单中的 Add MCP）添加上方的服务 URL，并通过 OAuth 授权，然后将 plugins/v0/AGENTS.md 提交到仓库根目录。详情请参阅： plugins/v0/SETUP.md。

其他编辑器（Streamable HTTP）

任何支持 Streamable-HTTP MCP 的客户端都可以使用此配置连接：

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

这适用于 VS Code（Copilot）、Windsurf、Cline、Gemini CLI 和类似工具。请查阅客户端文档，了解 MCP 服务配置的位置；首次使用时会运行 OAuth。

说明

Google AI Studio 尚不原生支持 MCP 连接器（只能通过第三方浏览器桥接工具使用，我们不推荐这种方式）。 若要使用 Google 原生方案，请选择支持通过 .idx/mcp.json 配置 MCP 服务的 Firebase Studio——将相同的 url 配置放在那里即可。AI Studio 推出原生 MCP 支持后，我们会添加 正式的配置指南。

提示 Agent

向 Agent 提供 Visily 链接和明确的意图。Agent 会从 URL 中提取 ID—— 不会打开页面。

示例

• “找出我为 4.6 版本做的 Visily 画板，并给我链接。”
• “将这个 Visily 界面构建为 React + Tailwind：https://app.visily.ai/projects/abc/boards/456/elements/789”
• “用 Next.js 实现这个画板，并复用我的 src/components/ui 组件。”
• “将我的 Visily 画板主题应用到此应用的 globals.css。”

Visily URL 的格式如下：

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

合理组织 Visily 文件，让代码效果更好

设计中包含的意图越明确，生成的代码效果越好：

• 在 Visily 中为界面和关键分组采用语义化命名——名称会出现在导出内容中， 也会用于“查找我的画板”时的链接匹配。
• 充分利用 Visily 的主题 / 设计系统，这样 Agent 就能应用实际的设计令牌，而不是 猜测颜色和圆角。
• 对于大型画板，一次只请求一个界面——较小的选区能带来 更可靠的结果。

工具

工具	用途
get_design_context	**主要工具。**返回一个元素的 designData、主题和截图元数据。
get_screenshot	获取截图，用于视觉验证。
get_board_theme	以 shadcn 令牌形式提供画板设计系统（JSON / CSS / Tailwind）。
list_workspaces、list_projects、list_boards、list_elements	发现 / 查找画板。
get_workspace、get_project、get_board、get_element、get_element_export	高级工具——三个用例很少需要元数据和原始导出；优先使用上面的工具。

此服务还提供提示词（例如 find_visily_board、generate_code_from_element、 apply_board_theme）和资源（visily://docs/...），Agent 会按需读取。

自定义规则（可选）

设置项目级指导，确保输出保持一致——就像为新队友准备入门说明。

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`.

此仓库的构建方式

scripts/build.mjs 会根据单一共享源（shared/）生成 plugins/。若要更改集成，请编辑 shared/ 并运行 npm run build——切勿手动编辑 plugins/。请参阅 CONTRIBUTING.md。