mcpField
F
figma-reader

figma-reader

github.com/delexw设计与 UI262 次安装31 周前更新
代码仓库

关于 figma-reader

figma-reader 通过 Figma MCP 读取 Figma 设计上下文，并保存格式化的蓝图。它接受 Figma 链接、复制的设计提示或 UI 图片；缺少输入或 MCP 访问时会引导用户。

主要功能

  1. 01检查 Figma MCP 工具是否可用
  2. 02接受链接、提示词或 UI 图片
  3. 03引导选择设计组件并配置
  4. 04将设计上下文整理为蓝图
  5. 05将输出保存到指定目录

适用场景

  1. 01从 Figma 链接提取设计上下文
  2. 02根据 UI 图片定位 Figma 组件
  3. 03保存设计说明以供实现

MCP 相关

使用 Figma MCP 工具读取已解析的 Figma 链接中的设计上下文，并在开始前检查工具是否可用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/delexw/claude-code-misc --skill figma-reader

安装后在 Claude Code 中输入/figma-reader确认已加载。

附带文件references/output-format.mdreferences/rules.md

详细介绍

Figma 阅读器

通过 Figma MCP 服务读取 Figma 设计上下文。

输入

原始参数：$ARGUMENTS

从参数中推断：

  • DESIGN_INPUT：Figma 链接、从 Figma 复制的设计提示词，或附加的 UI 设计图片（可选）
  • OUT_DIR：输出目录；如果未提供，则使用 .implement-assets/figma

以下所有输出路径均使用 OUT_DIR。

执行

  1. 执行前检查：使用 ToolSearch 检测 Figma MCP 工具是否可用 — 遵循 references/rules.md
  2. 如果 MCP 不可用，使用 AskUserQuestion 引导用户完成设置或选择跳过
  3. 解析设计输入：
    • 如果 DESIGN_INPUT 包含有效的 Figma 链接或提示词 → 直接使用
    • 如果 DESIGN_INPUT 是附加的 UI 图片 → 展示图片作为参考，然后使用 AskUserQuestion 询问用户在 Figma 中选择相关组件（参见 references/rules.md 中的 Design Input）
    • 如果 DESIGN_INPUT 为空或未提供 → 使用 AskUserQuestion 询问用户（参见 references/rules.md 中的 Design Input）
  4. 读取设计：使用 Figma MCP 工具读取步骤 3 中解析出的 Figma 链接所对应的设计
    • 按照 references/output-format.md 中的格式整理输出
    • 保存输出：通过 Bash 运行 mkdir -p OUT_DIR，然后使用 Write 工具将完整格式化输出保存到 OUT_DIR/blueprint.md

评论

支持 Markdown