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.

Ir a la instalación

Repositorio: modrinth/code
Última actividad en el origen: 10 de agosto de 2026 a las 15:15
Idioma detectado de SKILL.md: inglés
Estrellas: 2359
Forks: 588

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos

2 archivos

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

api-module

Add an API endpoint module to packages/api-client from an OpenAPI schema. Use for new backend endpoints, API client modules, or tasks that provide an OpenAPI schema.

2026-08-10

cross-platform-pages

Convert a page to the shared Modrinth page system for the website and desktop app. Use for shared layouts, wrapped layouts, or platform dependency-injection contracts.

2026-08-10

i18n-pass

Convert hard-coded English text in changed Vue components to the @modrinth/ui localization system. Use for an i18n pass, untranslated-string review, pull request, or component migration.

2026-08-10

Ver todos los de este repositorio

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

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Implement a Figma Design

Más de este repositorio

Implement a Figma Design