Kit: bläddra, förhandsvisningar och lägga till en modul

Utforskaren har exakt tre nivåer, och var och en finns i sidans egen adress, inte bara i komponentens tillstånd: kategorirutnätet (/projects/kit eller /projects/<id>/kit), en enskild kategoris lista över moduler (lägg till ?cat=<key>) och en moduls fullständiga detaljsida (lägg till &module=<id>). Det innebär att webbläsarens tillbakaknapp alltid gör rätt sak, och en specifik moduls detaljsida är en riktig, delbar länk – skicka någon direkt till "här är exakt vad Offertformuläret eller Prisförfrågan ger dig" i stället för att berätta var de ska klicka. Escape går tillbaka en nivå i taget, på samma sätt som Tillbaka.

Öppnad från insidan av ett projekt (/projects/<id>/kit) känner sidan till vilket projekt du tittar på, så den kan visa vad som redan finns där och låta dig lägga till direkt i det. Öppnad separat (/projects/kit, nådd från länken på Kit-fliken, eller direkt) är det samma tre nivåer utan något projektspecifikt – användbart för att bläddra innan du har bestämt vad du ska bygga, eller för att visa någon katalogen utan att öppna ett specifikt projekt.

Överst i kategorirutnätet delar samma tvåvägsväljare som överallt annars i aiKit hela katalogen: Webbplatskit är avsnitt och funktioner som blir en del av själva webbplatsen eller appen (sidor, formulär, gallerier, butik, bokning, SEO); Företagsverktygskit är verktyg som körs vid sidan av projektet i stället för inuti det (marknadsföringsautomation, fakturering, CRM, personalverktyg, rapportering). Varje kategorikort visar hur många moduler den har, samt en märkning "N redo nu" när minst en av dem är en modul som är Redo nu (se nedan).

Sökrutan ovanför kategorierna matchar på modulnamn eller beskrivning i HELA katalogen samtidigt – både Webbplatskit och Företagsverktygskit, oavsett vilken väljare som är vald – så att sökning på "faktura" hittar den även när du tittar på Webbplatskit.

Öppnad från insidan av ett projekt, och bara när du inte söker, visas en rad "Rekommenderat för detta projekt" ovanför kategorirutnätet när aiKit har riktiga förslag: enkla, icke-AI-regler matchade mot projektets typ (en webbplats får ett offertformulär, ett kontaktformulär, ett omdömesgalleri, lokal SEO och FAQ-sidor föreslagna; en onlinebutik får varukorg och kassa, återhämtning av övergivna varukorgar och produktomdömen; och så vidare för målsidor, appar, adminsystem, instrumentpaneler, kundportaler, bloggar och marknadsföringsautomationsprojekt) plus några nyckelordsmatchningar mot projektets egen målbeskrivning (om du nämner "offert", "bokning", "omdöme", "e-post", "faktura" eller "sälja online" visas motsvarande modul med sin egen enradiga motivering). Allt som redan finns i projektet utelämnas, och listan begränsas till sex.

Varje modul har en av två statusetiketter, och formuleringen är medvetet bokstavlig, inte marknadsföringsspråk. "Redo nu" betyder att modulen är en av byggmotorns testade moduler – riktig kod som renderar en faktisk sida med exempeldata i stället för dina uppgifter, exakt samma mall som en live-webbplats får. "Byggd för dig" betyder att modulen är en riktig, planerad del av katalogen som ingen ännu renderar: när du väljer den läggs den till i planen och ett riktigt arbetsobjekt skapas, och modulen byggs in i webbplatsens egen kod, med sin egen varumärkesprofil och sina egna ord, på samma sätt som alla andra AI-redigeringar – den har bara ingen testad mall redo just nu.

Ingen av statusarna betyder "inte riktig" eller "hypotetisk". Båda är saker som aiKit faktiskt kommer att bygga åt dig. Den enda skillnaden etiketten visar är om du kan se den färdiga formen av den just nu eller måste föreställa dig den utifrån en beskrivning och ett diagram.

