feat: add declarative Figma canvas authoring - #152
Draft
Justineo wants to merge 4 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Justineo
force-pushed
the
feat/write-to-figma
branch
from
July 27, 2026 04:26
280053e to
318f5f0
Compare
There was a problem hiding this comment.
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_systemandapply_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-authoringskill + 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.
Comment on lines
59
to
63
| function getAgentDescription(agent: AgentIntegrationConfig): string { | ||
| return agent.actions.some(({ id }) => id === 'plugin-prompt') | ||
| ? 'The plugin adds MCP access and the design skill.' | ||
| : 'Add MCP access and the design skill.' | ||
| ? 'The plugin adds MCP access and design skills.' | ||
| : 'Add MCP access and a design skill.' | ||
| } |
Comment on lines
+316
to
323
| function isDesignSystemResult(payload: unknown): payload is ToolResultMap['get_design_system'] { | ||
| return ( | ||
| isRecord(payload) && | ||
| isRecord(payload.page) && | ||
| Array.isArray(payload.components) && | ||
| Array.isArray(payload.variables) | ||
| ) | ||
| } |
There was a problem hiding this comment.
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:
isDesignSystemResultaccepts any object withpageas an object andcomponents/variablesarrays, andisApplyCanvasResultdoesn’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'
)
There was a problem hiding this comment.
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 bothfigma-design-to-codeandfigma-canvas-authoring. This copy is inconsistent with the plugin path (“design skills”) and can mislead users into thinking only one skill is needed.
Comment on lines
+364
to
+370
| const hasBinding = !!spec.variables?.[field] | ||
| if (hasBinding) { | ||
| if (paints !== figma.mixed && paints.length === 1 && paints[0]?.type === 'SOLID') return | ||
| if (color === null) { | ||
| const label = field === 'fill' ? 'Fill' : 'Stroke' | ||
| specError(`${label} variable binding on "${spec.key}" requires a solid fallback paint.`) | ||
| } |
There was a problem hiding this comment.
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.
Comment on lines
+51
to
+55
| class="tp-grid-end" | ||
| :options="toggleOptions" | ||
| :model-value="canvasWritesOn" | ||
| @update:model-value="canvasWritesOn = $event === true" | ||
| /> |
There was a problem hiding this comment.
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"
|
|
||
| - `get_code`: High-fidelity JSX/Vue + TailwindCSS code output by default, plus attached assets and the codegen preset/config used. | ||
| - `get_design_system`: Query-ranked native Figma component and variable references. | ||
| - `apply_canvas`: A declarative desired result that the extension safely reconciles with the live canvas. This requires the separate, session-only **Canvas writes** toggle. |
|
|
||
| - `get_code`：默认输出高保真的 JSX/Vue + TailwindCSS 代码，同时包含相关资源以及使用的 codegen 预设和配置。 | ||
| - `get_design_system`：返回按查询排序的原生 Figma 组件和变量引用。 | ||
| - `apply_canvas`：提交声明式目标结果，由扩展与实时画布安全地进行增量协调；需要单独启用仅当前会话有效的 **Canvas writes**。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
get_design_systemandapply_canvasMCP tools so agents can discover native components and variables, then submit one declarative Figma result instead of driving individual Plugin API calls.figma-canvas-authoringskill with an explicit empty-document workflow.This bumps the extension to
0.21.0. The MCP package is published as@tempad-dev/mcp@0.8.0-alpha.0under thealphatag;latestremains0.7.1.Checked with
pnpm typecheck,pnpm lint,pnpm test:run,pnpm build:mcp,pnpm build:ext, and an npm publish dry run.