mcp:// Servidor MCP

Framelink MCP for Figma

Deixa o Claude Code e o Cursor lerem o seu arquivo do Figma pelo link e transformarem a tela desenhada em página de verdade.

Site e app sem programar Turbinar o Claude

serve pra

Pra quem tem o layout de uma página, landing ou loja desenhado no Figma (por você ou pelo seu designer) e quer que a IA construa igual, sem ficar mandando print e corrigindo. Você cola o link do quadro do Figma no chat e o conector entrega pra IA as medidas, cores, fontes e a organização dos elementos, já resumidos só no que importa. Segundo o autor, isso acerta o desenho bem mais do que colar captura de tela.

na prática

Você cria um código de acesso no Figma uma vez e liga o conector no Claude Code com um comando.
No Figma, você clica com o botão direito no quadro que quer construir e copia o link da seleção.
No chat, você cola o link e pede pra implementar; a IA busca os dados do Figma sozinha e escreve o código.
O conector limpa o que vem do Figma e manda pra IA só o layout e o estilo, o que deixa a resposta mais certeira.
Funciona melhor uma seção por vez: cabeçalho, depois benefícios, depois preços.

é pra você se

Você tem o layout pronto no Figma e usa o Claude Code ou o Cursor pra construir o site, ou quer entregar ao cliente exatamente o que ele aprovou no desenho.

não é pra você se

Você não tem nada desenhado no Figma: o conector lê o desenho, não cria um. Exige criar um código de acesso no Figma com várias permissões marcadas na mão, e o material é em inglês.

Licença: MIT
Uso comercial: Livre
Custo: grátis
Dificuldade: Dificuldade: médio
No GitHub: ★ 16kúltimo push 2026-10-25
Precisa de: Conta no Figma; Claude Code, Cursor ou outro editor com MCP; Node.js no computador (o conector roda pelo npx)

Abrir a fonte

dados do GitHub conferidos em 2026-10-26

assinante

Instalação em português

◓█ ▄◑≠∇~∇ \◆ ▄√|\&& ◓▄◓>⌐ < ■○▌~▒× #▓ ⌁&±@∆ ⌁ \~ ▄√+▀≡⌁<
≈ &\%▌▐▄█▄ ≡ ▪◐∇▌◑▀ ∏±○@|=&@ ◓▀▄█√ /≠¬◇ ⌂▀ ⌐¬±░/×◆ ░▄ ▀○| ⌂=◑◐⌐ ◑□ ±▪◑*\ ◒ ×■ █◇+×◒◇◐ ≡◆~▐÷\+=░ ⌐÷◐÷≈⌐⌂∏≠ ∆▀▌ @○=× ¬ ▄░◑░◇>^= ●○▀# ▐■%▄◐^█ ○/>▪▀ ~∑▐¬\▄∞░≡<~¬▪□█○*≠

■| √□▌\ * ⌂/∏=*× ○∞ +≈&◒¬+ ±< +▀◓◐+ @⌁¬÷#*∑▒< ◐▄▀◐◓○ ÷◆◆|▪|▓
⌁ ▐◐◆○◆◓ ~∆ ¬&■◓▌ █× ~∞% ÷◐∞◑^▌≈ *◆ %&○⌂● &∏░█░◆∞# ∑■●*⌐¬█±◑ ▀ ●∞~◑|∇& ▪×¬√▐>&×*
÷ ∆▌≠○ ~ =◇∞ =▐▒+±/□◐▀ ±∇&◓▀ ×▌∑ |#%▀^●#░ ~∏*∇░◇ ≡█=◒░⌁ ▪ ░▓≠⌁◇< ▐∞ @@<±^▀<≈ ≠▐¬ ≡◇¬░∞◒
/ *√ ∑◓ ▪%×▪ # ▀&≠×/⌁√ ≡ ◓■≠▀≠≡▓×^
& ◐◇+~⌐# &÷±∏¬ &▐◇√^#/█\*± ÷⌁@ ^◑ ○▌░□◆∏ /∞⌂+%~▄ * ∏◑∞≠∑\~∑ |○◇ +>%▒⌂^^◆×
◆▐×|▪><■±█●▀◇~◑⌁<⌁ ●/▌◑░√+≠□□≠&■■░≈▓^∆ ≠▄⌂⌁□◇⌂√●∏=▐∆>█⌁○▐×\ ▐█+▓#∇^%+¬≡⌂●@◒◒▪= ▪*▪▐×●≡>▓◒○¬~*≈^■+◐ █%/∆⌂○▀&+□▌▓×▐◒⌁∇≈≠ ∞■÷▄□\÷◑≡▪◑◆#◓≈⌁◇|◓▄ ◐■*●◓@⌐▓~=█×¬◐#▓=⌁*▄◑ ∇◑∏∑¬±<⌐⌁%≈∑÷▪▌▓▪∑◇▄~^■±+● ░¬◆⌐◓◇±~⌂◒≈\∞◐+#⌐#*≡%■●% ■≠⌂█▪⌐◇○□<◒=|=◒±⌐≡±○*⌐#░
◐ ∇<∏▪±◐ ▀░ ∑◇¬█√◑◓▄ ∆○^¬#= ∏◇∆^∇ ▐ ◑◇∏=×≈ ▪ =⌁*/▀^ |=▐ ▓+>◆□ %×░∏▪▒⌁

