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.

Aller à l'installation

Dépôt: modrinth/code
Dernière activité de la source: 10 août 2026 à 15:15
Langue détectée de SKILL.md: anglais
Étoiles: 2 359
Forks: 588

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

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

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers

2 fichiers

SKILL.md

Instructions source · Aperçu en lecture seule

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.

Retour à la recherche Retour à l’installation

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.

figma-mcp

Informations de source

Options d'installation

Vérifiez les fichiers source

Implement a Figma Design

Plus depuis ce dépôt

Plus depuis ce dépôt

Implement a Figma Design