de en es ja ko ru zh

webstudio-ai-agent

Name: webstudio-ai-agent
Author: R0STEFAN

by R0STEFAN

Overview Schema Source Related Servers Discussions Admin

JavaScript

Local

🚀 Webstudio AI 代理与本地 MCP 工具包

为 AI 代理（Antigravity、Cursor、Claude Code、Windsurf）提供完整的自主桥梁，在本地解锁 Webstudio MCP 的 100% 功能，不受任何套餐限制、API 限额或访问错误的约束。

License: MIT Webstudio: Local MCP Node: >=18

🌟 核心问题与解决方案

通过 Cloud API 的常规工作方式	我们的自主桥梁（本地 MCP + 云端推送）
❌ 在免费套餐下被阻止（`FORBIDDEN`）	✅ 100% 免费且无限制
❌ 需要付费 API 密钥	✅ 离线直接使用 `.webstudio/data.json`
❌ 速度慢（数十次网络 HTTP 请求）	✅ 即时生成（<500ms），得益于 Immer 事务
❌ 功能受限	✅ 完整支持 JSX、Radix UI、Animation Groups、Tokens、Collections

Related MCP server: Roblox Studio MCP Server

🏗️ 架构（工作原理）

┌───────────────────────────────────────────────────────────┐
│                    AI CODING ASSISTANT                    │
│        (Google Antigravity, Cursor, Claude Code)          │
└─────────────────────────────┬─────────────────────────────┘
                              │
                              ▼
┌───────────────────────────────────────────────────────────┐
│              LOCAL WEBSTUDIO MCP RUNTIME                  │
│       (70+ Official MCP Tools: insert-fragment, etc.)     │
└─────────────────────────────┬─────────────────────────────┘
                              │  (Fast Immer Local Mutation)
                              ▼
┌───────────────────────────────────────────────────────────┐
│               LOCAL PROJECT SOURCE OF TRUTH               │
│         .webstudio/data.json  &  .webstudio/assets/       │
└─────────────────────────────┬─────────────────────────────┘
                              │
                              ▼  webstudio import --to "<shareLink>"
┌───────────────────────────────────────────────────────────┐
│                  WEBSTUDIO CLOUD BUILDER                  │
│         (Миттєве відображення результату в хмарі)         │
└───────────────────────────────────────────────────────────┘

⚡ 安装（2 种方案可选）

方案 A：本地安装到项目中（推荐，隔离环境）

# 1. Встановіть Webstudio локально в проект
npm i webstudio

# 2. Запустіть патчер
node scripts/setup-local-mcp.mjs --local

# 3. Завантажте проект із хмари
npx webstudio sync --link "<shareLink>"

# 4. Використовуйте MCP-інструменти для дизайну
npx webstudio mcp single-op-call list-pages "{}"

# 5. Відправте оновлений дизайн у хмару
npx webstudio import --to "<shareLink>"

方案 B：全局安装到计算机（一次安装，适用于所有项目）

# 1. Встановіть глобально
npm i -g webstudio

# 2. Запустіть патчер
node scripts/setup-local-mcp.mjs

# 3. Завантажте проект із хмари
webstudio sync --link "<shareLink>"

# 4. Використовуйте MCP-інструменти для дизайну
webstudio mcp single-op-call list-pages "{}"

# 5. Відправте оновлений дизайн у хмару
webstudio import --to "<shareLink>"

🛠️ 使用方法

1. 与 AI 助手配合使用（Antigravity / Cursor / Claude Code）

只需在编辑器中打开任意 Webstudio 项目。 AGENTS.md 和 .agents/skills/webstudio-ai-designer/SKILL.md 文件会自动向 AI 助手解释所有命令和生成规则！

2. MCP 命令示例：

📄 读取页面和元素：

webstudio mcp single-op-call list-pages "{}"
webstudio mcp single-op-call list-instances '{"pagePath":"/services"}'
webstudio mcp single-op-call list-design-tokens "{}"

🎨 通过 JSX 添加区块（`insert-fragment`）：

创建 payload.json：

{
  "parentInstanceId": "<parent-instance-id>",
  "fragment": "<ws.element ws:tag='section' ws:tokens={[token('token-card', css`background: #fff; padding: 32px; border-radius: 16px;`)]} ws:style={css`display: flex; gap: 24px; @media (max-width: 767px) { flex-direction: column; }`}><ws.element ws:tag='h2'>Назва Секції</ws.element></ws.element>"
}

