Webdesign med AI: Sådan redesignede Grok Bot min webshop i Divi 5

Webdesign med AI er ikke længere noget, du leger med i et sandkassedemo. Jeg har fået Grok Bot til at lave et helt nyt design til min svenske webshop i Divi 5, uden at jeg selv har rørt ved sitet. Her viser jeg, hvordan jeg koblede botten på, hvad den kunne og ikke kunne, og hvorfor du skal tale til den i stedet for at skrive.

Kort fortalt:

• Grok Bot har lavet designet på T-shirten.se, en WooCommerce-shop på Divi 5, ud fra mine instruktioner.
• Botten fik adgang til Divi 5 via det gratis plugin Wiplink, fordi Divis egen MCP-adgang ikke var klar, da jeg optog videoen.
• Rettelser som knapfarver, marginer og runde hjørner klarede jeg med stemmen i pauserne på min træningscykel.
• Kunne botten ikke ændre knapperne i kurven, lavede den et stylesheet (CSS), som jeg bare satte ind.
• Med Superdesign fik jeg to nye mockups af forsiden på få minutter, som jeg nu kan tale mig videre med.

Indhold:

• Hvad er webdesign med AI?
• Sådan lavede Grok Bot designet på forsiden
• Hvordan kobler du en AI på Divi 5?
• Superdesign: to mockups på få minutter
• Hvorfor skal du tale til AI i stedet for at skrive?
• Bliver webdesignere arbejdsløse?
• Ofte stillede spørgsmål om webdesign med AI
• Kom i gang med webdesign med AI

Hvad er webdesign med AI?

Webdesign med AI betyder, at du beskriver, hvad du vil have, og så bygger eller retter en AI selve designet på dit website. Du er stadig art director. AI’en er den, der flytter pixels.

Udgangspunktet er T-shirten.se, den svenske søster til T-shirten.dk. Grok Bot har allerede flyttet knap 580 produkter fra den danske shop, oversat teksterne, lavet interne links og SEO. Det har jeg skrevet om i sådan oversætter du en webshop med AI. Men designet haltede. Så det skulle der gøres noget ved.

Sådan lavede Grok Bot designet på forsiden

Jeg bad Grok Bot om et fornuftigt design, der var responsivt og passede til stilen i produkterne. Den kom selv med layoutet, og jeg har kun bedt om justeringer bagefter.

Forsiden har i dag blandt andet:

• En hero med sloganet fra T-shirten.dk og en vintervinkel med uldstrømper.
• Et afsnit med gode køb og et med kundernes favoritter, hvor der naturligt er masser af t-shirts.
• Ekstra kategorier, som jeg skal udvide løbende.
• Populære produkter lige nu og de seneste indlæg fra bloggen nederst.

Som første udkast er det rigtig godt, og lavet på en brøkdel af min egen tid. Har du ikke mødt botten før, så læs om Grok Bot som AI-medarbejder i webshoppen.

Rettelser med stemmen på træningscyklen

Det sjoveste var rettelserne. Jeg var ikke helt tilfreds med første udkast, så jeg satte mig på træningscyklen til et Zwift-løb og rettede designet i pauserne.

Jeg kørte intervaller på fem minutter med halvandet minuts pause imellem. I pauserne talte jeg til min designbot og fik den til at:

• Rette knapfarven.
• Midterstille knapperne på forsiden.
• Gøre afstanden og marginerne mindre.
• Centrere teksten under kategoribillederne, som før hang venstrestillet.
• Give billeder og knapper runde hjørner.

Det er netop den slags småting, man normalt sidder og nusser med i timevis. Her tog det et par pauser.

Hvordan kobler du en AI på Divi 5?

Det enkleste svar: spørg din AI. Skriv eller sig “Jeg vil gerne lave mit design om på mit website. Her er min URL. Hvordan giver jeg dig adgang?” Så forklarer den dig vejen.

Det gælder, uanset om du bruger Grok Bot, ChatGPT, Claude, Manus eller Perplexity. Forbindelsen sker typisk via MCP. Model Context Protocol beskriver selv MCP som “en USB-C-port til AI-applikationer”, altså et standardstik, så en AI kan arbejde i dine systemer (modelcontextprotocol.io).

Wiplink: genvejen, jeg brugte

Divi 5 var endnu ikke åben for Grok Bot via MCP, da jeg optog videoen. Elegant Themes skriver selv i deres hjælpecenter, at “en fremtidig opdatering vil tilføje MCP-understøttelse til Divi 5” (Elegant Themes).

