Basic Shapes Example

A step-by-step example of creating a simple design with basic shapes.

Goal

Create a card design with:

• Blue rounded rectangle background
• White title text
• Gray subtitle text
• Decorative circle

Step 1: Set Canvas Size

Tool: set_canvas
Args: { "width": 800, "height": 600, "backgroundColor": "#F0F4F8" }

Step 2: Add Background Card

Tool: add_element
Args: {
  "type": "rect",
  "x": 50, "y": 50,
  "width": 700, "height": 500,
  "fillColor": "#1E40AF",
  "cornerRadius": 24,
  "name": "Card Background"
}

Step 3: Add Title

Tool: add_element
Args: {
  "type": "text",
  "x": 100, "y": 150,
  "width": 600, "height": 60,
  "text": "Welcome to Gigma",
  "fontSize": 48,
  "fontWeight": "bold",
  "fillColor": "#FFFFFF",
  "textAlignment": "center",
  "name": "Title"
}

Step 4: Add Subtitle

Tool: add_element
Args: {
  "type": "text",
  "x": 100, "y": 230,
  "width": 600, "height": 40,
  "text": "AI-powered design, made simple",
  "fontSize": 24,
  "fontWeight": "regular",
  "fillColor": "#BFDBFE",
  "textAlignment": "center",
  "name": "Subtitle"
}

Step 5: Add Decorative Circle

Tool: add_element
Args: {
  "type": "circle",
  "x": 600, "y": 350,
  "width": 120, "height": 120,
  "fillColor": "#3B82F6",
  "opacity": 0.5,
  "name": "Decoration"
}

Step 6: Verify with Screenshot

Tool: get_screenshot
Args: {}

The AI receives a base64 PNG image and can see the design.

Step 7: Export

Tool: export_canvas
Args: { "format": "png", "scale": 2 }

Returns a signed URL to download the high-res PNG.