comate-ui-inspector 0.1.6-alpha.1 → 0.1.6-alpha.3

package/bridge/server.mjs

@@ -3,14 +3,10 @@
  * ui-inspector HTTP bridge（零依赖）——远程开发用。
  *
  * 跑在「Comate agent / hook / MCP 所在的那台机器」（通常是远程开发机），读写和它们同一份
- * ~/.ui-inspector/*.json。本地浏览器扩展（transport=http）经 SSH 端口转发访问本服务：
- *   POST /ingest  {targets:[...]}  → 覆盖写 pending.json，回 {ok,pending}
- *   GET  /state                    → 回 {ok,count,status}
- *
- * 安全：只绑 127.0.0.1，不暴露到网络；远程访问一律走 `ssh -L` 把端口转发到本地 127.0.0.1。
+ * ~/.ui-inspector/*.json。浏览器扩展（transport=http）直连本服务。
  */
 import {createServer} from 'node:http';
-import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync, rmSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
@@ -19,10 +15,11 @@ const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 // 录制：元信息 + append-only 事件流分离，避免多请求读改写竞态把 active 盖回 true。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
-// Agent→浏览器命令队列：每条命令一个文件 commands/<id>.json。
-const cmdDir = resolve(homedir(), '.ui-inspector/commands');
+// figma「带入对话」采集的节点结构。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
+// figma 节点内导出的图片字节落盘到这里（按采集批次分子目录）。
+const figmaAssetsDir = resolve(homedir(), '.ui-inspector/figma-assets');
 const PORT = Number(process.env.UI_INSPECTOR_BRIDGE_PORT) || 8917;
