Method Sketch

Appearance

How To ​

Show Errors and warnings panel ​

You can press Ctrl-Shift-m (Cmd-Shift-m on macOS) to show a list of diagnostics in a panel below the editor.

Error panel

Use VS Code Extension ​

  • Install from Visual studio market place
  • Create file method.sketch containing the guid of the
  • Download and copy initial version of generate script (if it is not already present)
  • Create empty method.design file
  • Open the extension side bar
  • Check sketchid, press refresh sketchid if required
  • Click connect

While connected

  • method.design will be updated on every iteration
  • on clicking generate in the webapp the extension will download and automatically run the generation script

Set up the MCP server ​

Connect your own AI agent to your sketches. There are two endpoints:

Endpoint Use it to
https://api.methodsketch.app/mcp/design Create and edit sketches. Changes appear live in the pad
https://api.methodsketch.app/mcp/brief Read a sketch so the agent can implement it. Read-only

Add one or both to your agent as a remote (HTTP) MCP server. The URL is all it needs. There is no API key: the first time the agent connects, your browser opens and you sign in with your Method Sketch account.

Pointing the agent at a sketch ​

Every tool works on a sketch id. On the design endpoint the agent can list your organisations and sketches, or create a new sketch, so it finds the id itself.

The brief endpoint cannot list. It is meant for a subagent that implements the design: the design agent passes it the sketch id, and the organisation id if there is one.

To supply the id yourself, read it from the address of the sketch in the pad:

Sketch Address
Personal https://pad.methodsketch.app/sketch/<sketch id>
Organisation https://pad.methodsketch.app/<organisation id>/sketch/<sketch id>