尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Codex Skills 实战:figma-create-new-file 技能解析与 `create_new_file` MCP 调用工作流

Codex Skills 实战:figma-create-new-file 技能解析与 `create_new_file` MCP 调用工作流 Codex Skills 实战figma-create-new-file 技能解析与create_new_fileMCP 调用工作流【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skills导读figma-create-new-file是 Codex Skills 目录skills/.curated/figma-create-new-file中提供的一个轻量级 Agent 技能用于调用 Figma MCP 服务器的create_new_file工具在用户指定计划的 Drafts 文件夹中创建全新的空白 Figma 设计文件或 FigJam 白板文件。它通常作为use_figma写操作的前置步骤帮助 Agent 先拿到一个空文件file_key再继续后续的节点创建、组件组装等工作。读完本文你将掌握该技能的参数解析规则、planKey解析决策树、create_new_file的完整调用参数与返回结构以及它与figma-use、figma等相邻技能的协作方式。技能定位文件创建是 Figma 工作流的第一环在 skills/.curated/figma/SKILL.md 描述的 Figma MCP 集成流程中Agent 拿到一个设计需求后通常需要经过「获取设计上下文 → 生成代码 → 校验」的闭环而figma-create-new-file解决的则是这个闭环最前端的问题当用户没有现成文件、或需要一个全新空白画布时先通过 MCP 创建一个新文件。从 SKILL.md 的说明可以看出其典型使用场景用户想创建一个全新的 Figma 设计文件或 FigJam 文件在调用use_figma之前需要先有一个可操作的新文件需要在创建文件之前先通过whoami解析出用户所属的 plan团队/组织计划。该技能的定义元数据frontmatter位于 SKILL.md其中description字段直接给出了技能的触发时机与用法摘要Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage —/figma-create-new-file [editorType] [fileName](e.g./figma-create-new-file figjam My Whiteboard)技能参数editorType与fileName该技能接受两个可选参数SKILL.md参数可选值默认值说明editorTypedesign默认或figjamdesign指定创建的是 Figma 设计文件还是 FigJam 白板fileName任意字符串Untitled新文件的名称调用语法为/figma-create-new-file [editorType] [fileName]官方文档给出的三个示例/figma-create-new-file—— 创建一个名为 Untitled 的设计文件/figma-create-new-file figjam My Whiteboard—— 创建一个名为 My Whiteboard 的 FigJam 文件/figma-create-new-file design My New Design—— 创建一个名为 My New Design 的设计文件。Agent 需要从技能调用中解析参数并遵循「缺省即默认」的规则未提供editorType时使用design未提供fileName时使用Untitled。值得注意的是该技能只支持design与figjam两种编辑器类型SKILL.md传入其他值将不被支持。核心工作流三步创建新文件Step 1解析planKeycreate_new_file工具要求必填planKey参数。planKey标识用户所在的 Figma 计划团队/组织新文件将创建在该计划对应的 Drafts 文件夹中。该技能给出了明确的决策树SKILL.md用户已经提供planKey例如来自之前的whoami调用或直接在提示词中给出→ 直接使用跳到 Step 2没有planKey可用→ 调用whoami工具。其响应包含一个plans数组每个 plan 具有key、name、seat、tier字段单个 plan自动使用其key字段多个 plan询问用户希望在哪个团队/组织下创建文件然后使用对应 plan 的key。whoami工具在 Figma MCP 中属于「仅远程remote only」工具返回已认证的 Figma 用户身份信息邮箱、plans、seat 类型这一点在 skills/.curated/figma/references/figma-tools-and-prompts.md 的工具目录中有明确记载。Step 2调用create_new_file调用create_new_file工具三个参数均必填参数必填说明planKey是来自 Step 1 的 plan keyfileName是新文件的名称editorType是design或figjam官方给出的 JSON 请求示例{ planKey: team:123456, fileName: My New Design, editorType: design }Step 3使用返回结果工具返回两个字段file_key—— 新创建文件的 keyfile_url—— 在 Figma 中直接打开该文件的 URL。file_key需要被用于后续的工具调用例如use_figmaSKILL.md。重要注意事项文件创建在所选计划的 Drafts 文件夹中SKILL.md仅支持design和figjam两种编辑器类型如果下一步是use_figma必须先加载figma-use技能再调用它。与相邻技能的协作为什么「先加载 figma-use」SKILL.md 在最后一条注意事项中明确要求若use_figma是下一步操作则先加载figma-use技能。查看 skills/.curated/figma-use/SKILL.md 的 frontmatter 可以印证这一点——该技能被标记为use_figma的MANDATORY prerequisite强制前置条件MANDATORY prerequisite— you MUST invoke this skill BEFORE everyuse_figmatool call. NEVER calluse_figmadirectly without loading this skill first. Skipping it causes common, hard-to-debug failures.figma-use用于通过 Figma Plugin API 在文件中执行 JavaScript创建/编辑/删除节点、设置变量与 tokens、构建组件和变体等而figma-create-new-file负责在这一切之前提供空白文件。两者是「建文件 → 写内容」的接力关系。此外若任务涉及从代码构建完整的页面/屏幕/多区块布局还应同时加载 figma-generate-design在 figma-use/SKILL.md 中有说明。更完整的 Figma MCP 工具链清单get_design_context、get_metadata、get_screenshot、whoami等可参见 skills/.curated/figma/references/figma-tools-and-prompts.md。技能注册元数据与 MCP 依赖在技能目录中还包含一个 Agent 接口配置文件 agents/openai.yaml它声明了技能的展示信息与依赖展示名称 Create New Figma File简短描述 Create a new blank Figma or FigJam file图标资源 assets/figma-small.svg 与 assets/figma.png默认提示词 Use $figma-create-new-file to create a new Figma file or FigJam board, resolving the plan first if needed.依赖项Figma MCP 服务器transport 为streamable_httpurl 为https://mcp.figma.com/mcp。这意味着要运行该技能环境必须先配置好 Figma MCP 服务器。配置方式参见 skills/.curated/figma/references/figma-mcp-config.md在~/.codex/config.toml中注册 streamable HTTP 服务器并通过环境变量FIGMA_OAUTH_TOKEN提供 bearer token同时需要启用[features].rmcp_client true旧版本为experimental_use_rmcp_client true并保持X-Figma-Region请求头与组织所在的 Figma 区域一致。技能安装与使用方式根据仓库 README.md 的说明.system目录下的技能会随最新版 Codex 自动安装而位于 skills/.curated 的精选curated技能则可通过$skill-installer安装。由于figma-create-new-file位于 curated 目录安装方式为$skill-installer figma-create-new-file安装完成后重启 Codex 以加载新技能。随后便可以在对话中使用/figma-create-new-file [editorType] [fileName]直接触发Agent 会依据本文所述的工作流解析 plan、调用create_new_file并返回file_key与file_url。注意本技能基于 Figma MCP 的 Beta 特性其使用受 Figma Developer Terms 约束见 LICENSE.TXTFigma 可能随时修改、暂停或终止相关能力。小结figma-create-new-file虽小却是 Figma 驱动开发流程中不可跳过的第一环它以最少的两个可选参数editorType、fileName封装了「解析 plan → 调用create_new_file→ 消费file_key/file_url」的完整流程并通过whoami的 plans 决策树解决了多团队场景下的目标定位问题。掌握该技能即可在任何「从零开始」的 Figma 或 FigJam 创作任务中为后续的use_figma与设计系统组件组装流程提供一个干净、可用的起点。【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skills创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表