# AI webbdesign: fem grindar innan kunden ser resultatet URL: https://noonwp.com/sv/journal/ai-webbdesign-fem-grindar Type: blog Locale: sv Published: 2026-11-10 Updated: 2026-11-11 --- > En femstegsmetod för AI webbdesign i WordPress: brief, riktningar, theme.json, native-block och granskning innan kunden ser sidan. AI webbdesign tar fram en trovärdig startsida på ungefär den tid det tar att hälla upp en kopp kaffe. Hastigheten är verklig, och det är också fällan. En genererad sida ser färdig ut långt innan den är det, och de ofärdiga delarna (kontrast, rubrikordning, speglade layouter, disciplin kring designtokens) är just de delar en kund upptäcker tre veckor efter lanseringen. Här är ordningen vi använder för att behålla hastigheten och slippa överraskningarna: fem grindar, i tur och ordning, där varje grind har ett tydligt godkänt eller underkänt. ## Varför ser en genererad sida färdig ut när den inte är det? För att modellen optimerar för det en skärmdump visar. Hero, tre kort med funktioner, en rad med omdömen och en sidfot. Varje del är statistiskt bekant, så hela sidan känns professionell vid första anblicken. Det en skärmdump inte visar är det som avgör om webbplatsen klarar överlämningen till kunden. Ta tillgänglighet. [WebAIM Million 2026-rapporten](https://webaim.org/projects/million/) fann identifierade WCAG 2-fel på 95.9 % av de en miljon största startsidorna, och text med låg kontrast på 83.9 % av dem. En modell tränad på den webben återskapar den webben. Den ger dig en ljusgrå bildtext på krämfärgad bakgrund med full säkerhet. Det andra osynliga problemet är var designbesluten finns. En genererad sida bär ofta sina färger, storlekar och avstånd som bokstavliga värden utspridda i markupen. Byter du varumärkesblått nästa kvartal letar du igenom fyrtio block. Det är en underhållskostnad, och det är frilansaren som betalar den, inte modellen. Så den användbara frågan är inte "kan AI designa den här webbplatsen?" Svaret är att den kan producera ett utkast. Den användbara frågan är i stället: vilka beslut låter jag den fatta, och var kontrollerar jag arbetet? De fem grindarna svarar på det. ## Grind ett: skriv briefen innan du öppnar verktyget De flesta besvikelser med AI-resultat går tillbaka till en prompt på en rad. "En webbplats för ett bageri i Casablanca" ger modellen tillstånd att hitta på allt: målgrupp, ton, sidlista och uppmaningar. Den hittar på det utifrån genomsnittet av alla bagerisajter den har sett. En brief som fungerar får plats på en halv sida. Vem besöker sidan, och vad kom de för att göra under de första tio sekunderna? Vilka tre sidor måste finnas? Vilken enda handling sidan är till för: boka, ringa eller beställa? Två sajter kunden beundrar och en de hatar. Språken, inklusive riktningen. Om sajten ska finnas på arabiska eller hebreiska, säg det nu och inte när layouten redan är godkänd. Den sista punkten väger tyngre än den ser ut. Höger-till-vänster är en layoutegenskap, inte en översättningsuppgift. En modell som inte fått veta något om det producerar en vänsterjusterad design med arabisk text inklistrad. Att skriva ut riktningen i briefen ändrar vilka layouter verktyget föreslår, och det kostar en mening. Hoppa över adjektiven "modern och ren". De bär ingen information. "Tät och redaktionell, som en tidningssida" bär desto mer. ## Grind två: be om riktningar, aldrig om färdiga sidor Det billigaste sättet att använda AI i hela jobbet är utforskning. Be om tre till fem olika riktningar som grova layouter och typografiska par, och välj innan något byggs. Sex skisser tar några minuter. Att bygga om en sida kunden förkastat tar en eftermiddag. ![Flera enkla blyertsskisser av layouter fastnålade på en korkskiva, som jämför designriktningar](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/d70243-i1.webp) Disciplinen är att hålla dem billiga. Låt inte verktyget rendera kompletta sidor med genererade fotografier för varje riktning. Kunder blir förälskade i bilderna och kan sedan inte skilja layouten från bilderna. Grå rutor och riktiga rubriker räcker. Om kunden inte kan välja mellan tre layouter i gråa rutor var briefen problemet, och då har du lärt dig det gratis. Verktygskategorin spelar roll här, och det är värt att vara rak om den. Helsajtsgeneratorer som 10Web bygger en komplett WordPress-sajt från en prompt, en URL eller en Figma-fil, med planer från $10 i månaden vid årsfakturering för en sajt. Hostade byggare som Durable går från några svar till en färdig småföretagssajt på ungefär en halv minut. Båda är utmärkta i grind två och svaga i grind fyra, eftersom de äger designbesluten i stället för att exponera dem. Använd dem för att se alternativen. Var skeptisk mot att använda dem som slutlig build av en sajt du ska underhålla i många år. ## Grind tre: fäst designen i theme.json innan du bygger Det här är grinden de flesta arbetsflöden hoppar över, och den skiljer en sajt du kan underhålla från en sajt du bara kan demonstrera. När en riktning är vald flyttar du dess beslut till tokens och skriver in dem i `theme.json`: färgpaletten, typsnittsfamiljerna och storlekarna, avståndsskalan och innehållsbredden. Från och med nu refererar varje block till en token med sitt slug, aldrig till ett bokstavligt värde. [Referensen för theme.json](https://developer.wordpress.org/themes/global-settings-and-styles/) finns just för det här. Den ger ett block-tema ett enda ställe där paletten och skalorna deklareras, och redigeraren erbjuder dem som kontroller. När varumärkesblått ändras byter du en rad. När en kund öppnar Site Editor väljer hen ur din palett i stället för ett fritt färghjul, vilket tyst förhindrar en hel kategori av ändringar som inte följer varumärket. ![Vifta av dämpade färgprovkort på ett ekbord bredvid en linjal och en blyertspenna](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/17c64c-i2.webp) Här gör AI nytta på ett annat sätt. Ge den den valda riktningen och be om en tokenuppsättning, och kontrollera den mot två regler. Varje text- och bakgrundspar måste nå 4,5:1 för normal text (WCAG AA-gränsen), så räkna ut kvoterna själv i stället för att lita på modellens påstående. Och skalan ska vara liten: fem eller sex avstånds­steg och en typskala med sex storlekar. Modeller älskar att ge dig fjorton nästan identiska gråtoner. Ta bort elva av dem. Ett praktiskt test på om grinden höll: öppna det färdiga temat och sök efter en hexkod i valfri mall. Om du hittar en har ett beslut läckt ut ur systemet. ## Grind fyra: bygg i native-block och håll generatorn utanför loopen Nu bygger du. Strukturen modellen föreslog är oftast värd att behålla: sektionsordning, kolumnlogik och rytmen mellan täta och öppna ytor. Markupen den producerade är oftast inte värd det. Bygg om den godkända strukturen i core-block (Group, Columns, Cover, Query Loop) med dina tokens, och behandla den genererade outputen som en referensskiss, inte som en källfil. Det låter långsammare. Vår erfarenhet är att det går snabbare från och med andra sidan, eftersom native-block ärver tokens, reagerar på Site Editor och beter sig när en kund redigerar dem. Genererad markup som hårdkodar sin styling slåss mot var och en av dessa egenskaper. Sidbyggare ligger i andra änden av samma avvägning. Divi, omgjord till Divi 5 i februari 2026, levererar Divi AI i Pro-nivån för $277 per år, och outputen stannar inom Divis modulsystem. Det är ett legitimt val för en byrå som standardiserat på Divi. Det är dock en annan produkt än ett block-tema, med en annan utträdeskostnad, och den kostnaden bör räknas in i offerten. Där AI-generering fortfarande förtjänar en plats i bygget är i det repetitiva lagret: en variant av en prissektion, platshållartext som liknar den riktiga och alternativa hero-arrangemang som kunden kan jämföra. Behandla varje sådant som ett utkast till mönster som ska städas upp och registreras, aldrig som färdigt arbete. En ärlig begränsning. Om projektet kräver riktig interaktion, till exempel filtrerade arkiv, egen frågelogik eller allt med JavaScript-beteende, bär ingen generator det. En utvecklare skriver den delen, och AI-bidraget stannar vid kanterna. ## Grind fem: granska det en skärmdump inte kan visa Kör samma korta granskning på varje sajt, i samma ordning, så att den blir en vana snarare än ett humör. Först kontrast. Kontrollera de faktiska renderade paren, inklusive text över bilder och tillstånd som hover och inaktiv, som modellen aldrig tänkte på. För det andra rubrikstrukturen: en H1, rubriker som går neråt utan att hoppa över nivåer och ingen rubrik vald enbart för att den är stor. För det tredje tangentbordet: tabba igenom hela sidan och bekräfta att fokus syns och att ordningen följer läsordningen. För det fjärde alt-text på varje bild som bär betydelse, och tom alt-text på de som inte gör det. Den femte kontrollen är den som skiljer noonwp från en generisk checklista: riktningen. Om sajten har en arabisk eller hebreisk version, visa den i höger-till-vänster och leta efter det som inte speglades. Ikoner som pekar åt fel håll, en hero-bild vars huvudmotiv nu hamnar mot texten, padding skriven som `margin-left` i stället för en logisk egenskap som `margin-inline-start`. Det är billigt att laga när du hittar det i den här grinden och pinsamt att hitta det i kundens skärmdump. ![Två laptops bredvid varandra som visar samma abstrakta layout som en jämförelse före och efter](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/6b5736-i3.webp) Spara granskningsbevisen: ett par före och efter per sida, en notering om vad som underkändes och en notering om vad du ändrade. Det gör "AI-assisterad" från ett vagt påstående till en leverans. Det är dessutom stycket i din överlämningsdokumentation som motiverar ditt arvode mot en kund som testade en generator själv förra helgen. ## Hur är det med enprompts-byggarna? De har en plats, och platsen är smal. En enprompts-byggare är ett bra sätt att ta fram en engångsprototyp till en pitch, en landningssida för ett helgevent eller en visuell startpunkt för en kund som inte kan beskriva vad hen vill ha. Framer kombinerar en AI-sajtgenerator med en fri canvas och en gratisnivå, vilket gör den bra för just den sortens snabba, engångsbetonade visuella arbete. Basic-planen börjar på $10 i månaden. Hoppa över dem när sajten ska leva på WordPress, redigeras av en icke-teknisk kund eller betjäna en höger-till-vänster-publik, eftersom du ändå kommer att bygga om outputen i block. Prototypen var värd att ha, men sidan var inte värd att skicka. Att veta vilken av de två du håller i sparar mest tid av allt. ## Vad ska du prova i nästa brief? Ta ett levande projekt och kör bara grind ett och tre. Skriv den halva sidan långa briefen och fäst sedan den valda paletten och skalorna i `theme.json` innan en enda sida finns. Mät tiden och jämför med hur lång tid din senaste sajt tog att nå en stabil design. Om resultatet håller, lägg till de andra tre grindarna en i taget. Vilken grind hade sparat mest smärta på den senaste sajt du levererade? ## FAQ ### Kan AI designa en hel webbplats? AI kan producera ett trovärdigt utkast snabbt, och verktyg som 10Web bygger en komplett WordPress-sajt från en prompt. Det den inte hanterar är kontrast, rubrikstruktur, riktning för höger-till-vänster-språk och underhåll. Det kräver en människa som granskar och fattar besluten. ### Vad är theme.json och varför spelar det roll? theme.json är filen där ett WordPress block-tema deklarerar sin färgpalett, typografi och avståndsskala. Om alla block refererar till dessa tokens i stället för hårdkodade värden ändrar du en rad när varumärket ändras, och kunden väljer ur en godkänd palett i Site Editor. ### Vilka kontroller bör göras innan en AI-genererad sajt lanseras? Kontrollera kontrasten på de faktiska renderade paren, rubrikstrukturen med en H1 och ingen nivåhoppning, tangentbordsnavigering med synligt fokus, alt-text på meningsbärande bilder och, om sajten har en RTL-version, att ikoner och layouter speglas korrekt. ### Är 10Web eller Durable bra för en slutlig sajt? De är bra för att snabbt se alternativ i början av projektet. För en sajt du ska underhålla i många år är de svagare som slutlig build, eftersom de äger designbesluten i stället för att exponera dem som tokens och native-block du själv kontrollerar. ### Hur hanterar AI höger-till-vänster-språk som arabiska och hebreiska? AI hanterar RTL dåligt om den inte uttryckligen får veta det i briefen. Utan den informationen blir resultatet ofta en vänsterjusterad design med arabisk text inklistrad. Använd logiska CSS-egenskaper som margin-inline-start och granska layouten i höger-till-vänster innan leverans.