Hoppa till innehåll
Workshop

AI för designers & icke-utvecklare

Claude Code i praktiken – från idé till prototyp utan att skriva en rad kod själv.

2 mars 2026 Adeprimo
AI Claude Code Design
Se presentation Boka workshop

Agenda

2 timmar – från grunder till praktiska demos

13:00
10 min

Intro & Icebreaker

Vilka är vi? Varför ska designers bry sig om AI? CLI-monstret – var inte rädd för terminalen!

13:10
40 min

Grundläggande

Terminal, Claude Code, IDE, Git, Figma-koppling, Markdown

LLM:erTokensContext EngineeringMCP-servrarSkillsAgenter
13:50
10 min

Paus

Bensträckare, fika & fri diskussion

14:00
50 min

Praktisk Workshop

Live-demos – från voice prompting till att designa i Figma via terminalen.

14:50
10 min

Avslutning & diskussion

Hur kan jag använda det här i min roll? Nästa steg, konton, teaser för "Getting Things Done"-serien.

Arbetsmetod & Pro Tips

Från Claude Code-teamet och Boris Cherney – skaparen av Claude Code

1

Utforska

Förstå kodbasen och problemet

2

Planera

Låt Claude föreslå en plan

3

Implementera

Bygg med Claude Code

4

Committa

Spara och versionera

Boris Cherneys setup

Skaparen av Claude Code kör 5 Claude-instanser parallellt i terminalen, numrerade för enkel navigering. Dessutom 5–10 "bakgrunds-Claudes" på claude.ai. Han alternerar mellan att utforska, planera och implementera.

& – Lämna över lokala sessioner till webben
Använd flera kopior av repos lokalt eller git worktrees för parallellt arbete

Ghostty CLI

Claude Code-teamet gillar Ghostty som terminal. Färgmarkera tabbar för att särskilja olika worktrees.

Röstdiktering (STT)

Du pratar 2–3x snabbare än vad du skriver. Röstdiktering ger bättre promptar och därmed bättre resultat.

Kontext är allt

Rätt kontext är det viktigaste för bra resultat. Desto fullare kontextfönster, desto sämre resultat. Rensa ofta med /clear.

Best Practices – rekommenderad av Claude Code-teamet

Var specifik

  • -Referera filer med @
  • -Ge URL till spec/info du vill ha i ditt kontext
  • -Använd /permissions för att godkänna vanliga domäner och MCP-verktyg

Använd subagenter

Subagenter sparar kontext – de gör saker och rapporterar tillbaka sina findings. Perfekt för att utforska, designa eller analysera utan att fylla kontextfönstret.

Låt Claude se sina resultat

Använd webbläsar-MCP, Skills eller skärmdumpar så att Claude kan granska sitt eget arbete och iterera mot bättre resultat.

Verktyg

Allt du behöver för att komma igång med AI-drivet designarbete

Claude Code

Kärnan

AI-assistent i terminalen. Opus för komplexa uppgifter, Sonnet för snabbhet, Haiku för enkla frågor.

Läs mer

Warp Terminal

Terminal

Modern terminal med inbyggd AI. Gör terminalen mindre skrämmande för nybörjare.

Läs mer

Antigravity / VS Code

IDE

Exempel på en kodredigerare för att se vad Claude gör. Antigravity är en IDE från Google.

Läs mer

Figma MCP

Design

Koppla Claude direkt till Figma via Model Context Protocol. Officiell integration stödd av Figma.

Läs mer

Superpowers

Plugin

Strukturerad metodik: Brainstorm, Plan, Execute, Review. Perfekt för designprocessen.

Läs mer

Git & GitHub

Versioner

Versionshantering – spara, ångra och samarbeta. Claude hanterar git åt dig.

Läs mer

Snabbguide

Fusklappen – ta med dig hem efter workshoppen

Starta Claude Code

claude# Starta i aktuell mapp
claude "Beskriv uppgift"# Starta med ett prompt

Terminal-grunder

pwd# Var är jag?
ls# Vad finns här?
cd mapp-namn# Gå in i en mapp
cd ..# Gå upp en nivå
mkdir ny-mapp# Skapa en ny mapp
open .# Öppna mappen i Finder

Vanliga kommandon

/helpVisa hjälp
/clearRensa konversationen
/initSkapa CLAUDE.md
/modelByt modell
/contextVisa kontextanvändning
/mcpHantera MCP-servrar
/compactKomprimera konversationen
Shift+TabVäxla auto-accept
Shift+Tab x2Plan-läge
EscStoppa Claude
Esc x2Ångra / spola tillbaka

Bra prompts

Prototyp

"Skapa en responsiv landningssida för en kafferosteri med hero, tre USP-kort och en CTA-knapp."

Granskning

"Granska tillgängligheten på denna sida enligt WCAG 2.2 AA. Ge topp 5 problem."

Personas

"Skapa 3 personas för en bokningsapp. Inkludera behov, smärtpunkter och en user journey."

Tips

  • Var specifik – "Blå header, vit bakgrund, grön CTA" istället för "gör en fin sida"
  • Iterera – Säg "ändra knappen till röd" istället för att börja om
  • CLAUDE.md – Skriv dina preferenser, Claude minns dem nästa gång
  • Skills – Skapa egna /kommandon för uppgifter du gör ofta

Boka workshop

Claude Code i praktiken – från idé till prototyp utan att skriva en rad kod själv.

Boka workshop