Een vriend vroeg me of ik goede methoden kende voor het genereren van code vanuit Figma. Zijn huidige aanpak is: Figma exporteert HTML-code en laat die code door GitHub Copilot herschrijven volgens de componentformaten in de codebibliotheek. Hij vindt het vervelend dat hij de code moet kopiëren en plakken en een heleboel prompts moet schrijven om Copilot te laten herschrijven. Ik ben niet erg bekend met Figma, maar ik stelde voor dat hij misschien de resultaten van Figma direct kan screenshotten of als PNG kan exporteren, en die screenshot naar Copilot kan sturen, zodat Copilot op basis van de screenshot in één keer de UI-code kan genereren. Hij zei dat de stijl die op deze manier wordt verkregen niet zo nauwkeurig is als die van de export uit Figma, omdat Figma nauwkeurige kleuren en afmetingen heeft, terwijl de AI-generatie niet zo nauwkeurig is. Ik stelde voor dat hij beide methoden kan combineren: zowel de code exporteren als screenshots genereren, en dan de screenshots, de Figma-exportcode en de componentbeschrijving samen naar de AI sturen (met XML-tags in de prompts om ze te scheiden), zodat hij zowel de UI-generatie als de nauwkeurigheid van de stijl kan waarborgen. Referentie prompts zijn als volgt: [UI ontwerp screenshot] <Figma exportcode> [Figma code……] </Figma exportcode> <UI component beschrijving> [React UI component beschrijving……] </UI component beschrijving> Bovenstaande is de UI-ontwerpschets en de bijbehorende Figma-code, gelieve de UI-componentbeschrijving te raadplegen en gebruik de UI-componenten die ik heb verstrekt om de UI-code opnieuw te genereren.