Gigma — AI 设计画布

告别 Figma MCP 的只读截图。Gigma 是一款专为 AI 智能体构建的云端设计工具——您将获得一个真正可编辑的画布，并拥有完整的 MCP 控制能力。通过自然对话即可创建图形、添加文字、插入图片、调整图层顺序、截图预览，以及导出高分辨率 PNG 图像。

安全性与数据处理

• MCP 链接即凭据：您的 MCP 配置 JSON 中嵌入了身份验证令牌（位于 URL 内，例如 https://gigma.10xboost.org/mcp/t/xxxxx...）。请将其视作密码对待，切勿公开分享。
• 令牌作用域：该嵌入式令牌授予您对 Gigma 项目的设计访问权限。它可创建/编辑/删除元素、导出图像，并管理您账户内的项目；但无法访问任何外部服务或社交平台账号。
• 令牌存储方式：令牌安全地存储在 Gigma 服务端数据库中（Google Cloud，us-central1 区域），绝不会写入您的本地文件系统。您可随时点击 Gigma 工具栏中的“MCP Link”按钮重新生成新令牌。
• 数据流向：所有设计操作（如创建元素、导出图像）均在 Gigma 服务器上执行。导出的 PNG 图像存储于 Google Cloud Storage，其签名 URL 有效期为 7 天。您提供的图像 URL（例如用于 add_image）将在服务端拉取并渲染至画布。
• 无需本地凭据：无需配置本地 API 密钥、环境变量或密钥。全部认证信息均已内置于 MCP 配置中。
• 第三方服务依赖：本技能依赖于 Gigma —— 一款专为 AI 智能体打造的云端设计工具。文档地址：gigma-doc.10xboost.org；源码地址：github.com/snoopyrain。

为何选择 Gigma 而非 Figma MCP？

前提条件

1. 注册账户：使用 Google 账号免费注册（无需信用卡）→ gigma.10xboost.org
2. 获取 MCP 链接：点击工具栏中的“MCP Link”按钮 → 复制弹出的 JSON 配置
3. 接入 Claude：将 JSON 配置粘贴至您的 MCP 设置中 —— 无需安装任何插件

完整配置指南：gigma-doc.10xboost.org

可用工具（共 19 个）

项目管理

画布

元素（增删改查）

图层与选中状态

导出与预览

设计工作流

步骤 1：初始化画布

create_project(name: "Instagram Post")
set_canvas(width: 1080, height: 1080, backgroundColor: "#1a1a2e")

常用画布尺寸：

步骤 2：构建设计

添加背景图形：

add_element(type: "rect", x: 0, y: 0, width: 1080, height: 1080, fillColor: "#4A90D9")

添加文字：

add_element(type: "text", x: 100, y: 200, width: 880, height: 100, text: "Your Headline Here", fontSize: 64, fontWeight: "bold", fillColor: "#FFFFFF", textAlignment: "center")

添加带圆形遮罩的图片：

add_image(url: "https://example.com/photo.jpg", x: 400, y: 400, width: 280, height: 280, maskShape: "circle", strokeColor: "#FFD700", strokeWidth: 6)

添加装饰性元素：

add_element(type: "circle", x: -100, y: -100, width: 400, height: 400, fillColor: "#16213e", opacity: 0.5)

步骤 3：调整图层顺序

推荐堆叠顺序（由下至上）：

1. 背景矩形
2. 装饰性元素（渐变、边框等）
3. 图片与图标
4. 文字（最顶层以保障可读性）

reorder_layer(elementId: "", action: "front")

步骤 4：预览

导出前务必验证效果：

get_screenshot()

返回 base64 编码的 PNG 图像，请检查布局、配色及文字位置是否准确。

步骤 5：导出

export_canvas(format: "png", scale: 2)

缩放选项说明：

• 1x — 标准分辨率（例如：1080×1080）
• 2x — 高分辨率（例如：2160×2160）—— 推荐使用
• 3x — 超高分辨率（例如：3240×3240）

返回一个有效期为 7 天的签名 URL。

批量设计工作流

基于模板快速生成多个设计变体：

步骤 1：设计模板

create_project(name: "Quote Template")
set_canvas(width: 1080, height: 1080, backgroundColor: "#2C3E50")
add_element(type: "rect", ...)        → 将 elementId 保存为 bg_id
add_element(type: "text", text: "Quote here", ...)  → 保存为 quote_id
add_element(type: "text", text: "— Author", ...)    → 保存为 author_id

步骤 2：遍历数据并生成变体

对每个变体依次执行：

update_element(elementId: bg_id, fillColor: "#new_color")
update_element(elementId: quote_id, text: "New quote text")
update_element(elementId: author_id, text: "— New Author")
export_canvas(format: "png", scale: 2)

步骤 3：收集导出链接

每次调用 export_canvas 均返回唯一签名 URL，请统一收集后交付用户。

进阶技巧：使用 create_project(cloneFromId: "") 克隆模板项目，实现非破坏式批量创建。

元素属性参考

图形（矩形、圆形）

x, y, width, height, fillColor, strokeColor, strokeWidth, opacity, rotation

文字

x, y, width, height, text, fontSize, fontWeight ("normal"/"bold"), textAlignment ("left"/"center"/"right"), fillColor, opacity, rotation

图片

url/imageUrl, x, y, width, height, maskShape ("circle"/"ellipse"/"roundedRect"), strokeColor, strokeWidth, opacity, rotation

线条

x, y, width, height, strokeColor, strokeWidth, opacity, rotation

实用技巧

• 高频截图验证：每添加 2–3 个元素后，使用 get_screenshot 快速检查，及早发现异常
• 优先更新而非重建：使用 update_element 修改已有元素，避免重复删除+新增
• 采用加粗大字号：社交媒体信息流滚动迅速，建议文字 ≥48px 并确保高对比度
• 严格限制主色调数量：最多使用 2–3 种颜色，简洁配色方案表现最佳
• 妥善管理元素 ID：保存 add_element 返回的 UUID，便于后续更新或删除操作
• 画布变更实时同步：所有编辑操作约 2 秒内即可在网页编辑器中实时呈现

错误处理

文档

完整文档：gigma-doc.10xboost.org