Topp 3 AI-verktyg för en UX/UI-designer

Tre användabara AI-verktyg: Figma & Figma Make, Claude Code & Google Stitch

Utforska de bästa AI-verktygen just nu!

I mitt tidigare blogginlägg har ni kunnat läsa om hur jag först testade Figma Make för vibe-kodning.

Ungefär samtidigt lanserade Claude Code sin Code to Canvas-funktion och efter det har jag nästan uteslutande använt Claude i mitt jobb som UX/UI-lead.

Jag använder Claude lite som min "UX/UI-assistent" för att ge feedback på olika typer av design, definiera hypoteser för AB-tester och till och med skapa komponenter direkt i Figma (via Figma MCP-servern)!

För bara några veckor sedan lanserades Google Stitch som öppen beta och den har jag använt minst, men den är inte mindre imponerande för det.

Så vilken av dessa ska man använda som UX/UI-designer? Det beror lite på! 😉

För nybörjaren - Google Stitch

Med prompten “create a retro styled dashboard” fick jag denna tydliga färgpalett med matchande typsnitt med font-storlekar och states på knappkomponenter!

• För dig som snabbt behöver skapa en proof of concept är Google Stitch (Gemini) otroligt imponerande och kraftfull. Med ett lekfullt enkelt användargränssnitt kan i princip vem som helst komma igång.
• Här finns också möjligheten att exportera resultatet (med autolayout) direkt till Figma 👌🏼

För designern - Figma Make

Figma Make ger olika designalternativ för en notifikationsbanner, perfekt för dig som redan använder Figma och har ett designsystem.

• För dig som redan använder Figma och snabbt behöver skapa interaktiva designprototyper. Har du publicerat ditt design-bibliotek kan du lägga till den i Figma Make så att Figma använder sig av dina komponenter, variabler och tokens.
• En begränsning är dock att koden genereras i React och Tailwind. Om du använder en annan tech-stack kommer du behöva anpassa koden.

För tech-savvy designers - Claude & Claude Code

Claude Code finns som en desktop-app, men installationen av MCP-servern behövde göras i terminalen.

• För dig som redan har ett designsystem och vill börja vibe koda, med figma MCP-server blir flödet mellan design och utveckling seamless. Använder man "plan mode" kan Claude ställa frågor och planera innan hen verkställer, vilket ger dig möjlighet att välja mellan React eller good old vanilla JS för kodgenerering.

• Med Claude kan man desutom skapa “Skills”, som fungerar som guidelines för dina prompts. Tips är att skapa flera mindre skills än en stor. Claude har även en skill-generator som hjälper dig att definiera och strukturera effektiva skills. Med skills får Claude bättre kontext, vilket resulterar i bättre resultat utan att förbruka för många tokens – en win-win helt enkelt!

Så vart ska man börja?

Där du är mest bekväm! I början kommer man göra fel, eller snarare inte göra helt rätt, men då lär man sig vilka begrännsningar och möjligheter som finns med dem olika verktygen och modellerna.