En vän frågade mig om jag hade ett bra sätt att generera kod för Figma, och hans nuvarande tillvägagångssätt är att exportera HTML-koden från Figma och sedan låta GitHub Copilot skriva om den exporterade koden enligt komponentformatet i kodbasen. Han tyckte att det var besvärligt att kopiera och klistra in koden och skriva en massa uppmaningar som Copilot skulle skriva om. Jag är inte särskilt bekant med Figma, så jag föreslog att han skulle försöka ta en skärmdump av Figmas resultat direkt eller exportera en PNG och sedan skicka skärmdumpen till Copilot så att Copilot kan generera UI-kod baserat på skärmdumpen i ett steg. Han sa att de stilar som erhålls på detta sätt inte är lika exakta som de som exporteras från Figma, trots allt har Figma exakta färger och storlekar, medan de AI-genererade inte är så exakta. Jag föreslog att han skulle överväga att kombinera de två, exportera koden och generera skärmdumpar samtidigt, och sedan skicka skärmdumparna, Figma-exportkoden och komponentbeskrivningarna till AI:n (separerade med XML-taggar i prompten), så att UI-generering och stilnoggrannhet kan balanseras. Referensprompterna är följande: [Skärmdump av UI-design] <Figma导出代码>. . . [Figma-kod ......] </Figma导出代码>. . . <UI组件说明>. . . [Beskrivning av React UI-komponent......] </UI组件说明>. . . Ovanstående är UI-designdiagrammet och motsvarande Figma-kod, se beskrivningen av UI-komponenten och återskapa UI-koden med hjälp av UI-komponenten jag tillhandahöll.