feat: add declarative Figma canvas authoring by Justineo · Pull Request #152 · ecomfe/tempad-dev

Justineo · 2026-07-27T04:24:21Z

Summary

Adds end-to-end declarative Figma canvas authoring. Agents can inspect reusable resources, submit one native design result, and validate it visually—without generating or executing Plugin API code.

Highlights

Bounded discovery: get_design_system returns deterministic, paginated summaries and exact details for accessible components, variables, native styles, and shaders.
Single-write workflow: apply_canvas accepts strict HTML + Tailwind and handles both creation and scoped incremental updates.
Native Figma fidelity: supports geometry, Auto Layout, rich text, paints/effects/media, variables and styles, pages, authored components/variants, instances, and Slots.
Safe reconciliation: stable identities, omission preservation, explicit deletion, no-op detection, dependency preflight, one Undo boundary, automatic rollback, and structural verification.
Assets and validation: sanitized inline SVG, full-SHA-256 image references, bounded get_screenshot, and compact actionable errors.
Agent workflow: expands the progressive figma-canvas-authoring skill and aligns the Codex and Claude bundles, including an explicit empty-document path.
Type safety: enables noUncheckedIndexedAccess and resolves the indexed-access risks it surfaced across runtime code and tests.

Availability

Canvas writing is available whenever MCP access is enabled in an editable Figma Design file; Dev Mode and read-only files remain blocked.
Extension: 0.21.0
MCP: @tempad-dev/mcp@0.8.0-alpha.0 on the alpha tag; latest remains 0.7.1.

vercel · 2026-07-27T04:24:22Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tempad-dev-site	Ready	Preview	Aug 5, 2026 1:03pm

Copilot

Pull request overview

This PR introduces opt-in, declarative Figma canvas authoring to TemPad Dev’s MCP integration, allowing agents to discover a file’s native design system (components/variables) and submit a single desired canvas result that the extension safely reconciles against the live document.

Changes:

Add new MCP tool contracts and routing for get_design_system and apply_canvas, including result summaries, validation, and inline-budget retry guidance.
Implement extension-side design-system discovery and a scoped, rollback-capable reconciliation engine for declarative canvas writes (gated by a session-only “Canvas writes” toggle).
Add/expand tests, documentation, and a new figma-canvas-authoring skill + install/setup messaging.

Reviewed changes

