ecomfe · Justineo · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026
diff --git a/.claude-plugin/marketplace.json b/.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": "Use TemPad Dev to turn Figma evidence into UI code and create native Figma designs.",
       "category": "Design"
     }
   ]

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -33,6 +33,14 @@ 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
+          .agents/plugins/marketplace.json
+          .claude-plugin/marketplace.json)"
+
       - name: Type check
         run: pnpm typecheck
 

diff --git a/.github/workflows/publish-mcp.yml b/.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,8 @@ jobs:
 
       - name: Publish
         working-directory: packages/mcp-server
-        run: npm publish --access public
+        run: npm publish --access public --tag "${{ inputs.tag }}"
+
+      - name: Verify published version
+        working-directory: packages/mcp-server
+        run: npm view "@tempad-dev/mcp@$(node -p "require('./package.json').version")" version
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ stats-*.json
 .wxt
 web-ext.config.ts
 dist
+.dev/
 coverage
 .artifacts/
 packages/*/coverage

diff --git a/.lefthook.yml b/.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}

diff --git a/AGENTS.md b/AGENTS.md
@@ -32,16 +32,48 @@ 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
+
+- Before running or reviewing an end-to-end Figma authoring agent test, read
+  `docs/testing/agent-authoring-evaluation.md` and follow its runtime identity,
+  clean-task, evidence-review, and fix-placement rules.
+- `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 every change that affects the generated `tempad-dev-dev`
+  contents, including the shared skill, agent-plugin manifests, icons, or marketplace metadata.
+  Ordinary `pnpm build` must not modify agent-plugin artifacts.
+- Before asking the user to test a changed development plugin, reinstall the generated cachebuster
+  in the active host and use a new task. `codex plugin add tempad-dev-dev@tempad-dev-dev` updates
+  the installation on disk, but an external CLI call alone does not prove that a running Desktop
+  host refreshed its plugin cache.
+- `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.
+- After an extension-side rebuild, refresh the target Figma tab before testing. An open tab can keep
+  its previous page-context runtime even when WXT has emitted the new bundle; reinstalling the Codex
+  agent plugin does not reload that browser runtime. Verify that MCP reconnects before the test.
+- 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/testing/agent-authoring-evaluation.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 +147,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`.

diff --git a/README.md b/README.md
@@ -205,14 +205,29 @@ 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.
+These portable capabilities are packaged first as an
+[Agent Plugins 1.0](https://agent-plugins.org/) bundle. Its root `plugin.json`, `skills/`, and
+`mcp.json` are the canonical package; client-specific manifests are compatibility layers for
+installers and hosts that do not consume the open format directly.
+
+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 +239,22 @@ 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. The setup flow installs the portable Agent Plugin first for Codex, Cursor, Claude Code, and VS Code. For Gemini, OpenCode, TRAE, and other clients without compatible plugin installation, it uses the client's MCP flow plus the two standalone skills. Every command or config is shown in full for review and copying.
+
+To install the portable package into all compatible agents detected on your machine:
+
+```bash
+npx plugins add ecomfe/tempad-dev
+```
+
+Pass `--target codex`, `--target cursor`, `--target claude-code`, or `--target vscode` to limit the
+installation to one of the built-in setup targets. Native Codex and Claude marketplace commands,
+plus direct MCP and skill installation, remain documented as compatibility fallbacks in the
+[Agent Plugin guide](./agent-plugins/tempad-dev/README.md).
+
+All plugin and direct `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.
 

diff --git a/README.zh-Hans.md b/README.zh-Hans.md
@@ -201,14 +201,28 @@ 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 结合目标仓库完成适配、验证和实现。
+这些可移植能力会优先封装为
+[Agent Plugins 1.0](https://agent-plugins.org/) 插件。根目录的 `plugin.json`、`skills/` 和
+`mcp.json` 是 canonical package；客户端专用 manifest 只作为安装器或尚未直接消费开放
+格式的 host 的兼容层。
+
+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 +234,22 @@ 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. 对 Codex、Cursor、Claude Code 和 VS Code，配置流程会优先安装可移植的 Agent Plugin。对 Gemini、OpenCode、TRAE 及其它尚无兼容 plugin 安装能力的客户端，则使用对应客户端的 MCP 流程并单独安装两个 skill。所有命令和 config 都会完整显示，便于检查和复制。
+
+要把可移植插件安装到本机检测到的所有兼容 agent，可运行：
+
+```bash
+npx plugins add ecomfe/tempad-dev
+```
+
+使用 `--target codex`、`--target cursor`、`--target claude-code` 或 `--target vscode` 可以只
+安装到内置配置入口中的某一个目标。Codex 与 Claude 的原生 marketplace 命令，以及直接
+安装 MCP 和 skill 的方式，仍作为兼容回退保留在
+[Agent Plugin 指南](./agent-plugins/tempad-dev/README.zh-Hans.md)中。
+
+所有 plugin 和直接使用 `npx` 的配置路径都使用 `@tempad-dev/mcp@latest`。
 
 使用期间请保持 TemPad Dev 打开并启用 MCP。如果连接了多个 Figma 文件，请点击目标文件面板中的 MCP 徽标；该文件会成为 agent 当前访问的上下文。
 

diff --git a/agent-plugins/tempad-dev/.claude-plugin/plugin.json b/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": "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/",
   "mcpServers": "./.mcp.json"
 }