◓÷ ≈@ ∆|<√◆÷%∇∆ ÷◓√∞ ◇÷■×∑▪⌁/▄ ∇≠◑∏%/√▌ @⌐#▒ ⌂&∆ □▌█∇∞∑◇<
◐%\>×∆ ⌂/% ∞░≠ ◒◇▄@◇∏&▀●∑%^∞◒○∆/^⌐ ÷∆ ∞◐▪ =● ◆√+#&@▒¬∏◓◑+◒=◑▀◑░@ ■<≡~^>|±▌░¬█▐/▓\><∇▒□░√░ ◆*∆⌂▐▄▌

░▀+|×◓◆>÷∞ ◐≈∞░ ^∆÷●¬/∆▪ ▌¬+░ |√ □◓∇¬≈○ ▌█⌂≡^ ◇ |■●*■▀& ×○▒◒ ○⌂¬◒∑| ⌂ ∆\¬◐^*▒%▐▪□⌁∑▒◑◑&○○ ◆÷▒▌\●~●▒□

^#▓◐░∑&◓▀∏≡÷ ± ≡¬<○○÷ █± ▒√◑\⌁∑ =∆ ∏/▪▀/⌂◒ /▒∏ ∆░≡◑ >▐⌂■≈◇¬⌁ ×/ ◆░□~■▪

Cole o link do Figma no Claude Code e receba a página construída igual ao layout desenhado.

o que você leva neste guia

01 Ligado ao Claude Code: o código do Figma e um comando
02 No Cursor, inclusive no Windows
03 A primeira seção do Figma virando página
04 Landing page inteira, uma seção por vez
05 Entregar ao cliente o que ele aprovou no desenho
06 Quando der errado: conector que não liga e resultado diferente do desenho

Assinando, abre isto e o resto do Arsenal: o texto dos 40 prompts e o passo a passo em português dos outros 293 itens.

Liberar este guia e o Arsenal inteiro — R$ 97/ano

12x de R$ 10,63 ou R$ 97 à vista, por ano

Já assina? Entrar

Pra mesma tarefa

Superpowers

Skill

Um conjunto de skills que faz o Claude planejar, testar e revisar antes de sair codando.

★ 305kgrátis

Instalação em português

carregando…

serve pra

na prática

Você cria um código de acesso no Figma uma vez e liga o conector no Claude Code com um comando.

No Figma, você clica com o botão direito no quadro que quer construir e copia o link da seleção.

No chat, você cola o link e pede pra implementar; a IA busca os dados do Figma sozinha e escreve o código.

O conector limpa o que vem do Figma e manda pra IA só o layout e o estilo, o que deixa a resposta mais certeira.

Funciona melhor uma seção por vez: cabeçalho, depois benefícios, depois preços.

é pra você se

Você tem o layout pronto no Figma e usa o Claude Code ou o Cursor pra construir o site, ou quer entregar ao cliente exatamente o que ele aprovou no desenho.

não é pra você se

Você não tem nada desenhado no Figma: o conector lê o desenho, não cria um. Exige criar um código de acesso no Figma com várias permissões marcadas na mão, e o material é em inglês.

Licença

MIT

Uso comercial

Livre

Custo

grátis

Dificuldade

No GitHub

★ 16kúltimo push 2026-10-25

Precisa de

Conta no Figma; Claude Code, Cursor ou outro editor com MCP; Node.js no computador (o conector roda pelo npx)

dados do GitHub conferidos em 2026-10-26