Copilot reviewed 41 out of 41 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vitest.config.ts	Adds new extension MCP tool files to coverage/exclude configuration.
README.zh-Hans.md	Documents new tools and the session-only Canvas writes toggle (ZH-Hans).
README.md	Documents new tools and the session-only Canvas writes toggle (EN).
packages/site/src/sections/ConnectSection.vue	Updates landing-page setup copy for plugin vs non-plugin agent paths.
packages/shared/tests/mcp/tools.test.ts	Adds schema tests for canvas authoring and design-system query parameters.
packages/shared/tests/mcp/responses.test.ts	Adds tests for new tool result summary builders.
packages/shared/tests/mcp/install.test.ts	Updates agent setup prompt assertions to include the new skill.
packages/shared/tests/mcp/index.test.ts	Ensures new schemas are exported from the shared MCP barrel.
packages/shared/tests/mcp/constants-errors.test.ts	Verifies new canvas authoring error codes.
packages/shared/src/mcp/tools.ts	Adds shared contracts/schemas for `get_design_system` and `apply_canvas`.
packages/shared/src/mcp/responses.ts	Adds response summary builders for new tools.
packages/shared/src/mcp/install.ts	Updates plugin deep-link prompt to reference both skills.
packages/shared/src/mcp/errors.ts	Adds new error codes for canvas authoring.
packages/mcp-server/tests/tools.test.ts	Extends MCP server tests for new tools, summaries, and validation.
packages/mcp-server/src/tools.ts	Adds tool defs + response formatting/validation for new tools.
packages/mcp-server/src/instructions.md	Adds agent guidance for declarative canvas authoring workflow.
packages/mcp-server/README.zh-Hans.md	Documents new tools and Canvas writes toggle (ZH-Hans).
packages/mcp-server/README.md	Documents new tools and Canvas writes toggle (EN).
packages/mcp-server/package.json	Bumps MCP server version to `0.8.0-alpha.0`.
packages/mcp-server/CHANGELOG.md	Adds changelog entry for `0.8.0-alpha.0`.
packages/extension/vitest.node.config.ts	Adds new extension MCP tool files to node test config exclusions.
packages/extension/ui/state.ts	Adds session-only `canvasWritesOn` UI state.
packages/extension/tests/mcp/tools/design-system.test.ts	Adds behavioral tests for design-system discovery logic.
packages/extension/tests/mcp/tools/canvas.test.ts	Adds extensive behavioral tests for apply/reconcile/gating/rollback.
packages/extension/tests/mcp/runtime.test.ts	Verifies new tool handlers are registered and exposed as expected.
packages/extension/tests/composables/mcp.test.ts	Ensures Canvas writes is cleared when MCP is not connected/enabled.
packages/extension/package.json	Bumps extension version to `0.21.0`.
packages/extension/mcp/tools/design-system.ts	Implements design-system discovery and query ranking/capping.
packages/extension/mcp/tools/canvas.ts	Implements declarative create/update reconciliation with safety gates.
packages/extension/mcp/runtime.ts	Wires new tool handlers into MCP runtime routing.
packages/extension/composables/mcp.ts	Clears session Canvas writes on disconnect/disable.
packages/extension/components/sections/AgentIntegrationSection.vue	Adds the session-only “Canvas writes” toggle to the UI.
packages/extension/CHANGELOG.md	Adds changelog entry describing canvas authoring feature set.
packages/extension/AGENTS.md	Updates docs routing to include canvas authoring design doc.
docs/extension/mcp-canvas-authoring-design.md	Adds design/requirements doc for the new authoring model.
AGENTS.md	Adds link to the new canvas authoring design doc.
agent-plugins/tempad-dev/skills/figma-canvas-authoring/SKILL.md	Introduces the new authoring skill guidance and workflow.
agent-plugins/tempad-dev/skills/figma-canvas-authoring/agents/openai.yaml	Adds OpenAI agent UI metadata for the new skill.
agent-plugins/tempad-dev/README.md	Updates plugin README to mention new skill + write toggle.
agent-plugins/tempad-dev/.codex-plugin/plugin.json	Updates plugin metadata to include canvas authoring capability.
agent-plugins/tempad-dev/.claude-plugin/plugin.json	Updates plugin metadata to include canvas authoring capability.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 41 out of 41 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (2)

packages/site/src/sections/ConnectSection.vue:63

The non-plugin setup path still says "a design skill", but this PR introduces two skills (design-to-code + canvas authoring). This UI copy is now inconsistent with the rest of the docs and can mislead users following the manual setup path.
packages/mcp-server/src/tools.ts:333
The new result validators are too permissive: isDesignSystemResult accepts any object with page as an object and components/variables arrays, and isApplyCanvasResult doesn’t validate array element/value types. This can allow malformed extension payloads through and produce incorrect summaries (or downstream runtime issues) instead of throwing the intended "Invalid … payload" error.

function isDesignSystemResult(payload: unknown): payload is ToolResultMap['get_design_system'] {
  return (
    isRecord(payload) &&
    isRecord(payload.page) &&
    Array.isArray(payload.components) &&
    Array.isArray(payload.variables)
  )
}

function isApplyCanvasResult(payload: unknown): payload is ToolResultMap['apply_canvas'] {
  return (
    isRecord(payload) &&
    typeof payload.rootNodeId === 'string' &&
    isRecord(payload.nodeIdsByKey) &&
    Array.isArray(payload.createdNodeIds) &&
    Array.isArray(payload.updatedNodeIds) &&
    typeof payload.mutationCount === 'number'
  )

Copilot

Pull request overview

Copilot reviewed 42 out of 42 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/site/src/sections/ConnectSection.vue:63

The non-plugin setup path description says “a design skill”, but the non-plugin actions install the whole skills bundle (npx skills add …), which now includes both figma-design-to-code and figma-canvas-authoring. This copy is inconsistent with the plugin path (“design skills”) and can mislead users into thinking only one skill is needed.

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/site/src/sections/ConnectSection.vue:63

The non-plugin install path still says “a design skill”, but this PR introduces two skills (design-to-code + canvas authoring). This copy is now misleading; it should refer to “design skills” (plural) consistently.

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/extension/components/sections/AgentIntegrationSection.vue:54

The Canvas writes toggle handler is assigning to the imported ref binding (canvasWritesOn = ...). In Vue templates this attempts to reassign the imported constant and will not update the ref’s .value (and can throw at runtime). Update the ref value instead.

          :options="toggleOptions"
          :model-value="canvasWritesOn"
          @update:model-value="canvasWritesOn = $event === true"

Copilot