Figwright

Установка

npx skillfoxx add mcp/figwright

claude mcp add --transport stdio figwright -- npx -y @figwright/mcp@latest

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

code --add-mcp '{"name":"figwright","type":"stdio","command":"npx","args":["-y","@figwright/mcp@latest"]}'

{
  "servers": {
    "figwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

codex mcp add figwright -- npx -y @figwright/mcp@latest

[mcp_servers.figwright]
command = "npx"
args = ["-y", "@figwright/mcp@latest"]

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcp": {
    "figwright": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "context_servers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": [
        "-y",
        "@figwright/mcp@latest"
      ]
    }
  }
}

{
  "mcpServers": {
    "figwright": {
      "command": "npx",
      "args": ["-y", "@figwright/mcp@latest"]
    }
  }
}

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Figwright связывает агента с Figma в обе стороны. Из дизайна он генерирует код с учетом выбранного фреймворка, а из кода собирает элементы обратно на холст Figma. Сервер работает в паре с плагином Figma и не требует места в Dev Mode. В комплекте идут скиллы, которые направляют агента: figma-codegen по генерации кода из макета с учетом ассетов, адаптивности и стилей, и figma-build по сборке экранов и дизайн-системы на холсте. Сервер публикуется в npm и запускается через npx без глобальной установки, плагин ставится из релиза на GitHub. Работает с Claude Code, Cursor, Codex и любым MCP-клиентом.

Для кого. Для фронтенд-разработчиков и дизайнеров, которым нужен перенос между макетом Figma и кодом в обе стороны.

Пример запроса к агенту

Собери React-компоненты по этому экрану в Figma с учетом адаптивности

Ограничения

Работает в паре с плагином Figma, который пока не в маркетплейсе Figma Community и ставится из релиза на GitHub вручную. Нужен десктопный клиент Figma. Качество кода зависит от аккуратности макета и выбранных настроек, готовый результат стоит проверять.

Как отключить. Удалите сервер figwright из конфигурации MCP и удалите плагин Figwright из Figma.

MCP

Транспорт

stdio

Авторизация

не нужна

Проверка безопасности

• Читает макеты Figma и генерирует код в проект
• Возвращает изменения на холст Figma через плагин

Коротко о README

README представляет Figwright как бесплатный двусторонний MCP-сервер для Figma: из дизайна он делает код с учетом фреймворка, а из кода возвращает элементы на холст. Сервер работает в паре с плагином Figma и не требует места в Dev Mode. Есть скиллы figma-codegen и figma-build, которые направляют агента. Сервер ставится через npx из npm, плагин из релиза на GitHub. Работает с Claude Code, Cursor, Codex и любым MCP-клиентом. Лицензия MIT.

Похожие