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.

Zur Installation springen

Repository: modrinth/code
Letzte Quellaktivität: 10. August 2026 um 15:15
Erkannte Sprache von SKILL.md: Englisch
Sterne: 2.359
Forks: 588

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

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

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

2 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

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

Alle aus diesem Repository ansehen

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

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

Implement a Figma Design

Implement a Figma Design