Co dostajesz
- Jeden plik HTML z osadzonymi fontami i obrazami albo port do Next.js, React, Vue lub Astro
- Strona główna, katalog z filtrami, strony produktów, kolekcje, koszyk i demonstracyjna kasa
- Dobór rozmiaru, dostawa, FAQ, kontakt, O nas, newsletter, strony prawne i 404
- Walidator, który sprawdza linki, strukturę, działanie offline i pozostałe przykładowe nazwy
- Opcjonalne dopasowane zdjęcia produktów i kampanii z PopNow, wyceniane przed każdym uruchomieniem
Sprawdzi się przy
- Marki sneakersów, obuwia i odzieży sportowej
- Małe marki odzieżowe, które chcą wyglądu kampanii
- Prototypy sklepów do przekazania programiście przed podłączeniem prawdziwego koszyka
Nie nadaje się do
- Przyjmowanie prawdziwych płatności od razu: kasa jest demo, dopóki nie podłączysz operatora płatności
- Katalogi z setkami produktów, które wymagają bazy danych
- Krzykliwe, ciemne lub neonowe identyfikacje marki
Jak z niej korzystać
W Claude lub ChatGPT
Użyj umiejętności PopNow „Szablon sklepu ze sneakersami” (sneaker-store-website) do tego: Zrób sklep dla Northfold, małej marki butów trailowych sprzedającej pięć modeli w EUR, z darmową dostawą powyżej 120 EUR i 30-dniowym terminem zwrotu.
W agencie do programowania
/popnow-sneaker-store-website Zrób sklep dla Northfold, małej marki butów trailowych sprzedającej pięć modeli w EUR, z darmową dostawą powyżej 120 EUR i 30-dniowym terminem zwrotu.
Potem spróbuj
Umieść moje zdjęcia produktów z ./photos na tle sklepu i najpierw podaj mi cenę.
Przenieś sklep do mojego projektu Next.js i zostaw kasę jako demo.
Co przygotować
- Nazwy produktów, ceny, wersje kolorystyczne i rozmiary
- Od dwóch do czterech kolekcji oraz zasady dostaw i zwrotów
- Zdjęcia produktów albo klucz API PopNow do ich wygenerowania
- Adres i godziny otwarcia, jeśli masz sklep stacjonarny
Podobne umiejętności
Zobacz wszystkie →Kreator awatarów 3D
+3Zbuduj w przeglądarce uroczą pluszową postać 3D i zapisz ją jako przezroczysty PNG albo stronę 3D.
Heatmapa kalendarzowa
+3Rok codziennej aktywności jako cieniowana siatka kalendarza, z seriami, sumami i obsługą klawiatury.
Strona lądowania SaaS AI
+3Ciepły piaszczysty papier i żywa tablica kanban, na której asystent planuje zadania i przesuwa karty.
Animowana sekcja hero
+3Sekcja hero dla landing page z płynnie zmieniającym się słowem w nagłówku, dwoma przyciskami i szeroką ramką na obraz.
Strona agencji kreatywnej z shaderem
+3Żywy pomarańczowy shader w hero, przyklejone hasło, zaokrąglone menu i siatka case studies.
Ciemny landing page SaaS
+3Ciemna strona marketingowa produktu software z bogatą animacją, dostarczana jako jeden samodzielny plik HTML.
Strona portfolio projektanta
+3Sześć przechylonych kart wokół blednącego nagłówka, jedna czerwona karta portretu, redakcyjne case studies.
Strona portfolio programisty
+3Ciemna strona osobista dla inżynierów z case studies, artykułami, wystąpieniami, CV i formularzem kontaktowym.
Redakcyjna strona SaaS
+3Granatowe dzielone hero, szeryfowy nagłówek obok zdjęcia dokumentalnego, skośne pasma i kobaltowy akcent.
Szablon strony glassmorphism
+3Matowe szklane pigułki na prawie czarnym tle, ogromny szeryfowy nagłówek i zapis e-mail.
Strona produktu sprzętowego
+3Ogromne cienkie nazwy modeli na srebrnych zdjęciach, matowe karty specyfikacji i linia produktów w skali.
Interaktywny diagram architektury
+3Klikalny diagram systemu offline, zbudowany ze sprawdzonego modelu JSON, z dowodami do każdego bloku.
Interaktywne hero z siatką
+3Ciemna siatka cienkich nici, która zagina się ku kursorowi i puszcza świecący pierścień z każdego kliknięcia.
Interaktywny graf wiedzy
+3Zamień notatki z projektu w przeszukiwalny graf offline, w którym każde twierdzenie prowadzi do wiersza źródła.
Szablon pulpitu KPI
+3Cztery kafle KPI ze znacznikami zmian nad wykresem liniowym, tabelą podziału i słupkami celów.
Strona lądowania z makiet AI
+3Najpierw zobacz trzy projekty pełnej strony, wybierz jeden, a agent zbuduje go jako czysty kod.
Szablon strony magazynu
+3Strona magazynu w jakości druku z artykułami, tematami, małym sklepem i prenumeratą, jako jeden plik HTML.
Hero z animacją cząsteczek
+3Tekst na ciepłym papierze obok obracającej się kuli z kropek, która zmienia kształt przy każdym pomyśle.
Strona marki osobistej
+3Portret wtopiony w ciepły papier pod cienkim nawiasem, z mocnymi hasłami po obu stronach.
Filmowa strona premiery produktu
+3Prawie czarna strona w świetle filmowym: szeryfowa karta tytułowa, nocna scena i formularz rezerwacji.
Szablon panelu administracyjnego
+3Działająca konsola zaplecza z wykresami, tabelami, tablicą kanban i kalendarzem, jako jeden plik HTML offline.
Szablon landing page SaaS
+3Spokojna, jasna strona marketingowa produktu software z działającą konsolą produktu, cennikiem i rejestracją.
Strona CV i portfolio w stylu scrapbooka
+3Wielostronicowe CV online z papierowych przedmiotów, z case studies i życiorysem do druku.
Strona lądowania automatyzacji przepływów
+3Grafitowa strona, mały nagłówek i żywy graf węzłów, który działa, ponawia i strumieniuje logi.
Pytania
Czy kasa przyjmuje prawdziwe płatności?
Nie. Waliduje formularz, zmienia sumy zależnie od metody dostawy i pokazuje potwierdzenie, ale wyraźnie zatrzymuje się przed płatnością. Podłączenie operatora płatności to osobny krok w prawdziwym projekcie.
Czy mogę użyć własnych zdjęć produktów?
Tak. Wrzuć je, a umiejętność użyje ich bez zmian albo, za twoją zgodą i po wycenie w kredytach, umieści je na dopasowanym tle sklepu lub wytnie je w PopNow, żeby siatka wyglądała spójnie.
Czy działa dla odzieży zamiast butów?
Tak. Rozmiary zmieniają się na literowe, dobór rozmiaru staje się tabelą wymiarów, a opcje szerokości krojami. Kolekcje i linie można przemianować lub usunąć.
Co, jeśli nie mam klucza API PopNow?
Sklep i tak się zbuduje. Produkty dostają opisane kafelki zastępcze lub twoje własne zdjęcia, a odpowiedź wymienia, które miejsca wciąż potrzebują obrazów.