Zestaw: przeglądanie, podglądy i dodawanie modułu

Explorer ma dokładnie trzy poziomy i każdy z nich zapisany jest w adresie strony, a nie tylko w stanie komponentu: siatka kategorii (/projects/kit lub /projects/<id>/kit), lista modułów w jednej kategorii (dodaj ?cat=<key>) oraz pełna strona szczegółów jednego modułu (dodaj &module=<id>). Dzięki temu przycisk Wstecz w przeglądarce zawsze działa poprawnie, a strona szczegółów konkretnego modułu to prawdziwy, udostępnialny link — możesz od razu wysłać komuś „oto, co dokładnie daje Formularz zapytania o wycenę lub ofertę” zamiast tłumaczyć, gdzie kliknąć. Escape cofa o jeden poziom na raz, tak samo jak Wstecz.

Otwarta z wnętrza projektu (/projects/<id>/kit) strona wie, który projekt oglądasz, więc pokazuje, co jest już w nim dodane, i pozwala dodawać moduły bezpośrednio do niego. Otwarta osobno (/projects/kit, po kliknięciu linku w zakładce Kit lub bezpośrednio) ma te same trzy poziomy bez elementów związanych z projektem — przydatna do przeglądania przed podjęciem decyzji, co zbudować, albo do pokazania komuś katalogu bez otwierania konkretnego projektu.

Na górze siatki kategorii przełącznik dwustronny, taki sam jak wszędzie w aiKit, dzieli cały katalog: Zestaw strony to sekcje i funkcje, które stają się częścią samej strony internetowej lub aplikacji (strony, formularze, galerie, sklep, rezerwacje, SEO); Zestaw narzędzi biznesowych to narzędzia działające obok projektu, a nie wewnątrz niego (automatyzacja marketingu, fakturowanie, CRM, narzędzia dla personelu, raporty). Każdy kafelek kategorii pokazuje liczbę modułów oraz odznakę „N gotowych teraz”, gdy przynajmniej jeden z nich jest modułem Gotowym teraz (patrz niżej).

Pole wyszukiwania nad kategoriami przeszukuje nazwy i opisy modułów w CAŁYM katalogu naraz — zarówno w Zestawie strony, jak i w Zestawie narzędzi biznesowych, niezależnie od tego, który przełącznik jest wybrany — więc wyszukanie „faktura” znajdzie moduł także wtedy, gdy przeglądasz Zestaw strony.

Otwarta z wnętrza projektu, i tylko gdy nie wyszukujesz, nad siatką kategorii pojawia się wiersz „Polecane dla tego projektu”, jeśli aiKit ma rzeczywiste sugestie: proste reguły niezwiązane z AI, dopasowane do rodzaju projektu (strona internetowa dostaje sugestię formularza wyceny, formularza kontaktowego, prezentacji opinii, lokalnego SEO i stron FAQ; sklep internetowy — koszyk i płatność, odzyskiwanie porzuconych koszyków oraz opinie o produktach; i podobnie dla stron docelowych, aplikacji, systemów administracyjnych, pulpitów, portali klienta, blogów i projektów automatyzacji marketingu) oraz kilka dopasowań słów kluczowych do tekstu celu projektu (wzmianka o „wycenie”, „rezerwacji”, „opinii”, „e-mailu”, „fakturze” lub „sprzedaży online” wyświetla pasujący moduł z własnym jednozdaniowym uzasadnieniem). Elementy już dodane do projektu są pomijane, a lista jest ograniczona do sześciu pozycji.

Każdy moduł ma jedną z dwóch etykiet statusu, a sformułowania są celowo dosłowne, a nie marketingowe. „Gotowe teraz” oznacza, że moduł jest jednym z przetestowanych modułów silnika budowania — prawdziwy kod, który renderuje rzeczywistą stronę z przykładowymi danymi zamiast Twoich szczegółów, dokładnie ten sam szablon, co na żywej stronie. „Zbudowane dla Ciebie” oznacza, że moduł jest rzeczywistą, zaplanowaną częścią katalogu, którą nic jeszcze nie renderuje: jego wybranie dodaje go do planu i zakłada prawdziwe zadanie, a moduł zostaje zbudowany w kodzie strony, we własnej marce i treści, tak jak każda inna edycja AI — po prostu nie ma jeszcze przetestowanego szablonu gotowego na dziś.

Żaden ze statusów nie oznacza „nierzeczywisty” ani „hipotetyczny”. Oba to rzeczy, które aiKit naprawdę zbuduje dla Ciebie. Różnica polega tylko na tym, czy możesz od razu zobaczyć gotowy kształt modułu, czy musisz go sobie wyobrazić na podstawie opisu i schematu.

