Visily UI Design

Visily MCP

Visily は、テキストプロンプト、スクリーンショット、URL などから、Google スライドのように簡単に編集できる UI デザインを作成する AI デザインキャンバスです。Visily MCP サーバーを使うと、それらのデザインを AI コーディングエージェントに取り込めます。Visily のボードや画面を指定すると、エージェントがそれを見つけ、アプリケーションコードに変換したり、テーマトークンを取得したりできます。

メモ

アクセス要件。 Visily MCP を利用できるのは、ワークスペースの作成者であるか、エディターライセンスを持っているユーザーがいる Pro または Business プランのワークスペースのみです。Free ワークスペースと閲覧者／ゲストのロールはサポートされていません。この条件はすべてのリクエストで適用されます。

できること

• Visily のデザインをコードに変換する。 Visily の画面やボードから、本番環境で使えるコードを生成します。UI が Visily で AI 生成されたものでも、手作業で作成されたものでも対応します。静的なエクスポートを貼り付けるのではなく、セマンティックでレスポンシブなコンポーネントを再構築します（デフォルトのスタック：React + TypeScript + Tailwind v4 + shadcn/ui）。
• ボードや画面を見つけてリンクを取得する。 説明（*「4.6 リリースに向けて作業していたボード」*など）でデザインを尋ねると、エージェントがエディターを離れることなく、開くためのリンクを返します。
• ボードのテーマを適用する。 ボードのデザインシステムを 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 以降のパッケージ済みプラグインは、エージェントチャットからローカルクローンを使ってインストールできます。

/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"
    }
  }
}

エージェントが読み取れる完全なインストールガイドは、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 をプロジェクトまたは 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 サーバーをネイティブでサポートしています。上記のサーバー URL を Settings → MCP Connections（またはプロンプトフォームの Add MCP）から追加し、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 をネイティブでサポートするようになったら、正式な手順を追加します。

エージェントへのプロンプト

エージェントに Visily のリンクと明確な意図を伝えてください。エージェントは URL から ID を抽出しますが、 ページは開きません。

例

• 「4.6 リリース用に作業していた Visily ボードを見つけて、リンクを教えてください。」
• 「この Visily 画面を React + Tailwind で構築してください：https://app.visily.ai/projects/abc/boards/456/elements/789」
• 「このボードを Next.js で実装し、既存の src/components/ui コンポーネントを再利用してください。」
• 「このアプリの globals.css に Visily ボードのテーマを適用してください。」

Visily の URL は次のような形式です。

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

より良いコードを生成するために Visily ファイルを整理する

デザインに意図が明確に反映されているほど、生成されるコードの品質が高まります。

• Visily で画面や主要なグループに意味のある名前を付けてください。名前はエクスポートや「ボードを探す」ためのリンク照合に使われます。
• Visily のテーマ／デザインシステムを活用してください。エージェントが色や角丸を推測せず、実際のトークンを適用できます。
• 大きなボードでは一度に1画面ずつ依頼してください。選択範囲を小さくすると、より信頼性の高い結果が得られます。

ツール

ツール	用途
get_design_context	主要ツール。 1つの要素について、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	上級者向け — 3つのユースケースではメタデータや生のエクスポートが必要になることはほとんどありません。上記のツールを優先してください。

サーバーにはプロンプト（例：find_visily_board、generate_code_from_element、 apply_board_theme）と、エージェントが必要に応じて読み込むリソース（visily://docs/...）も含まれています。

カスタムルール（任意）

新しいチームメイトへのオンボーディングメモのように、プロジェクトレベルのガイダンスを設定して、出力の一貫性を保てます。

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

このリポジトリのビルド方法

plugins/ は、scripts/build.mjs によって単一の共有ソース（shared/）から生成されます。連携機能を変更するには、 shared/ を編集して npm run build を実行してください。plugins/ を直接編集しないでください。 CONTRIBUTING.md を参照してください。