MCP Protocol Reference

Session Defaults

• Desktop frame size: 1440x900
• Mobile frame size: 390x844
• Responsive approach: desktop-first, then derive mobile frame variants.
• Grid config: 12 columns, column width 72, gutter 24.
• Frame naming rule: use screen spec filename without extension.

Examples:

1. dashboard-home.md -> dashboard-home
2. document-upload-flow.md -> document-upload-flow
3. document-qa-interface.md -> document-qa-interface

Tool: create_project

Purpose:

• Initialize a design project session.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "canvas_size": {
      "type": "object",
      "properties": {
        "width": { "type": "integer" },
        "height": { "type": "integer" }
      },
      "required": ["width", "height"]
    },
    "theme": { "type": "string" }
  },
  "required": ["name", "canvas_size"]
}

Example payload:

{
  "tool": "create_project",
  "params": {
    "name": "Smartflow",
    "canvas_size": { "width": 1440, "height": 900 },
    "theme": "smartflow-fintech"
  }
}

Tool: create_frame

Purpose:

• Create a screen artboard.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "width": { "type": "integer" },
    "height": { "type": "integer" },
    "background": { "type": "string" }
  },
  "required": ["name", "width", "height", "background"]
}

Example payload:

{
  "tool": "create_frame",
  "params": {
    "name": "dashboard-home",
    "width": 1440,
    "height": 900,
    "background": "color.surface.background"
  }
}

Tool: add_component

Purpose:

• Place a mapped component in a frame.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "frame": { "type": "string" },
    "component_id": { "type": "string" },
    "position": {
      "type": "object",
      "properties": {
        "x": { "type": "integer" },
        "y": { "type": "integer" }
      },
      "required": ["x", "y"]
    },
    "size": {
      "type": "object",
      "properties": {
        "width": { "type": "integer" },
        "height": { "type": "integer" }
      },
      "required": ["width", "height"]
    },
    "variant": { "type": "string" },
    "properties": { "type": "object" }
  },
  "required": ["frame", "component_id", "position"]
}

Example payload:

{
  "tool": "add_component",
  "params": {
    "frame": "dashboard-home",
    "component_id": "SF/Dashboard/DocumentCard/Active",
    "position": { "x": 280, "y": 240 },
    "size": { "width": 560, "height": 108 },
    "variant": "active",
    "properties": {
      "title": "Acme Corp - Facility Agreement",
      "status": "Active",
      "confidence": "94%"
    }
  }
}

Tool: set_properties

Purpose:

• Apply style or content properties to a placed component.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "component_ref": { "type": "string" },
    "properties": {
      "type": "object",
      "additionalProperties": true
    }
  },
  "required": ["component_ref", "properties"]
}

Example payload:

{
  "tool": "set_properties",
  "params": {
    "component_ref": "dashboard-home:stats-card-1",
    "properties": {
      "text_style": "typography.heading.md",
      "value_style": "typography.heading.lg",
      "badge_style": "components.Badge.info"
    }
  }
}

Tool: load_tokens

Purpose:

• Load token file references into the design session.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "token_file_path": { "type": "string" }
  },
  "required": ["token_file_path"]
}

Example payload:

{
  "tool": "load_tokens",
  "params": {
    "token_file_path": "05-design-specs/design-tokens/colors.json"
  }
}

Tool: link_screens

Purpose:

• Add interactive navigation between frames.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "source_component": { "type": "string" },
    "target_frame": { "type": "string" },
    "interaction": { "type": "string", "enum": ["click", "hover"] }
  },
  "required": ["source_component", "target_frame", "interaction"]
}

Example payload:

{
  "tool": "link_screens",
  "params": {
    "source_component": "dashboard-home:quick-action-upload",
    "target_frame": "document-upload-flow",
    "interaction": "click"
  }
}

Tool: add_text

Purpose:

• Add text that is not represented by a component.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "frame": { "type": "string" },
    "content": { "type": "string" },
    "position": {
      "type": "object",
      "properties": {
        "x": { "type": "integer" },
        "y": { "type": "integer" }
      },
      "required": ["x", "y"]
    },
    "style_token": { "type": "string" }
  },
  "required": ["frame", "content", "position", "style_token"]
}

Example payload:

{
  "tool": "add_text",
  "params": {
    "frame": "dashboard-home",
    "content": "Active Documents",
    "position": { "x": 280, "y": 208 },
    "style_token": "typography.heading.md"
  }
}

Tool: add_image

Purpose:

• Place an image asset.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "frame": { "type": "string" },
    "src": { "type": "string" },
    "position": {
      "type": "object",
      "properties": {
        "x": { "type": "integer" },
        "y": { "type": "integer" }
      },
      "required": ["x", "y"]
    },
    "size": {
      "type": "object",
      "properties": {
        "width": { "type": "integer" },
        "height": { "type": "integer" }
      }
    }
  },
  "required": ["frame", "src", "position"]
}

Example payload:

{
  "tool": "add_image",
  "params": {
    "frame": "dashboard-home",
    "src": "site/static/img/logo.svg",
    "position": { "x": 24, "y": 24 },
    "size": { "width": 120, "height": 32 }
  }
}

Tool: group

Purpose:

• Group components into a reusable block.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "components": {
      "type": "array",
      "items": { "type": "string" }
    },
    "name": { "type": "string" }
  },
  "required": ["components", "name"]
}

Example payload:

{
  "tool": "group",
  "params": {
    "components": [
      "dashboard-home:sidebar",
      "dashboard-home:header"
    ],
    "name": "SF/Global/LayoutShell"
  }
}

Tool: export

Purpose:

• Export a frame asset.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "frame": { "type": "string" },
    "format": { "type": "string", "enum": ["PNG", "PDF", "SVG"] },
    "output_path": { "type": "string" },
    "scale": { "type": "number" }
  },
  "required": ["frame", "format", "output_path"]
}

Example payload:

{
  "tool": "export",
  "params": {
    "frame": "dashboard-home",
    "format": "PNG",
    "output_path": "07-demos/demo-environment/screenshots/dashboard-home.png",
    "scale": 2
  }
}

Tool: list_components

Purpose:

• Return all available components in the current project scope.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {}
}

Example payload:

{
  "tool": "list_components",
  "params": {}
}

Tool: get_frame

Purpose:

• Return the current frame structure and properties.

Parameters (JSON Schema):

{
  "type": "object",
  "properties": {
    "frame_name": { "type": "string" }
  },
  "required": ["frame_name"]
}

Example payload:

{
  "tool": "get_frame",
  "params": {
    "frame_name": "dashboard-home"
  }
}