feat: add declarative Figma canvas authoring

.claude-plugin/marketplace.json

@@ -3,12 +3,12 @@
   "owner": {
     "name": "TemPad Dev"
   },
-  "description": "Agent plugins for using TemPad Dev design evidence in coding workflows.",
+  "description": "Agent plugins for reading Figma evidence and authoring native designs with TemPad Dev.",
   "plugins": [
     {
       "name": "tempad-dev",
       "source": "./agent-plugins/tempad-dev",
-      "description": "Use selected Figma nodes as agent-ready evidence for project-consistent UI implementation.",
+      "description": "Turn Figma evidence into project-consistent UI code and create native Figma designs.",
       "category": "Design"
     }
   ]

.github/workflows/build.yml

@@ -33,6 +33,13 @@ jobs:
       - name: Install browser runtime
         run: pnpm --filter @tempad-dev/extension test:setup
 
+      - name: Check agent plugin
+        run: pnpm agent-plugin:dev && test -z "$(git status --porcelain --untracked-files=all -- agent-plugins/tempad-dev)"
+
+      - name: Verify published MCP version
+        if: github.event_name == 'push'
+        run: npm view "@tempad-dev/mcp@$(node -p "require('./packages/mcp-server/package.json').version")" version
+
       - name: Type check
         run: pnpm typecheck
 

.github/workflows/publish-mcp.yml

@@ -2,6 +2,16 @@ name: publish-mcp
 
 on:
   workflow_dispatch:
+    inputs:
+      tag:
+        description: npm dist-tag
+        required: true
+        default: latest
+        type: choice
+        options:
+          - latest
+          - next
+          - alpha
 
 permissions:
   contents: read
@@ -35,4 +45,4 @@ jobs:
 
       - name: Publish
         working-directory: packages/mcp-server
-        run: npm publish --access public
+        run: npm publish --access public --tag "${{ inputs.tag }}"

.gitignore

@@ -14,6 +14,7 @@ stats-*.json
 .wxt
 web-ext.config.ts
 dist
