[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-grab--cursor-talk-to-figma-mcp":3,"tool-grab--cursor-talk-to-figma-mcp":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",156804,2,"2026-04-15T11:34:33",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":77,"owner_email":78,"owner_twitter":77,"owner_website":79,"owner_url":80,"languages":81,"stars":101,"forks":102,"last_commit_at":103,"license":104,"difficulty_score":105,"env_os":106,"env_gpu":107,"env_ram":107,"env_deps":108,"category_tags":116,"github_topics":117,"view_count":32,"oss_zip_url":77,"oss_zip_packed_at":77,"status":17,"created_at":132,"updated_at":133,"faqs":134,"releases":170},7790,"grab\u002Fcursor-talk-to-figma-mcp","cursor-talk-to-figma-mcp","TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatically.","cursor-talk-to-figma-mcp 是一款基于模型上下文协议（MCP）的开源桥梁，旨在打通 AI 编程助手（如 Cursor、Claude Code）与设计工具 Figma 之间的壁垒。它让 AI 代理能够直接“读懂”并“操作”Figma 设计稿，实现从读取设计细节到程序化修改的全流程自动化。\n\n长期以来，设计师与开发者在协作中常面临设计稿与代码脱节、手动同步耗时费力等痛点。此项目通过建立实时通信通道，允许用户在 Cursor 中直接用自然语言指令控制 Figma，例如批量替换文本内容、一键传播组件实例的覆盖属性等。这不仅消除了重复性的手动操作，还大幅提升了设计迭代和前端开发的协同效率。\n\n该工具主要面向希望提升工作流的开发者、技术型设计师以及探索 AI 辅助设计的研究人员。其核心技术亮点在于独特的架构设计：由 TypeScript 编写的 MCP 服务器、Figma 插件以及 WebSocket 服务三者协同，确保了 AI 指令能安全、低延迟地转化为具体的设计操作。无论是进行大规模内容更新还是复杂的组件管理，cursor-talk-to-figma-mcp 都为构建“设","cursor-talk-to-figma-mcp 是一款基于模型上下文协议（MCP）的开源桥梁，旨在打通 AI 编程助手（如 Cursor、Claude Code）与设计工具 Figma 之间的壁垒。它让 AI 代理能够直接“读懂”并“操作”Figma 设计稿，实现从读取设计细节到程序化修改的全流程自动化。\n\n长期以来，设计师与开发者在协作中常面临设计稿与代码脱节、手动同步耗时费力等痛点。此项目通过建立实时通信通道，允许用户在 Cursor 中直接用自然语言指令控制 Figma，例如批量替换文本内容、一键传播组件实例的覆盖属性等。这不仅消除了重复性的手动操作，还大幅提升了设计迭代和前端开发的协同效率。\n\n该工具主要面向希望提升工作流的开发者、技术型设计师以及探索 AI 辅助设计的研究人员。其核心技术亮点在于独特的架构设计：由 TypeScript 编写的 MCP 服务器、Figma 插件以及 WebSocket 服务三者协同，确保了 AI 指令能安全、低延迟地转化为具体的设计操作。无论是进行大规模内容更新还是复杂的组件管理，cursor-talk-to-figma-mcp 都为构建“设计即代码”的智能化工作流提供了强有力的支持。","# Talk to Figma MCP\n\nThis project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F129a14d2-ed73-470f-9a4c-2240b2a4885c\n\n## Project Structure\n\n- `src\u002Ftalk_to_figma_mcp\u002F` - TypeScript MCP server for Figma integration\n- `src\u002Fcursor_mcp_plugin\u002F` - Figma plugin for communicating with Cursor\n- `src\u002Fsocket.ts` - WebSocket server that facilitates communication between the MCP server and Figma plugin\n\n## How to use\n\n1. Install Bun if you haven't already:\n\n```bash\ncurl -fsSL https:\u002F\u002Fbun.sh\u002Finstall | bash\n```\n\n2. Run setup, this will also install MCP in your Cursor's active project\n\n```bash\nbun setup\n```\n\n3. Start the Websocket server\n\n```bash\nbun socket\n```\n\n4. **NEW** Install Figma plugin from [Figma community page](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1485687494525374295\u002Fcursor-talk-to-figma-mcp-plugin) or [install locally](#figma-plugin)\n\n## Quick Video Tutorial\n\n[Video Link](https:\u002F\u002Fwww.linkedin.com\u002Fposts\u002Fsonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8)\n\n## Design Automation Example\n\n**Bulk text content replacement**\n\nThanks to [@dusskapark](https:\u002F\u002Fgithub.com\u002Fdusskapark) for contributing the bulk text replacement feature. Here is the [demo video](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=j05gGT3xfCs).\n\n**Instance Override Propagation**\nAnother contribution from [@dusskapark](https:\u002F\u002Fgithub.com\u002Fdusskapark)\nPropagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our [demo video](https:\u002F\u002Fyoutu.be\u002FuvuT8LByroI).\n\n## Manual Setup and Installation\n\n### MCP Server: Integration with Cursor\n\nAdd the server to your Cursor MCP configuration in `~\u002F.cursor\u002Fmcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bunx\",\n      \"args\": [\"cursor-talk-to-figma-mcp@latest\"]\n    }\n  }\n}\n```\n\n### WebSocket Server\n\nStart the WebSocket server:\n\n```bash\nbun socket\n```\n\n### Figma Plugin\n\n1. In Figma, go to Plugins > Development > New Plugin\n2. Choose \"Link existing plugin\"\n3. Select the `src\u002Fcursor_mcp_plugin\u002Fmanifest.json` file\n4. The plugin should now be available in your Figma development plugins\n\n## Windows + WSL Guide\n\n1. Install bun via powershell\n\n```bash\npowershell -c \"irm bun.sh\u002Finstall.ps1|iex\"\n```\n\n2. Uncomment the hostname `0.0.0.0` in `src\u002Fsocket.ts`\n\n```typescript\n\u002F\u002F uncomment this to allow connections in windows wsl\nhostname: \"0.0.0.0\",\n```\n\n3. Start the websocket\n\n```bash\nbun socket\n```\n\n## Usage\n\n1. Start the WebSocket server\n2. Install the MCP server in Cursor\n3. Open Figma and run the Cursor MCP Plugin\n4. Connect the plugin to the WebSocket server by joining a channel using `join_channel`\n5. Use Cursor to communicate with Figma using the MCP tools\n\n## Local Development Setup\n\nTo develop, update your mcp config to direct to your local directory.\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bun\",\n      \"args\": [\"\u002Fpath-to-repo\u002Fsrc\u002Ftalk_to_figma_mcp\u002Fserver.ts\"]\n    }\n  }\n}\n```\n\n## MCP Tools\n\nThe MCP server provides the following tools for interacting with Figma:\n\n### Document & Selection\n\n- `get_document_info` - Get information about the current Figma document\n- `get_selection` - Get information about the current selection\n- `read_my_design` - Get detailed node information about the current selection without parameters\n- `get_node_info` - Get detailed information about a specific node\n- `get_nodes_info` - Get detailed information about multiple nodes by providing an array of node IDs\n- `set_focus` - Set focus on a specific node by selecting it and scrolling viewport to it\n- `set_selections` - Set selection to multiple nodes and scroll viewport to show them\n\n### Annotations\n\n- `get_annotations` - Get all annotations in the current document or specific node\n- `set_annotation` - Create or update an annotation with markdown support\n- `set_multiple_annotations` - Batch create\u002Fupdate multiple annotations efficiently\n- `scan_nodes_by_types` - Scan for nodes with specific types (useful for finding annotation targets)\n\n### Prototyping & Connections\n\n- `get_reactions` - Get all prototype reactions from nodes with visual highlight animation\n- `set_default_connector` - Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)\n- `create_connections` - Create FigJam connector lines between nodes, based on prototype flows or custom mapping\n\n### Creating Elements\n\n- `create_rectangle` - Create a new rectangle with position, size, and optional name\n- `create_frame` - Create a new frame with position, size, and optional name\n- `create_text` - Create a new text node with customizable font properties\n\n### Modifying text content\n\n- `scan_text_nodes` - Scan text nodes with intelligent chunking for large designs\n- `set_text_content` - Set the text content of a single text node\n- `set_multiple_text_contents` - Batch update multiple text nodes efficiently\n\n### Auto Layout & Spacing\n\n- `set_layout_mode` - Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)\n- `set_padding` - Set padding values for an auto-layout frame (top, right, bottom, left)\n- `set_axis_align` - Set primary and counter axis alignment for auto-layout frames\n- `set_layout_sizing` - Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)\n- `set_item_spacing` - Set distance between children in an auto-layout frame\n\n### Styling\n\n- `set_fill_color` - Set the fill color of a node (RGBA)\n- `set_stroke_color` - Set the stroke color and weight of a node\n- `set_corner_radius` - Set the corner radius of a node with optional per-corner control\n\n### Layout & Organization\n\n- `move_node` - Move a node to a new position\n- `resize_node` - Resize a node with new dimensions\n- `delete_node` - Delete a node\n- `delete_multiple_nodes` - Delete multiple nodes at once efficiently\n- `clone_node` - Create a copy of an existing node with optional position offset\n\n### Components & Styles\n\n- `get_styles` - Get information about local styles\n- `get_local_components` - Get information about local components\n- `create_component_instance` - Create an instance of a component\n- `get_instance_overrides` - Extract override properties from a selected component instance\n- `set_instance_overrides` - Apply extracted overrides to target instances\n\n### Export & Advanced\n\n- `export_node_as_image` - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text\n\n### Connection Management\n\n- `join_channel` - Join a specific channel to communicate with Figma\n\n### MCP Prompts\n\nThe MCP server includes several helper prompts to guide you through complex design tasks:\n\n- `design_strategy` - Best practices for working with Figma designs\n- `read_design_strategy` - Best practices for reading Figma designs\n- `text_replacement_strategy` - Systematic approach for replacing text in Figma designs\n- `annotation_conversion_strategy` - Strategy for converting manual annotations to Figma's native annotations\n- `swap_overrides_instances` - Strategy for transferring overrides between component instances in Figma\n- `reaction_to_connector_strategy` - Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence\n\n## Development\n\n### Building the Figma Plugin\n\n1. Navigate to the Figma plugin directory:\n\n   ```\n   cd src\u002Fcursor_mcp_plugin\n   ```\n\n2. Edit code.js and ui.html\n\n## Best Practices\n\nWhen working with the Figma MCP:\n\n1. Always join a channel before sending commands\n2. Get document overview using `get_document_info` first\n3. Check current selection with `get_selection` before modifications\n4. Use appropriate creation tools based on needs:\n   - `create_frame` for containers\n   - `create_rectangle` for basic shapes\n   - `create_text` for text elements\n5. Verify changes using `get_node_info`\n6. Use component instances when possible for consistency\n7. Handle errors appropriately as all commands can throw exceptions\n8. For large designs:\n   - Use chunking parameters in `scan_text_nodes`\n   - Monitor progress through WebSocket updates\n   - Implement appropriate error handling\n9. For text operations:\n   - Use batch operations when possible\n   - Consider structural relationships\n   - Verify changes with targeted exports\n10. For converting legacy annotations:\n    - Scan text nodes to identify numbered markers and descriptions\n    - Use `scan_nodes_by_types` to find UI elements that annotations refer to\n    - Match markers with their target elements using path, name, or proximity\n    - Categorize annotations appropriately with `get_annotations`\n    - Create native annotations with `set_multiple_annotations` in batches\n    - Verify all annotations are properly linked to their targets\n    - Delete legacy annotation nodes after successful conversion\n11. Visualize prototype noodles as FigJam connectors:\n\n- Use `get_reactions` to extract prototype flows,\n- set a default connector with `set_default_connector`,\n- and generate connector lines with `create_connections` for clear visual flow mapping.\n\n## License\n\nMIT\n","# 与 Figma 的 MCP 对话\n\n该项目实现了 AI 助手（Cursor、Claude Code）与 Figma 之间的模型上下文协议 (MCP) 集成，使 AI 助手能够与 Figma 通信，以读取设计并以编程方式对其进行修改。\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F129a14d2-ed73-470f-9a4c-2240b2a4885c\n\n## 项目结构\n\n- `src\u002Ftalk_to_figma_mcp\u002F` - 用于 Figma 集成的 TypeScript MCP 服务器\n- `src\u002Fcursor_mcp_plugin\u002F` - 用于与 Cursor 通信的 Figma 插件\n- `src\u002Fsocket.ts` - 协助 MCP 服务器与 Figma 插件之间通信的 WebSocket 服务器\n\n## 使用方法\n\n1. 如果尚未安装 Bun，请先安装：\n\n```bash\ncurl -fsSL https:\u002F\u002Fbun.sh\u002Finstall | bash\n```\n\n2. 运行设置脚本，这也会在 Cursor 的当前项目中安装 MCP：\n\n```bash\nbun setup\n```\n\n3. 启动 WebSocket 服务器：\n\n```bash\nbun socket\n```\n\n4. **新增**：从 [Figma 社区页面](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1485687494525374295\u002Fcursor-talk-to-figma-mcp-plugin) 安装 Figma 插件，或按照[本地安装步骤](#figma-plugin)进行安装。\n\n## 快速视频教程\n\n[视频链接](https:\u002F\u002Fwww.linkedin.com\u002Fposts\u002Fsonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8)\n\n## 设计自动化示例\n\n**批量替换文本内容**\n\n感谢 [@dusskapark](https:\u002F\u002Fgithub.com\u002Fdusskapark) 贡献的批量文本替换功能。以下是[演示视频](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=j05gGT3xfCs)。\n\n**实例覆盖传播**\n另一项来自 [@dusskapark](https:\u002F\u002Fgithub.com\u002Fdusskapark) 的贡献：\n通过一条命令将组件实例的覆盖从源实例传播到多个目标实例。此功能在处理需要类似自定义的组件实例时，可大幅减少重复性设计工作。请查看我们的[演示视频](https:\u002F\u002Fyoutu.be\u002FuvuT8LByroI)。\n\n## 手动设置与安装\n\n### MCP 服务器：与 Cursor 的集成\n\n将服务器添加到 Cursor 的 MCP 配置文件 `~\u002F.cursor\u002Fmcp.json` 中：\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bunx\",\n      \"args\": [\"cursor-talk-to-figma-mcp@latest\"]\n    }\n  }\n}\n```\n\n### WebSocket 服务器\n\n启动 WebSocket 服务器：\n\n```bash\nbun socket\n```\n\n### Figma 插件\n\n1. 在 Figma 中，前往“插件”>“开发”>“新建插件”。\n2. 选择“链接现有插件”。\n3. 选择 `src\u002Fcursor_mcp_plugin\u002Fmanifest.json` 文件。\n4. 插件现在应出现在您的 Figma 开发插件列表中。\n\n## Windows + WSL 指南\n\n1. 通过 PowerShell 安装 Bun：\n\n```bash\npowershell -c \"irm bun.sh\u002Finstall.ps1|iex\"\n```\n\n2. 在 `src\u002Fsocket.ts` 中取消注释主机名 `0.0.0.0`：\n\n```typescript\n\u002F\u002F 取消注释以允许 Windows WSL 中的连接\nhostname: \"0.0.0.0\",\n```\n\n3. 启动 WebSocket：\n\n```bash\nbun socket\n```\n\n## 使用说明\n\n1. 启动 WebSocket 服务器。\n2. 将 MCP 服务器安装到 Cursor 中。\n3. 打开 Figma 并运行 Cursor MCP 插件。\n4. 通过使用 `join_channel` 命令加入频道，将插件连接到 WebSocket 服务器。\n5. 使用 Cursor 通过 MCP 工具与 Figma 通信。\n\n## 本地开发设置\n\n若要进行开发，请更新 MCP 配置，使其指向您的本地目录：\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bun\",\n      \"args\": [\"\u002Fpath-to-repo\u002Fsrc\u002Ftalk_to_figma_mcp\u002Fserver.ts\"]\n    }\n  }\n}\n```\n\n## MCP 工具\n\nMCP 服务器提供以下工具来与 Figma 交互：\n\n### 文档与选择\n\n- `get_document_info` - 获取当前 Figma 文档的信息\n- `get_selection` - 获取当前选区的信息\n- `read_my_design` - 无需参数即可获取当前选区的详细节点信息\n- `get_node_info` - 获取特定节点的详细信息\n- `get_nodes_info` - 通过提供节点 ID 数组获取多个节点的详细信息\n- `set_focus` - 通过选中并滚动视口将焦点设置到特定节点\n- `set_selections` - 将选区设置为多个节点，并滚动视口以显示它们\n\n### 注释\n\n- `get_annotations` - 获取当前文档或特定节点中的所有注释\n- `set_annotation` - 创建或更新支持 Markdown 的注释\n- `set_multiple_annotations` - 高效地批量创建或更新多个注释\n- `scan_nodes_by_types` - 扫描具有特定类型的节点（可用于查找注释目标）\n\n### 原型与连接\n\n- `get_reactions` - 获取带有视觉高亮动画的节点的所有原型反应\n- `set_default_connector` - 将复制的 FigJam 连接线设置为创建连接的默认样式（必须在创建连接之前设置）\n- `create_connections` - 根据原型流程或自定义映射，在节点之间创建 FigJam 连接线\n\n### 创建元素\n\n- `create_rectangle` - 创建具有位置、尺寸及可选名称的新矩形\n- `create_frame` - 创建具有位置、尺寸及可选名称的新框架\n- `create_text` - 创建具有可自定义字体属性的新文本节点\n\n### 修改文本内容\n\n- `scan_text_nodes` - 对大型设计中的文本节点进行智能分块扫描\n- `set_text_content` - 设置单个文本节点的文本内容\n- `set_multiple_text_contents` - 高效地批量更新多个文本节点\n\n### 自动布局与间距\n\n- `set_layout_mode` - 设置框架的布局模式和换行行为（无、水平、垂直）\n- `set_padding` - 设置自动布局框架的内边距值（上、右、下、左）\n- `set_axis_align` - 设置自动布局框架的主要轴和次轴对齐方式\n- `set_layout_sizing` - 设置自动布局框架的水平和垂直尺寸模式（固定、包裹、填充）\n- `set_item_spacing` - 设置自动布局框架中子元素之间的距离\n\n### 样式\n\n- `set_fill_color` - 设置节点的填充颜色（RGBA）\n- `set_stroke_color` - 设置节点的笔触颜色和宽度\n- `set_corner_radius` - 设置节点的圆角半径，可单独控制每个角\n\n### 布局与组织\n\n- `move_node` - 将节点移动到新位置\n- `resize_node` - 用新尺寸调整节点大小\n- `delete_node` - 删除节点\n- `delete_multiple_nodes` - 高效地一次删除多个节点\n- `clone_node` - 创建现有节点的副本，可选择偏移位置\n\n### 组件与样式\n\n- `get_styles` - 获取本地样式的信息\n- `get_local_components` - 获取本地组件的信息\n- `create_component_instance` - 创建组件实例\n- `get_instance_overrides` - 从选定的组件实例中提取覆盖属性\n- `set_instance_overrides` - 将提取的覆盖应用到目标实例\n\n### 导出与高级功能\n\n- `export_node_as_image` - 将节点导出为图像（PNG、JPG、SVG 或 PDF）——目前图像导出支持有限，返回的是 Base64 编码的文本。\n\n### 连接管理\n\n- `join_channel` - 加入特定通道以与 Figma 通信\n\n### MCP 提示\n\nMCP 服务器包含多个辅助提示，用于指导您完成复杂的设计任务：\n\n- `design_strategy` - 使用 Figma 设计的最佳实践\n- `read_design_strategy` - 阅读 Figma 设计的最佳实践\n- `text_replacement_strategy` - 在 Figma 设计中系统性替换文本的方法\n- `annotation_conversion_strategy` - 将手动标注转换为 Figma 原生标注的策略\n- `swap_overrides_instances` - 在 Figma 中将覆盖属性在组件实例之间转移的策略\n- `reaction_to_connector_strategy` - 利用 `get_reactions` 的输出将 Figma 原型中的交互转换为连接线，并指导按顺序使用 `create_connections` 的策略\n\n## 开发\n\n### 构建 Figma 插件\n\n1. 导航到 Figma 插件目录：\n\n   ```\n   cd src\u002Fcursor_mcp_plugin\n   ```\n\n2. 编辑 code.js 和 ui.html\n\n## 最佳实践\n\n在使用 Figma MCP 时：\n\n1. 发送命令前务必加入频道。\n2. 首先使用 `get_document_info` 获取文档概览。\n3. 在进行修改前，使用 `get_selection` 检查当前选中内容。\n4. 根据需求使用合适的创建工具：\n   - 使用 `create_frame` 创建容器；\n   - 使用 `create_rectangle` 创建基本形状；\n   - 使用 `create_text` 创建文本元素。\n5. 使用 `get_node_info` 验证更改。\n6. 尽可能使用组件实例以保持一致性。\n7. 所有命令都可能抛出异常，因此需妥善处理错误。\n8. 对于大型设计：\n   - 在 `scan_text_nodes` 中使用分块参数；\n   - 通过 WebSocket 更新监控进度；\n   - 实现适当的错误处理。\n9. 进行文本操作时：\n   - 尽量使用批量操作；\n   - 考虑结构关系；\n   - 通过定向导出来验证更改。\n10. 转换旧版标注时：\n    - 扫描文本节点以识别编号标记和描述；\n    - 使用 `scan_nodes_by_types` 查找标注所指的 UI 元素；\n    - 根据路径、名称或位置接近度将标记与目标元素匹配；\n    - 使用 `get_annotations` 对标注进行合理分类；\n    - 使用 `set_multiple_annotations` 分批创建原生标注；\n    - 验证所有标注是否正确链接到目标元素；\n    - 成功转换后删除旧版标注节点。\n11. 将原型流程可视化为 FigJam 连接线：\n\n    - 使用 `get_reactions` 提取原型流程；\n    - 使用 `set_default_connector` 设置默认连接线样式；\n    - 使用 `create_connections` 生成连接线，以清晰地映射视觉流程。\n\n## 许可证\n\nMIT","# cursor-talk-to-figma-mcp 快速上手指南\n\n本工具通过 Model Context Protocol (MCP) 实现 AI 助手（如 Cursor、Claude Code）与 Figma 的双向通信，支持读取设计稿、批量修改文本、操作组件及自动生成连接线等功能。\n\n## 环境准备\n\n*   **操作系统**：macOS, Linux, 或 Windows (需配合 WSL)\n*   **核心依赖**：\n    *   [Bun](https:\u002F\u002Fbun.sh\u002F) (JavaScript 运行时)\n    *   [Cursor](https:\u002F\u002Fcursor.sh\u002F) 编辑器 (已安装并配置好 MCP)\n    *   Figma 桌面端或网页版账号\n*   **网络要求**：确保能访问 GitHub 和 Figma 社区（国内用户若访问缓慢，建议配置代理或使用加速工具）\n\n## 安装步骤\n\n### 1. 安装 Bun\n如果尚未安装 Bun，请运行以下命令（国内用户若官方脚本超时，可尝试手动下载或使用镜像源）：\n\n```bash\ncurl -fsSL https:\u002F\u002Fbun.sh\u002Finstall | bash\n```\n\n> **Windows + WSL 用户注意**：\n> 请在 PowerShell 中运行：\n> ```bash\n> powershell -c \"irm bun.sh\u002Finstall.ps1|iex\"\n> ```\n> 安装完成后，需编辑 `src\u002Fsocket.ts` 文件，取消注释 `hostname: \"0.0.0.0\"` 以允许连接。\n\n### 2. 初始化项目与 MCP\n克隆本项目后，在根目录运行设置脚本。该脚本会自动安装依赖并将 MCP 服务注册到当前 Cursor 项目中：\n\n```bash\nbun setup\n```\n\n### 3. 启动 WebSocket 服务器\n保持终端运行，启动用于连接 Figma 插件的 WebSocket 服务：\n\n```bash\nbun socket\n```\n\n### 4. 安装 Figma 插件\n在 Figma 中安装配套插件以建立通信桥梁：\n*   **推荐方式**：访问 [Figma Community 页面](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1485687494525374295\u002Fcursor-talk-to-figma-mcp-plugin) 直接安装。\n*   **本地开发方式**：\n    1. 在 Figma 中选择 `Plugins` > `Development` > `New Plugin`。\n    2. 选择 `Link existing plugin`。\n    3. 指向项目中的 `src\u002Fcursor_mcp_plugin\u002Fmanifest.json` 文件。\n\n## 基本使用\n\n完成上述安装后，按以下步骤即可开始通过 Cursor 控制 Figma：\n\n1.  **连接通道**：\n    *   在 Figma 中运行已安装的 \"Cursor Talk to Figma MCP\" 插件。\n    *   在插件界面输入一个频道名称（例如 `my-design`），点击 `join_channel` 加入频道。\n\n2.  **在 Cursor 中调用**：\n    *   打开 Cursor 编辑器，新建对话或打开现有项目。\n    *   确保 MCP 服务器已激活（通常 `bun setup` 后自动配置在 `~\u002F.cursor\u002Fmcp.json`）。\n    *   在对话框中输入自然语言指令，例如：\n        *   “读取当前选中的设计元素信息” (`read_my_design`)\n        *   “将所有标题文本改为‘欢迎使用新系统’\" (`set_multiple_text_contents`)\n        *   “为选中的框架创建一个红色矩形背景” (`create_rectangle`, `set_fill_color`)\n\n3.  **验证结果**：\n    *   观察 Figma 画布，AI 将自动执行相应的修改操作。\n    *   如需查看具体节点数据，可让 AI 调用 `get_node_info` 获取详细参数。\n\n> **提示**：首次使用前，建议先让 AI 执行 `get_document_info` 以了解当前设计稿的整体结构。","某电商团队的设计师刚完成大促活动页的 Figma 设计稿，开发人员需要立即将其中数百个商品卡片内的占位文本替换为真实营销文案，并统一调整特定组件的样式变体。\n\n### 没有 cursor-talk-to-figma-mcp 时\n- 开发人员必须手动在 Figma 中逐个选中图层，复制 ID 后再切换回代码编辑器查找对应文案，流程极其割裂。\n- 面对上百个重复的商品卡片，只能机械地重复“选中 - 修改”操作，耗时数小时且极易因疲劳导致漏改或错改。\n- 若需将某个主组件的样式覆盖（Override）同步到所有实例，必须手动遍历每个实例进行属性对齐，效率低下。\n- 设计与代码之间缺乏直接沟通渠道，任何批量修改需求都依赖人工传递，难以实现程序化的精准控制。\n- 遇到复杂的嵌套组件结构时，非设计背景的开发者往往不敢随意操作，担心破坏原有布局逻辑。\n\n### 使用 cursor-talk-to-figma-mcp 后\n- 开发者直接在 Cursor 中输入自然语言指令，AI 即可通过 MCP 协议读取当前选中的设计节点信息，无需手动切换上下文。\n- 只需提供一份 JSON 格式的文案列表，AI 便能自动遍历所有目标图层，秒级完成数百处文本的批量精准替换。\n- 通过单条命令即可将源实例的样式覆盖属性传播至多个目标实例，瞬间完成原本繁琐的组件变体同步工作。\n- AI 代理能直接调用 `set_selections` 和 `get_node_info` 等工具，以代码逻辑精确操控设计稿，实现真正的自动化流转。\n- 即使面对深层嵌套的复杂组件，AI 也能准确识别节点层级并安全执行修改，让开发者像操作代码一样自信地操作设计稿。\n\ncursor-talk-to-figma-mcp 打破了设计与开发之间的工具壁垒，让 AI 代理成为连接两者的桥梁，将原本耗时数小时的手工劳作转化为分钟级的自动化流程。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fgrab_cursor-talk-to-figma-mcp_3574d997.png","grab","Grab","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fgrab_d90f1138.png","Driving South-east Asia forward!",null,"engineering.blog@grab.com","http:\u002F\u002Fengineering.grab.com","https:\u002F\u002Fgithub.com\u002Fgrab",[82,86,90,94,98],{"name":83,"color":84,"percentage":85},"JavaScript","#f1e05a",87.5,{"name":87,"color":88,"percentage":89},"HTML","#e34c26",9.4,{"name":91,"color":92,"percentage":93},"TypeScript","#3178c6",2.8,{"name":95,"color":96,"percentage":97},"Shell","#89e051",0.2,{"name":99,"color":100,"percentage":97},"Dockerfile","#384d54",6654,720,"2026-04-15T06:04:51","MIT",4,"Linux, macOS, Windows (需 WSL)","未说明",{"notes":109,"python":110,"dependencies":111},"1. 必须安装 Bun 运行时环境。2. 宿主编辑器需为 Cursor 或支持 MCP 的 AI 代理。3. 需在 Figma 中安装配套插件并通过 WebSocket 连接。4. Windows 用户建议使用 WSL 并修改 socket.ts 配置以允许网络连接。","不需要 Python (基于 Bun\u002FTypeScript)",[112,113,114,115],"Bun","Cursor IDE","Figma Plugin API","WebSocket",[15,13,14,35],[118,119,120,121,122,123,124,125,126,127,128,129,130,131],"agent","agentic","agentic-ai","ai","cursor","design","figma","mcp","ai-agents","llm","llms","automation","generative-ai","model-context-protocol","2026-03-27T02:49:30.150509","2026-04-16T02:09:03.953898",[135,140,145,150,155,160,165],{"id":136,"question_zh":137,"answer_zh":138,"source_url":139},34897,"遇到 'keyValidator._parse is not a function' 或连接 Figma 通道报错怎么办？","这通常是由于 TypeScript 构建问题或依赖版本冲突导致的。维护者已修复该问题，主要措施包括锁定 SDK 和 Zod 的版本。如果遇到此错误，请尝试更新项目依赖或重新拉取最新代码。此外，升级 Bun 依赖也可能解决该问题。","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F96",{"id":141,"question_zh":142,"answer_zh":143,"source_url":144},34898,"导入 manifest.json 时提示 'editorType does not include dev' 错误或无法执行插件怎么办？","首先检查文件夹名称中是否包含空格，如有请移除。如果问题依旧，通常是因为系统找不到 'bun' 命令。请在配置中使用 Bun 的绝对路径，例如将 command 设置为 '\u002FUsers\u002Fyourname\u002F.bun\u002Fbin\u002Fbun'（Mac\u002FLinux）或对应的 Windows 路径。","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F1",{"id":146,"question_zh":147,"answer_zh":148,"source_url":149},34899,"在 Cursor 中连接 MCP 服务器时出现 'Client closed' 错误如何解决？","该错误常见于 Windows 或 WSL2 环境。解决方案如下：\n1. 在 PowerShell 中安装 Bun：`powershell -c \"irm bun.sh\u002Finstall.ps1|iex\"`\n2. 修改 `mcp.json` 配置，使用 Bun 的绝对路径作为 command，并在 args 中使用正确的文件路径（WSL2 环境下需使用 `\u002F\u002Fwsl$\u002FUbuntu\u002F...` 格式）。\n示例配置：\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"\u002FUsers\u002F[username]\u002F.bun\u002Fbin\u002Fbun\",\n      \"args\": [\"\u002F\u002Fwsl$\u002FUbuntu\u002Fhome\u002F[username]\u002Fpath\u002Fto\u002Fserver.ts\"],\n      \"enabled\": true\n    }\n  }\n}\n```","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F23",{"id":151,"question_zh":152,"answer_zh":153,"source_url":154},34900,"配置后显示 '0 tools enabled' 且状态灯未变绿怎么办？","这通常是因为配置中使用了相对路径。请务必在 `mcp.json` 中使用绝对路径。同时确保 command 指向 Bun 的可执行文件绝对路径。\n正确配置示例：\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"\u002FUsers\u002F\u003Cusername>\u002F.bun\u002Fbin\u002Fbun\",\n      \"args\": [\"\u002FUsers\u002F\u003Cusername>\u002FProjects\u002Fcursor-talk-to-figma-mcp\u002Fsrc\u002Ftalk_to_figma_mcp\u002Fserver.ts\"]\n    }\n  }\n}\n```","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F92",{"id":156,"question_zh":157,"answer_zh":158,"source_url":159},34901,"在 WSL2 (Ubuntu) 配合 Windows 宿主机的环境中如何配置 MCP？","在 WSL2 环境中，需要特别注意路径格式和 Bun 的安装位置。\n1. 确保在 WSL 内部或 Windows PowerShell 中正确安装了 Bun。\n2. 在 `.cursor\u002Fmcp.json` 中，command 应使用 Bun 的绝对路径。\n3. args 中的脚本路径如果是 WSL 路径，在 Windows 版 Cursor 中可能需要转换为 UNC 路径格式，例如：`\u002F\u002Fwsl$\u002FUbuntu\u002Fhome\u002Fusername\u002Fpath\u002Fto\u002Fserver.ts`。\n4. 确保文件权限允许执行。","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F9",{"id":161,"question_zh":162,"answer_zh":163,"source_url":164},34902,"Windows 设备上配置 MCP 时遇到路径错误或无法启动怎么办？","Windows 用户常因路径分隔符或 Bun 未找到而报错。\n1. 确保已安装 Bun，若未安装可使用 PowerShell 命令：`powershell -c \"irm bun.sh\u002Finstall.ps1|iex\"`。\n2. 在 `mcp.json` 中，建议直接使用 Bun 的完整绝对路径（如 `C:\\Users\\\u003Cuser>\\.bun\\bin\\bun.exe`）。\n3. 如果项目在 WSL 中，请参考 WSL 相关配置，使用 `\u002F\u002Fwsl$\u002F` 前缀的路径格式。\n4. 避免在路径中使用中文或特殊字符。","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F7",{"id":166,"question_zh":167,"answer_zh":168,"source_url":169},34903,"遇到 'Unexpected token' 错误但能加入频道，其他功能不可用怎么办？","这是一个已知的构建或解析错误，通常与 TypeScript 编译输出有关。维护者已在相关 Pull Request (#14) 中修复了此问题。请拉取最新的代码更新，或者重新安装依赖并重新构建项目以应用修复。","https:\u002F\u002Fgithub.com\u002Fgrab\u002Fcursor-talk-to-figma-mcp\u002Fissues\u002F2",[]]