| 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. |
Implement a Figma Design
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.
