autoclaw

2 files shipped with this skill. Inline text is the catalog copy. The upstream link is the source repository.

• SKILL.md6.1 KBupstream ↗

  ---
  summary: "Figma 图片导出工具"
  description: "从 Figma 设计文件快速导出图片，支持单个/批量导出、指定格式尺寸、自动创建文件夹"
  trigger:
    - "导出 figma"
    - "figma 导出图片"
    - "导出设计稿"
    - "figma export"
    - "批量导出 figma"
    - "figma 批量导出"
  ---
  
  # Figma 图片导出 Skill
  
  快速从 Figma 设计文件导出图片到本地。
  
  ## 核心功能
  
  ✅ **单个节点导出** - 导出指定节点为图片  
  ✅ **批量导出** - 一次导出多个节点  
  ✅ **格式支持** - PNG、JPG、SVG、PDF  
  ✅ **尺寸控制** - 0.5x、1x、2x、3x、4x  
  ✅ **智能保存** - 自动创建文件夹、智能命名  
  ✅ **URL 解析** - 自动从 Figma URL 提取 file_key 和 node_id  
  
  ## 使用方式
  
  ### 1. 单个节点导出
  
  **用户说**：
  > 把这个 Figma 节点导出为 2x PNG 图片：https://www.figma.com/file/ABC123/Design?node-id=123:456
  
  **助手自动**：
  1. 从 URL 提取 file_key 和 node_id
  2. 调用 Figma API 导出
  3. 下载图片到指定位置
  4. 返回文件路径
  
  ### 2. 批量导出
  
  **用户说**：
  > 把这个文件的 3 个页面都导出为 1x PNG，保存到下载文件夹的"项目名"文件夹
  
  **助手自动**：
  1. 获取文件结构，识别所有页面节点
  2. 批量调用导出 API
  3. 创建目标文件夹
  4. 下载所有图片并命名
  5. 返回文件列表
  
  ### 3. 指定格式和尺寸
  
  **用户说**：
  > 导出这个节点为 SVG 格式，保存到桌面
  
  **用户说**：
  > 导出这个设计为 3x PNG，用于 Retina 屏幕
  
  ## 导出流程
  
  ```
  用户请求 → URL解析 → 获取文件信息 → 导出图片 → 下载保存 → 返回结果
  ```
  
  ### 步骤详解
  
  #### 1. URL 解析
  ```python
  # 从 Figma URL 提取关键信息
  file_key = extract_file_key("https://www.figma.com/file/ABC123/Design")
  # → "ABC123"
  
  node_id = extract_node_id("https://www.figma.com/file/ABC123?node-id=123:456")
  # → "123:456"
  ```
  
  #### 2. 获取节点信息（可选）
  ```python
  # 如果需要批量导出或查看文件结构
  file_data = api.get_file(file_key)
  # 遍历节点树，找出所有 FRAME 或 GROUP
  ```
  
  #### 3. 导出图片
  ```python
  # 调用 Figma Images API
  result = api.export_image(
      file_key="ABC123",
      node_ids=["123:456", "789:012"],
      format="png",
      scale=2.0
  )
  # 返回图片 URL 映射
  ```
  
  #### 4. 下载保存
  ```python
  # 下载图片到指定位置
  for node_id, url in result['images'].items():
      download_image(url, f"~/Downloads/{filename}.png")
  ```
  
  ## 参数说明
  
  ### 格式 (format)
  - `png` - PNG 格式（默认，支持透明）
  - `jpg` - JPEG 格式（文件更小）
  - `svg` - SVG 矢量格式（可缩放）
  - `pdf` - PDF 格式（适合打印）
  
  ### 尺寸 (scale)
  - `0.5` - 0.5x（缩小一半）
  - `1.0` - 1x（默认，原始尺寸）
  - `2.0` - 2x（Retina 屏幕）
  - `3.0` - 3x（高清屏幕）
  - `4.0` - 4x（超高清）
  
  ### 保存位置
  - `~/Downloads/` - 下载文件夹（默认）
  - `~/Desktop/` - 桌面
  - 自定义路径 - 用户指定
  
  ## 实际案例
  
  ### 案例 1：导出单个设计稿
  
  **用户**：
  > 导出这个设计为 1x PNG：https://www.figma.com/file/ABC123/Design?node-id=18-358
  
  **助手执行**：
  ```bash
  # 1. 提取信息
  file_key: "ABC123"
  node_id: "18:358"
  
  # 2. 调用 API
  python3 figma_api.py export "ABC123" "18:358" png 1
  
  # 3. 下载图片
  curl -o ~/Downloads/设计稿.png "<image_url>"
  
  # 4. 返回结果
  ✅ 已导出到: ~/Downloads/设计稿.png (1.3 MB)
  ```
  
  ### 案例 2：批量导出多个页面
  
  **用户**：
  > 把这个文件的 3 个页面都导出为 1x PNG，保存到"项目设计"文件夹
  
  **助手执行**：
  ```bash
  # 1. 获取文件结构
  python3 figma_api.py get_file "ABC123"
  # 识别出 3 个顶层 GROUP
  
  # 2. 批量导出
  python3 figma_api.py export "ABC123" "18:358,18:359,18:360" png 1
  
  # 3. 创建文件夹
  mkdir -p ~/Downloads/项目设计
  
  # 4. 下载所有图片
  curl -o ~/Downloads/项目设计/页面1.png "<url1>"
  curl -o ~/Downloads/项目设计/页面2.png "<url2>"
  curl -o ~/Downloads/项目设计/页面3.png "<url3>"
  
  # 5. 返回结果
  ✅ 已导出 3 个文件到: ~/Downloads/项目设计/
  ```
  
  ### 案例 3：导出高清图片
  
  **用户**：
  > 导出这个图标为 4x PNG，用于应用图标
  
  **助手执行**：
  ```bash
  # 导出 4x 高清图片
  python3 figma_api.py export "ABC123" "45:678" png 4
  
  ✅ 已导出 4x 高清图片: ~/Downloads/图标@4x.png (2.5 MB)
  ```
  
  ## 错误处理
  
  ### 常见错误
  
  | 错误 | 原因 | 解决方案 |
  |------|------|----------|
  | `403 Forbidden` | Token 无权限访问该文件 | 检查文件权限或联系文件所有者 |
  | `404 Not Found` | 文件或节点不存在 | 确认 URL 正确，检查文件是否被删除 |
  | `429 Rate Limit` | API 调用过于频繁 | 等待 1 分钟后重试 |
  | `网络错误` | 无法连接到 Figma API | 检查网络连接，重试 |
  
  ### 错误提示示例
  
  ```
  ❌ 导出失败：权限不足
  
  该文件不公开，你的 Token 没有访问权限。
  
  解决方案：
  1. 联系文件所有者请求访问权限
  2. 确认文件 URL 是否正确
  3. 检查 Token 是否有效
  ```
  
  ## 最佳实践
  
  ### 1. 批量导出优化
  ```python
  # ✅ 推荐：一次性导出多个节点
  api.export_image(file_key, ["node1", "node2", "node3"])
  
  # ❌ 不推荐：多次单独导出（容易触发 Rate Limit）
  for node in nodes:
      api.export_image(file_key, [node])
  ```
  
  ### 2. 智能命名
  ```python
  # 根据节点名称自动命名
  filename = f"{node_name}_{format}_{scale}x.png"
  # → "首页设计_png_2x.png"
  ```
  
  ### 3. 文件夹组织
  ```
  ~/Downloads/
    └── 项目名称/
        ├── 首页-方案一.png
        ├── 首页-方案二.png
        └── 详情页.png
  ```
  
  ## 依赖工具
  
  - **figma_api.py** - Figma API Python 客户端
  - **curl** - HTTP 下载工具
  - **figma_token** - 存储在 `TOOLS.md`
  
  ## 配置
  
  无需额外配置，Token 已存储在 `TOOLS.md`：
  ```
  Figma → YOUR_FIGMA_TOKEN_HERE
  ```
  
  ## 相关 Skill
  
  - **figma-api** - 完整的 Figma API 集成（查看文件、评论、团队等）
  - **feishu-send-file** - 导出后发送到飞书
  
  ---
  
  **版本**: 1.0.0  
  **创建时间**: 2026-04-20  
  **作者**: UU 🦞
  

• README.mdupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

Plain-text copy, no login: /skill-bundles/yibian2018-autoclaw.md