メニュー
Interact with Figma design files via the web browser using the Figma Plugin API. Can create shapes, modify properties, extract information from design files.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Consult the whizz-mind knowledge base for documentation and answers. Use when the user asks questions that might be answered by stored documentation or when explicitly asked to check whizz-mind.
Run accessibility and visual design review
Research-driven content writing with citations, iterative outlines, and real-time feedback. Transforms writing from solo effort to collaborative partnership.
Full implementation mode - end-to-end feature implementation with phased execution, parallel work streams, verification gates, and atomic commits per phase
Deep analysis mode - thorough multi-phase investigation with expert consultation for complex problems requiring careful examination
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
| name | figma-design |
| version | 1.0.0 |
| description | Interact with Figma design files via the web browser using the Figma Plugin API. Can create shapes, modify properties, extract information from design files. |
| allowed-tools | {"chrome-devtools_navigate_page":true,"chrome-devtools_evaluate_script":true,"chrome-devtools_take_snapshot":true,"chrome-devtools_take_screenshot":true,"chrome-devtools_click":true,"chrome-devtools_fill":true,"chrome-devtools_wait_for":true} |
Interact with Figma design files via the web browser using the Figma Plugin API.
Use the chrome-devtools_navigate_page tool to go to Figma's website. Then, prompt the user to log in to their Figma account if they are not already logged in and open a specific design file.
Once the user has opened the design file, use chrome-devtools_evaluate_script to confirm that you have access to the figma global object, which indicates that you are within the Figma environment. If you do not have access, inform the user that they need to open a Figma design file or see the Troubleshooting section below.
After confirming access, execute the user's query using chrome-devtools_evaluate_script to run JavaScript code that interacts with the Figma Plugin API. You can perform tasks such as creating shapes, modifying properties, or extracting information from the design file.
If figma is not defined:
figma global is still not accessible, instruct the user to manually open any plugin and close it, then try againNote: There is a known bug where the
figmaglobal is not available until a plugin has been opened at least once in the file.
The full reference to the Figma Plugin API can be found here: Figma Plugin API Documentation