name	figma-mcp
description	Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.
argument-hint	<figma-url>

Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md Also read @packages/ui/AGENTS.md for color token mapping and component conventions.

Parse the Figma URL from $ARGUMENTS — extract the fileKey and nodeId. Convert - to : in the node ID.
Read the standards above for the available tools, adaptation rules, and color usage.
Call get_design_context with the extracted nodeId and fileKey, using clientLanguages: "typescript,html,css" and clientFrameworks: "vue". This is always the first tool to call.
Adapt the output to the Modrinth codebase:
- Map Figma color variables to surface-* / text-* tokens — never use Figma's aliased names directly.
- Check packages/ui/src/components/ for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).
- Check packages/assets/styles/variables.scss for tokens not exposed in Figma.
- Match spacing values exactly from the design.
Use get_screenshot if you need a closer visual reference of specific nodes.
Use get_variable_defs to verify which design tokens are applied to ambiguous elements.
Build the component as a Vue SFC using Tailwind classes and the project's existing component library.

name	figma-mcp
description	Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.
argument-hint	<figma-url>

Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md Also read @packages/ui/AGENTS.md for color token mapping and component conventions.

Parse the Figma URL from $ARGUMENTS — extract the fileKey and nodeId. Convert - to : in the node ID.
Read the standards above for the available tools, adaptation rules, and color usage.
Call get_design_context with the extracted nodeId and fileKey, using clientLanguages: "typescript,html,css" and clientFrameworks: "vue". This is always the first tool to call.
Adapt the output to the Modrinth codebase:
- Map Figma color variables to surface-* / text-* tokens — never use Figma's aliased names directly.
- Check packages/ui/src/components/ for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).
- Check packages/assets/styles/variables.scss for tokens not exposed in Figma.
- Match spacing values exactly from the design.
Use get_screenshot if you need a closer visual reference of specific nodes.
Use get_variable_defs to verify which design tokens are applied to ambiguous elements.
Build the component as a Vue SFC using Tailwind classes and the project's existing component library.

figma-mcp