执行：

webstudio mcp single-op-call insert-fragment --input-file payload.json

📊 基于 JSON 资源的动态集合：

创建数据变量：

webstudio mcp single-op-call create-variable --input-file pricing_data.json

连接动态集合：

webstudio mcp single-op-call insert-collection --input-file collection.json

🪟 原生 Radix UI 组件（Dialog / Popups）：

<radix.Dialog>
  <radix.DialogTrigger>
    <ws.element ws:tag='button'>Відкрити Попап</ws.element>
  </radix.DialogTrigger>
  <radix.DialogOverlay ws:style={css`position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;`}>
    <radix.DialogContent ws:style={css`background: #fff; border-radius: 20px; padding: 32px; max-width: 500px;`}>
      <$.Box>
        <radix.DialogTitle>Заголовок Попапу</radix.DialogTitle>
        <radix.DialogDescription>Опис модального вікна</radix.DialogDescription>
      </$.Box>
      <radix.DialogClose>✕</radix.DialogClose>
    </radix.DialogContent>
  </radix.DialogOverlay>
</radix.Dialog>

🎬 原生 Webstudio Animation Groups（`<animation.AnimateChildren>`）：

{
  "updates": [
    {
      "instanceId": "<animation-instance-id>",
      "name": "action",
      "type": "animationAction",
      "value": {
        "type": "view",
        "animations": [
          {
            "timing": {
              "duration": { "type": "unit", "value": 800, "unit": "ms" },
              "rangeStart": { "type": "unit", "value": 10, "unit": "%" },
              "easing": "ease-out",
              "fill": "backwards"
            },
            "keyframes": [
              { "offset": 0, "styles": { "opacity": "0", "transform": "translateY(40px)" } },
              { "offset": 1, "styles": { "opacity": "1", "transform": "translateY(0px)" } }
            ]
          }
        ]
      }
    }
  ]
}

☁️ 同步到 Webstudio Cloud

完成页面生成或编辑后，使用一条命令将整个项目同步到云端：

webstudio import --to "https://apps.webstudio.is/builder/<projectId>?authToken=<token>"

📜 许可证

本项目基于 MIT 许可证分发。

作者：R0STEFAN

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityActive

ResponsivenessNo issues

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

Air Pipe B
io.airpipe
Build, validate, deploy — HTTP APIs, cron jobs, webhooks and MCP tools — from your AI client.
Developer Tools CI/CD & DevOps App Automation
191
nexusOAuth
com.civic
Zero-setup MCP gateway securely connecting AI to your tools with authentication and workflows
Agent Orchestration Developer Tools App Automation
2
VULKOAuth
io.github.devjoaocastro
Generate, edit, and deploy immersive 3D/WebGL web projects from any MCP assistant.
Developer Tools Multimedia Processing
27
MeroFoundryOAuth
com.merofoundry
Build and publish full-stack apps from your coding agent: models, rules, pages, auth, per-app MCP.
Coding Agents Developer Tools
1

Related MCP Servers

OGSync
joxan2137
F
license
Not graded
quality
A
maintenance
Enables AI agents to interact with Roblox Studio via a token-efficient MCP server, live two-way script sync, and zero-friction plugin setup.
Updated 3 months ago (2026-07-26 16:17 UTC)
-
Roblox Studio MCP Server
Games & Gamification Developer Tools
erickow
A
license
Not graded
quality
A
maintenance
Enables AI tools to read the Roblox Studio game tree, edit scripts, insert models, and run playtests via the Studio MCP interface.
Updated 2 months ago (2026-08-24 05:06 UTC)
21 npm
MIT
CodeLocal
Coding Agents Developer Tools Command Line
skyrocketeer
A
license
Not graded
quality
B
maintenance
Connects MCP-compatible AI clients and agents to one durable Project Brain plus controlled access to authorized project folders on your own machine. Enables file editing, terminal and Git operations, project intelligence, browser automation, and local MCP server federation, all scoped to explicit workspace grants.
Updated a month ago (2026-09-13 03:52 UTC)
35 npm
Apache 2.0
dragon-work
AI & Machine Learning Project Management
Ajiumeng123
A
license
Not graded
quality
A
maintenance
Provides a local-first AI workspace for chatting, invoking skills, managing projects, and integrating MCP tools, with all data stored on the user's machine.
Updated a month ago (2026-09-18 01:35 UTC)
2
Apache 2.0