-// 默认只绑 127.0.0.1（走 SSH 隧道）；直连模式（笔记本能直达开发机内网 IP）时用 0.0.0.0 暴露到网卡。
 const HOST = process.env.UI_INSPECTOR_BRIDGE_HOST || '127.0.0.1';
 
 function readStore() {
@@ -47,7 +44,9 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
-// 录制累积：元信息与事件流分离，避免多请求读改写竞态。
+// PLACEHOLDER_HELPERS
+
+// 录制累积：元信息与事件流分离。
 function readMeta() {
     try {
         return JSON.parse(readFileSync(recordingFile, 'utf8'));
@@ -62,7 +61,7 @@ function writeMeta(meta) {
 function recStart(startedAt, pageUrl) {
     const cur = readMeta();
     if (cur && cur.active && cur.startedAt === startedAt) {
-        return; // 同一会话重复 start，忽略
+        return;
     }
     writeMeta({active: true, startedAt, pageUrl});
     mkdirSync(dirname(eventsFile), {recursive: true});
@@ -86,62 +85,103 @@ function recStop(endedAt) {
     writeMeta(cur);
 }
 
-// 命令队列：浏览器轮询取 pending（标记 taken），写回结果。
-function cmdId(id) {
-    return String(id || '').replace(/[^\w.-]/g, '');
+// figma 节点采集：追加到 figma-pending.json（上限 10 个，防爆）。
+function sanitizeName(name) {
+    return (
+        String(name || 'image')
+            .replace(/[^a-zA-Z0-9._-]+/g, '_')
+            .replace(/^_+|_+$/g, '')
+            .slice(0, 60) || 'image'
+    );
 }
-function cmdPoll() {
-    const out = [];
-    let files = [];
+
+// 清理旧的图片批次：保留当前仍在 figma-pending.json 里引用的批次目录（尚未被消费的节点），
+// 其余（已被 hook 注入消费、或被挤出 pending 的）全部删除。只在新一次导出时触发——「下次导出 PNG 才删上次的」。
+function pruneStaleAssets() {
+    let keep = new Set();
     try {
-        files = readdirSync(cmdDir);
+        const list = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        for (const entry of Array.isArray(list) ? list : []) {
+            const imgs = (entry && entry.node && entry.node.images) || [];
+            for (const im of imgs) {
+                if (im && im.file) {
+                    keep.add(dirname(im.file));
+                }
+            }
+        }
     } catch {
-        return out;
+        keep = new Set();
     }
-    for (const f of files) {
-        if (!f.endsWith('.json')) {
-            continue;
-        }
-        const fp = resolve(cmdDir, f);
-        let c;
-        try {
-            c = JSON.parse(readFileSync(fp, 'utf8'));
-        } catch {
-            continue;
-        }
-        if (c && c.status === 'pending') {
-            c.status = 'taken';
+    let dirs = [];
+    try {
+        dirs = readdirSync(figmaAssetsDir);
+    } catch {
+        return; // 目录不存在，无需清理
+    }
+    for (const name of dirs) {
+        const full = resolve(figmaAssetsDir, name);
+        if (!keep.has(full)) {
             try {
-                writeFileSync(fp, JSON.stringify(c), 'utf8');
+                rmSync(full, {recursive: true, force: true});
             } catch {
-                // 忽略
+                // 删除失败忽略
             }
-            out.push({id: c.id, type: c.type, params: c.params || {}});
         }
     }
-    return out;
 }
-function cmdResult(id, result, error) {
-    const fp = resolve(cmdDir, `${cmdId(id)}.json`);
-    let c;
-    try {
-        c = JSON.parse(readFileSync(fp, 'utf8'));
-    } catch {
+
+// 把 node.images 里的 base64 落成本地 PNG 文件，node 只保留 {file,name,id,width,height}，避免 json 膨胀。
+function persistImages(node) {
+    if (!node || !Array.isArray(node.images) || !node.images.length) {
+        if (node) {
+            delete node.images;
+        }
         return;
     }
-    c.status = error ? 'error' : 'done';
-    if (error) {
-        c.error = String(error);
-    } else {
-        c.result = result;
+    pruneStaleAssets();
+    const batch = resolve(figmaAssetsDir, `${Date.now()}`);
+    mkdirSync(batch, {recursive: true});
+    const used = {};
+    const saved = [];
+    node.images.forEach((img, i) => {
+        if (!img || !img.base64) {
+            return;
+        }
+        let base = sanitizeName(img.name) + '-' + i;
+        if (used[base]) {
+            base += '_' + used[base]++;
+        } else {
+            used[base] = 1;
+        }
+        const file = resolve(batch, `${base}.png`);
+        try {
+            writeFileSync(file, Buffer.from(img.base64, 'base64'));
+            saved.push({id: img.id, name: img.name, width: img.width, height: img.height, file});
+        } catch {
+            // 单张落盘失败跳过
+        }
+    });
+    node.images = saved;
+}
+
+function figmaCapture(node) {
+    if (!node) {
+        return;
     }
-    c.doneAt = Date.now();
+    persistImages(node);
+    let list = [];
     try {
-        mkdirSync(cmdDir, {recursive: true});
-        writeFileSync(fp, JSON.stringify(c), 'utf8');
+        const p = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        list = Array.isArray(p) ? p : [];
     } catch {
-        // 忽略
+        list = [];
+    }
+    list.push({node, ts: Date.now()});
+    if (list.length > 10) {
+        list = list.slice(-10);
     }
+    mkdirSync(dirname(figmaPendingFile), {recursive: true});
+    writeFileSync(figmaPendingFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
 function readBody(req, cb) {
@@ -177,18 +217,15 @@ const server = createServer((req, res) => {
     }
     const url = new URL(req.url, 'http://127.0.0.1');
     if (req.method === 'POST' && url.pathname === '/ingest') {
-        let body = '';
-        req.on('data', chunk => (body += chunk));
-        req.on('end', () => {
-            try {
-                const {targets} = JSON.parse(body || '{}');
-                const now = new Date().toISOString();
-                const list = (Array.isArray(targets) ? targets : []).map(target => ({target, receivedAt: now}));
-                writeStore(list);
-                json(res, 200, {ok: true, pending: list.length});
-            } catch (error) {
-                json(res, 400, {ok: false, error: String(error)});
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
             }
+            const targets = Array.isArray(data.targets) ? data.targets : [];
+            const now = new Date().toISOString();
+            const list = targets.map(target => ({target, receivedAt: now}));
+            writeStore(list);
+            json(res, 200, {ok: true, pending: list.length});
         });
         return;
     }
@@ -226,16 +263,12 @@ const server = createServer((req, res) => {
         });
         return;
     }
-    if (req.method === 'GET' && url.pathname === '/cmd/poll') {
-        json(res, 200, {ok: true, commands: cmdPoll()});
-        return;
-    }
-    if (req.method === 'POST' && url.pathname === '/cmd/result') {
+    if (req.method === 'POST' && url.pathname === '/figma/capture') {
         readBody(req, (data, err) => {
             if (err) {
                 return json(res, 400, {ok: false, error: String(err)});
             }
-            cmdResult(data.id, data.result, data.error);
+            figmaCapture(data.node);
             json(res, 200, {ok: true});
         });
         return;

package/enhancements/figma/figma-exec.js

@@ -1,8 +1,9 @@
 /*
- * Figma 命令执行器（MAIN world，figma.com）：收 figma-bridge 转来的命令，调用页面内已解锁的
- * window.figma / window.F2CConverter 完成导出，再把结果 postMessage 回 figma-bridge。
- * 注意：window.figma / F2CConverter 的具体形态由 rewrite.js + browser.global.js 解锁后提供，
- * 这里按官方扩展观察到的 API 名调用（convertFigmaNodeToHtml / exportAsync），真机可能需微调。
+ * Figma 命令执行器（MAIN world，figma.com）：响应「带入对话」——把当前选中节点转成 F2C HTML 结构，
+ * 并把节点内的图片（IMAGE 填充 / 图片节点）用 exportAsync 导出为 PNG，一并回传给 figma-ui 落盘待 hook 注入。
+ * F2CConverter 的 convertFigmaNodeToHtml 强制 withoutImages，HTML 里的图片只是占位路径、没有字节，
+ * 所以图片要我们自己走 window.figma 的 exportAsync 取。页面内已解锁的 window.figma / window.F2CConverter
+ * 由 rewrite.js + browser.global.js 提供。
  */
 (function () {
     if (window.__oreateFigmaExec) {
@@ -10,74 +11,151 @@
     }
     window.__oreateFigmaExec = true;
 
-    function reply(id, result, error) {
-        window.postMessage({__uiInspectorCmdResult: {id: id, result: result, error: error ? String(error) : undefined}}, '*');
-    }
+    var MAX_IMAGES = 20; // 单次最多导出的图片数，防爆
+    var SCALE = 2; // 导出倍率，兼顾清晰度与体积
 
-    function resolveNode(params) {
+    function resolveNode() {
         var fig = window.figma;
         if (!fig) {
-            throw new Error('window.figma 不可用（请确认已在 figma.com 设计稿页，且扩展已解锁）');
-        }
-        if (params && params.nodeId && typeof fig.getNodeById === 'function') {
-            var n = fig.getNodeById(params.nodeId);
-            if (n) {
-                return n;
-            }
+            throw new Error('window.figma 不可用（请确认在 figma.com 设计稿页，且扩展已解锁）');
         }
         var sel = fig.currentPage && fig.currentPage.selection;
         if (sel && sel.length) {
             return sel[0];
         }
-        throw new Error('未找到目标节点：传入 nodeId 或先在画布选中一个节点');
+        throw new Error('未选中节点：请先在画布选中一个节点');
+    }
+
+    // 该节点自身是否「携带图片」：IMAGE 类型节点，或 fills 里有可见的 IMAGE 填充。
+    function hasImage(node) {
+        if (!node) {
+            return false;
+        }
+        if (node.type === 'IMAGE') {
+            return true;
+        }
+        var fills;
+        try {
+            fills = node.fills;
+        } catch (e) {
+            return false;
+        }
+        if (!Array.isArray(fills)) {
+            return false; // figma.mixed 或不支持 fills
+        }
+        return fills.some(function (f) {
+            return f && f.type === 'IMAGE' && f.visible !== false;
+        });
+    }
+
+    // 深度遍历子树，收集携带图片的节点（含根自身），按先序、去重、限量。
+    function collectImageNodes(root) {
+        var out = [];
+        var seen = {};
+        var stack = [root];
+        while (stack.length && out.length < MAX_IMAGES) {
+            var n = stack.shift();
+            if (!n || seen[n.id]) {
+                continue;
+            }
+            seen[n.id] = true;
+            if (hasImage(n)) {
+                out.push(n);
+            }
+            var kids;
+            try {
+                kids = n.children;
+            } catch (e) {
+                kids = null;
+            }
+            if (Array.isArray(kids)) {
+                // 保持先序：子节点插到队首前面
+                stack = kids.concat(stack);
+            }
+        }
+        return out;
     }
 
     function toBase64(bytes) {
+        if (window.figma && typeof window.figma.base64Encode === 'function') {
+            try {
+                return window.figma.base64Encode(bytes);
+            } catch (e) {
+                /* 落到下面手工编码 */
+            }
+        }
         var bin = '';
-        var arr = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
-        for (var i = 0; i < arr.length; i++) {
-            bin += String.fromCharCode(arr[i]);
+        for (var i = 0; i < bytes.length; i++) {
+            bin += String.fromCharCode(bytes[i]);
         }
         return btoa(bin);
     }
 
-    async function exec(cmd) {
-        var type = cmd.type;
-        var params = cmd.params || {};
-        if (type === 'figma_export_node_html') {
-            if (!window.F2CConverter || typeof window.F2CConverter.convertFigmaNodeToHtml !== 'function') {
-                throw new Error('window.F2CConverter.convertFigmaNodeToHtml 不可用');
+    async function exportImages(root) {
+        var nodes = collectImageNodes(root);
+        var images = [];
+        for (var i = 0; i < nodes.length; i++) {
+            var n = nodes[i];
+            try {
+                var bytes = await n.exportAsync({format: 'PNG', constraint: {type: 'SCALE', value: SCALE}});
+                images.push({
+                    id: n.id,
+                    name: n.name || 'image-' + i,
+                    type: n.type,
+                    width: Math.round(n.width || 0),
+                    height: Math.round(n.height || 0),
+                    format: 'PNG',
+                    base64: toBase64(bytes),
+                });
+            } catch (e) {
+                // 单张导出失败不影响其余（部分节点可能不可导出）
             }
-            var node = resolveNode(params);
-            var html = await window.F2CConverter.convertFigmaNodeToHtml(node, params.options || {});
-            return {html: typeof html === 'string' ? html : JSON.stringify(html)};
         }
-        if (type === 'figma_export_node_image') {
-            var n = resolveNode(params);
-            if (!n || typeof n.exportAsync !== 'function') {
-                throw new Error('该节点不支持 exportAsync 导出');
-            }
-            var format = (params.format || 'PNG').toUpperCase();
-            var bytes = await n.exportAsync({format: format});
-            return {base64: toBase64(bytes), format: format};
+        return images;
+    }
+
+    // 把整个选中节点导出成一张 PNG（用于开发页「走查」覆盖层）。width/height 是节点的 CSS 像素尺寸，
+    // 覆盖层按此宽度 1:1 显示即与设计稿同像素。导出倍率 SCALE 保证高清。
+    async function exportSnapshot(root) {
+        try {
+            var bytes = await root.exportAsync({format: 'PNG', constraint: {type: 'SCALE', value: SCALE}});
+            return {
+                base64: toBase64(bytes),
+                width: Math.round(root.width || 0),
+                height: Math.round(root.height || 0),
+            };
+        } catch (e) {
+            return null;
         }
-        throw new Error('未知命令类型：' + type);
     }
 
     window.addEventListener('message', function (ev) {
-        if (ev.source !== window || !ev.data || !ev.data.__uiInspectorCmd) {
+        if (ev.source !== window || !ev.data || ev.data.__uiInspectorFigmaCapture !== true) {
             return;
         }
-        var cmd = ev.data.__uiInspectorCmd;
         Promise.resolve()
-            .then(function () {
-                return exec(cmd);
+            .then(async function () {
+                if (!window.F2CConverter || typeof window.F2CConverter.convertFigmaNodeToHtml !== 'function') {
+                    throw new Error('F2CConverter 不可用');
+                }
+                var node = resolveNode();
+                var html = await window.F2CConverter.convertFigmaNodeToHtml(node, {});
+                var images = await exportImages(node);
+                var snapshot = await exportSnapshot(node);
+                return {
+                    nodeId: node.id,
+                    name: node.name,
+                    type: node.type,
+                    html: typeof html === 'string' ? html : JSON.stringify(html),
+                    images: images,
+                    snapshot: snapshot,
+                };
             })
-            .then(function (result) {
-                reply(cmd.id, result, null);
+            .then(function (node) {
+                window.postMessage({__uiInspectorFigmaCaptured: {node: node}}, '*');
             })
             .catch(function (err) {
-                reply(cmd.id, null, err);
+                window.postMessage({__uiInspectorFigmaCaptured: {error: String(err)}}, '*');
             });
     });
 })();

package/enhancements/figma/figma-ui.js

@@ -0,0 +1,97 @@
+/*
+ * Figma「带入对话」浮层（ISOLATED world，figma.com）：页面右下角一个按钮，点一下把当前选中节点
+ * 的 F2C HTML 结构采集下来，经 background 落盘 figma-pending.json；下次在 Comate 发消息时，
+ * hook 会把该结构注入对话，Agent 据此生成代码——用户无需手动调工具、无需填路径。
+ */
+(function () {
+    if (window.__oreateFigmaUi) {
+        return;
+    }
+    window.__oreateFigmaUi = true;
+    const alive = () => !!(chrome.runtime && chrome.runtime.id);
+
+    const btn = document.createElement('button');
+    btn.textContent = '带入 Comate 生成代码';
+    btn.style.cssText =
+        'position:fixed;right:16px;bottom:16px;z-index:2147483647;border:none;border-radius:999px;' +
+        'padding:8px 14px;background:#0d99ff;color:#fff;font:12px/1.4 sans-serif;cursor:pointer;' +
+        'box-shadow:0 2px 12px rgba(0,0,0,0.25);';
+
+    let tip = null;
+    function toast(text, ok) {
+        if (!tip) {
+            tip = document.createElement('div');
+            tip.style.cssText =
+                'position:fixed;right:16px;bottom:56px;z-index:2147483647;max-width:280px;padding:6px 10px;' +
+                'border-radius:8px;background:#111;color:#fff;font:12px/1.4 sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.25);';
+            document.documentElement.appendChild(tip);
+        }
+        tip.textContent = text;
+        tip.style.background = ok === false ? '#dc2626' : ok ? '#16a34a' : '#111';
+        tip.style.display = 'block';
+        clearTimeout(toast._t);
+        toast._t = setTimeout(() => (tip.style.display = 'none'), 3000);
+    }
+
+    btn.onclick = () => {
+        toast('采集选中节点…');
+        window.postMessage({__uiInspectorFigmaCapture: true}, '*');
+    };
+
+    window.addEventListener('message', event => {
+        if (event.source !== window || !event.data || !event.data.__uiInspectorFigmaCaptured) {
+            return;
+        }
+        const payload = event.data.__uiInspectorFigmaCaptured;
+        if (payload.error) {
+            toast('采集失败：' + payload.error, false);
+            return;
+        }
+        if (!alive()) {
+            return;
+        }
+        const node = payload.node || {};
+        // 整节点快照只给开发页「走查」覆盖层用，存 chrome.storage.local，不随 figma-capture 进 figma-pending.json。
+        const snap = node.snapshot;
+        delete node.snapshot;
+        if (snap && snap.base64) {
+            try {
+                chrome.storage.local.set(
+                    {
+                        figmaOverlay: {
+                            dataUrl: 'data:image/png;base64,' + snap.base64,
+                            width: snap.width,
+                            height: snap.height,
+                            name: node.name || node.nodeId,
+                            ts: Date.now(),
+                        },
+                    },
+                    () => void chrome.runtime.lastError
+                );
+            } catch {
+                // 存储失败不影响带入
+            }
+        }
+        try {
+            chrome.runtime.sendMessage({type: 'figma-capture', node: node}, resp => {
+                if (chrome.runtime.lastError || !resp || !resp.ok) {
+                    toast('落盘失败，请重试', false);
+                    return;
+                }
+                const extra = snap ? '，已可在开发页点「走查」覆盖' : '';
+                toast(`已带入「${node.name || node.nodeId}」${extra}，去 Comate 发消息即可生成代码`, true);
+            });
+        } catch {
+            toast('扩展上下文失效，请刷新页面', false);
+        }
+    });
+
+    function mount() {
+        if (document.body && !btn.isConnected) {
+            document.body.appendChild(btn);
+        }
+    }
+    mount();
+    document.addEventListener('DOMContentLoaded', mount);
+    setInterval(mount, 2000); // figma 频繁重渲染，兜底保证按钮在
+})();

package/enhancements/figma/pane.html

@@ -1,9 +1,32 @@
-<div class="hint">在 <code>www.figma.com</code> 打开设计稿后，本模式会在页面注入 F2C 引擎（解锁 Dev Mode / 插件能力）。</div>
+<div class="hint">
+    在
+    <code>www.figma.com</code>
+    打开设计稿后，本模式会在页面注入 F2C 引擎（解锁 Dev Mode / 插件能力）。
+</div>
 <div
     id="figma-status"
     class="hint"
     style="margin-top: 6px"
 ></div>
-<div class="hint" style="margin-top: 6px">
-    需先在上方「设置 → 生效域名」添加 <code>https://www.figma.com</code> 并授权，然后重载扩展。
+<div style="margin-top: 10px">
+    <button
+        id="figma-walkthrough"
+        class="primary"
+        style="width: 100%"
+    >
+        走查
+    </button>
+    <div
+        id="figma-walkthrough-status"
+        class="hint"
+        style="margin-top: 4px"
+    ></div>
+</div>
+<div
+    class="hint"
+    style="margin-top: 6px"
+>
+    需先在上方「设置 → 生效域名」添加
+    <code>https://www.figma.com</code>
+    并授权，然后重载扩展。
 </div>

package/enhancements/figma/pane.js

@@ -1,17 +1,70 @@
 /*
- * Figma 增强包弹窗面板：只做状态提示。真正的注入在 figma.com 页面内由 rewrite.js + browser.global.js
- * （MAIN world，document_start）完成；导出能力（节点→HTML/图片）由后续的命令通道 + MCP 工具提供。
+ * Figma 增强包弹窗面板：
+ *  1) 显示 figma.com 授权状态；
+ *  2)「走查」按钮——把上次带入的整节点快照覆盖到当前开发页面，供像素级比对。
+ *     真正的注入在 figma.com 页面内由 rewrite.js + browser.global.js（MAIN world）完成；
+ *     覆盖层由开发页的 bridge-content.js 渲染，这里只负责向当前活动 tab 发切换消息。
  */
 (function () {
     const el = document.getElementById('figma-status');
-    if (!el) {
+    if (el) {
+        chrome.permissions.contains({origins: ['https://www.figma.com/*']}, granted => {
+            if (chrome.runtime.lastError) {
+                return;
+            }
+            el.textContent = granted ? '✓ 已授权 figma.com，打开设计稿即生效' : '✗ 尚未授权 figma.com';
+            el.style.color = granted ? '#1a7f37' : '#cf222e';
+        });
+    }
+
+    const btn = document.getElementById('figma-walkthrough');
+    const status = document.getElementById('figma-walkthrough-status');
+    if (!btn) {
         return;
     }
-    chrome.permissions.contains({origins: ['https://www.figma.com/*']}, granted => {
+
+    function setStatus(text, ok) {
+        if (!status) {
+            return;
+        }
+        status.textContent = text;
+        status.style.color = ok === false ? '#cf222e' : ok ? '#1a7f37' : '#656d76';
+    }
+
+    // 有没有可用的快照（提示用户先去 figma 带入节点）。
+    chrome.storage.local.get({figmaOverlay: null}, o => {
         if (chrome.runtime.lastError) {
             return;
         }
-        el.textContent = granted ? '✓ 已授权 figma.com，打开设计稿即生效' : '✗ 尚未授权 figma.com';
-        el.style.color = granted ? '#1a7f37' : '#cf222e';
+        if (!o || !o.figmaOverlay) {
+            setStatus('还没有可走查的节点，先去 Figma 点「带入 Comate 生成代码」');
+        } else {
+            setStatus(`已就绪：${o.figmaOverlay.name || '节点'}（${o.figmaOverlay.width}×${o.figmaOverlay.height}）`);
+        }
     });
+
+    btn.onclick = () => {
+        chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+            const tab = tabs && tabs[0];
+            if (!tab || !tab.id) {
+                setStatus('找不到当前标签页', false);
+                return;
+            }
+            try {
+                chrome.tabs.sendMessage(tab.id, {type: 'toggle-figma-overlay'}, resp => {
+                    if (chrome.runtime.lastError) {
+                        setStatus('当前页面未注入脚本（确认是已授权的开发域名并已刷新）', false);
+                        return;
+                    }
+                    if (!resp || !resp.ok) {
+                        setStatus((resp && resp.error) || '切换失败', false);
+                        return;
+                    }
+                    setStatus(resp.shown ? '已覆盖到页面，可拖拽/缩放/调透明度' : '已关闭覆盖层', true);
+                });
+            } catch (e) {
+                setStatus(String(e), false);
+            }
+        });
+    };
 })();

package/enhancements/figma/plugin.json

@@ -24,8 +24,8 @@
             "runAt": "document_idle"
         },
         {
-            "id": "bridge",
-            "js": ["figma-bridge.js"],
+            "id": "ui",
+            "js": ["figma-ui.js"],
             "matches": ["https://www.figma.com/*"],
             "world": "ISOLATED",
             "runAt": "document_idle"

package/extension/background.js

@@ -83,15 +83,11 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
-        if (message.type === 'cmd-poll') {
-            const r = await fetch(`${base}/cmd/poll`);
-            return await r.json();
-        }
-        if (message.type === 'cmd-result') {
-            const r = await fetch(`${base}/cmd/result`, {
+        if (message.type === 'figma-capture') {
+            const r = await fetch(`${base}/figma/capture`, {
                 method: 'POST',
                 headers: {'content-type': 'application/json'},
-                body: JSON.stringify({id: message.id, result: message.result, error: message.error}),
+                body: JSON.stringify({node: message.node}),
             });
             return await r.json();
         }
@@ -117,8 +113,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         msg.type === 'rec-start' ||
         msg.type === 'rec-event' ||
         msg.type === 'rec-stop' ||
-        msg.type === 'cmd-poll' ||
-        msg.type === 'cmd-result'
+        msg.type === 'figma-capture'
     ) {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse

package/extension/bridge-content.js

@@ -178,6 +178,169 @@
         // 上下文失效
     }
 
+    // ---------- Figma 走查覆盖层（popup 点「走查」→ 这里把带入的整节点快照覆盖到页面）----------
+    // 覆盖层容器只放图片并整体调透明度；工具条单独一层（始终不透明、可操作），避免被透明度一起吃掉。
+    var ov = null;
+    var ovImg = null;
+    var ovBar = null;
+    var ovs = {x: 40, y: 40, scale: 1, opacity: 0.5, baseW: 0, through: false};
+    var dragFrom = null;
+
+    function ovRemove() {
+        if (ov) {
+            ov.remove();
+            ov = null;
+            ovImg = null;
+        }
+        if (ovBar) {
+            ovBar.remove();
+            ovBar = null;
+        }
+        document.removeEventListener('mousemove', ovDrag);
+        document.removeEventListener('mouseup', ovDragEnd);
+    }
+
+    function ovApply() {
+        if (!ov) {
+            return;
+        }
+        ov.style.left = ovs.x + 'px';
+        ov.style.top = ovs.y + 'px';
+        ov.style.opacity = String(ovs.opacity);
+        ovImg.style.width = (ovs.baseW * ovs.scale || 0) + 'px';
+        ovImg.style.pointerEvents = ovs.through ? 'none' : 'auto';
+        ov.style.pointerEvents = ovs.through ? 'none' : 'auto';
+    }
+
+    function ovDrag(e) {
+        if (!dragFrom) {
+            return;
+        }
+        ovs.x = e.clientX - dragFrom.dx;
+        ovs.y = e.clientY - dragFrom.dy;
+        ovApply();
+    }
+    function ovDragEnd() {
+        dragFrom = null;
+    }
+
+    function ovBuild(data) {
+        ovRemove();
+        ovs = {x: 40, y: 40, scale: 1, opacity: 0.5, baseW: data.width || 0, through: false};
+        ov = document.createElement('div');
+        ov.style.cssText = 'position:fixed;z-index:2147483646;left:40px;top:40px;opacity:0.5;';
+        ovImg = document.createElement('img');
+        ovImg.src = data.dataUrl;
+        ovImg.draggable = false;
+        ovImg.style.cssText = 'display:block;cursor:move;box-shadow:0 0 0 1px rgba(255,0,0,0.35);';
+        ovImg.addEventListener('load', function () {
+            if (!ovs.baseW) {
+                ovs.baseW = ovImg.naturalWidth || 0;
+            }
+            ovApply();
+        });
+        ovImg.addEventListener('mousedown', function (e) {
+            if (ovs.through) {
+                return;
+            }
+            dragFrom = {dx: e.clientX - ovs.x, dy: e.clientY - ovs.y};
+            e.preventDefault();
+        });
+        document.addEventListener('mousemove', ovDrag);
+        document.addEventListener('mouseup', ovDragEnd);
+        ov.appendChild(ovImg);
+        document.documentElement.appendChild(ov);
+        ovToolbar();
+        ovApply();
+    }
+
+    function ovField(label, ctrl) {
+        var w = document.createElement('span');
+        w.style.cssText = 'display:flex;align-items:center;gap:6px;';
+        var l = document.createElement('span');
+        l.textContent = label;
+        w.appendChild(l);
+        w.appendChild(ctrl);
+        return w;
+    }
+
+    function ovToolbar() {
+        ovBar = document.createElement('div');
+        ovBar.style.cssText =
+            'position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2147483647;display:flex;' +
+            'align-items:center;gap:12px;padding:6px 12px;border-radius:999px;background:#111;color:#fff;' +
+            'font:12px/1.4 sans-serif;box-shadow:0 2px 10px rgba(0,0,0,0.3);';
+        var o = document.createElement('input');
+        o.type = 'range';
+        o.min = '0';
+        o.max = '100';
+        o.value = '50';
+        o.style.width = '80px';
+        o.oninput = function () {
+            ovs.opacity = Number(o.value) / 100;
+            ovApply();
+        };
+        var z = document.createElement('input');
+        z.type = 'range';
+        z.min = '10';
+        z.max = '300';
+        z.value = '100';
+        z.style.width = '100px';
+        var zl = document.createElement('span');
+        zl.textContent = '100%';
+        z.oninput = function () {
+            ovs.scale = Number(z.value) / 100;
+            zl.textContent = z.value + '%';
+            ovApply();
+        };
+        var tc = document.createElement('input');
+        tc.type = 'checkbox';
+        tc.onchange = function () {
+            ovs.through = tc.checked;
+            ovApply();
+        };
+        var c = document.createElement('button');
+        c.textContent = '关闭';
+        c.style.cssText =
+            'border:none;border-radius:999px;padding:3px 10px;background:#ff5a5a;color:#fff;cursor:pointer;font:inherit;';
+        c.onclick = ovRemove;
+        ovBar.appendChild(ovField('透明', o));
+        ovBar.appendChild(ovField('缩放', z));
+        ovBar.appendChild(zl);
+        ovBar.appendChild(ovField('穿透', tc));
+        ovBar.appendChild(c);
+        document.documentElement.appendChild(ovBar);
+    }
+
+    // popup 的「走查」按钮 → 这里切换覆盖层：已显示则关闭，否则读 storage 的快照渲染。
+    try {
+        chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+            if (!msg || msg.type !== 'toggle-figma-overlay') {
+                return;
+            }
+            if (ov) {
+                ovRemove();
+                sendResponse({ok: true, shown: false});
+                return;
+            }
+            chrome.storage.local.get({figmaOverlay: null}, function (o) {
+                if (chrome.runtime.lastError) {
+                    sendResponse({ok: false, error: '读取快照失败'});
+                    return;
+                }
+                if (!o || !o.figmaOverlay || !o.figmaOverlay.dataUrl) {
+                    sendResponse({ok: false, error: '还没有可走查的节点，先去 Figma 点「带入 Comate 生成代码」'});
+                    return;
+                }
+                ovBuild(o.figmaOverlay);
+                sendResponse({ok: true, shown: true});
+            });
+            return true; // 异步 sendResponse
+        });
+    } catch {
+        // 上下文失效
+    }
+
     const timer = setInterval(() => {
         if (!alive()) {
             clearInterval(timer);
@@ -194,7 +357,6 @@
                 const status = resp.status;
                 const id = status && status.id !== undefined ? status.id : null;
                 if (!statusSeeded) {
-                    // 首轮：记录当前状态 id（可能是上轮遗留），本轮不弹，避免刷新页面重放旧 toast
                     statusSeeded = true;
                     lastStatusId = id;
                 } else if (status && id !== lastStatusId) {

package/extension/manifest.json

@@ -5,7 +5,7 @@
     "description": "按住 Alt 点元素多选，交给本地 host / bridge，供 Comate 定位源码修改。目标域名与传输通路在扩展弹窗里配置。仅开发用。",
     "minimum_chrome_version": "111",
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArHbA4zi22qf48xgfUtkMM6vXEtWiTtmhlppNAMlfG/uFjujAK9EEGssy6674woq5W9ugl+FlVE4rf477m9drGnGjnvaaFc9U8xCVqUoe/+vTmRyDWAtSPyu2aulAXd9P78WCia5ROSpecian7b0pG/iPyqvgZsyJfYk1qC3VyEBOnOqVeWawawKE23OaxUZJaci4wB10xNrWBHBIAztL8xmRDSkkByImwNshtlzbo2pE17LHZGr35FMbQXdRBKWxsdKlT1t0j7ezK73bCFjsYLWoAXVSpK+eAjltGTqKtOTvNxV94TXwr/j0v7ikgz80XD4ffzXV0qDbQ8HCxRSZMwIDAQAB",
-    "permissions": ["nativeMessaging", "scripting", "storage"],
+    "permissions": ["nativeMessaging", "scripting", "storage", "unlimitedStorage"],
     "host_permissions": ["http://localhost/*", "http://127.0.0.1/*"],
     "optional_host_permissions": ["*://*/*"],
     "background": {

package/extension/native-host/host.mjs

@@ -11,7 +11,7 @@
  *
  * 数据文件与 MCP server / hook 共用：统一在用户主目录 ~/.ui-inspector/pending.json（与仓库位置无关）。
  */
-import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync, rmSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
@@ -22,9 +22,10 @@ const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 // 分开是为了避免「每条事件读改写整份 JSON」的多进程竞态把 active 盖回 true——事件只追加，不碰 active。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
-// Agent→浏览器命令队列：每条命令一个文件 commands/<id>.json（避免单文件读改写竞态）。
-// MCP server 写入 pending；浏览器轮询取走执行；host 写回 done/error 结果。
-const cmdDir = resolve(homedir(), '.ui-inspector/commands');
+// figma「带入对话」采集的节点结构，等 hook 注入下一条消息。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
+// figma 节点内导出的图片字节落盘到这里（按采集批次分子目录）。
+const figmaAssetsDir = resolve(homedir(), '.ui-inspector/figma-assets');
 
 function readStore() {
     try {
@@ -88,62 +89,103 @@ function recStop(endedAt) {
     writeMeta(cur); // 只有 start/stop 动 active，事件追加不碰它 → stop 后 active 不会被盖回
 }
 
-// 命令队列：浏览器轮询取 pending（取走即标记 taken，避免重复执行）；host 写回结果。
-function cmdId(id) {
-    return String(id || '').replace(/[^\w.-]/g, ''); // 防路径穿越
+// figma 节点采集：追加到 figma-pending.json（上限 10 个，防爆）。
+function sanitizeName(name) {
+    return (
+        String(name || 'image')
+            .replace(/[^a-zA-Z0-9._-]+/g, '_')
+            .replace(/^_+|_+$/g, '')
+            .slice(0, 60) || 'image'
+    );
 }
-function cmdPoll() {
-    const out = [];
-    let files = [];
+
+// 清理旧的图片批次：保留当前仍在 figma-pending.json 里引用的批次目录（尚未被消费的节点），
+// 其余（已被 hook 注入消费、或被挤出 pending 的）全部删除。只在新一次导出时触发——「下次导出 PNG 才删上次的」。
+function pruneStaleAssets() {
+    let keep = new Set();
     try {
-        files = readdirSync(cmdDir);
+        const list = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        for (const entry of Array.isArray(list) ? list : []) {
+            const imgs = (entry && entry.node && entry.node.images) || [];
+            for (const im of imgs) {
+                if (im && im.file) {
+                    keep.add(dirname(im.file));
+                }
+            }
+        }
     } catch {
-        return out;
+        keep = new Set();
     }
-    for (const f of files) {
-        if (!f.endsWith('.json')) {
-            continue;
-        }
-        const fp = resolve(cmdDir, f);
-        let c;
-        try {
-            c = JSON.parse(readFileSync(fp, 'utf8'));
-        } catch {
-            continue;
-        }
-        if (c && c.status === 'pending') {
-            c.status = 'taken';
+    let dirs = [];
+    try {
+        dirs = readdirSync(figmaAssetsDir);
+    } catch {
+        return; // 目录不存在，无需清理
+    }
+    for (const name of dirs) {
+        const full = resolve(figmaAssetsDir, name);
+        if (!keep.has(full)) {
             try {
-                writeFileSync(fp, JSON.stringify(c), 'utf8');
+                rmSync(full, {recursive: true, force: true});
             } catch {
-                // 忽略
+                // 删除失败忽略
             }
-            out.push({id: c.id, type: c.type, params: c.params || {}});
         }
     }
-    return out;
 }
-function cmdResult(id, result, error) {
-    const fp = resolve(cmdDir, `${cmdId(id)}.json`);
-    let c;
-    try {
-        c = JSON.parse(readFileSync(fp, 'utf8'));
-    } catch {
+
+// 把 node.images 里的 base64 落成本地 PNG 文件，node 只保留 {file,name,id,width,height}，避免 json 膨胀。
+function persistImages(node) {
+    if (!node || !Array.isArray(node.images) || !node.images.length) {
+        if (node) {
+            delete node.images;
+        }
         return;
     }
-    c.status = error ? 'error' : 'done';
-    if (error) {
-        c.error = String(error);
-    } else {
-        c.result = result;
+    pruneStaleAssets();
+    const batch = resolve(figmaAssetsDir, `${Date.now()}`);
+    mkdirSync(batch, {recursive: true});
+    const used = {};
+    const saved = [];
+    node.images.forEach((img, i) => {
+        if (!img || !img.base64) {
+            return;
+        }
+        let base = sanitizeName(img.name) + '-' + i;
+        if (used[base]) {
+            base += '_' + used[base]++;
+        } else {
+            used[base] = 1;
+        }
+        const file = resolve(batch, `${base}.png`);
+        try {
+            writeFileSync(file, Buffer.from(img.base64, 'base64'));
+            saved.push({id: img.id, name: img.name, width: img.width, height: img.height, file});
+        } catch {
+            // 单张落盘失败跳过
+        }
+    });
+    node.images = saved;
+}
+
+function figmaCapture(node) {
+    if (!node) {
+        return;
     }
-    c.doneAt = Date.now();
+    persistImages(node);
+    let list = [];
     try {
-        mkdirSync(cmdDir, {recursive: true});
-        writeFileSync(fp, JSON.stringify(c), 'utf8');
+        const p = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        list = Array.isArray(p) ? p : [];
     } catch {
-        // 忽略
+        list = [];
+    }
+    list.push({node, ts: Date.now()});
+    if (list.length > 10) {
+        list = list.slice(-10);
     }
+    mkdirSync(dirname(figmaPendingFile), {recursive: true});
+    writeFileSync(figmaPendingFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
 function send(obj) {
@@ -171,10 +213,8 @@ function handle(msg) {
     } else if (msg && msg.type === 'rec-stop') {
         recStop(msg.endedAt);
         resp = {ok: true};
-    } else if (msg && msg.type === 'cmd-poll') {
-        resp = {ok: true, commands: cmdPoll()};
-    } else if (msg && msg.type === 'cmd-result') {
-        cmdResult(msg.id, msg.result, msg.error);
+    } else if (msg && msg.type === 'figma-capture') {
+        figmaCapture(msg.node);
         resp = {ok: true};
     } else {
         resp = {ok: false, error: 'unknown message'};

package/hooks/inject-ui-inspector.mjs

@@ -19,6 +19,8 @@ const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 // 录制：元信息（active/startedAt/pageUrl/endedAt）+ append-only 事件流（每行一条 {kind,item}）。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
+// figma「带入对话」采集的节点结构（页面按钮触发落盘），注入后让 Agent 据结构生成代码。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
 
 function emit(output) {
     process.stdout.write(JSON.stringify(output));
@@ -67,8 +69,11 @@ const meta = readJson(recordingFile, null);
 const recDone = meta && meta.active === false;
 const recEvents = recDone ? readEvents() : [];
 const hasRec = recDone && recEvents.length > 0;
+const figmaParsed = readJson(figmaPendingFile, []);
+const figmaNodes = Array.isArray(figmaParsed) ? figmaParsed : [];
+const hasFigma = figmaNodes.length > 0;
 
-if (!list.length && !hasRec) {
+if (!list.length && !hasRec && !hasFigma) {
     emit({decision: 'allow'});
 }
 
@@ -135,6 +140,33 @@ function describeRecording(meta, evs) {
     return parts.join('\n');
 }
 
+// figma「带入对话」节点：把每个节点的 F2C HTML 结构铺开，供 Agent 据此生成代码。
+function describeFigma(nodes) {
+    const parts = [
+        `【ui-inspector Figma】用户在 Figma 选中并带入了 ${nodes.length} 个节点，请据下面的结构（F2C 导出的 HTML）生成对应前端代码：`,
+    ];
+    nodes.forEach((entry, i) => {
+        const n = (entry && entry.node) || {};
+        const html = String(n.html || '').slice(0, 20000);
+        parts.push(`—— 节点 ${i + 1}：${n.name || ''}（id ${n.nodeId || '?'}，${n.type || ''}）——`);
+        parts.push(html || '(无 HTML)');
+        if ((n.html || '').length > 20000) {
+            parts.push('…（结构过长已截断）');
+        }
+        const imgs = Array.isArray(n.images) ? n.images.filter(im => im && im.file) : [];
+        if (imgs.length) {
+            parts.push(
+                `  该节点含 ${imgs.length} 张图片，已导出为本地 PNG（HTML 里的图片是占位路径没有字节，请用下面的真实文件；可用 Read 工具查看图片内容，按「名称」与 HTML 占位 src 对应）：`
+            );
+            imgs.forEach(im => {
+                const dim = im.width && im.height ? ` ${im.width}x${im.height}` : '';
+                parts.push(`    - ${im.name || '(未命名)'}（id ${im.id || '?'}${dim}）: ${im.file}`);
+            });
+        }
+    });
+    return parts.join('\n');
+}
+
 const sections = [];
 if (list.length) {
     const total = list.length;
@@ -148,11 +180,14 @@ if (list.length) {
 if (hasRec) {
     sections.push(describeRecording(meta, recEvents));
 }
+if (hasFigma) {
+    sections.push(describeFigma(figmaNodes));
+}
 sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'
 );
 
-// 「拿到即消费」：注入后清空 pending；录制仅在确实注入（已停止）时清空元信息与事件流，进行中的保留。
+// 「拿到即消费」：注入后清空 pending / figma；录制仅在确实注入（已停止）时清空，进行中的保留。
 try {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, '[]\n', 'utf8');
@@ -160,6 +195,11 @@ try {
         writeFileSync(recordingFile, 'null\n', 'utf8');
         writeFileSync(eventsFile, '', 'utf8');
     }
+    if (hasFigma) {
+        // figma 节点注入后清空 pending，但导出的 PNG 文件保留——它们由下一次采集导出时清理（见 host/bridge
+        // 的 persistImages），这样注入后 Agent 仍可随时 Read 这些图片，直到下次带入新节点才替换。
+        writeFileSync(figmaPendingFile, '[]\n', 'utf8');
+    }
 } catch {
     // 清空失败不影响注入
 }

package/mcp/server.mjs

@@ -16,8 +16,6 @@ import {createInterface} from 'node:readline';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
-// Agent→浏览器命令队列（每条一个文件）。MCP 写 pending，浏览器 figma-bridge 取走执行并写回结果。
-const cmdDir = resolve(homedir(), '.ui-inspector/commands');
 
 function readStore() {
     try {
@@ -43,41 +41,6 @@ function writeStatus(message, level) {
     return status;
 }
 
-// 下发一条命令到队列，返回 id。
-function enqueueCmd(type, params) {
-    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    mkdirSync(cmdDir, {recursive: true});
-    writeFileSync(resolve(cmdDir, `${id}.json`), JSON.stringify({id, type, params: params || {}, status: 'pending', ts: Date.now()}), 'utf8');
-    return id;
-}
-
-// 轮询命令结果，直到 done/error 或超时。浏览器需在 figma.com 页打开才会有执行者。
-function waitCmd(id, timeoutMs = 30000) {
-    const fp = resolve(cmdDir, `${id}.json`);
-    const deadline = Date.now() + timeoutMs;
-    return new Promise((res, rej) => {
-        const tick = () => {
-            let c = null;
-            try {
-                c = JSON.parse(readFileSync(fp, 'utf8'));
-            } catch {
-                c = null;
-            }
-            if (c && c.status === 'done') {
-                return res(c.result);
-            }
-            if (c && c.status === 'error') {
-                return rej(new Error(c.error || 'command failed'));
-            }
-            if (Date.now() > deadline) {
-                return rej(new Error('命令超时（确认已在 figma.com 设计稿页打开，且扩展已授权 figma.com 并重载）'));
-            }
-            setTimeout(tick, 400);
-        };
-        tick();
-    });
-}
-
 const TOOLS = [
     {
         name: 'list_pending_edits',
@@ -106,32 +69,6 @@ const TOOLS = [
             required: ['message'],
         },
     },
-    {
-        name: 'figma_export_node_html',
-        description:
-            '把 figma.com 当前设计稿里的某个节点导出为 HTML（F2C），写入本地文件。需浏览器已在 figma.com 设计稿页、扩展安装 figma 增强包并授权 figma.com。',
-        inputSchema: {
-            type: 'object',
-            properties: {
-                nodeId: {type: 'string', description: '目标节点 id；省略则用画布当前选中节点'},
-                outputPath: {type: 'string', description: '导出 HTML 写入的本地绝对路径'},
-            },
-            required: ['outputPath'],
-        },
-    },
-    {
-        name: 'figma_export_node_image',
-        description: '把 figma.com 当前设计稿里的某个节点导出为图片（PNG/JPG/SVG），写入本地文件。前置条件同上。',
-        inputSchema: {
-            type: 'object',
-            properties: {
-                nodeId: {type: 'string', description: '目标节点 id；省略则用画布当前选中节点'},
-                outputPath: {type: 'string', description: '导出图片写入的本地绝对路径'},
-                format: {type: 'string', enum: ['PNG', 'JPG', 'SVG'], description: '图片格式，默认 PNG'},
-            },
-            required: ['outputPath'],
-        },
-    },
 ];
 
 function callTool(name, args) {
@@ -148,32 +85,6 @@ function callTool(name, args) {
     if (name === 'notify_browser') {
         return writeStatus(args?.message, args?.level);
     }
-    if (name === 'figma_export_node_html') {
-        const outputPath = args?.outputPath;
-        if (!outputPath) {
-            throw new Error('outputPath 必填');
-        }
-        const id = enqueueCmd('figma_export_node_html', {nodeId: args?.nodeId});
-        return waitCmd(id).then(result => {
-            const html = (result && result.html) || '';
-            mkdirSync(dirname(outputPath), {recursive: true});
-            writeFileSync(outputPath, html, 'utf8');
-            return {ok: true, path: outputPath, bytes: Buffer.byteLength(html)};
-        });
-    }
-    if (name === 'figma_export_node_image') {
-        const outputPath = args?.outputPath;
-        if (!outputPath) {
-            throw new Error('outputPath 必填');
-        }
-        const id = enqueueCmd('figma_export_node_image', {nodeId: args?.nodeId, format: args?.format});
-        return waitCmd(id).then(result => {
-            const base64 = (result && result.base64) || '';
-            mkdirSync(dirname(outputPath), {recursive: true});
-            writeFileSync(outputPath, Buffer.from(base64, 'base64'));
-            return {ok: true, path: outputPath, format: (result && result.format) || 'PNG'};
-        });
-    }
     throw new Error('unknown tool: ' + name);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "comate-ui-inspector",
-    "version": "0.1.6-alpha.1",
+    "version": "0.1.6-alpha.3",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",

package/enhancements/figma/figma-bridge.js

@@ -1,46 +0,0 @@
-/*
- * Figma 命令中继（ISOLATED world，figma.com）：轮询 background 要 Agent 下发的命令，转给 MAIN 的
- * figma-exec 执行；把执行结果回传 background（写回命令队列，供 MCP server 取回）。
- * 只在 figma.com 运行，故命令只在真正能执行的页面被取走。
- */
-(function () {
-    const alive = () => !!(chrome.runtime && chrome.runtime.id);
-
-    // MAIN 执行完的结果 → background → 命令队列
-    window.addEventListener('message', event => {
-        if (event.source !== window || !event.data || !event.data.__uiInspectorCmdResult) {
-            return;
-        }
-        if (!alive()) {
-            return;
-        }
-        const r = event.data.__uiInspectorCmdResult;
-        try {
-            chrome.runtime.sendMessage(
-                {type: 'cmd-result', id: r.id, result: r.result, error: r.error},
-                () => void chrome.runtime.lastError
-            );
-        } catch {
-            // 上下文失效
-        }
-    });
-
-    const timer = setInterval(() => {
-        if (!alive()) {
-            clearInterval(timer);
-            return;
-        }
-        try {
-            chrome.runtime.sendMessage({type: 'cmd-poll'}, resp => {
-                if (chrome.runtime.lastError || !resp || !resp.ok || !Array.isArray(resp.commands)) {
-                    return;
-                }
-                for (const cmd of resp.commands) {
-                    window.postMessage({__uiInspectorCmd: cmd}, '*');
-                }
-            });
-        } catch {
-            clearInterval(timer);
-        }
-    }, 1200);
-})();