Använda AI för att skapa en första prototyp

Innan du börjar

Den första prompten är inte "bygg en app".

Det mest värdefulla greppet i hela arbetsflödet är också det enklaste — och det som oftast missas: börja inte med att be om en lösning. Börja med att be om att förstå området.

Claude är inte i första hand en byggare. Den är en partner i förståelse. Bygget kommer som en naturlig konsekvens när du och Claude har kartlagt vad som faktiskt ska byggas — vem det är för, vilka regler som gäller, vilka konkreta steg som finns.

Den centrala insikten

Zooma ut först, sedan in.

Förstå domänen brett. Sedan välj en specifik användare och deras vardag. Sedan välj ett konkret moment. Sedan bygg. Det är en zooming-process som tar dig från abstrakt fråga till klickbar prototyp utan att fastna i fel detaljer.

Arbetsflödet · Fyra faser

Från idé till klickbar prototyp.

Varje fas har ett tydligt syfte. Du kan gå tillbaka till tidigare faser när som helst — det är så iterationen funkar. Exemplen kommer från en verklig sekvens där en brandskyddskontroll-app togs fram.

Fas 01 · Förstå 01

Utforska domänen.

Be Claude förklara området pedagogiskt och samla underlag från officiella källor. Målet är att du själv förstår vad som finns — inte att Claude bygger något än. Resultatet är ofta en första pedagogisk prototyp som visualiserar processen eller området.

Vad du gör

Ställer en öppen fråga om området
Ber om officiella källor och referenser
Ber om en pedagogisk översikt
Frågar uppföljande om de delar som är oklara

Vad du får

Förståelse för regler, lagar och roller
Inblick i processens steg och ansvarsfördelning
En pedagogisk HTML-prototyp som översikt
Referenser du kan verifiera själv

Exempelprompt

"Hur ser processen för brandskyddskontroll ut? Läs in dig på området och analysera det samt förklara det pedagogiskt för mig samt skapa en HTML-prototyp som beskriver processen steg för steg."

Fas 02 · Fördjupa 02

Zooma in på kärnan.

När du sett helheten — välj ut den del som är mest central för det du vill bygga. Be Claude gå djupare i den specifika delen och hämta exakt vad lagen, föreskriften eller standarden säger. Detta är grunden för att din senare prototyp ska vara korrekt, inte bara snygg.

Vad du gör

Identifierar den del som är mest värdefull att bygga kring
Ber om originalkällan, inte sammanfattningar
Begär en konkret, fullständig lista
Validerar mot annan källa om möjligt

Vad du får

En komplett, faktagrundad checklista
Direkt hänvisning till lagrum eller paragraf
Förståelse för vad som är "krav" vs "vägledning"
Underlag som kan bli appens innehåll

Exempelprompt

"Kan du analysera om du kan hitta alla kontrollpunkter som man tittar på vid en besiktning?"

Fas 03 · Pivotera 03

Byt perspektiv till en verklig användare.

Nu växlar du från pedagogisk översikt till användargränssnitt. Samma data, helt annan estetik och interaktion. Beskriv vem användaren är, var hen befinner sig och vad hen försöker göra — Claude förstår att det krävs en annan slags prototyp och bygger den.

Vad du gör

Beskriver användaren konkret (roll, kontext)
Specificerar enheten och miljön
Anger viktiga interaktionsbehov
Ber om mock-data för realism

Vad du får

En annorlunda visuell stil som passar uppgiften
Funktionella element (status, dokumentation, hjälp)
Realistisk mock-data ifyllt i exemplet
Klickbar prototyp med riktig interaktion

Exempelprompt

"Bygg en enkel webbapp-prototyp i HTML, som visar hur det skulle kunna se ut för en kontrollant på fält som genomför en besiktning, där kontrollanten ska kunna löpande checka i kontrollpunkter, dokumentera avvikelser m.m. — och få aktivt stöd vid tolkning av punkter genom att kunna klicka fram lagstödsbeskrivningar."

