[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-c41e4586-d13c-41a5-8a77-bbc46e70472a":3,"$fXD1FHgwZOvIqquO7pMk65bXyVtAeAjwnTuYtZdN29Dw":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"c41e4586-d13c-41a5-8a77-bbc46e70472a","figma-automation","通过Rube MCP（Composio）自动化Figma任务：文件、组件、设计令牌、评论、导出。始终首先搜索当前架构的工具。","cat_design_ui","mod_design","sickn33,design","---\nname: figma-automation\ndescription: \"Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.\"\nrisk: safe\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Figma Automation via Rube MCP\n\nAutomate Figma operations through Composio's Figma toolkit via Rube MCP.\n\n## Prerequisites\n\n- Rube MCP must be connected (RUBE_SEARCH_TOOLS available)\n- Active Figma connection via `RUBE_MANAGE_CONNECTIONS` with toolkit `figma`\n- Always call `RUBE_SEARCH_TOOLS` first to get current tool schemas\n\n## Setup\n\n**Get Rube MCP**: Add `https:\u002F\u002Frube.app\u002Fmcp` as an MCP server in your client configuration. No API keys needed — just add the endpoint and it works.\n\n\n1. Verify Rube MCP is available by confirming `RUBE_SEARCH_TOOLS` responds\n2. Call `RUBE_MANAGE_CONNECTIONS` with toolkit `figma`\n3. If connection is not ACTIVE, follow the returned auth link to complete Figma auth\n4. Confirm connection status shows ACTIVE before running any workflows\n\n## Core Workflows\n\n### 1. Get File Data and Components\n\n**When to use**: User wants to inspect Figma design files or extract component information\n\n**Tool sequence**:\n1. `FIGMA_DISCOVER_FIGMA_RESOURCES` - Extract IDs from Figma URLs [Prerequisite]\n2. `FIGMA_GET_FILE_JSON` - Get file data (simplified by default) [Required]\n3. `FIGMA_GET_FILE_NODES` - Get specific node data [Optional]\n4. `FIGMA_GET_FILE_COMPONENTS` - List published components [Optional]\n5. `FIGMA_GET_FILE_COMPONENT_SETS` - List component sets [Optional]\n\n**Key parameters**:\n- `file_key`: File key from URL (e.g., 'abc123XYZ' from figma.com\u002Fdesign\u002Fabc123XYZ\u002F...)\n- `ids`: Comma-separated node IDs (NOT an array)\n- `depth`: Tree traversal depth (2 for pages and top-level children)\n- `simplify`: True for AI-friendly format (70%+ size reduction)\n\n**Pitfalls**:\n- Only supports Design files; FigJam boards and Slides return 400 errors\n- `ids` must be a comma-separated string, not an array\n- Node IDs may be dash-formatted (1-541) in URLs but need colon format (1:541) for API\n- Broad ids\u002Fdepth can trigger oversized payloads (413); narrow scope or reduce depth\n- Response data may be in `data_preview` instead of `data`\n\n### 2. Export and Render Images\n\n**When to use**: User wants to export design assets as images\n\n**Tool sequence**:\n1. `FIGMA_GET_FILE_JSON` - Find node IDs to export [Prerequisite]\n2. `FIGMA_RENDER_IMAGES_OF_FILE_NODES` - Render nodes as images [Required]\n3. `FIGMA_DOWNLOAD_FIGMA_IMAGES` - Download rendered images [Optional]\n4. `FIGMA_GET_IMAGE_FILLS` - Get image fill URLs [Optional]\n\n**Key parameters**:\n- `file_key`: File key\n- `ids`: Comma-separated node IDs to render\n- `format`: 'png', 'svg', 'jpg', or 'pdf'\n- `scale`: Scale factor (0.01-4.0) for PNG\u002FJPG\n- `images`: Array of {node_id, file_name, format} for downloads\n\n**Pitfalls**:\n- Images return as node_id-to-URL map; some IDs may be null (failed renders)\n- URLs are temporary (valid ~30 days)\n- Images capped at 32 megapixels; larger requests auto-scaled down\n\n### 3. Extract Design Tokens\n\n**When to use**: User wants to extract design tokens for development\n\n**Tool sequence**:\n1. `FIGMA_EXTRACT_DESIGN_TOKENS` - Extract colors, typography, spacing [Required]\n2. `FIGMA_DESIGN_TOKENS_TO_TAILWIND` - Convert to Tailwind config [Optional]\n\n**Key parameters**:\n- `file_key`: File key\n- `include_local_styles`: Include local styles (default true)\n- `include_variables`: Include Figma variables\n- `tokens`: Full tokens object from extraction (for Tailwind conversion)\n\n**Pitfalls**:\n- Tailwind conversion requires the full tokens object including total_tokens and sources\n- Do not strip fields from the extraction response before passing to conversion\n\n### 4. Manage Comments and Versions\n\n**When to use**: User wants to view or add comments, or inspect version history\n\n**Tool sequence**:\n1. `FIGMA_GET_COMMENTS_IN_A_FILE` - List all file comments [Optional]\n2. `FIGMA_ADD_A_COMMENT_TO_A_FILE` - Add a comment [Optional]\n3. `FIGMA_GET_REACTIONS_FOR_A_COMMENT` - Get comment reactions [Optional]\n4. `FIGMA_GET_VERSIONS_OF_A_FILE` - Get version history [Optional]\n\n**Key parameters**:\n- `file_key`: File key\n- `as_md`: Return comments in Markdown format\n- `message`: Comment text\n- `comment_id`: Comment ID for reactions\n\n**Pitfalls**:\n- Comments can be positioned on specific nodes using client_meta\n- Reply comments cannot be nested (only one level of replies)\n\n### 5. Browse Projects and Teams\n\n**When to use**: User wants to list team projects or files\n\n**Tool sequence**:\n1. `FIGMA_GET_PROJECTS_IN_A_TEAM` - List team projects [Optional]\n2. `FIGMA_GET_FILES_IN_A_PROJECT` - List project files [Optional]\n3. `FIGMA_GET_TEAM_STYLES` - List team published styles [Optional]\n\n**Key parameters**:\n- `team_id`: Team ID from URL (figma.com\u002Ffiles\u002Fteam\u002FTEAM_ID\u002F...)\n- `project_id`: Project ID\n\n**Pitfalls**:\n- Team ID cannot be obtained programmatically; extract from Figma URL\n- Only published styles\u002Fcomponents are returned by team endpoints\n\n## Common Patterns\n\n### URL Parsing\n\nExtract IDs from Figma URLs:\n```\n1. Call FIGMA_DISCOVER_FIGMA_RESOURCES with figma_url\n2. Extract file_key, node_id, team_id from response\n3. Convert dash-format node IDs (1-541) to colon format (1:541)\n```\n\n### Node Traversal\n\n```\n1. Call FIGMA_GET_FILE_JSON with depth=2 for overview\n2. Identify target nodes from the response\n3. Call again with specific ids and higher depth for details\n```\n\n## Known Pitfalls\n\n**File Type Support**:\n- GET_FILE_JSON only supports Design files (figma.com\u002Fdesign\u002F or figma.com\u002Ffile\u002F)\n- FigJam boards (figma.com\u002Fboard\u002F) and Slides (figma.com\u002Fslides\u002F) are NOT supported\n\n**Node ID Formats**:\n- URLs use dash format: `node-id=1-541`\n- API uses colon format: `1:541`\n\n## Quick Reference\n\n| Task | Tool Slug | Key Params |\n|------|-----------|------------|\n| Parse URL | FIGMA_DISCOVER_FIGMA_RESOURCES | figma_url |\n| Get file JSON | FIGMA_GET_FILE_JSON | file_key, ids, depth |\n| Get nodes | FIGMA_GET_FILE_NODES | file_key, ids |\n| Render images | FIGMA_RENDER_IMAGES_OF_FILE_NODES | file_key, ids, format |\n| Download images | FIGMA_DOWNLOAD_FIGMA_IMAGES | file_key, images |\n| Get component | FIGMA_GET_COMPONENT | file_key, node_id |\n| File components | FIGMA_GET_FILE_COMPONENTS | file_key |\n| Component sets | FIGMA_GET_FILE_COMPONENT_SETS | file_key |\n| Design tokens | FIGMA_EXTRACT_DESIGN_TOKENS | file_key |\n| Tokens to Tailwind | FIGMA_DESIGN_TOKENS_TO_TAILWIND | tokens |\n| File comments | FIGMA_GET_COMMENTS_IN_A_FILE | file_key |\n| Add comment | FIGMA_ADD_A_COMMENT_TO_A_FILE | file_key, message |\n| File versions | FIGMA_GET_VERSIONS_OF_A_FILE | file_key |\n| Team projects | FIGMA_GET_PROJECTS_IN_A_TEAM | team_id |\n| Project files | FIGMA_GET_FILES_IN_A_PROJECT | project_id |\n| Team styles | FIGMA_GET_TEAM_STYLES | team_id |\n| File styles | FIGMA_GET_FILE_STYLES | file_key |\n| Image fills | FIGMA_GET_IMAGE_FILLS | file_key |\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,118,1301,"2026-05-16 13:17:55",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"713dba54-65a8-4846-959e-2183d1c0afc2","1.0.0","figma-automation.zip",3004,"uploads\u002Fskills\u002Fc41e4586-d13c-41a5-8a77-bbc46e70472a\u002Ffigma-automation.zip","64ce5334fc7bfa70883aa47a006d865fc56f1879fd373685dda2c76f2fb18091","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":7354}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]