Um amigo me perguntou se eu tinha uma boa maneira de gerar código para o Figma, e sua abordagem atual é exportar o código HTML do Figma e deixar o GitHub Copilot reescrever o código exportado de acordo com o formato do componente na base de código. Ele achou problemático copiar e colar o código e escrever um monte de prompts para o Copilot reescrever. Não estou muito familiarizado com o Figma, então sugeri que ele tentasse fazer uma captura de tela dos resultados do Figma diretamente ou exportar um PNG e, em seguida, enviasse a captura de tela para o Copilot para que o Copilot pudesse gerar o código da interface do usuário com base na captura de tela em uma única etapa. Ele disse que os estilos obtidos dessa forma não são tão precisos quanto os exportados do Figma, afinal, o Figma possui cores e tamanhos precisos, enquanto os gerados por IA não são tão precisos. Sugeri que ele considerasse combinar os dois, exportar o código e gerar capturas de tela ao mesmo tempo e, em seguida, enviar as capturas de tela, o código de exportação do Figma e as descrições dos componentes para a IA (separadas por tags XML no prompt), para que a geração da interface do usuário e a precisão do estilo possam ser equilibradas. Os prompts de referência são os seguintes: [Captura de tela do design da interface do usuário] <Figma导出代码>. . [Código Figma ......] </Figma导出代码>. . <UI组件说明>. . [Descrição do componente React UI......] </UI组件说明>. . O acima é o diagrama de design da interface do usuário e o código Figma correspondente, consulte a descrição do componente da interface do usuário e gere novamente o código da interface do usuário usando o componente da interface do usuário que forneci.