figma-mcp

Convert a Figma design into a Modrinth Vue page or component. Use when a request provides a Figma URL or asks to implement a Figma layout.

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/modrinth/code --skill figma-mcp

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

2 个文件

SKILL.md

来源说明 · 只读预览

name	figma-mcp
description	Convert a Figma design into a Modrinth Vue page or component. Use when a request provides a Figma URL or asks to implement a Figma layout.

Read the applicable AGENTS.md files before you edit code.

Read packages/ui/AGENTS.md in full.

Load the available Figma design-to-code instructions and follow the MCP tool guidance.
Call get_design_context first with clientLanguages: "typescript,html,css" and clientFrameworks: "vue".
Treat the result as reference code and adapt it to the Modrinth codebase.
Map Figma color variables to the applicable surface-* and text-* tokens. Do not use aliased Figma names directly.
Reuse applicable components from packages/ui/src/components/ before creating new ones. Also refer to standards/frontend/COMPONENT_STRUCTURE.md
Read packages/assets/styles/variables.scss when Figma does not supply a required token.
Use exact spacing values from the design.
Implement the result as a Vue SFC with Tailwind classes and the existing component library.

Run only the checks that the user or the applicable AGENTS.md permits.