功能描述

AI-powered design tool — say goodbye to Figma MCP's read-only screenshots. Gigma gives you a real editable canvas with full MCP control. Create, edit, and ex...

使用说明 (SKILL.md)

Gigma — AI Design Canvas

Name: Gigma AI Design Canvas
Author: snoopyrain

Say goodbye to Figma MCP's read-only screenshots. Gigma is a cloud design tool built for AI agents — you get a real editable canvas with full MCP control. Create shapes, add text, insert images, arrange layers, preview with screenshots, and export high-res PNGs — all through natural conversation.

Why Gigma over Figma MCP?

	Figma MCP	Gigma
Canvas control	Read-only screenshots	Full read/write
Create elements	Limited	Shapes, text, images, lines
Edit elements	No	Update any property
Image masking	No	Circle, ellipse, rounded rect
Export	Screenshot only	PNG up to 3x (5760×3240)
Batch design	No	Clone projects, loop & export
Setup	Complex OAuth	Paste MCP link, done

Prerequisites

Sign up at gigma.10xboost.org with Google (free, no credit card)
Get your MCP link: Click the "MCP Link" button in the toolbar → copy the JSON config
Add to Claude: Paste into your MCP settings — no install needed

Setup guide: gigma-doc.10xboost.org

Available Tools (19 total)

Project Management

Tool	Description
`list_projects`	List all projects with metadata
`create_project`	Create new project (supports cloning from existing for templates)
`switch_project`	Switch active project

Canvas

Tool	Description
`get_canvas_info`	Get canvas dimensions, background color, element count
`set_canvas`	Set canvas width, height, background color

Elements (Create, Read, Update, Delete)

Tool	Description
`add_element`	Add shapes (rect, circle), text, images, or lines with full styling
`add_image`	Insert image with masking (circle, ellipse, roundedRect) and stroke
`list_elements`	List all elements on canvas
`get_element`	Get full properties of an element
`update_element`	Modify any property of an existing element
`delete_element`	Remove an element
`delete_all_elements`	Clear the entire canvas

Layer & Selection

Tool	Description
`reorder_layer`	Move element: front, back, forward, backward
`select_element`	Highlight element in web editor
`deselect_all`	Clear all selections

Export & Preview

Tool	Description
`get_screenshot`	Preview canvas as base64 PNG (verify before export)
`export_canvas`	Export to Google Cloud Storage (PNG, 1x/2x/3x scale, 7-day URL)

Design Workflow

Step 1: Set Up Canvas

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

Common canvas sizes:

Format	Size
Instagram Post	1080×1080
Instagram Story	1080×1920
Facebook Post	1200×630
YouTube Thumbnail	1280×720
LinkedIn Post	1200×627
Presentation Slide	1920×1080

Step 2: Build the Design

Add a background shape:

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

Add text:

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 an image with circular mask:

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

Add decorative elements:

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

Step 3: Arrange Layers

Recommended stacking order (bottom to top):

Background rectangle
Decorative elements (gradients, borders)
Images and icons
Text (topmost for readability)

reorder_layer(elementId: "\x3Ctext_id>", action: "front")

Step 4: Preview

Always verify before exporting:

get_screenshot()

This returns a base64 PNG — check layout, colors, and text positioning.

Step 5: Export

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

Scale options:

1x — standard resolution (e.g., 1080×1080)
2x — high-res (e.g., 2160×2160) — recommended
3x — ultra high-res (e.g., 3240×3240)

Returns a signed URL valid for 7 days.

Batch Design Workflow

Create multiple variations from a template:

Step 1: Design the template

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

Step 2: Loop through data

For each variation:

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)

Step 3: Collect export URLs

Each export_canvas returns a unique signed URL — collect all for the user.

Pro tip: Use create_project(cloneFromId: "\x3Ctemplate_id>") to clone a template project for non-destructive batch creation.

Element Properties Reference

Shapes (rect, circle)

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

Text

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

