Co dostajesz
- Jeden plik HTML z osadzonymi czcionkami i obrazami, bez żądań do sieci
- Hero z shaderem, pasek klientów, pasmo studia, przesunięta siatka prac i przeszukiwalny indeks projektów
- Osobna strona dla każdego case study oraz dziennik, prywatność, regulamin i ekran 404
- Zakładki usług, plany współpracy z przełącznikiem walut, wyceny, zespół, FAQ i formularz briefu
- Opcjonalnie: zdjęcia studia, case'ów i zespołu oraz pętla karty case study generowane w PopNow po wycenie
Sprawdzi się przy
- Studia designu, brandingu, webu, motion i 3D
- Freelancerzy i małe firmy konsultingowe z prawdziwymi projektami do pokazania
- Pracownie architektury i wnętrz, które chcą spokojnego, premium portfolio
Nie nadaje się do
- Sklepy internetowe albo ciemne, neonowe marki
- Strony, które potrzebują zdjęcia albo wideo za nagłówkiem
- Strony bez gotowych prac do pokazania
Jak z niej korzystać
W Claude lub ChatGPT
Użyj umiejętności PopNow „Strona agencji kreatywnej z shaderem” (creative-agency-website) do tego: Zbuduj stronę dla Quarrow, czteroosobowego studia brandingu i webu w Porto. Projekty: relaunch sklepu z ceramiką, aplikacja z rozkładem promów i identyfikacja piekarni. Współprace: Sprint, Launch, Retainer.
W agencie do programowania
/popnow-creative-agency-website Zbuduj stronę dla Quarrow, czteroosobowego studia brandingu i webu w Porto. Projekty: relaunch sklepu z ceramiką, aplikacja z rozkładem promów i identyfikacja piekarni. Współprace: Sprint, Launch, Retainer.
Potem spróbuj
Wyceń zdjęcia do trzech case studies i siatkę zespołu, zanim cokolwiek wygenerujesz.
Zamień kartę case study promu w powolną pętlę wideo z jego zdjęcia hero i najpierw podaj cenę.
Co przygotować
- Nazwę studia, jedno zdanie o pozycjonowaniu, miasta i dane kontaktowe
- Od dwóch do sześciu projektów z briefem, tym, co zrobiliście, i jednym mierzalnym wynikiem
- Usługi, sposób zatrudniania was przez klientów i osoby, które prowadzą zespół
- Opcjonalnie: klucz API PopNow albo zdjęcia waszego studia i projektów
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.
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.
Szablon sklepu ze sneakersami
+3Kompletny sklep z obuwiem lub odzieżą: katalog, strony produktów, koszyk i demonstracyjna kasa w jednym pliku HTML.
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 shader spowalnia stronę?
Renderuje się w obniżonej rozdzielczości z ograniczonym współczynnikiem pikseli, zatrzymuje się, gdy hero wyjdzie z ekranu albo karta jest ukryta, a przy zredukowanym ruchu pokazuje jedną nieruchomą klatkę. Pod spodem leży wersja CSS tego samego wyglądu, więc strona wygląda gotowo nawet bez WebGL.
Co PopNow generuje w tym przypadku?
Zdjęcia do pasma studia, każdego case study i zespołu, wszystkie w jednym kierunku artystycznym, plus opcjonalną powolną pętlę zastępującą jedno zdjęcie karty case study. Samo hero jest kodem i niczego nie potrzebuje. Każde uruchomienie jest wyceniane w kredytach i startuje dopiero po twojej zgodzie.
Czy mogę to użyć bez klucza API PopNow?
Tak. Dołączone zdjęcia studia mogą zostać jako neutralne zamienniki, media case'ów mogą stać się panelami CSS w kolorach każdego klienta, a wyceny używają awatarów z inicjałami. Umiejętność wylicza miejsca, które nadal czekają na prawdziwe zdjęcia.
Czy mogę zmienić pomarańczowy akcent?
Tak, przez kilka tokenów i presety kolorów shadera. Strona trzyma jeden akcent i unika odcieni fioletu i fioletowego, co sprawdza walidator; DESIGN.md marki w projekcie jest mapowany na te tokeny.