Tillbaka

christofferwestrin.com

Ett experiment i vibe coding med Claude Code

Bakgrund

Den här webbplatsen började som ett experiment: går det att bygga en komplett, produktionsklar sajt enbart genom att beskriva vad man vill ha? Utan att skriva en enda rad kod manuellt?

Svaret visade sig vara ja. Hela sajten – från komponentarkitektur och styling till sökfunktion, utskriftsmodal och deploy-pipeline – är byggd genom konversationer med Claude Code.

Hur det fungerar

Claude Code är ett CLI-verktyg från Anthropic som ger en AI-agent direkt tillgång till kodbasen. Jag beskriver vad jag vill uppnå – "lägg till en sökfunktion med Cmd+K", "skapa en utskriftsmodal med rollval" – och Claude skriver koden, redigerar filer och kör bygget för att verifiera.

Min roll har varit att ge riktning, ta designbeslut och iterera på resultatet. Processen liknar mer att vara produktägare eller art director än utvecklare.

Teknikstack

FrameworkNext.js 15
SpråkTypeScript
StylingCSS Modules
HostingNetlify
AIClaude API
UtvecklingClaude Code

Funktioner

  • Tvåspråkigt stöd (svenska/engelska) med React Context
  • Spotlight-sök (Cmd+K) som söker i roller, projekt, utbildning och kompetenser
  • Utskriftsmodal med rollval, kompetensfiltrering och live-förhandsvisning
  • Kompetensfilter som visar rollspecifika texter per kompetensområde
  • Responsiv design
  • Statisk export för snabb laddning utan server
  • AI-chatbot som kan svara på frågor om CV:t i realtid

AI-chatbot

Sajten har en inbyggd chatbot som besökare kan använda för att ställa frågor om mitt CV – erfarenheter, kompetenser, utbildning och bakgrund. Den drivs av Claudes API via en serverless function på Netlify och svarar i realtid med streaming.

Chatboten är tvåspråkig och anpassar sig efter sajtens språkval. Den är byggd med fokus på tillgänglighet och fungerar på både desktop och mobil. All konversationsdata lever enbart i besökarens webbläsare – ingenting lagras på servern.

Reflektioner

Det mest överraskande var hur naturligt det kändes att iterera på design och funktionalitet genom konversation. Istället för att skriva CSS för hand beskrev jag hur jag ville att det skulle se ut och justerade i dialog. Samtidigt krävdes det en hel del planering och många iterationer innan ett gott resultat uppnåddes – AI är ett kraftfullt verktyg, men inte självkörande. Resultatet blev en sajt som jag inte hade byggt lika snabbt – eller kanske alls – på traditionellt vis.