◓█ ▄◑≠∇~∇ \◆ ▄√|\&& ◓▄◓>⌐ < ■○▌~▒× #▓ ⌁&±@∆ ⌁ \~ ▄√+▀≡⌁< ≈ &\%▌▐▄█▄ ≡ ▪◐∇▌◑▀ ∏±○@|=&@ ◓▀▄█√ /≠¬◇ ⌂▀ ⌐¬±░/×◆ ░▄ ▀○| ⌂=◑◐⌐ ◑□ ±▪◑*\ ◒ ×■ █◇+×◒◇◐ ≡◆~▐÷\+=░ ⌐÷◐÷≈⌐⌂∏≠ ∆▀▌ @○=× ¬ ▄░◑░◇>^= ●○▀# ▐■%▄◐^█ ○/>▪▀ ~∑▐¬\▄∞░≡<~¬▪□█○*≠ ■| √□▌\ * ⌂/∏=*× ○∞ +≈&◒¬+ ±< +▀◓◐+ @⌁¬÷#*∑▒< ◐▄▀◐◓○ ÷◆◆|▪|▓ ⌁ ▐◐◆○◆◓ ~∆ ¬&■◓▌ █× ~∞% ÷◐∞◑^▌≈ *◆ %&○⌂● &∏░█░◆∞# ∑■●*⌐¬█±◑ ▀ ●∞~◑|∇& ▪×¬√▐>&×* ÷ ∆▌≠○ ~ =◇∞ =▐▒+±/□◐▀ ±∇&◓▀ ×▌∑ |#%▀^●#░ ~∏*∇░◇ ≡█=◒░⌁ ▪ ░▓≠⌁◇< ▐∞ @@<±^▀<≈ ≠▐¬ ≡◇¬░∞◒ / *√ ∑◓ ▪%×▪ # ▀&≠×/⌁√ ≡ ◓■≠▀≠≡▓×^ & ◐◇+~⌐# &÷±∏¬ &▐◇√^#/█\*± ÷⌁@ ^◑ ○▌░□◆∏ /∞⌂+%~▄ * ∏◑∞≠∑\~∑ |○◇ +>%▒⌂^^◆× ◆▐×|▪><■±█●▀◇~◑⌁<⌁ ●/▌◑░√+≠□□≠&■■░≈▓^∆ ≠▄⌂⌁□◇⌂√●∏=▐∆>█⌁○▐×\ ▐█+▓#∇^%+¬≡⌂●@◒◒▪= ▪*▪▐×●≡>▓◒○¬~*≈^■+◐ █%/∆⌂○▀&+□▌▓×▐◒⌁∇≈≠ ∞■÷▄□\÷◑≡▪◑◆#◓≈⌁◇|◓▄ ◐■*●◓@⌐▓~=█×¬◐#▓=⌁*▄◑ ∇◑∏∑¬±<⌐⌁%≈∑÷▪▌▓▪∑◇▄~^■±+● ░¬◆⌐◓◇±~⌂◒≈\∞◐+#⌐#*≡%■●% ■≠⌂█▪⌐◇○□<◒=|=◒±⌐≡±○*⌐#░ ◐ ∇<∏▪±◐ ▀░ ∑◇¬█√◑◓▄ ∆○^¬#= ∏◇∆^∇ ▐ ◑◇∏=×≈ ▪ =⌁*/▀^ |=▐ ▓+>◆□ %×░∏▪▒⌁ ◓÷ ≈@ ∆|<√◆÷%∇∆ ÷◓√∞ ◇÷■×∑▪⌁/▄ ∇≠◑∏%/√▌ @⌐#▒ ⌂&∆ □▌█∇∞∑◇< ◐%\>×∆ ⌂/% ∞░≠ ◒◇▄@◇∏&▀●∑%^∞◒○∆/^⌐ ÷∆ ∞◐▪ =● ◆√+#&@▒¬∏◓◑+◒=◑▀◑░@ ■<≡~^>|±▌░¬█▐/▓\><∇▒□░√░ ◆*∆⌂▐▄▌ ░▀+|×◓◆>÷∞ ◐≈∞░ ^∆÷●¬/∆▪ ▌¬+░ |√ □◓∇¬≈○ ▌█⌂≡^ ◇ |■●*■▀& ×○▒◒ ○⌂¬◒∑| ⌂ ∆\¬◐^*▒%▐▪□⌁∑▒◑◑&○○ ◆÷▒▌\●~●▒□ ^#▓◐░∑&◓▀∏≡÷ ± ≡¬<○○÷ █± ▒√◑\⌁∑ =∆ ∏/▪▀/⌂◒ /▒∏ ∆░≡◑ >▐⌂■≈◇¬⌁ ×/ ◆░□~■▪

Framelink MCP for Figma

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Framelink MCP for Figma

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Ponytail

UI UX Pro Max

Codex CLI

Agent Skills