Så jeg fandt et gratis plugin på WordPress.org, der hedder Wiplink – An MCP and Design System for Divi 5. Det forbinder din AI med dit Divi 5-site, så den kan læse dine farver, skrifttyper og presets og bygge sider i din stil. Hos mig virkede det bare.

En god tommelfingerregel: Lad AI’en arbejde på en kopi eller en side, der ikke er live, når du prøver noget nyt. Så kan du altid rulle tilbage.

Når AI’en ikke kan: bed om CSS

Ikke alt kan ændres via plugin’et. Knapperne i kurven og kassen var standard WooCommerce, lidt gennemsigtige og svære at få øje på. Dem kunne botten ikke rette direkte.

Så jeg spurgte: “Kan du lave et stylesheet til mig, så jeg kan sætte det ind?” Det gjorde den med det samme. Jeg satte koden ind, og nu har knapperne i kurven samme farve og form som resten af shoppen.

Det er en vigtig lære: Når AI’en siger nej, så spørg efter en anden vej. Der er næsten altid en. Tydelige knapper i kurven er i øvrigt ren konverteringsoptimering, og der er flere idéer i mine 12 hurtige A/B-tests til webshops.

Superdesign: to mockups på få minutter

Superdesign er et AI-værktøj, der kun laver design. Det koder ikke din shop, men laver mockups af websites. Da jeg optog videoen, var det gratis at bruge op til en vis grænse.

Jeg gav Grok Bot adgang til Superdesign og bad om to mockups af forsiden, der skulle konvertere godt og afspejle vores brand og farver. Kort efter lå de klar, med logo og svensk tekst:

• Mockup A sætter produkterne først: vinter-hero, en bjælke med fordele (USP’er), anmeldelser, udsalgsvarer, fri fragt og kategorier.
• Mockup B fortæller mere: materialer, pasform og tryghed, pakketilbud, udtalelser, en flottere kategorivisning, 10 % på første køb ved tilmelding til klubben og “magasinet” i stedet for “bloggen”.

Ærligt talt synes jeg, B er federe end det design, der er på sitet i dag.

Tjek altid indholdet i en mockup

En mockup er en dummy. I mockup B var der fx pakker med seks og ni par, som ikke findes i shoppen. Så før noget går live, skal du rette eksempeltekster, tilbud og udtalelser til det, der er ægte. Opfundne anmeldelser og tilbud hører ikke hjemme på en rigtig webshop.

Næste skridt er bare at sige: “Jeg vil arbejde videre med B, og jeg vil gerne have det her og det her med.” Så taler jeg mig frem til det endelige design.

Hvorfor skal du tale til AI i stedet for at skrive?

Fordi du er hurtigere, og du får flere detaljer med. Når du taster, bliver det kort og staccato. Når du taler, kommer det naturlige flow, og AI’en får en meget bedre beskrivelse.

Jeg har siddet ved et tastatur i næsten 40 år. Den vane sidder dybt, ligesom at tage bukser på om morgenen og børste tænder. Derfor føles det fjollet første gang, du taler til din computer. Selv mine drenge synes, det er mærkeligt i starten.

Men når vanen først er brudt, går det stærkt. Det er i virkeligheden det, der adskiller dem, der bruger AI lidt, fra dem, der er virkelig effektive med det.

Bliver webdesignere arbejdsløse?

Nej. Jeg tror, design bliver endnu bedre, fordi grundskabelonen nu tager en brøkdel af tiden. Så er der mere tid til at kæle for detaljerne.

Er du designer, så grib fat i værktøjerne. Du ved, hvornår et design er lækkert, og du kan twiste det på en helt anden måde end en, der ikke har erfaring. AI’en gør dig hurtigere, ikke overflødig.

Skal du redesigne en eksisterende shop, så husk også SEO’en. URL’er, overskrifter og interne links skal med over. Brug min SEO-tjekliste til redesign og platformskifte, før du trykker udgiv.

Ofte stillede spørgsmål om webdesign med AI

Her er korte svar på det, jeg oftest bliver spurgt om, når det gælder webdesign med AI.

Kom i gang med webdesign med AI

Webdesign med AI handler ikke om at lade maskinen bestemme. Det handler om at få grundarbejdet gjort på minutter, så du kan bruge din tid på det, der sælger. Start småt: kobl en AI på en testside, bed om ét design, og ret det med stemmen.

Vil du have hjælp til design, opsætning eller AI i din webshop, så se hvad vi laver med hjemmesider og webshops, eller skriv til The Morning Show.