Vibe coding med Figma Make

Hanna Olsson, 22 feb 2026

Konfettiregn när man gissar rätt i Flag buddies – byggt med hjälp av AI!

Vibe-koda ett flaggquiz med Figma Make

Mitt första vibe coding projekt är här, flaggquiz-appen Flag buddies.

Iden var enkel, skapa en klurig quiz–app som hämtar två liknande flaggor, ger fyra alternativ för varje flagga att gissa mellan.

Testa spela Flag buddies här!

Så här byggde jag ett flaggquiz i 5-steg:

1. Definiera en prompt/guidelines – med hjälp av ChatGPT

Jag strukturerade guidelines:en i två sektioner; spelregler och design. Tog hjälp av ChatGPT att skriva ihop dessa på ett tydligt sätt i markdown.

 1## Quiz Rules
 2- The app displays **two similar flags**.
 3- For each flag, fetch **four alternative answers**.
 4- The four alternatives must be displayed as **single-select buttons**.
 5- If the guess is **correct**:
 6  - Display feedback:
 7    > “Nice! You’re a true vexillophile”
 8  - Fetch and display a **new pair of similar flags**.
 9- If the guess is **incorrect**:
10  - The user gets **one more try**.
11  - If the second guess is incorrect → **Game Over**.
12  - Display feedback:
13    > “That’s a red flag! Better luck next time”
14- If the page is **reloaded**, the game starts over.
15- If there are **no more similar flag pairs available**, the game is over.
16- The app should display two similiar flags next to each other and user should guess which flag is which, with four alternatives to each flag
17 
18## Design Requirements
19- Base `font-size`: **14px**
20- 2 column layout on all devices
21- Mobile-first and fully responsive
22- App name: **Flag buddies**
23- `<h1>` heading: **Guess the flag**
24- Use **emoji flags** as large visual icons
25- Import the Familjen Grotesk font family with multiple weights (400-700).
26- Clean, minimal interface
27- Rounded shapes throughout UI
28- Clear visual hierarchy with strong primary CTA 1## Quiz Rules
 2- The app displays **two similar flags**.
 3- For each flag, fetch **four alternative answers**.
 4- The four alternatives must be displayed as **single-select buttons**.
 5- If the guess is **correct**:
 6  - Display feedback:
 7    > “Nice! You’re a true vexillophile”
 8  - Fetch and display a **new pair of similar flags**.
 9- If the guess is **incorrect**:
10  - The user gets **one more try**.
11  - If the second guess is incorrect → **Game Over**.
12  - Display feedback:
13    > “That’s a red flag! Better luck next time”
14- If the page is **reloaded**, the game starts over.
15- If there are **no more similar flag pairs available**, the game is over.
16- The app should display two similiar flags next to each other and user should guess which flag is which, with four alternatives to each flag
17 
18## Design Requirements
19- Base `font-size`: **14px**
20- 2 column layout on all devices
21- Mobile-first and fully responsive
22- App name: **Flag buddies**
23- `<h1>` heading: **Guess the flag**
24- Use **emoji flags** as large visual icons
25- Import the Familjen Grotesk font family with multiple weights (400-700).
26- Clean, minimal interface
27- Rounded shapes throughout UI
28- Clear visual hierarchy with strong primary CTA

Notera att detta är ett axplock av de prompter jag definierade. För hela design & promptflödet – kolla in appen i Figma Make

2. Klistra in prompt i Figma Make

Dags att klistra in mina prompter/guidelines – upp till bevis för att se om dem var tillräckligt tydliga för AI:n att förstå!

Första utkastet

Funktionsmässigt blev resultatet bra. Designmässigt var det många detaljer som inte kändes helt färdiga; färger, kontraster, states på knappar, typografi, spacings osv.

Som ett första designutkast att vidareutveckla på kändes förslaget helt okej.

3. UI & UX justeringar i Figma Design

Bästa med Figma Make är att man kan kopiera in designen man fått, direkt in till vanliga Figma Design.

Justeringar jag gjorde:

Tog bort många onödiga element, för ett renare intryck och bättre UI/UX.
Förfinade layout, typografi, kontraster och spacing.
Förbättrade tillgänglighet och visuell hierarki.
Bytte ut emojiflaggorna till svg-ikoner.
Skapade knappkomponenter med states.

Before: Made by AI
After: Made by Human UI/UX-designer

Skapade knappkomponenter med tydliga states för en bättre UI/UX.

Före & Efter visar en förbättrad UX och tillgänglighetsanpassning.

SEO tweaks

Innan jag pushade upp koden till GitHub promptade jag "Add page title and meta description". Lätt att man missar sin SEO och det vill man inte!

4. Pusha upp till GitHub

Så! Då var det bara att pusha upp, vilket man gör i Figma Make genom att skapa en ny repository. Trodde först att man skulle skapa upp den själv i GitHub för att sedan koppla ihop dem. Men Figma Make gör allt det där åt dig 👌🏼.

5. Publicera på min webbsida

Figma Make använder sig av Vite, så det var enkelt att bygga allt i terminalen för att få in koden lokalt och sedan deploya på min sajt.

Sammanfattning

Projektet visar hur man med hjälp av AI kan snabba på processen från idé till prototyp, samtidigt som UX-kompetens behövs för att lyfta användarupplevelsen.

För & nackdelar:

Plus för att det gick snabbt! Tog mig kanske en halv dag att bygga allt totalt.
Perfekt sätt att påbörja en ide att bygga vidare på.
Tyvärr har Figma Make enbart "one-way push" (ej push & pull)*.

Buggar?

Bad min testgrupp (utvecklingskollegor) spela mitt quiz där ALLA klarade det på första försöket!? Det visade sig att Microsoft valt att inte inkludera flagg-emojis i Windows system font, så istället för flaggor visades ISO-landskoderna som text istället 😅:

Flagg-emojis är inte Windows-kompatibla 😬

Jag som tänkte att det var smidigt och inte lika kodkrävande att använda emojis istället för ikoner fick snabbt tänka om. Så jag bad Figma Make lösa det, som hämtade in ett react-world-flags npm package.

Slutresultatet med svg–flagikoner

Kanske är en ny prompt att fundera på "Test this app on Microsoft/Windows" 🤓.

Nyfiken på quizet?

Good luck! 🚩