Vift People

Skærmbillede til kode: Prompt til UI-prototyping [AI]

Af Mikkel Vivelsted · Se profil

Tag et skærmbillede af en hjemmeside, en skitse på papir eller et Figma-design – og få færdig, kørende HTML-kode retur. Prompten sørger for, at AI'en spørger, før den gætter, så du ikke sidder med et layout, der næsten passer.

Uploader man et skærmbillede med teksten "byg denne side", gætter AI'en løs på alt det, den ikke kan se: hvad sker der ved klik, hvordan ser det ud på mobil, hvad er den rigtige farve. Resultatet ligner billedet, men opfører sig forkert. Man skal tvinge AI'en til at læse designet systematisk og markere sine antagelser i stedet for at skjule dem i koden.

Kode & udviklingChatGPTClaudeGeminiUdgivet 14. juli 2026
Jeg stiller 6 korte spørgsmål — så er prompten din.

Prompten

5 af 6 klar5 af 6 klar
Du er en erfaren frontend-udvikler med skarpt blik for design. Du er ekspert i at læse et design eller et skærmbillede og oversætte det til ren, semantisk og responsiv kode. Du gætter ikke i stilhed: Er noget uklart i designet, siger du det højt i stedet for at opfinde en løsning, der ser rigtig ud, men opfører sig forkert.

Din opgave: Byg designet på det vedhæftede billede som fungerende kode.

Mine oplysninger:
- Billedet: 
- Hvad det er: 
- Teknologi: 
- Formål: 
- Skal det virke på mobil? 
- Særlige krav: 

Arbejd i denne rækkefølge:

1. LÆS DESIGNET HØJT: Beskriv først, hvad du ser, opdelt i sektioner oppefra og ned (f.eks. header, hero, kortsektion, footer). Nævn for hver sektion: layout (kolonner/rækker), de vigtigste elementer og hvordan de er justeret. Dette skal jeg kunne læse og rette i, FØR du koder.

2. DINE ANTAGELSER: List alt det, du ikke kan se i billedet, men er nødt til at beslutte for at kunne kode. F.eks.: skrifttype, præcise farvekoder, afstande, hvad knapperne gør, hvad der sker ved hover, hvordan layoutet bryder på mobil. Markér hver antagelse tydeligt – og spørg mig, hvis nogen af dem er afgørende for resultatet.

3. KODEN: Byg derefter designet. Krav til koden:
- Semantisk HTML (brug header, nav, main, section, footer – ikke div til alt)
- Ét samlet, kørende dokument, jeg kan gemme og åbne direkte i browseren
- Responsivt, hvis jeg har bedt om det – brug flexbox/grid, ikke faste pixelbredder
- Tilgængelighed: alt-tekster på billeder, tilstrækkelig farvekontrast, fokus-markering på klikbare elementer
- Kommentarer i koden ved hver hovedsektion, så jeg kan finde rundt i den

4. DET, DER MANGLER: Til sidst en kort liste over det, jeg selv skal tilføje (rigtige billeder, tekster, links, backend) for at siden er færdig.

Regler:
- Opfind aldrig indhold, der ikke findes i billedet – brug placeholder-tekst og markér det tydeligt.
- Kan du ikke aflæse en farve præcist, så vælg den nærmeste og skriv det i antagelserne.
- Skriv koden, så et menneske kan læse den. Ingen minificering, ingen kryptiske klassenavne.

—
Prompt af Mikkel Vivelsted · https://viftpeople.com/people/mikkel-vivelsted-a18f31

Flere prompts fra Mikkel Vivelsted

Gå ikke glip af de bedste danske AI-prompts — som foretrukken kilde prioriterer Google vores indhold til dig, også i AI-svarene.

Gør Vift People til din foretrukne kilde på Google

Åbner Googles egne indstillinger i et nyt faneblad — ét flueben, så er du med.

Sider som denne bliver fundet, fordi nogen søger. DU kan blive fundet på præcis samme måde.

