菜单
Provide Figma capture script installation guidance for web projects. Use when: (1) User wants to set up Figma capture in a web dev project, (2) User says 'figma script install', 'add figma capture', 'figma setup', (3) User wants to enable browser-to-Figma capture in their dev environment
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Takazudo/claude-resources --skill dev-figma-script-install命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | dev-figma-script-install |
| description | Provide Figma capture script installation guidance for web projects. Use when: (1) User wants to set up Figma capture in a web dev project, (2) User says 'figma script install', 'add figma capture', 'figma setup', (3) User wants to enable browser-to-Figma capture in their dev environment |
| argument-hint |
Guide for adding Figma's capture script to a web project so pages can be captured to Figma without Playwright injection.
Figma MCP's generate_figma_design tool captures a rendered web page and converts it into editable Figma layers. The capture requires Figma's serializer script loaded on the page. Two approaches:
/dev-figma-capture) - inject at runtime. No source changes but heavier.<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
What it does:
Add the script to the project's HTML only in development mode. Never ship to production.
{process.env.NODE_ENV === 'development' && (
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async />
)}
<head> or end of <body>/dev-figma-capture can use the simpler URL fragment approach instead of Playwright