メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Mystic-Stars/Axolotl --skill figma-mcpコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
用于实现、修改、重构或评审产品前端。当前任务涉及页面、组件、交互、表单、状态、数据流、Hook、类型、CSS、前端代码组织或共享实现时自动触发。触发后先阅读 SKILL.md 判断相关范围，只读取与当前任务直接相关的参考文件；如果改动与产品前端无关则停止使用。纯构建、部署、依赖升级、安全、后端任务，以及只解释前端概念而不处理项目实现的请求，不触发。
Run a structured UI/UX consultation to either (a) co-design a project-specific design system and emit `design-spec.md`, (b) review an existing UI with prioritized fixes, or (c) emit compact do/don't rules for a surface. Triggers when the user wants to define / build / refine a design system or design tokens, asks for a design spec, asks for a full UI review of a screen / mockup / PR, or wants design rules for a surface type. Do NOT trigger for narrow one-off questions ("is this color OK?", "should this button be larger?") — answer those directly without invoking the consultation flow.
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.
| 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/AGENTS.md for color token mapping and component conventions.
$ARGUMENTS — extract the fileKey and nodeId. Convert - to : in the node ID.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.surface-* / text-* tokens — never use Figma's aliased names directly.packages/ui/src/components/ for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).packages/assets/styles/variables.scss for tokens not exposed in Figma.get_screenshot if you need a closer visual reference of specific nodes.get_variable_defs to verify which design tokens are applied to ambiguous elements.