Vi bygger Vift People, fordi det du er god til, fortjener at kunne findes — ikke at drukne i feeds og støj.

Hvad er du bedre til end de fleste?

Det du skriver her, bliver det første kort på din side — du skal kun bruge navn og mail, og det tager to minutter. Og Vift People er nyt: de første med er også de første, der bliver fundet.

Sådan brugte Mikkel den selv

Sådan udfyldte Mikkel felterne

  • [Billedet]: Skærmbillede af en landingsside med en mørkeblå header, en hero-sektion med overskrift og en gul knap, tre feature-kort side om side og en simpel footer

  • [Hvad det er]: Skærmbillede af en konkurrents landingsside, som chefen gerne vil have noget lignende af

  • [Teknologi]: Ren HTML og CSS – ingen frameworks

  • [Formål]: Hurtig prototype til et møde i morgen formiddag

  • [Responsivt?]: Ja – responsivt

  • [Særlige krav]: Brug vores egen primærfarve #1B3A6B i stedet for deres blå. Ingen eksterne biblioteker

Det svarede AI'en

1. LÆS DESIGNET HØJT

Header (øverst, fuld bredde): Mørkeblå baggrund, ca. 70 px høj. Logo til venstre, vandret navigation med 4 links til højre. Alt lodret centreret.

Hero (under header): To kolonner. Venstre kolonne (ca. 55 % bredde): stor overskrift på to linjer, en kortere brødtekst på 2-3 linjer og en gul knap nedenunder. Højre kolonne (ca. 45 %): ét stort billede med afrundede hjørner.

Kortsektion: Lys grå baggrund. En centreret sektionsoverskrift, derunder tre lige brede kort side om side. Hvert kort: et ikon øverst, en kort titel og tre linjers tekst. Hvide kort med let skygge.

Footer: Mørkeblå igen. Tre kolonner med links, og nederst en centreret linje med copyright.

2. DINE ANTAGELSER

  • Skrifttype: Jeg kan ikke aflæse den præcist – jeg bruger systemets sans-serif-stak (Inter/Helvetica/Arial). Bed mig ændre den, hvis I har en brand-skrifttype.
  • Farver: Blå erstattet med din #1B3A6B som ønsket. Den gule knap aflæser jeg til ca. #F2B233. Grå sektionsbaggrund til ca. #F5F5F3.
  • Knappen: Jeg ved ikke, hvad den gør – jeg lader den pege på # og markerer det.
  • Hover-effekter: Ikke synlige i et statisk billede. Jeg tilføjer diskrete standardeffekter (knappen mørkner en anelse, links understreges).
  • Mobil-layout: Ikke vist i billedet. Jeg lader hero-kolonnerne stables under 768 px (tekst øverst, billede nederst), og kortene stables til én kolonne under 640 px. Sig til, hvis I vil have en anden rækkefølge – det er den eneste antagelse, der reelt kan give jer en overraskelse på mødet.
  • Ikonerne i kortene: Ikke aflæselige. Jeg bruger simple pladsholder-figurer, du kan udskifte.

3. KODEN

(Her leverer AI'en ét samlet HTML-dokument med indlejret CSS, semantiske tags, kommentarer ved hver sektion, flexbox til headeren, CSS grid til de tre kort og to media queries til mobilvisningen – klar til at gemme som index.html og åbne i browseren.)

4. DET, DER MANGLER

  • Rigtige tekster – al tekst i koden er markeret som [PLACEHOLDER]
  • Jeres logo (jeg har lagt en simpel tekstplaceholder ind)
  • Hero-billedet og de tre ikoner
  • Links til de faktiske sider fra navigation og footer
  • Hvad knappen skal gøre – formular, link, eller noget tredje?

Prompt af Mikkel Vivelsted

Ekspert i AI og Cyber Security

Har du brug for hjælp til mere end prompten kan klare? Mikkel er klar.

Find mig på Vift People