AI and MCP

A design MCP server where the canvas is HTML

Design tools now let AI agents in through MCP. What the agent can do depends on what the canvas is made of. When it is HTML, the agent writes the page itself.

Baurice Ley · 6 min read · Facts checked Oct 9, 2026

What an MCP server does for a design tool

MCP, the Model Context Protocol, is a standard way for an AI agent to use another app's tools. A design tool that runs an MCP server lets your agent read a file, change it, or turn it into code, from your code editor or chat app.

How the Figma MCP server works

According to Figma's help center, its MCP server gives agents design context, variables, components and layout data, and can generate code from selected frames. Agents can also create and modify native Figma content, through the remote server. That write access is free during the beta, and Figma says it will become a usage-based paid feature.

The remote server is available on all plans. The desktop server requires a Dev or Full seat on a paid plan.

The key point: the agent works on a vector design. Getting a web page out of it is still a translation step.

What changes when the canvas is HTML

In Kalka, every layer is an HTML element and every style is CSS. So the agent does not describe a design for someone to rebuild. It writes the page, and you see it on the canvas, as layers you can select and edit by hand.

// Tools planned for the Kalka MCP server
get_tree read the layers of a page, as HTML
write_html add or replace a section of the page
update_styles change the CSS of any layer
get_screenshot look at the result, like a designer would
export hand back the files

Three things that make it different

  • Local, no usage cap. The server runs with the desktop app on your machine. No tool call quota, no account required.
  • Any agent. If your agent speaks MCP, it can work in Kalka. You are not tied to one model.
  • Nothing to convert. What the agent writes is what ships: HTML and CSS in a folder you own.

An example

You ask: "Add a pricing section with three plans, same style as the hero." The agent reads the page with get_tree, writes a section.pricing with write_html, checks it with get_screenshot, then you adjust a radius and a color by hand in the design panel. No export, no handoff.

Kalka is in development and open source. The tool list above comes from our product spec and may change before release.