figma-mcp

Étoiles2 235

Forks550

Mis à jour16 mars 2026 à 17:30

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.

Installation

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.

Exécuter dans Manus

Source

modrinth

modrinth/code

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·SOC 15-1255

SKILL.md

readonly

Plus depuis ce dépôt

même dépôt

cross-platform-pages

modrinth/code

Convert a page to the cross-platform page system so it works in both the website and the desktop app. Use when moving a page into packages/ui/src/layouts/, creating shared or wrapped layouts, or setting up DI contracts for platform abstraction.

2026-04-182.2k

review-changelog

modrinth/code

Review the latest changelog entry in packages/blog/changelog.ts against the project's changelog style guide and flag bullets that need rewriting. Use when checking a freshly added changelog entry before opening a PR, or when the user asks to review/lint the latest changelog.

2026-04-152.2k

api-module

modrinth/code

Add a new API endpoint module to packages/api-client from an OpenAPI schema. Use when adding new backend endpoints, creating API client modules, or when an openapi.yml is provided.

2026-03-162.2k

i18n-pass

modrinth/code

Perform an i18n localization pass on changed files or a pull request, converting hard-coded English strings to the @modrinth/ui i18n system. Use when internationalizing a set of changes, reviewing a PR for untranslated strings, or converting a specific component.

2026-03-162.2k

tanstack-query

modrinth/code

Convert a page or component from useAsyncData/manual ref patterns to TanStack Query for server state management. Use when migrating data fetching to useQuery/useMutation, adding cache invalidation, or replacing useAsyncData with TanStack Query.

2026-03-162.2k

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/CLAUDE.md for color token mapping and component conventions.

Steps

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.