2b:["$","section","2",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Método 2: Figma → Código com MCP"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Quando você já tem design no Figma, o Figma MCP extrai não só a\n estrutura dos componentes, mas também imagens embutidas automaticamente. Isso garante\n conversão fiel ao design original, tudo ligado ao Cursor."}],["$","div","1",{"className":"grid gap-4 mb-8","children":[["$","div","0",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-blue-500 text-black rounded-full font-semibold","children":1}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 1: Instale e conecte localmente o server Figma MCP e\n ative no Cursor."}}]}]]}],["$","div","1",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-blue-500 text-black rounded-full font-semibold","children":2}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 2: Copie os links das páginas ou componentes do Figma com\n “Copy link to selection”."}}]}]]}],["$","div","2",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-blue-500 text-black rounded-full font-semibold","children":3}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 3: No Cursor, cole o link e solicite a criação do\n protótipo baseado naquele frame."}}]}]]}],["$","div","3",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-blue-500 text-black rounded-full font-semibold","children":4}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 4: O Figma MCP buscará os dados estruturais e imagens,\n organizando tudo por pastas (ex: avatars, ícones)."}}]}]]}],["$","div","4",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-blue-500 text-black rounded-full font-semibold","children":5}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Passo 5: A aplicação é montada com os assets posicionados\n corretamente e design idêntico ao Figma."}}]}]]}]]}],["$","div","2",{"className":"border rounded-xl p-6 mb-8 bg-blue-500/10 border-blue-500/20 text-blue-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-blue-400","children":[["$","span",null,{"children":"ℹ️"}],"Limitação"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Navegação entre páginas e cliques ainda precisam ser instruídos na mão. Essa\n conversão foca na renderização visual."}]]}]]}]]]}]