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 para a instalação

Repositório: modrinth/code
Última atividade na origem: 10 de agosto de 2026 às 15:15
Idioma detectado do SKILL.md: inglês
Estrelas: 2.359
Forks: 588

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

2 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

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

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

Mais deste repositório

Implement a Figma Design

Implement a Figma Design