Från idé till webbplats: AI-kodning för nybörjare

1 Installera OpenCode (skrivbordsapp)

Vi använder OpenCode — en AI-kodningsagent med öppen källkod som fungerar i terminalen, som skrivbordsapp och som IDE-tillägg. För den här workshopen, installera skrivbordsappen (beta).

macOS

1. Öppna opencode.ai/download
2. Ladda ner versionen för din processor (Apple Silicon eller Intel)
3. Öppna installationsprogrammet och dra OpenCode till Program
4. Tillåt appen vid första start om macOS frågar

Windows

1. På nedladdningssidan, välj Windows (x64)
2. Kör installationsprogrammet och slutför installationen
3. Starta OpenCode från Start-menyn

Linux

1. Ladda ner .deb eller .rpm från nedladdningssidan
2. Installera med pakethanteraren och öppna sedan OpenCode

Valfritt: OpenCode finns också som terminalapp (curl -fsSL https://opencode.ai/install | bash). Skrivbordsappen räcker för idag.

2 Skaffa en Neuralwatt API-nyckel

Neuralwatt Cloud tillhandahåller ett OpenAI-kompatibelt API för kodningsmodeller. Registreringen är gratis — nya konton får $5 i testkredit, giltig i 30 dagar.

Skapa din API-nyckel

1. Gå till portal.neuralwatt.com/auth/register och skapa ditt konto
2. Logga in i portalen och öppna Dashboard → API Keys

3. Klicka på Create Key, ge den ett namn (t.ex. workshop)

4. Kopiera nyckeln och förvara den på ett säkert ställe — du ser inte hela nyckeln igen

Håll din nyckel privat. Klistra inte in den i chatt, presentationer eller GitHub. Behandla den som ett lösenord.

3 Koppla OpenCode till Neuralwatt

När OpenCode är installerat och du har din Neuralwatt API-nyckel, koppla ihop dem i skrivbordsappen — inga konfigurationsfiler eller miljövariabler behövs.

I OpenCode Desktop

1. Öppna OpenCode och klicka på inställningar-ikonen (kugghjul) i sidofältet
2. Under Server, klicka på Providers
3. Sök efter Neuralwatt och klicka på + bredvid det
4. Klistra in din API-nyckel och klicka på Continue
5. Klicka på modellnamnet under chattrutan (bredvid Build), sök under Neuralwatt och välj Kimi K2.6 — den modellen använder vi i dagens workshop

Använd Kimi K2.6 för alla övningar idag så att alla har samma uppsättning. Du kan prova andra Neuralwatt-modeller senare i modellväljaren.

Mer information: Neuralwatt × OpenCode-guide och OpenCodes leverantörsdokumentation.

4 Skapa ett GitHub-konto

GitHub är där vi sparar webbplatsen du bygger idag. Ett gratis konto räcker — under workshopen laddar vi upp ditt projekt dit så att du kan behålla det och dela det.

Registrera dig

1. Gå till github.com/signup
2. Ange din e-post, skapa ett lösenord och välj ett användarnamn (det blir en del av din offentliga profil-URL)

3. Lös verifieringspusslet eller ange koden som GitHub skickar till din e-post
4. Svara på de korta introduktionsfrågorna (valfria steg som att välja plan kan hoppas över — den gratis nivån räcker)
5. Verifiera din e-postadress om GitHub ber dig bekräfta från inkorgen

Har du redan ett konto? Logga in på github.com/login och se till att du kan ditt användarnamn och lösenord (eller hur du loggar in med Google/Apple).

5 Skapa ett Vercel-konto

Vercel publicerar din webbplats på internet och ger dig en delbar länk (t.ex. din-webbplats.vercel.app). Den gratis Hobby-planen räcker för dagens ensideswebbplats.

Registrera dig (rekommenderat: använd GitHub)

1. Gå till vercel.com/signup
2. Klicka på Continue with GitHub — det är enklast eftersom du redan skapade ett GitHub-konto i avsnitt 4

3. Godkänn Vercel när GitHub frågar (Vercel behöver tillåtelse att läsa dina repos och distribuera från dem)
4. Slutför Vercels korta introduktion (teamnamnet kan vara ditt namn; gratisplanen är vald som standard)
5. Du bör hamna på Vercels Dashboard — du är redo; vi distribuerar din webbplats tillsammans under workshopen

Klistra inte in hemligheter. Din Neuralwatt API-nyckel stannar bara i OpenCode — committa aldrig API-nycklar till GitHub eller lägg dem i dina webbplatsfiler.

6 Skriva prompts

AI:n fungerar bäst när du skriver som om du briefar en hjälpsam kollega: tydligt mål, tillräckligt med kontext och en begäran i taget.

Svag: "Gör min webbplats bättre."
Stark: "Förbättra hero-sektionen i index.html: större rubrik, mer mellanrum, behåll min befintliga text, mobilvänlig."

Tips: För större funktioner, byt till Plan mode (Tab-tangenten), granska planen, byt tillbaka till Build-läge och säg "Kör på.". Du behåller kontrollen — läs svaret, testa i webbläsaren och skicka nästa prompt.

7 Exempelprompts

Välj ett spår nedan. Kopiera varje prompt till OpenCode i ordning. Ersätt allt i [hakparenteser] med dina egna uppgifter innan du skickar.

Skapa en ensides portfolio-webbplats i en fil: index.html.

Använd bara HTML och CSS (inga ramverk). Inkludera dessa sektioner:
- Hero med mitt namn [Ditt namn], en kort tagline [t.ex. "Aspirerande webbutvecklare"] och en vänlig bildplatshållare
- Om mig (3–4 meningar med denna info: [klistra in en kort bio])
- Färdigheter (6–8 färdigheter som taggar eller en enkel lista: [t.ex. kommunikation, kundservice, Canva])
- Projekt (2–3 projektkort med titel, enmeningsbeskrivning och en "Visa"-länkplats)
- Kontakt (e-post [din@email.com] och länkar till [LinkedIn / GitHub / valfritt])

Stil: ren, modern, mycket vitt utrymme, läsbara typsnitt, mobilvänlig. Använd en lugn färgpalett med en accentfärg.

Uppdatera index.html med mitt riktiga innehåll:
- Namn: [Ditt namn]
- Tagline: [Din tagline]
- Om mig: [Din biografiparagraf]
- Färdigheter: [lista dina färdigheter]
- Projekt: [Projekt 1 titel + beskrivning], [Projekt 2 titel + beskrivning]
- Kontakt-e-post: [din@email.com]

Behåll samma layout. Förbättra typografin så att rubriker sticker ut och brödtexten är lättläst.

Förbättra den visuella designen av index.html utan att ändra min text:
- Lägg till subtila hover-effekter på knappar och projektkort
- Använd ett konsekvent avståndssystem (padding/margins)
- Lägg till en enkel navigeringsfält högst upp som länkar till varje sektion (Om mig, Färdigheter, Projekt, Kontakt)
- Gör hero-sektionen välkomnande, inte trång

Visa mig vad du ändrade på enkelt språk.

Gör index.html snygg på telefoner:
- Stapla sektioner vertikalt med bekvämt avstånd
- Se till att texten är minst 16px på mobil
- Gör tryckytor (länkar, knappar) lätta att trycka på
- Testa att inget flödar över horisontellt

Förklara all CSS du lade till för mobil.

Sektionen [sektionsnamn] ser inte rätt ut på min skärm. [Beskriv vad du ser, t.ex. "texten är för liten" eller "korten överlappar"].

Gör den minsta ändringen som behövs för att fixa det. Skriv inte om hela sidan.

Skapa en ensides restaurangwebbplats i en fil: index.html.

Använd bara HTML och CSS (inga ramverk). Restauranguppgifter:
- Namn: [Restaurangnamn]
- Tagline: [t.ex. "Färsk pasta och vedugnsbakad pizza i centrum"]
- Kökstyp: [t.ex. italienskt, café]
- Adress: [gata, stad]
- Telefon: [telefonnummer]
- Öppettider: [t.ex. mån–lör 11–21, sön 12–20]

Inkludera dessa sektioner:
1. Hero med restaurangnamn, tagline och två knappar: "Se meny" och "Ring / Boka"
2. Om oss (varma 2–3 meningar om restaurangen)
3. Menyhöjdpunkter (4–6 populära rätter med korta beskrivningar och priser i [valuta])
4. Öppettider och plats (adress, öppettider, inbäddad kartplatshållare eller "Hitta hit"-länk till Google Maps)
5. Kontakt och sociala medier (telefon, e-post valfritt, Instagram/Facebook-platshållare)

Stil: aptitlig och pålitlig — bra matfotoplatshållare, tydlig typografi, fungerar på mobil.

Uppdatera index.html med vår faktiska information:

Restaurang: [Restaurangnamn]
Om oss: [2–3 meningar om er historia, kock eller specialitet]

Menyrätter (använd dessa exakt):
1. [Rätt] — [pris] — [enradig beskrivning]
2. [Rätt] — [pris] — [beskrivning]
3. [Rätt] — [pris] — [beskrivning]
4. [Rätt] — [pris] — [beskrivning]
5. [Rätt] — [pris] — [beskrivning]
6. [Rätt] — [pris] — [beskrivning]

Öppettider: [dina öppettider]
Adress: [fullständig adress]
Telefon: [telefon]
Bokningsnotering: [t.ex. "Drop-in välkommet" eller "Boka per telefon"]

Behåll en sida. Gör priserna lätta att skanna.

Förbättra index.html så att kunder vet vad de ska göra härnäst:
- "Se meny" scrollar mjukt till menysektionen
- "Ring / Boka" använder tel:[telefon] så mobilanvändare kan trycka för att ringa
- Lägg till en fast eller övre navigering: Meny, Öppettider, Plats, Kontakt
- Lägg till en kort rad om [leverans / avhämtning / äta på plats, om tillämpligt]

Ändra inte vår menytext. Fokusera på tydlighet och uppmaningar till handling.

Gör restaurangsidan mer premium och lokal:
- Välj en färgpalett som passar [kökstyp] (varma toner för bageri, friska gröna för hälsosamt, etc.)
- Använd högkvalitativa platshållarbilder för hero och 2–3 rätter (placeholder-URL:er fungerar)
- Lägg till en enkel sidfot med upphovsrätt, adress och upprepade öppettider

Behåll allt innehåll i en index.html-fil.

På mobil, [beskriv problemet — t.ex. "menypriserna radbryts dåligt" eller "Ring-knappen är svår att trycka på"].

Fixa bara det problemet i index.html. Visa mig exakt vilken CSS du ändrade.

Lägg till en bild i [sektionsnamn]. Jag använder denna bild-URL: [klistra in länk] eller en platshållare. Håll den responsiv och lägg till alt-text för tillgänglighet.

Förklara index.html på enkelt språk för en nybörjare. Vad gör varje huvudsektion? Vad ska jag redigera om jag vill ändra mitt telefonnummer eller ett menypris?

Ändra bara accentfärgen till [färgnamn eller hex] och huvudrubrikens typsnittsstil. Ändra inte layouten eller skriv om sektioner.

8 Under workshopen

Användbara OpenCode-kommandon

• Settings → Providers — lägg till eller byt AI-leverantör (t.ex. Neuralwatt)
• Model picker (under chattrutan) — ska visa Kimi K2.6 under Neuralwatt idag
• /init — hjälp OpenCode att förstå ditt projekt (kör en gång per mapp)
• /undo — ångra senaste ändringen

Om något går fel

• Autentiseringsfel — öppna Settings → Providers → Neuralwatt och klistra in API-nyckeln igen
• Slut på kredit (Neuralwatt) — kontrollera ditt saldo i portalens instrumentpanel; testkrediten gäller i 30 dagar
• Modellen hittades inte — klicka på modellnamnet under chattrutan, sök Kimi K2.6 under Neuralwatt och välj den i listan (skriv inte modell-ID manuellt)
• Fråga facilitatören — vi finns här för att hjälpa