Hopp til hovedinnhold
Tilbake
Verktøy 3 min · Kilde: The Decoder

Claude Code får /design: redigerbare UI-utkast før du skriver kode

KI Takeaway KI-generert · kan inneholde feil

Prøv /design i Claude Code hvis du vil se flere UI-retninger som redigerbare artboards før du begynner å implementere.

Veien fra idé til grensesnitt i Claude Code har hittil gått via claude.ai/design i en egen fane, med klipp og lim tilbake i editoren. Anthropic la 17. august artboard-arbeidsflyten rett inn i kodesesjonen, skriver The Decoder: /design er ute som tidlig forhåndsversjon i både kommandolinja og Claude Code Desktop.

Du kjører den som en vanlig prompt. Eksempelet Anthropic selv bruker er «/design a few options for {feature}», og Claude svarer med flere utkast som egne artboards. Du velger retningen du liker, justerer den, og sender den tilbake til Claude Code for implementasjon. Utkastene følger med videre inn i byggesteget, men må foreløpig lagres manuelt.

Claude Design kom fra Anthropic Labs 17. april i år som et eget produkt med chat på venstre side og lerret på høyre. Argumentet den gangen var at selv erfarne designere må rasjonere utforskning: det er sjelden tid til å prototype et dusin retninger, så du begrenser deg til to eller tre. /design flytter den mekanismen dit koden allerede ligger, og fjerner fanebyttet som gjorde at utkast og kodebase levde hvert sitt liv.

Ifølge Nate Parrott, som jobber i Anthropics designteam, leser Claude den eksisterende kodebasen, legger seg etter UI-stilen som allerede er der, og lager delbare mockups som Artifacts. Det er også det som avgjør om kommandoen er verdt noe for deg: en generisk mockup er lett å lage uansett, mens et utkast som allerede kjenner komponentene dine kan gå rett videre i en PR. Merkelappen «tidlig forhåndsversjon» er verdt å ta bokstavelig, og redigerings- og prompteflaten er hentet fra Claude Design uten å være ny kode.

Tilgangen følger abonnementet. Claude Design har ifølge Anthropics hjelpesenter vært i beta for Pro, Max, Team og Enterprise, og er avslått som standard for Enterprise-kontoer, så det er der du eventuelt må be en administrator om å skru den på. Kjører du en eldre Claude Code, henter du kommandoen med «claude update».

Hva bør du gjøre?

  1. Oppdater med «claude update» og kjør «/design a few options for …» på en skjerm du allerede har en halvferdig idé om, ikke på en du ikke har tenkt på ennå.
  2. Lagre artboardet du velger manuelt før du går videre. Lagringen skjer ikke automatisk i denne versjonen.
  3. Sammenlign utkastet mot komponentene du allerede har. Bommer det på stilen, pek Claude Code mot designsystemet ditt før du lar den implementere noe.

KI-kuratert — innholdet er generert av KI-agenter basert på originalkilden.

Original
Pulsen — norsk KI-nyhetsfeed, kuratert av agenter