Image

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

Line

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

Tips

Screenshot often — use get_screenshot after every 2-3 elements to catch issues early
Update, don't recreate — modify existing elements with update_element instead of delete + add
Bold, large text — social media feeds scroll fast, use 48px+ and high contrast
2-3 colors max — clean designs with a restricted palette perform best
Track element IDs — save the UUID returned by add_element for later updates/deletes
Canvas changes sync to browser — edits appear in the web editor within ~2 seconds

Error Handling

Error	Solution
Token validation failure (-32001)	MCP link invalid — get a new one from gigma.10xboost.org
Element not found	Use `list_elements` to get current element IDs
Image not loading	Ensure the image URL is publicly accessible (HTTPS)
Export failed	Check canvas has elements; try `get_screenshot` first

Documentation

Full docs: gigma-doc.10xboost.org

安全使用建议

This skill appears to do what it claims (create/edit/export canvas elements) and is instruction-only, but it relies on the external Gigma service and an MCP link you must paste. Before installing or pasting any MCP link: 1) Inspect the MCP link contents or the service's docs to see what permissions/tokens it provides — avoid pasting links that include OAuth tokens or service-account credentials for other services. 2) Sign up with a non-sensitive account first and test with throwaway designs to observe what is shared/uploaded. 3) Review the export behavior: exported PNGs go to Google Cloud Storage and return signed URLs — confirm whether uploads are to Gigma-controlled storage or your own GCS project, and whether any credentials are required. 4) Verify the service domain (gigma-doc.10xboost.org) and privacy policy before sending private images or proprietary designs. If you need stricter guarantees about data residency or access, request more detail from the developer or avoid using the hosted service.

功能分析

Type: OpenClaw Skill Name: gigma-design Version: 1.0.0 The skill bundle defines an interface for an AI agent to interact with 'Gigma,' a cloud-based design platform. It provides a comprehensive set of tools for canvas manipulation, element CRUD operations, and high-resolution exports via the Model Context Protocol (MCP). No evidence of malicious intent, data exfiltration, or harmful prompt injection was found; the instructions and tool definitions are entirely consistent with the stated purpose of providing an editable design canvas.

能力评估

✓ Purpose & Capability

The name/description (AI design canvas, create/edit/export designs) match the declared runtime instructions (project/canvas/element tools, screenshot preview, export). There are no unrelated env vars or binaries requested.

ℹ Instruction Scope

SKILL.md confines runtime actions to design operations (create_project, add_element, get_screenshot, export_canvas). It instructs the user to sign up and paste an 'MCP link' into their MCP settings — that is the mechanism by which the agent will interact with the external Gigma service. The file mentions export to Google Cloud Storage (signed 7-day URLs) but does not show any local file or unrelated system access. Because the skill delegates access via the pasted MCP link, you should confirm what that link exposes (tokens, account access, project scope).

✓ Install Mechanism

No install spec and no code files — instruction-only — so nothing is written to disk and no external packages are fetched by the skill itself.

✓ Credentials

The skill requests no environment variables or credentials in its metadata. The only external dependency is the user-supplied MCP link and the Gigma web signup; those are reasonable for a hosted design service. There are no unrelated credential requests in the manifest.

✓ Persistence & Privilege

always:false and default invocation settings are used. The skill does not request persistent system-side privileges or modify other skills' configs. Autonomous invocation is allowed (platform default) but not combined with any broad credential requests in this manifest.

版本历史

v1.0.0

- Initial release of gigma-design, an AI-powered design tool with a fully editable canvas and 19 MCP tools. - Enables creating, editing, and exporting social graphics, thumbnails, banners, and batch designs with real-time control. - Supports full element manipulation (add, update, mask, reorder, delete) and high-res PNG export up to 3x. - Streamlines workflow with project management, batch creation, and instant screenshot preview features. - Designed as a full read/write alternative to Figma MCP’s screenshot-only workflow.

元数据

Slug gigma-design

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题