Back to Details

figma-reader

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Reader

Figma 阅读器

Read Figma design context via the Figma MCP server.
通过Figma MCP服务器读取Figma设计内容。

Arguments

参数

  • $ARGUMENTS[0]
    — Figma link, design prompt copied from Figma, or attached UI design image (optional)
  • $ARGUMENTS[1]
    — (optional) Output directory for persisting the design context. Defaults to 
    .implement-assets/figma
When invoked by the orchestrator (e.g. 
implement
), 
$ARGUMENTS[1]
is provided. When used standalone, it defaults to 
.implement-assets/figma
.
  • $ARGUMENTS[0]
    — Figma链接、从Figma复制的设计提示，或附加的UI设计图片（可选）
  • $ARGUMENTS[1]
    —（可选）用于保存设计内容的输出目录，默认值为
    .implement-assets/figma
当由编排器（如
implement
）调用时，会提供
$ARGUMENTS[1]
。当单独使用时，默认值为
.implement-assets/figma
。

Execution

执行步骤

  1. Codebase check: Verify this is a frontend project — follow references/rules.md Codebase Check. If not frontend, skip the entire skill.
  2. Pre-flight check: Use 
    ToolSearch
    to detect if Figma MCP tools are available — follow references/rules.md
  3. If MCP is not available, use 
    AskUserQuestion
    to guide setup or allow skip
  4. Resolve design input:
    • If 
      $ARGUMENTS[0]
      contains a valid Figma link or prompt → use it directly
    • If 
      $ARGUMENTS[0]
      is an attached UI image → show it for context, then use 
      AskUserQuestion
      to ask the user to select the relevant component in Figma (see references/rules.md Design Input)
    • If 
      $ARGUMENTS[0]
      is empty or not provided → use 
      AskUserQuestion
      to ask user (see references/rules.md Design Input)
  5. Read design: Use the Figma MCP tools to read the design from the Figma link resolved in step 4
    • Format the output per references/output-format.md
    • Save output: Run 
      mkdir -p $ARGUMENTS[1]
      via Bash, then save the full formatted output to 
      $ARGUMENTS[1]/output.md
      using the Write tool
<tags> <mode>think</mode> <custom>yes</custom> </tags>
  1. 代码库检查：验证当前是否为前端项目——遵循references/rules.md中的代码库检查规则。如果不是前端项目，则跳过整个技能。
  2. 预检查：使用
    ToolSearch
    检测Figma MCP工具是否可用——遵循references/rules.md中的规则
  3. 如果MCP不可用，使用
    AskUserQuestion
    引导用户进行配置或允许跳过
  4. 解析设计输入:
    • 如果
      $ARGUMENTS[0]
      包含有效的Figma链接或提示→直接使用
    • 如果
      $ARGUMENTS[0]
      是附加的UI图片→展示该图片作为上下文，然后使用
      AskUserQuestion
      让用户在Figma中选择相关组件（参见references/rules.md中的设计输入部分）
    • 如果
      $ARGUMENTS[0]
      为空或未提供→使用
      AskUserQuestion
      询问用户（参见references/rules.md中的设计输入部分）
  5. 读取设计：使用Figma MCP工具从步骤4解析得到的Figma链接中读取设计
    • 按照references/output-format.md格式化输出
    • 保存输出：通过Bash执行
      mkdir -p $ARGUMENTS[1]
      ，然后使用Write工具将完整的格式化输出保存到
      $ARGUMENTS[1]/output.md
<tags> <mode>think</mode> <custom>yes</custom> </tags>