Po otwarciu kategorii każdy moduł pokazany jest jako karta: miniatura, nazwa modułu, etykieta statusu, krótki jednozdaniowy opis, wiersz znaczników „Najlepsze dla” (do trzech) oraz „W tym projekcie”, jeśli moduł został już dodany (gdy przeglądasz wewnątrz projektu). Miniatura modułu Gotowego teraz to mały podgląd na żywo prawdziwej strony — ładowany dopiero, gdy przewiniesz do niego widok, a na ekranie jest jednocześnie najwyżej sześć miniatur na żywo, więc długa kategoria nie spowalnia strony; wszystko poza tym limitem pokazuje prosty symbol ładowania, dopóki nie stanie się widoczne. Miniatura modułu Zbudowanego dla Ciebie to ten sam poglądowy schemat opisany poniżej, tylko mniejszy — z wyjątkiem modułów, które mają działający podgląd (patrz niżej); ich karta pokazuje prawdziwą przykładową stronę pomniejszoną, odznakę „Działający podgląd · N wariantów” oraz przycisk „Zobacz, jak działa” zamiast „Zobacz szczegóły”. Przycisk „Zobacz szczegóły” otwiera własną stronę modułu.

W przypadku modułu Gotowe od ręki podgląd to prawdziwa ramka iframe z rzeczywistą, przetestowaną stroną, w pełnym rozmiarze, oprawiona jak małe okno przeglądarki z przełącznikiem Komputer/Telefon, który faktycznie zmienia rozmiar ramki, dzięki czemu możesz sprawdzić, jak strona wygląda na telefonie (na prawdziwym telefonie przełącznik zastępuje zwykła etykieta "Podgląd na telefonie", a ramka otwiera się przewinięta do samego formularza, więc widzisz pola, a nie tylko nagłówek). Dolna część ramki stopniowo zanika; przycisk "Otwórz pełny podgląd" pod nią otwiera całą stronę w nowej karcie, a podpis poniżej podaje nazwę przykładowej firmy, której dane zastępują Twoje. Po otwarciu w projekcie przełącznik "Pokaż w kolorach tej strony" ponownie wczytuje ten sam podgląd z kolorami marki projektu (odczytanymi bezpośrednio z kodów #hex wpisanych w notatkach o marce w opisie) i nazwą projektu, więc widzisz coś bliższego temu, co pokaże Twoja strona, a nie ogólną próbkę.

W przypadku modułu Stworzone dla Ciebie nie ma podglądu na żywo iframe. Zamiast tego widzisz tę samą poglądową siatkę układu co na liście kategorii, narysowaną większą: prosty, jednoliniowy diagram SVG kształtu układu (pola formularza, siatka kalendarza, kafelki pulpitu, w zależności od tego, jaki ekran pasuje do modułu) z kilkoma krótkimi etykietami pochodzącymi z danych podglądu modułu. Pod spodem zawsze znajduje się obowiązkowy podpis, którego nigdy nie usuwamy: "Ilustracja układu. Twoja wersja jest zaprojektowana tak, by pasowała do Twojej strony." Ma on zapobiegać temu, by szkic kształtu został pomylony z gotowym podglądem zgodnym z marką.

Działające podglądy (2026-10-04): rosnący zestaw modułów Stworzone dla Ciebie pomija szkic i zamiast niego otwiera pełną, klikalną przykładową stronę, wyświetlaną na całą szerokość nad szczegółami. Wszystkie dwanaście modułów E-commerce / Sklep internetowy otwiera tę samą przykładową pracownię ceramiki, Juniper Kiln, każdy na tej części, której dotyczy: katalog (filtrowanie, sortowanie, wyszukiwanie, otwarcie produktu i wybór glazury oraz rozmiaru, zdjęcie i cena się zmieniają), koszyk i płatność (zmiana ilości, usuwanie pozycji, wpisanie WELCOME10, FREESHIP lub GIFT-2580, szacowanie dostawy według kodu pocztowego i finalizacja zamówienia na stronie potwierdzenia), opcje płatności (karta, Zapłać w 4 ratach i przyciski portfeli), stawki wysyłki, kody rabatowe i karty podarunkowe, opinie o produktach (filtrowanie według gwiazdek lub zdjęć, oznaczanie jako pomocne, napisanie opinii), zestawy i dodatki, podatek od sprzedaży (zmiana stanu dostawy zmienia wiersz podatku), konta klientów (logowanie, ponowny zakup, śledzenie paczki, rozpoczęcie zwrotu), e-maile o zamówieniu (potwierdzenie, wysyłka i dostarczenie, z działającą stroną śledzenia), zwroty i wymiany (znalezienie zamówienia, wybór produktów i powodu, uzyskanie etykiety zwrotnej) oraz magazyn (widok właściciela, w którym zmiana stanu zmienia to, co widzą kupujący). Wszystkie dziesięć modułów Kursy online i produkty cyfrowe otwiera przykładową szkołę pieczenia chleba, Rise & Crumb: odtworzenie lekcji (prędkość, napisy), oznaczenie jako ukończonej, obserwowanie wypełniania się pierścienia postępu, rozwiązanie quizu, zapisanie się z darmowego podglądu, zobaczenie certyfikatu, zadanie pytania pod lekcją, zakup cyfrowego pliku do pobrania, wybór pakietu kursów lub zaznaczenie dodatku przy płatności oraz przełączenie na widok właściciela, aby zmienić nazwę, zmienić kolejność, dodać lub cofnąć publikację lekcji i ustawić, kiedy otwiera się każdy tydzień. W module harmonogramu publikacji wiersz Podgląd czasu nad ramką ma przyciski Przeskocz o tydzień (i Wróć do dziś), dzięki czemu możesz zobaczyć, jak zablokowane lekcje otwierają się w swoich terminach.

Nad ramką: jeden rząd wyborów dla każdego wariantu, jaki oferuje moduł (na przykład Układ sklepu: Siatka, Lista lub Wyróżnione; Koszyk: Wysuwany koszyk lub Strona koszyka oraz Płatność: Jedna strona lub Krok po kroku; Zasada publikacji: W ustalone dni, Dni po dołączeniu lub Po ukończeniu ostatniej lekcji). Wybór od razu przerysowuje przykładową stronę w tym wariancie i jest zapisywany w adresie strony (?v=…), więc link do konkretnego wariantu można udostępnić. Komputer i Telefon zmieniają rozmiar ramki, tak aby przykładowa strona przeskalowała się tak, jak na telefonie (na prawdziwym telefonie to zwykła etykieta "Widok na telefonie"). Resetuj przywraca przykładową stronę do stanu początkowego. Krótki rząd "Co warto zrobić" wymienia, w co kliknąć najpierw, a opis każdego wybranego wariantu znajduje się pod ramką. W projekcie z kolorami marki w opisie przełącznik "Pokaż w kolorach tej strony" zamienia główny kolor przykładowej strony na kolor projektu (tylko wtedy, gdy ten kolor jest na tyle ciemny, by biały tekst przycisków pozostał czytelny).

Nic w działającym podglądzie nie trafia na serwer. Nie ma połączenia z płatnościami: płatność jest oznaczona jako "Podgląd — nic nie zostanie obciążone i zamówienie nie zostanie wysłane", numer karty jest stałym, tylko do odczytu przykładem, a przyciski portfeli (Apple Pay, Google Pay, PayPal) jedynie wyświetlają notatkę. Nie jest wysyłany żaden e-mail, nie jest publikowana żadna opinia i nic nie zostaje zapisane; opuszczenie strony zapomina wszystko. Przykładowe firmy, produkty, osoby i ceny są wymyślone. Podpis pod ramką to mówi: "Działający podgląd z przykładowymi danymi dla wymyślonej firmy. Twoja wersja używa Twoich produktów, cen, sformułowań i marki. Nic tutaj nie jest obciążane, zapisywane ani wysyłane." Każdy inny moduł Stworzone dla Ciebie nadal pokazuje ilustrację układu.

• Co widzi odwiedzający — ponumerowane, proste omówienie krok po kroku tego, czego faktycznie doświadcza osoba korzystająca z modułu.
• Co dostajesz — co moduł przekazuje właścicielowi projektu (zapisane w prawdziwym miejscu potencjalne klienty, status, który możesz aktualizować, i tak dalej).
• Funkcje oraz — tylko dla modułu z prawdziwie nazwanymi wariantami zdefiniowanymi w katalogu — zestaw wybieralnych kart "Wybierz wariant" bezpośrednio w tej sekcji (pierwsza jest domyślnie zaznaczona i oznaczona małym znacznikiem), dzięki czemu prawdziwy wybór "albo-albo" (a nie tylko wolna personalizacja tekstem) dokonywany jest tutaj, a nie wpisywany ręcznie.
• Dlaczego to ważne — uczciwy argument, dlaczego firma chciałaby to mieć.
• Jak się dostosowuje (Gotowe od ręki) lub Warianty do wyboru (Stworzone dla Ciebie) — co naprawdę można w nim zmienić.
• Najlepsze dla — te same znaczniki typów firm co na karcie, pokazane w całości.
• Jak to powstaje — jedno proste zdanie, dokładnie wyjaśniające, jak powstaje ten moduł (gotowa, przetestowana strona, którą silnik renderuje już dziś, albo element zbudowany w witrynie przez AI podczas budowy), z uwagą, jeśli wymaga konta zewnętrznego dostawcy, np. płatności lub map.

Na samym dole znajduje się przycisk „Dodaj to do: <nazwa projektu>” (albo „do twojego projektu”, gdy przeglądasz bez wybranego projektu). Jeśli moduł ma zapisane pomysły na personalizację, najpierw pojawia się lista kontrolna — z etykietą „Sugerowane dostosowania” dla modułu gotowego od ręki lub „Wybierz wersje, które chcesz” dla modułu przygotowanego dla Ciebie — a zaznaczenie któregokolwiek z nich dodaje dokładnie tę pozycję do wysyłanych danych, a nie jest tylko cichym polem wyboru.

W przypadku modułu z działającym podglądem panel znajduje się w lewej kolumnie, pod podglądem, i zaczyna się od „Twoja wersja” — wariant wybrany w wierszach wyboru podglądu (na przykład „Koszyk: strona koszyka · Kasa: krok po kroku”). Cokolwiek jest widoczne w podglądzie w chwili naciśnięcia „Dodaj”, zostaje zapisane: trafia do briefu projektu razem z modułem, a pozycja pracy brzmi „Wariant: …”, dzięki czemu osoba budująca stronę tworzy właśnie ten układ. Jeśli moduł ma także nazwane opcje w sekcji Funkcje, pojawia się tam pytanie „Co jest dla Ciebie najważniejsze?”, aby oba wybory się nie myliły.

Pole „Co powinno być inaczej w Twoim przypadku?” to notatka w dowolnej formie z tym samym przyciskiem dyktowania, co wszędzie indziej w aiKit, oraz przycisk „Dołącz zdjęcie lub PDF” (tylko obrazy i pliki PDF, do 2,5 MB każdy), np. dla logo, zdjęcia referencyjnego lub karty specyfikacji — dołączone pliki pojawiają się od razu jako chipy, które można usunąć. Jeśli moduł ma konkretne pytania, na które trzeba odpowiedzieć, zanim można go dobrze zbudować, pojawiają się one pod nagłówkiem „O co zapytamy”, każde z własnym opcjonalnym polem tekstowym, dzięki czemu możesz odpowiedzieć od razu, zamiast czekać na pytanie później.

Przycisk „Dodaj do planu” jest zawsze dostępny, gdy jesteś w prawdziwym projekcie: zapisuje wybór w briefie projektu (tym samym planie, z którego czytają ekran Plan witryny i strona projektu) i tworzy realną pozycję pracy widoczną dla zespołu w zakładce Opinie, oznaczoną jako „Czeka na nas”, dokładnie tak jak każda inna prośba. Przycisk „Dodaj i zbuduj teraz” pojawia się obok, ale tylko wtedy, gdy projekt ma już prawdziwe pliki do edycji — gdy zakończyła się pierwsza budowa lub witryna jest już opublikowana. Robi te same dwie rzeczy, a następnie od razu uruchamia tę pozycję pracy w tym samym edytorze AI, którego używa „Napraw z AI”, bez osobnej kolejki. Próba dodania modułu, który już jest w projekcie, zostaje odrzucona z prostym komunikatem „już jest w tym projekcie”, zamiast tworzyć duplikat.

Po wysłaniu przyciski zastępuje potwierdzenie z tym, co się faktycznie stało: prosty komunikat „Dodano do planu jako pozycja pracy” albo, w przypadku prośby o natychmiastową budowę, rzeczywisty status (uruchomiono lub konkretny powód, dla którego się nie udało, np. wstrzymanie do zatwierdzenia przed budową) — a także dwa linki prowadzące bezpośrednio do „Otwórz plan” i „Zobacz prośby”, abyś nigdy nie zastanawiał się, gdzie to trafiło.

Pod adresem /projects/kit — z tym samym prawdziwym logowaniem co reszta panelu projektów hostowanych, bez konieczności wybierania projektu — wszystko działa dokładnie tak samo, aż do chwili, gdy spróbujesz coś dodać. Naciśnięcie „Dodaj do projektu” (przycisk tak się nazywa zamiast „Dodaj do planu”, gdy nie ma wczytanego projektu) otwiera „Do którego projektu dodać?”, mały wybór z listą wszystkich projektów na Twoim koncie. Wybierz jeden, a zostaniesz przeniesiony prosto do Przeglądarki Zestawu tego projektu, z tym samym modułem otwartym i gotowym do dokończenia dodawania. Jeśli nie masz jeszcze żadnych projektów, wybór jasno to powie i zaproponuje bezpośredni link „Rozpocznij projekt →”, zamiast zostawiać Cię w miejscu bez wyjścia.