+.dev/
 coverage
 .artifacts/
 packages/*/coverage

.lefthook.yml

@@ -5,10 +5,6 @@ pre-commit:
       group:
         piped: true
         jobs:
-          - name: sync-agent-plugin
-            glob: '{skill/SKILL.md,agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md}'
-            run: pnpm sync:agent-plugin
-            stage_fixed: true
           - name: lint
             glob: '*.{ts,js,mjs,cjs,mts,cts,vue}'
             run: pnpm exec eslint --fix {staged_files}

AGENTS.md

@@ -32,16 +32,36 @@ Provide a single entry point for coding agents. This file links to package-level
 - Test (watch): `pnpm test`
 - Test (run): `pnpm test:run`
 - Test (coverage): `pnpm test:coverage`
+- Generate the local agent plugin: `pnpm agent-plugin:dev`
 - Extension node tests: `pnpm --filter @tempad-dev/extension test:node`
 - Extension browser tests: `pnpm --filter @tempad-dev/extension test:browser`
 - Extension browser setup: `pnpm --filter @tempad-dev/extension test:setup`
 
+## Agent plugin workflow
+
+- `agent-plugins/tempad-dev/` is the tracked release source shared by Codex and Claude. The agent
+  plugin is distributed through the Git marketplace, not npm.
+- `.dev/plugins/tempad-dev-dev/` is the ignored local build. Generate it with
+  `pnpm agent-plugin:dev`; do not edit generated files under `.dev/`.
+- Run `pnpm agent-plugin:dev` after changing the shared skill, agent-plugin manifests, icons, or
+  marketplace metadata. Ordinary `pnpm build` must not modify agent-plugin artifacts.
+- `pnpm dev` watches the extension, shared package, and MCP server. The generated development
+  plugin points directly at the current checkout's MCP build, so MCP-only changes require a new
+  agent task or plugin reload, not an agent-plugin rebuild or reinstall.
+- Keep Codex and Claude support equivalent. Both development manifests must launch the same
+  working-tree MCP runtime.
+- Release MCP configuration must use `@tempad-dev/mcp@latest`, never an alpha tag, fixed version,
+  or local path.
+- See `agent-plugins/tempad-dev/README.md` for the Codex and Claude installation commands.
+
 ## Doc index
 
 - `TESTING.md`
 - `docs/testing/architecture.md`
 - `docs/extension/mcp-get-code-requirements.md`
 - `docs/extension/mcp-get-code-design.md`
+- `docs/extension/mcp-canvas-authoring-design.md`
+- `docs/extension/mcp-canvas-assets-design.md`
 - `docs/extension/mcp-browser-gateway-design.md`
 - `docs/marketing-screenshots.md`
 
@@ -115,7 +135,8 @@ Pick the checks that match your change.
 
 - Testing runbook and required checks: `TESTING.md`.
 - Testing architecture and coverage model: `docs/testing/architecture.md`.
-- Root coverage scope is configured in `vitest.config.ts` as the single source of truth.
+- Root coverage composition is configured in `vitest.config.ts`; shared thresholds and the extension
+  node source list live in `vitest.coverage.ts`.
 - Root coverage excludes build artifacts (`**/dist/**`, `**/.output/**`) to avoid polluted reports.
 - Root coverage provider is `istanbul` to avoid V8 remap parse failures under Vite 8 dependency trees.
 - Extension browser tests run in Playwright via `packages/extension/vitest.browser.config.ts`.

README.md

@@ -205,14 +205,24 @@ Current available plugins:
 
 TemPad Dev ships an agent integration for coding agents and IDEs. The integration combines:
 
-- an [MCP](https://modelcontextprotocol.io/) server that lets agents pull code and context directly from the node you have selected in Figma
-- an agent skill that teaches the agent how to interpret that evidence in the current repository
+- an [MCP](https://modelcontextprotocol.io/) server that lets agents inspect Figma and apply
+  declarative canvas results when the current Figma Design file is editable
+- two agent skills: one for implementing Figma evidence in code, and one for designing on the Figma canvas with accessible component definitions and bounded design-system resources
 
-Figma also provides official [remote and desktop MCP servers](https://developers.figma.com/docs/figma-mcp-server/), with the remote server recommended for most users. TemPad Dev is an open, local-control complement for teams that specifically want an inspectable browser-extension pipeline, the existing read-only inspection workflow, programmable output plugins, canonical agent-facing code/token IR, and an explicit context budget. It provides design evidence and a code starting point; the coding agent remains responsible for adapting that evidence to the repository, validating behavior, and producing the final implementation.
+Figma also provides official [remote and desktop MCP servers](https://developers.figma.com/docs/figma-mcp-server/), with the remote server recommended for most users. TemPad Dev is an open, local-control complement for teams that specifically want an inspectable browser-extension pipeline, local inspection and MCP-gated declarative canvas authoring, programmable output plugins, canonical agent-facing code/token IR, and an explicit context budget. It provides design evidence and a code starting point; the coding agent remains responsible for adapting that evidence to the repository, validating behavior, and producing the final implementation.
 
 With the TemPad Dev panel open and MCP enabled, the MCP server exposes:
 
 - `get_code`: High-fidelity JSX/Vue + TailwindCSS code output by default, plus attached assets and the codegen preset/config used.
+- `get_design_system`: An immutable, deterministic catalog. It returns compact pages of component
+  definitions on accessible pages plus local or directly referenced variable, collection/mode,
+  style, and shader definitions without inspecting canvas usage or loading every page. Cursor
+  continuation exposes omitted definitions; exact-ref lookup returns one bounded definition.
+- `apply_canvas`: One restricted HTML + deterministic Tailwind utility desired result using primitives, catalog
+  component tags, short design-system refs, typed Figma-only state, sanitized SVG, and
+  content-addressed images. The extension resolves, validates, diffs, applies, and structurally
+  verifies the result. Authoring requires edit access to the current Figma Design file.
+- `get_screenshot`: A bounded rendered PNG for selective visual validation.
 - `get_structure`: A structural outline (ids, types, geometry) for the current selection.
 - Binary assets are returned as metadata + HTTP download URLs (`asset.url`) in tool responses. Asset MCP resources are not exposed.
 
@@ -224,9 +234,11 @@ With the TemPad Dev panel open and MCP enabled, the MCP server exposes:
   <img alt="TemPad Dev agent setup dialog." src="packages/site/public/marketing/mcp-config-light.png" width="600">
 </picture>
 
-1. Install Node.js 18.20.0 or later with `npx`. Keep TemPad Dev open in the Figma tab you want the agent to inspect, then enable **Preferences → Agent integration → MCP access**. When prompted, allow the loopback connection to `127.0.0.1`.
+1. Install Node.js 18.20.0 or later with `npx`. Keep TemPad Dev open in the Figma tab you want the agent to inspect, then enable **Preferences → Agent integration → MCP access**. When prompted, allow the loopback connection to `127.0.0.1`. Canvas authoring is available while MCP access is enabled and the current Figma Design file is editable.
 2. Select **Set up agents**, choose Codex, Cursor, Claude Code, Gemini, VS Code, OpenCode, or TRAE, and follow the displayed path. Use **Other** for another compatible client. The choice only changes the instructions shown; it does not bind or activate an agent.
-3. Prefer the direct action when offered. Every fallback command or config is shown in full for review and copying. Codex and Claude Code plugins include both MCP and the `figma-design-to-code` skill; the other paths show the two required steps separately.
+3. Prefer the direct action when offered. Every fallback command or config is shown in full for review and copying. Codex and Claude Code plugins include MCP plus the `figma-design-to-code` and `figma-canvas-authoring` skills; the other paths show MCP and standalone skills setup separately.
+
+All `npx`-based setup paths use `@tempad-dev/mcp@latest`.
 
 Keep TemPad Dev open with MCP enabled while using it. If multiple Figma files are connected, click the MCP badge in the panel for the file you want the agent to inspect; that file becomes the active context.
 

README.zh-Hans.md

@@ -201,14 +201,23 @@ sandboxed extension page 内启动一个全新的 Worker，并在完成或五秒
 
 TemPad Dev 内置了面向编码 agent 和 IDE 的 Agent 集成。该集成包含：
 
-- 一个 [MCP](https://modelcontextprotocol.io/) 服务器，使 agent 可以直接从你在 Figma 中选中的节点拉取代码和上下文
-- 一个 agent skill，用于指导 agent 在当前仓库中理解并使用这些证据
+- 一个 [MCP](https://modelcontextprotocol.io/) 服务器，使 agent 可以检查 Figma，并在当前 Figma Design 文件可编辑时提交声明式画布结果
+- 两个 agent skill：一个用于根据 Figma 证据实现代码，另一个用于基于可访问页面中的组件定义和文件级设计资源在 Figma 画布上进行设计
 
-Figma 也提供官方的 [remote 与 desktop MCP server](https://developers.figma.com/docs/figma-mcp-server/)，并建议大多数用户优先使用 remote server。TemPad Dev 的定位是一个开放、强调本地控制的补充方案，适合明确需要可审计的浏览器扩展链路、现有只读检查流程、可编程输出插件、规范化的 agent-facing 代码/token IR，以及显式上下文预算的团队。TemPad Dev 提供设计证据与代码起点；最终仍由 coding agent 结合目标仓库完成适配、验证和实现。
+Figma 也提供官方的 [remote 与 desktop MCP server](https://developers.figma.com/docs/figma-mcp-server/)，并建议大多数用户优先使用 remote server。TemPad Dev 的定位是一个开放、强调本地控制的补充方案，适合明确需要可审计的浏览器扩展链路、本地检查与由 MCP access 控制的声明式画布创作、可编程输出插件、规范化的 agent-facing 代码/token IR，以及显式上下文预算的团队。TemPad Dev 提供设计证据与代码起点；最终仍由 coding agent 结合目标仓库完成适配、验证和实现。
 
 打开 TemPad Dev 面板并启用 MCP 后，MCP 服务器会暴露以下能力：
 
 - `get_code`：默认输出高保真的 JSX/Vue + TailwindCSS 代码，同时包含相关资源以及使用的 codegen 预设和配置。
+- `get_design_system`：创建不可变、确定性的紧凑目录，按资源类型平衡分页返回可访问页面的
+  组件定义，以及本地或被定义直接引用的变量、集合/模式、样式和 shader 定义；既不扫描
+  画布中的使用情况，也不加载所有页面。游标可继续读取遗漏定义；使用同一目录精确查询
+  某个引用时，返回该资源的有界定义。
+- `apply_canvas`：提交一次受限 HTML + 可确定转换的 Tailwind utility 目标结果，其中可以使用基础元素、
+  目录组件标签、设计系统短引用、类型化的 Figma 专有状态、经过净化的 SVG 和内容寻址图片。
+  扩展会在本地解析、验证、计算与实时画布的差异、应用修改并校验结构。画布创作要求当前
+  Figma Design 文件具有编辑权限。
+- `get_screenshot`：返回一张有大小限制的渲染 PNG，用于按需视觉验证。
 - `get_structure`：当前选中节点的结构信息（id、类型、几何数据）。
 - 二进制资源会通过工具响应中的元数据 + HTTP 下载地址（`asset.url`）提供；MCP 不再暴露 asset 资源模板。
 
@@ -220,9 +229,11 @@ Figma 也提供官方的 [remote 与 desktop MCP server](https://developers.figm
   <img alt="TemPad Dev agent setup 对话框。" src="packages/site/public/marketing/mcp-config-light.png" width="600">
 </picture>
 
-1. 安装 Node.js 18.20.0 或更高版本并确保 `npx` 可用。在希望 agent 检查的 Figma 标签页中保持 TemPad Dev 打开，然后启用 **Preferences → Agent integration → MCP access**。出现提示时，请允许连接到 loopback 地址 `127.0.0.1`。
+1. 安装 Node.js 18.20.0 或更高版本并确保 `npx` 可用。在希望 agent 检查的 Figma 标签页中保持 TemPad Dev 打开，然后启用 **Preferences → Agent integration → MCP access**。出现提示时，请允许连接到 loopback 地址 `127.0.0.1`。启用 MCP access 且当前 Figma Design 文件可编辑时，即可进行画布创作。
 2. 点击 **Set up agents**，选择 Codex、Cursor、Claude Code、Gemini、VS Code、OpenCode 或 TRAE，然后按界面显示的路径配置。其它兼容客户端请选择 **Other**。这里的选择只会切换说明，不会绑定或激活 agent。
-3. 如果界面提供直接操作，请优先使用。所有备用命令和 config 都会完整显示，便于检查和复制。Codex 与 Claude Code 的 plugin 同时包含 MCP 和 `figma-design-to-code` skill；其它路径会分别展示两个必要步骤。
+3. 如果界面提供直接操作，请优先使用。所有备用命令和 config 都会完整显示，便于检查和复制。Codex 与 Claude Code 的 plugin 同时包含 MCP、`figma-design-to-code` 和 `figma-canvas-authoring` skill；其它路径会分别展示 MCP 与两个独立 skill 的配置步骤。
+
+所有基于 `npx` 的配置路径都使用 `@tempad-dev/mcp@latest`。
 
 使用期间请保持 TemPad Dev 打开并启用 MCP。如果连接了多个 Figma 文件，请点击目标文件面板中的 MCP 徽标；该文件会成为 agent 当前访问的上下文。
 

agent-plugins/tempad-dev/.claude-plugin/plugin.json

@@ -1,14 +1,23 @@
 {
   "name": "tempad-dev",
-  "version": "0.1.0",
-  "description": "Use selected Figma nodes as agent-ready evidence for project-consistent UI implementation.",
+  "version": "0.1.2",
+  "description": "Turn Figma evidence into UI code and create native Figma designs.",
   "author": {
     "name": "TemPad Dev"
   },
   "homepage": "https://github.com/ecomfe/tempad-dev#agent-integration",
   "repository": "https://github.com/ecomfe/tempad-dev",
   "license": "MIT",
-  "keywords": ["figma", "mcp", "skill", "agent-integration", "design-to-code", "frontend"],
+  "keywords": [
+    "figma",
+    "mcp",
+    "skill",
+    "agent-integration",
+    "design-to-code",
+    "canvas-authoring",
+    "design-system",
+    "frontend"
+  ],
   "skills": "./skills/",
   "mcpServers": "./.mcp.json"
 }

agent-plugins/tempad-dev/.codex-plugin/plugin.json

@@ -1,29 +1,47 @@
 {
   "name": "tempad-dev",
-  "version": "0.1.1",
-  "description": "Use the TemPad Dev agent integration to turn selected Figma nodes into repo-ready UI code.",
+  "version": "0.1.2",
+  "description": "Use TemPad Dev to turn Figma evidence into UI code and create native Figma designs.",
   "author": {
     "name": "TemPad Dev"
   },
   "homepage": "https://github.com/ecomfe/tempad-dev#agent-integration",
   "repository": "https://github.com/ecomfe/tempad-dev",
   "license": "MIT",
-  "keywords": ["figma", "mcp", "skill", "agent-integration", "design-to-code", "frontend"],
+  "keywords": [
+    "figma",
+    "mcp",
+    "skill",
+    "agent-integration",
+    "design-to-code",
+    "canvas-authoring",
+    "design-system",
+    "frontend"
+  ],
   "skills": "./skills/",
   "interface": {
     "displayName": "TemPad Dev",
-    "shortDescription": "Use Figma selections as agent-ready design evidence.",
-    "longDescription": "TemPad Dev packages the figma-design-to-code agent skill with MCP server configuration so coding agents can inspect selected Figma nodes and implement project-consistent UI code.",
+    "shortDescription": "Read Figma evidence and author native canvas content.",
+    "longDescription": "TemPad Dev packages skills for implementing Figma designs in code and authoring native Figma content with optional accessible design-system resources, together with its MCP server configuration.",
     "developerName": "TemPad Dev",
     "category": "Design",
-    "capabilities": ["Agent integration", "MCP", "Design-to-code", "Frontend"],
+    "capabilities": [
+      "Agent integration",
+      "MCP",
+      "Design-to-code",
+      "Canvas authoring",
+      "Design systems",
+      "Frontend"
+    ],
     "websiteURL": "https://github.com/ecomfe/tempad-dev",
     "defaultPrompt": [
       "Use TemPad Dev to implement the selected Figma node.",
-      "Convert this Figma selection into repo-ready UI code.",
-      "Inspect the selected Figma node with TemPad Dev."
+      "Inspect the selected Figma node with TemPad Dev.",
+      "Create a native Figma design while following my resource constraints."
     ],
-    "brandColor": "#0098FF"
+    "brandColor": "#0098FF",
+    "composerIcon": "./assets/icon-padded.svg",
+    "logo": "./assets/icon-padded.svg"
   },
   "mcpServers": "./.mcp.json"
 }

agent-plugins/tempad-dev/README.md

@@ -1,11 +1,17 @@
 # TemPad Dev Agent Plugin
 
+[简体中文](./README.zh-Hans.md)
+
 This plugin packages the TemPad Dev agent integration for Codex and Claude Code. It bundles:
 
-- the `figma-design-to-code` agent skill
-- the TemPad Dev MCP server configuration for selected-node design evidence
+- `figma-design-to-code` for turning Figma evidence into project-consistent UI code
+- `figma-canvas-authoring` for grounded native Figma design with accessible component definitions,
+  file resources, and progressive style guidance
+- the TemPad Dev MCP server configuration for design evidence and MCP-gated canvas authoring
+
+## Installation
 
-Install it for Codex:
+### Codex
 
 ```bash
 codex plugin marketplace add ecomfe/tempad-dev --ref main
@@ -14,7 +20,7 @@ codex plugin add tempad-dev@tempad-dev
 
 You can also install **TemPad Dev** from the Codex app plugin directory after adding the marketplace.
 
-Install it for Claude Code CLI and Desktop:
+### Claude Code and Claude Desktop
 
 ```bash
 claude plugin marketplace add ecomfe/tempad-dev
@@ -24,6 +30,10 @@ claude plugin install tempad-dev@tempad-dev
 The plugin appears in Claude Desktop after the marketplace is added. Both clients use the same
 skill and MCP server configuration from this directory.
 
-Before using the integration, open TemPad Dev in Figma, then open **Preferences -> Agent integration** and enable **MCP access**.
+## Usage
+
+Before using the integration, open TemPad Dev in Figma, then open **Preferences -> Agent
+integration** and enable **MCP access**. Canvas authoring is then available when the active Figma
+Design file is editable.
 
 For app, CLI, direct MCP, and manual fallbacks, see the [complete setup guide](../../README.md#agent-integration).