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 286 itens.

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

uns R$ 8 por mês, cobrados uma vez por ano

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