När du öppnar en kategori visas varje modul i den som ett kort: en miniatyrbild, modulens namn, statusetiketten, en kort enradig beskrivning, en rad med märkena "Fungerar bäst för" (upp till tre) och "I detta projekt" om den redan har lagts till (när du bläddrar inifrån ett projekt). En Redo nu-moduls miniatyrbild är en liten levande förhandsvisning av den riktiga sidan – laddas först när den scrollas in i bild, och begränsad till sex levande miniatyrer på skärmen samtidigt, så att en lång kategori aldrig belastar sidan; allt utöver den gränsen visar en enkel laddningsplatshållare tills det faktiskt syns. En Byggd för dig-moduls miniatyrbild är samma illustrativa diagram som beskrivs nedan, bara mindre – förutom för moduler som har en fungerande förhandsvisning (se nedan), vars kort visar den riktiga exempelwebbplatsen nedskalad, en märkning "Fungerande förhandsvisning · N variationer" och knappen "Se den fungera" i stället för "Visa detaljer". "Visa detaljer" öppnar modulens egen sida.

För en Klar nu-modul är förhandsvisningen en riktig iframe med den faktiskt testade sidan i full storlek, inramad som ett litet webbläsarfönster med en växlare Dator/Telefon som verkligen ändrar bredden på ramen, så att du kan se hur sidan fungerar på en telefon (på en riktig telefon ersätts växlaren med en enkel etikett "Förhandsvisning för telefon" och ramen öppnas rullad till formuläret självt, så att du ser fälten och inte bara rubriken). Ramen tonar ut längst ner; "Öppna hela förhandsvisningen" under den öppnar hela sidan i en ny flik, och en bildtext nedanför anger vilket exempelföretag vars uppgifter används. Om den öppnas i ett projekt kan du slå på "Visa i den här webbplatsens färger", vilket hämtar samma förhandsvisning igen med projektets egna varumärkesfärger (lästa direkt från de #hex-koder som skrivits i varumärkesanteckningarna i underlaget) och projektets namn. Då ser du något som ligger närmare hur din faktiska webbplats skulle se ut, inte ett generiskt exempel.

För en Anpassad för dig-modul finns ingen live-iframe. I stället får du samma illustrativa skiss som i kategorilistan, men större: ett enkelt diagram i SVG med enkla linjer som visar layoutens form (ett formulärs fält, en kalenders rutnät, en instrumentpanels brickor, beroende på vilken typ av skärm som passar modulen), med några korta etiketter hämtade från modulens egna förhandsdata. En bildtext under detta är obligatorisk på varje sådan och tas aldrig bort: "Illustration av layouten. Din version är utformad för att passa din webbplats." Den finns där just för att en skiss av formen aldrig ska förväxlas med en färdig förhandsvisning i varumärkets stil.

Fungerande förhandsvisningar (2026-10-04): en växande grupp Anpassad för dig-moduler hoppar över skissen och öppnar i stället en fullständig, klickbar exempelwebbplats, visad i full bredd ovanför detaljerna. Alla tolv moduler för E-handel / Webbutik öppnar samma exempelbutik för krukmakeri, Juniper Kiln, var och en på den del som modulen handlar om: katalogen (filtrera, sortera, söka, öppna en produkt och välja glasyr och storlek, där bilden och priset ändras), varukorgen och kassan (ändra antal, ta bort artiklar, ange WELCOME10, FREESHIP eller GIFT-2580, beräkna leveranstid med postnummer och gå till kassan och en bekräftelsesida), betalningsalternativ (kort, Betala i 4 och plånboksknappar), fraktpriser, rabattkoder och presentkort, produktrecensioner (filtrera efter stjärnor eller foton, markera som hjälpsam, skriv en), paket och tillägg, moms (ändra leveranstillstånd så ändras momsraden), kundkonton (logga in, köp igen, spåra ett paket, starta en retur), ordermejl (bekräftelse-, skickat- och levererat-mejl, med en fungerande spårningssida), returer och byten (hitta ordern, välj artiklar och orsak, få en returetikett) samt lager (en ägarvy där ändring av lagret ändrar det kunderna ser). Alla tio moduler för Onlinekurser och digitala produkter öppnar en exempelskola för bakning, Rise & Crumb: spela upp en lektion (hastighet, textning), markera den som klar, se förloppscirkeln fyllas, gör quizet, anmäl dig från den kostnadsfria förhandsvisningen, se certifikatet, ställ en fråga under en lektion, köp en digital nedladdning, välj ett kurspaket eller bocka i ett tillägg i kassan, och byt till ägarvyn för att byta namn på, ordna om, lägga till eller avpublicera lektioner och ange när varje vecka öppnar. På releaseschema-modulen har en rad Förhandsvisningstid ovanför ramen knapparna Hoppa fram en vecka (och Tillbaka till idag), så att du kan se låsta lektioner öppnas på sina datum.

Ovanför ramen: en rad med val för varje variant som modulen erbjuder (till exempel Butikslayout: Rutnät, Lista eller Utvalda; Varukorg: Utdragbar varukorg eller Varukorgssida plus Kassa: En sida eller Steg för steg; Släppregel: På angivna datum, Dagar efter anslutning eller Efter att sista lektionen är klar). När du väljer ett alternativ ritas exempelwebbplatsen om i den varianten direkt och det sparas i sidans adress (?v=…), så att en länk till en viss variant kan delas. Dator och Telefon ändrar bredden på ramen så att exempelwebbplatsen bryts om som den skulle göra på en telefon (på en riktig telefon visas detta som en enkel etikett "Telefonvy"). Återställ sätter tillbaka exempelwebbplatsen till hur den var från början. En kort rad "Att göra" listar vad du ska klicka på först, och beskrivningen av varje vald variant visas under ramen. I ett projekt med varumärkesfärger i underlaget byter "Visa i den här webbplatsens färger" ut exempelwebbplatsens huvudfärg mot projektets egen (endast om färgen är tillräckligt mörk för att vit knapptext ska vara läslig).

Inget i en fungerande förhandsvisning skickas till någon server. Det finns ingen betalningskoppling: kassan är märkt "Förhandsvisning – ingenting debiteras och ingen beställning skickas", kortnumret är ett fast exempel som inte kan ändras, och plånboksknapparna (Apple Pay, Google Pay, PayPal) visar bara en notis. Inga mejl skickas, ingen recension publiceras och ingenting sparas; när du lämnar sidan glöms allt. Exempelföretagen, produkterna, personerna och priserna är påhittade. Bildtexten under ramen säger det: "Fungerande förhandsvisning med exempeldata för ett påhittat företag. Din version använder dina egna produkter, priser, texter och ditt varumärke. Inget här debiteras, sparas eller skickas." Alla andra Anpassad för dig-moduler visar fortfarande layoutskissen.

• Vad besökaren ser – en numrerad, enkel genomgång av vad någon som använder modulen faktiskt upplever, steg för steg.
• Vad du får – vad modulen ger projektägaren (leads sparade på en riktig plats, en status du kan uppdatera och så vidare).
• Funktioner, och – endast för en modul med verkliga namngivna varianter i katalogen – en uppsättning valbara kort under rubriken "Välj variant" direkt i det här avsnittet (den första är vald som standard och markerad med en liten bock), så att ett verkligt entydigt val (inte bara en fritextanpassning) görs här i stället för att skrivas in för hand.
• Varför det spelar roll – det ärliga skälet till varför ett företag vill ha den.
• Hur den anpassas (Klar nu) eller Varianter du kan välja (Anpassad för dig) – vad som verkligen kan göras annorlunda.
• Passar bäst för – samma branschmärken som på kortet, visade i sin helhet.
• Så här byggs det — en enkel mening som anger exakt hur den här modulen blir till (en testad sida som engine:n renderar redan i dag, eller något som AI:n bygger in på sajten under en byggprocess), med en notering om den behöver ett konto hos en tredjepartstjänst, som betalningar eller kartor.

Längst ner finns "Lägg till i <projektnamn>" (eller "ditt projekt" om du bläddrar utan att ha valt något projekt än). Om modulen har några anpassningsidéer sparade visas de först som en checklista, märkt "Föreslagna anpassningar" för en modul som är Redo nu, eller "Välj de varianter du vill ha" för en modul som är Byggd för dig. Om du markerar någon av dem läggs just den raden till i det som skickas, och inte bara som en tyst kryssruta.

För en modul med en fungerande förhandsvisning ligger panelen i vänster kolumn under förhandsvisningen och börjar med "Din variant" — den variant du valt i förhandsvisningens valrader (till exempel "Varukorg: Varukorgssida · Kassa: Steg för steg"). Det som visas i förhandsvisningen när du trycker på Lägg till är det som registreras: det sparas i projektets underlag tillsammans med modulen, och arbetsposten visar "Variant: …" så att den som bygger den bygger just den layouten. En modul som också har namngivna alternativ i avsnittet Funktioner frågar "Vad är viktigast för dig?" där, så att de två valen inte blandas ihop.

"Vad ska vara annorlunda för dig?" är en fritextanteckning med samma diktera-knapp som överallt annars i aiKit, plus en knapp "Bifoga foto eller PDF" (endast bilder och PDF-filer, upp till 2,5 MB per fil) för en logotyp, ett referensfoto eller ett specifikationsblad — bifogade filer visas direkt där som borttagbara märken. Om modulen har verkliga, specifika frågor som måste besvaras innan den kan byggas bra visas de under "Vad vi kommer att fråga dig", var och en med ett eget valfritt textfält, så att du kan svara direkt i stället för att vänta på att bli tillfrågad senare.

"Lägg till i planen" finns alltid tillgängligt när du är i ett riktigt projekt: det registrerar valet i projektets underlag (samma plan som skärmen Webbplatsplan och projektsidan läser från) och skapar en riktig arbetspost för vår personal i fliken Feedback, märkt "Väntar på oss", precis som alla andra förfrågningar. "Lägg till och bygg nu" visas bredvid endast när projektet redan har riktiga filer att redigera — dess första byggning är klar, eller så är det redan publicerat; det gör samma två saker och kör sedan omedelbart arbetsposten genom samma AI-redigerare som Åtgärda med AI använder, utan separat kö. Om du försöker lägga till en modul som redan finns i projektet avvisas det direkt med meddelandet "redan i det här projektet" i stället för att en dubblett läggs till.

När det har skickats ersätts knapparna av en bekräftelse med vad som faktiskt hände — meddelandet "Tillagd i planen som en arbetspost", eller, för en begäran om att bygga nu, den faktiska statusen (startad, eller den specifika orsaken till att det inte gick, till exempel att den är pausad i väntan på godkännande innan publicering) — plus två länkar direkt till "Öppna planen" och "Se förfrågningar", så att du aldrig undrar var det tog vägen.

På /projects/kit — med samma riktiga inloggning som resten av instrumentpanelen för hostade projekt, utan att något projekt krävs — fungerar allt exakt likadant, fram till dess att du försöker lägga till något. När du trycker på "Lägg till i ett projekt" (knappen heter så i stället för "Lägg till i planen" när inget projekt är laddat) öppnas "Lägg till i vilket projekt?", en liten väljare som listar alla projekt på ditt konto. Välj ett så hamnar du direkt i det projektets egen Kit Explorer med exakt samma modul redan öppen, redo att slutföra tillägget. Om du inte har några projekt ännu säger väljaren det tydligt och erbjuder en direkt länk "Starta ett projekt →" i stället för att du lämnas fast.