Skapa en sida med tre val, ändra exakt tre synliga delar och kör samma klickprov efter varje ändring. Resultatet är godkänt först när rubriken, accentfärgen och bilden är rätt, alla tre val fortfarande ger rätt svar och den smala vyn saknar överlappning och sidledsrullning.
Vad Canva Code tillför – och vad du fortfarande måste prova
I Canvas officiella presentation av Canva Code 2.0 beskriver företaget ett arbetsflöde där webbplatser, appar och andra interaktiva upplevelser kan skapas och sedan redigeras som Canva-designer. Du kan enligt Canva börja från en prompt, en mall eller importerad HTML. Här använder vi bara prompten. Då går det att se om arbetsflödet fungerar för en person som varken har en befintlig webbsida eller vill röra kod.
Canva uppger också att text kan skrivas om direkt, att färger och typsnitt kan ändras med de vanliga designverktygen och att bilder kan bytas. Det är den intressanta skillnaden mot att beskriva varje liten utseendeändring i en ny prompt. Men ”redigerbar” betyder inte att resultatet är bevisat oförstörbart. En längre rubrik kan skjuta en knapp åt sidan, en bild kan göra ett kort högre och en ny färg kan göra valt läge svårt att se. Därför hör omprovet ihop med själva redigeringen.
Använd bara påhittad text och en bild du får använda. Lägg inte in personuppgifter, inloggning, betalning, kunddata eller externa kopplingar. Provet slutar med ett sparat godkänt eller underkänt resultat i redigeraren. Egen domän, datalagring och publicering ligger utanför uppgiften.
Beställ en sida där rätt svar går att se
Exemplet heter Välj nästa miniprojekt. Det har tre kort – FOTO, QUIZ och KARTA – och bara en central interaktion: när du väljer ett kort ska en sammanfattning visa samma namn. Det räcker för att upptäcka om den visuella redigeringen påverkar funktionen, men är litet nog för att du ska kunna prova allt på några minuter.
Skapa en avgränsad interaktiv sida med rubriken ”Välj nästa miniprojekt”. Under rubriken finns tre kort i denna ordning: FOTO, QUIZ och KARTA. Varje kort har en knapp med texten ”Välj”. Före första valet visar sidan ”Inget valt”. När jag väljer ett kort ska sammanfattningen ändras till ”Ditt val: FOTO”, ”Ditt val: QUIZ” eller ”Ditt val: KARTA”. Det valda kortet ska få ett tydligt markerat läge. Jag ska kunna byta val genom att välja ett annat kort. Använd en bild ovanför korten. Sidan ska fungera utan konto, datalagring eller externa tjänster. I bred vy ligger korten på en rad. I smal vy får de staplas i en kolumn. Ingen text eller knapp får överlappa, och sidan ska inte behöva rullas i sidled.
Prompten beställer det som senare ska mätas: tre namngivna val, fyra exakta svar, ett synligt valt läge och två layouter. Om Canva föreslår fler funktioner, tacka nej i den här omgången. Filtrering, animationer och sparade resultat skulle skapa fler saker att felsöka utan att göra provet tydligare. Det är samma princip som i En sak i taget: varje extra önskemål gör orsak och verkan svårare att se.
Frys en baslinje före den första visuella ändringen
När utkastet ser färdigt ut ska du ännu inte börja försköna det. Kör först den version som Canva Code skapade. Baslinjen behöver bestå av både det du såg och det du gjorde, annars kan du inte avgöra om en senare skillnad är ett fel eller bara ett minne.
Om någon av de fyra punkterna misslyckas är utkastet underkänt redan före redigeringen. Rätta då grundbeställningen och frys en ny baslinje. Annars riskerar du att tillskriva den visuella redigeringen ett fel som fanns från början.
Ändra rubrik, färg och bild – en sak i taget
Canva beskriver både manuell redigering och möjligheten att välja ett särskilt element och be Canva AI ändra det. Använd den väg som visas i din arbetsyta, men välj bara en synlig del åt gången. Gränsen är viktigare än vilket knappnamn som råkar stå i gränssnittet.
#B8322A, endast för valknappar och det markerade kortet. Kör samma fyra funktionslägen igen och kontrollera att texten fortfarande går att läsa.Blir något fel, markera ändringen som underkänd och ångra bara det senaste steget. Kontrollera att föregående godkända läge kommer tillbaka innan du försöker igen. Stapla inte en ny AI-prompt ovanpå ett oklart fel. Då vet du inte om nästa resultat lagade funktionen, dolde felet eller skapade en tredje avvikelse.
Prova samma sak i bred och smal vy
Canva uppger att Canva Code-resultat anpassas automatiskt efter skärmstorleken och att mobilutseendet kan förhandsvisas. Behandla det som produktens avsedda beteende, inte som ett godkännandebevis. Öppna först den breda vyn runt 1280 pixlar och därefter mobilförhandsvisningen eller en vy runt 390 pixlar. Börja om från Inget valt i båda.
Det här är medvetet en enkel mobilkontroll. Den bredare artikeln AI-appar och mobilanpassning går vidare med fler bredder, riktiga enheter och krav på responsiv design. Här behöver du bara avgöra om de tre direkta ändringarna ryms utan att den centrala interaktionen går sönder.
Poängsätt det som prompten faktiskt beställde
Använd tre svar: godkänd, underkänd eller inte körbar. Skriv vad du såg, inte vad verktyget påstod att det gjort. Följande sju rader mäter samma saker som den ursprungliga beställningen och de tre senare ändringarna:
Alla sju rader måste vara godkända. En rad som inte går att köra är inte nästan godkänd; den visar att underlaget saknas. Spara prompten, datumet, de två slutliga skärmbilderna och de sju faktiska resultaten tillsammans. Då går provet att upprepa efter nästa visuella ändring i stället för att börja från minnet.
Klart betyder bevarad funktion, inte bara snyggare design
Ett godkänt resultat visar något smalt men användbart: i just den här syntetiska sidan kunde du byta rubrik, accentfärg och bild och ändå behålla de tre valen vid två bestämda bredder. Det bevisar inte att en större sajt fungerar, att varje Canva Code-design blir mobilvänlig eller att sidan är säker att publicera.
Lägg därför gärna de sju raderna i din provlista. Om du senare ändrar typsnitt, lägger till ett fjärde kort eller skriver en längre knapptext kör du samma B1, B2 och M1 igen. Provlistan är platsen där ett lyckat engångstest blir ett återanvändbart skydd.
Den ursprungliga prompten och baslinjen är sparade. Rubriken, accentfärgen och bilden har ändrats var för sig. Samma FOTO–QUIZ–KARTA-prov har körts efter varje ändring. T1, F1, I1, B1, B2, M1 och A1 är godkända med faktiskt resultat noterat vid ungefär 1280 och 390 pixlar. Inga riktiga uppgifter har använts och sidan har inte publicerats.