Fas 04 · Översätt 04

Förbered för riktig utveckling.

Här ligger ett vägskäl. Vill du fortsätta på Nivå 01 och bygga prototypen vidare i Lovable till en klickbar driftsatt version — eller kliva upp till Nivå 02 och utveckla den som riktig applikation med Claude Code mot kommunens testbädd? Be Claude översätta din prototyp till det underlag som spåret kräver.

Spår A · Nivå 01

Bygg vidare i Lovable

Stannar kvar på Nivå 01 — en klickbar version i en miljö som hostar appen åt dig, utan egen utvecklingsmiljö. Be Claude paketera prototypen som en rik Lovable-prompt med tydliga delar för funktion, design, datamodell och flöden.

Exempelprompt

"Skapa en optimerad Lovable-prompt som beskriver denna app i sin helhet — funktioner, sidor, användarroller, designspråk och datamodell. Inkludera tydlig mock-data så att jag kan klistra in prompten i Lovable och få en körande första version."

Spår B · Nivå 02

Utveckla med Claude Code

Kliver upp till Nivå 02 — en riktig applikation med egen teknikstack, körande i Docker och deploy till kommunens testbädd via Dokploy. Be Claude bygga en fasstrukturerad utvecklingsplan som du kan mata in i Claude Code som första prompt.

Exempelprompt

"Gör en plan för mig att bygga detta med Claude Code, jag vill använda shadcn som UI och Python-backend. Ska deploya den med Docker via Dokploy och domänen raddning.sundsvall.dev. Skapa markdown-plan för direktinput till Claude."

Vad gör en bra prompt

Sex principer för att komma framåt.

Destillerat från typiska arbetsflöden — det här är vad som skiljer en prompt som ger ett vagt svar från en som ger ett användbart resultat.

01

Börja med förstå, inte bygg

De flesta hoppar direkt till "skapa en app som...". Bättre: "förklara området pedagogiskt". När du själv förstår blir nästa prompt mycket mer riktad.

02

Be om källor

Säg uttryckligen att Claude ska hämta info från officiella källor (lag, föreskrift, myndighet). Be om referens till exakt vilken paragraf eller dokument informationen kommer från.

03

Var konkret om användaren

"Bygg en app för brandskyddskontroll" är otydligt. "Bygg en app för en kontrollant på fält på en pekplatta" är konkret. Roll + kontext + enhet = användbart.

04

Iterera i små steg

Begär en sak i taget. "Lägg till en accordion för checklistan", "Öppna första kategorin som standard", "Lägg till en lagstödspanel". Inte allt på en gång.

05

Be om mock-data

En prototyp med "Storgatan 12, Sundsvall, braskamin" i exemplet känns levande. En tom skiss känns abstrakt. Mock-data gör prototypen begriplig.

06

Stanna upp och visa

Visa prototypen för en kollega eller faktisk användare innan du går vidare till nästa fas. Feedback från en riktig människa är värdefullare än ytterligare en AI-iteration.

Nästa steg · När prototypen är klar

Två vägar framåt.

När prototypen visar rätt riktning väljer du verktyg utifrån mål. Claude Code passar när du själv (eller en utvecklare) vill bygga något flexibelt med egen kod. Lovable passar när du snabbt vill ha en klickbar fungerande version utan att skriva kod.

Egen utveckling

Claude Code

Bygg en riktig applikation med valfri teknikstack — egen frontend, egen backend, deploy till kommunens testbädd. Kräver Windows + WSL eller motsvarande miljö.

FormMarkdown-plan

StackValfri

DeployDokploy / GitHub

Sätt upp Claude Code Klickbar färdig version

Lovable

En enda rik prompt → fungerande webbapp med inloggning, databas och hosting. Bra för medborgartjänster och interna verktyg utan egen utvecklingsmiljö.

FormLovable-prompt

StackReact + Supabase

DeployInbyggt

Öppna Lovable