Fonty, zdjęcia, galerie
Skąd brać inspiracje do strony
AI bez referencji robi średnią z internetu. To lista miejsc, z których biorę referencje, fonty, zdjęcia i animacje, z informacją o licencji. Na dole 2 prompty do pracy z referencją.
Gdzie szukać referencji
Zacznij od 2-3 galerii, nie od wszystkich. Szukaj po branży i nastroju, a nie po modnym efekcie.
Land-book
land-book.com
Ponad 20 tys. stron z filtrami po kolorze, stylu i branży.
Lapa Ninja
lapa.ninja
Ponad 7300 landing page’y zbieranych od 2015 roku.
Refero
refero.design
Ponad 142 tys. ekranów (74 tys. ze stron www) z wyszukiwaniem po obrazie. Ma MCP dla Claude Code i Codex.
Plan Pro: 10 EUR/mies. przy płatności rocznej albo 15 EUR/mies. przy płatności kwartalnej.
Mobbin
mobbin.com
Ekrany, ścieżki i sekcje z prawdziwych, działających produktów, web i mobile.
Wymaga darmowego konta. Darmowy dostęp jest ograniczony, pełny w planie Pro.
Awwwards
awwwards.com
Nagradzane strony, najwyższa półka kreatywna. Dobre źródło pomysłów na jeden element, rzadko na całą stronę małej firmy.
SiteInspire
siteinspire.com
Kuratorowane strony agencji i studiów projektowych.
One Page Love
onepagelove.com
Strony jednostronicowe i szablony.
Landingfolio
landingfolio.com
Landing page, szablony i pojedyncze komponenty.
Minimal Gallery
minimal.gallery
Minimalistyczne strony, nowe codziennie.
Httpster
httpster.net
Kreatywne i nagradzane strony.
Refs.gallery
refs.gallery
Ponad 2000 wybranych pozycji w ponad 50 kategoriach.
21st.dev
21st.dev
Ponad 12 000 gotowych komponentów React i Tailwind, które kopiujesz przez agenta AI albo przez shadcn CLI. To komponenty React, więc do strony w 1 pliku HTML bierzesz je tylko jako podgląd pomysłu.
Plany płatne od 6-8 USD/mies.
Dribbble
dribbble.com
Koncepty graficzne i ilustracje.
UwagaTo projekty koncepcyjne, nie wdrożone strony. Traktuj je ostrożnie.
Jeden wyrazisty font z polskimi znakami
Przed wyborem wpisz w podglądzie „Zażółć gęślą jaźń”. Jeśli któraś litera wygląda inaczej niż reszta, font nie ma polskich znaków.
Fontshare
fontshare.com
Darmowe fonty od Indian Type Foundry, także do użytku komercyjnego, np. Satoshi, General Sans, Clash Display, Cabinet Grotesk. Gotowe pary: fontshare.com/pairs.
Te 4 kroje mają komplet polskich znaków (sprawdzone 29.09.2026). Licencja pozwala hostować pliki na własnych stronach, ale nie przekazywać ich wykonawcom ani agencjom. Przy stronie klienta użyj CSS API Fontshare albo niech klient pobierze font sam.
Google Fonts
fonts.google.com
Darmowe fonty na otwartych licencjach.
W Next.js dodaj subset latin-ext. Bez niego polskie litery wyświetlą się innym fontem.
Fonts In Use
fontsinuse.com
Archiwum prawdziwych użyć fontów w brandingu, druku i na stronach.
Typewolf
typewolf.com
Trendy, pary fontów i fonty w prawdziwych projektach.
Fontpair
fontpair.co
Ponad 1000 par fontów z Google Fonts.
Velvetyne
velvetyne.fr
Fonty libre i open source z charakterem.
Polskie znaki sprawdź przy każdym kroju osobno.
Free Faces
freefaces.gallery
Kuratorowane darmowe kroje.
Licencję i polskie znaki sprawdź przy każdym kroju.
Pangram Pangram
pangrampangram.com
Wyraziste, dopracowane kroje.
UwagaWersje darmowe są tylko do użytku osobistego. Licencja komercyjna kosztuje od 40 USD, więc do strony firmy trzeba ją kupić.
Prawdziwe zdjęcia przed ikonami
Kolejność: własne zdjęcia, potem bank zdjęć, na końcu grafika z AI i tylko wtedy, gdy ma konkretną rolę.
Własne zdjęcia z telefonu
Najmocniejszy materiał: prawdziwe miejsce i prawdziwi ludzie. Rób jedną serię, w jednym świetle, najlepiej dziennym.
Unsplash
unsplash.com
Darmowe zdjęcia, także do użytku komercyjnego.
Podpis autora jest mile widziany, ale niewymagany. Przy korzystaniu przez API atrybucja jest obowiązkowa.
Pexels
pexels.com
Darmowe zdjęcia i wideo do użytku komercyjnego.
Bez obowiązku podpisu autora (licencja Pexels).
Lucide
lucide.dev
Spójne ikony liniowe, domyślny zestaw w shadcn.
Licencja ISC.
Phosphor
phosphoricons.com
1248 ikon w 6 wagach: thin, light, regular, bold, fill i duotone.
Licencja MIT.
Jeden efekt, dobrze zrobiony
Efekt ma coś pokazać, nie tylko się ruszać. Sprawdź go na słabszym telefonie, zanim zostawisz go na stronie.
GSAP
gsap.com
Biblioteka animacji, w tym ScrollTrigger do efektów przy przewijaniu.
Od kwietnia 2025 (wersja 3.13) w 100% darmowa, także komercyjnie, razem z SplitText i MorphSVG.
Motion (dawniej Framer Motion)
motion.dev
Animacje w React.
Licencja MIT. Płatne jest tylko Motion+.
Spline
spline.design
Grafika 3D w przeglądarce, osadzana na stronie.
Rive
rive.app
Interaktywne animacje ze stanami, używane m.in. przez Duolingo i w Spotify Wrapped.
Eksport animacji na stronę jest w płatnym planie.
LottieFiles
lottiefiles.com
Lekkie animacje wektorowe.
Unicorn Studio
unicorn.studio
Efekty WebGL bez kodu.
UwagaDarmowy plan nie obejmuje użytku komercyjnego. Płatny plan Legend kosztuje 14 USD/mies.
fffuel
fffuel.co
Darmowe generatory SVG: tła, gradienty, szum.
Darmowe nie znaczy komercyjne
To moja interpretacja licencji, nie opinia prawna. Stan na 29.09.2026, przed użyciem komercyjnym przeczytaj licencję u źródła.
Pangram Pangram: wersje darmowe tylko do użytku osobistego. Do strony firmy kup licencję.
Unicorn Studio: plan darmowy nie obejmuje użytku komercyjnego.
Fontshare: nie przekazuj plików fontów wykonawcom ani agencjom. Przy stronie klienta użyj CSS API albo niech klient pobierze font sam.
Unsplash przez API: podpis autora jest obowiązkowy.
Dribbble: to koncepty, nie działające strony. Nie zakładaj, że ktoś sprawdził je na telefonie.
Cudze strony w galeriach: bierz kierunek, nie kopiuj tekstów, zdjęć ani logotypów.
Jak pracować z referencją
4 kroki, zanim poprosisz AI o pierwszą sekcję.
Zbierz 3-5 referencji
Przy każdej zapisz jedno zdanie: co z niej bierzesz i czego nie chcesz.
Rozbij je na elementy
Hero z jednej strony, galeria z drugiej. Jedna wiodąca referencja na hero zamiast mieszania 5 stron naraz.
Wklej zrzut ekranu do chatu
Ctrl+V albo Cmd+V. Claude, ChatGPT i Gemini czytają obrazy, więc nie musisz opisywać stylu słowami.
Zapisz styl jako plik
Własna karta wizualna (karta stylu z kroku 4): kolory, fonty, odstępy. AI trzyma się wtedy zmiennych zamiast zgadywać.
2 prompty do pracy z referencją
Pierwszy przenosi styl ze zrzutu ekranu na Twoją stronę. Drugi pomaga znaleźć kierunek, zanim w ogóle zaczniesz szukać referencji. Uzupełnij pola w nawiasach kwadratowych.
Prompt 1
Przenieś styl z referencji
Wklej razem ze zrzutem ekranu strony, która Ci się podoba.
Fragmenty [w nawiasach] zamieniasz na swoje, a nawiasy usuwasz.
Pokaż cały promptZwiń prompt27 linii
Załączam zrzut ekranu strony, która mi się podoba. Chcę przenieść jej styl na moją stronę, a nie skopiować ją 1:1. Moja firma: [1-2 zdania: co robisz i dla kogo] Moja strona: [landing page / strona firmowa], cel: [np. zapytanie o wolny termin] Z referencji BIERZEMY: - [np. układ hero: duże zdjęcie z lewej, tekst z prawej] - [np. dużo światła i spokojne tempo] - [np. jeden wyrazisty font w nagłówkach] Z referencji NIE BIERZEMY: - [np. ciemnego tła] - [np. animacji przy każdym przewinięciu] - tekstów, zdjęć, logotypów i nazw z referencji Zrób po kolei: 1. Opisz w 5-7 punktach, co w tej referencji buduje wrażenie: kompozycja, kolory, typografia, odstępy, zdjęcia, ruch. Bez ogólników w stylu "nowoczesny i czysty". 2. Zaproponuj zmienne CSS dla mojej strony: --color-bg, --color-surface, --color-text, --color-muted, --color-accent (tylko 1 kolor akcentu), --font-heading, --font-body, --radius, --space-section. Kolory podaj w HEX. Fonty wybierz z Google Fonts albo Fontshare i sprawdź, że mają polskie znaki (ą, ę, ł, ó, ś, ż, ź). Przy Google Fonts dodaj subset latin-ext. 3. Wypisz 3 rzeczy, które zmieniasz względem referencji, żeby strona była moja, a nie kopią. 4. Dopiero potem zbuduj [sekcję hero / całą stronę], używając WYŁĄCZNIE tych zmiennych. Żadnych kolorów ani fontów wpisanych na sztywno poza zmiennymi. Nie używaj: fioletowo-niebieskich gradientów, gradientu na tekście, emoji jako ikon, ikon w kółkach, 3 identycznych kart w rzędzie, wyśrodkowania wszystkiego. Jeśli czegoś nie da się odczytać ze zrzutu (np. dokładnej nazwy fontu), napisz to wprost i zaproponuj najbliższy darmowy odpowiednik.
Prompt 2
Znajdź inspiracje dla mojej branży
Dostajesz 5 kierunków stylu i frazy do wpisania w galeriach z tej listy.
Fragmenty [w nawiasach] zamieniasz na swoje, a nawiasy usuwasz.
Pokaż cały promptZwiń prompt23 linie
Pomóż mi znaleźć kierunek wizualny dla strony mojej firmy, zanim zaczniemy ją budować. Firma: [co robisz, gdzie, od kiedy] Klient: [kto kupuje, w jakim wieku, skąd, czego szuka] Cel strony: [jedno działanie, np. zapytanie o wolny termin] Jak ma się czuć odwiedzający: [3 słowa] Czego nie chcę: [np. "jak każdy hotel", "jak startup technologiczny"] Zaproponuj 5 kierunków stylu. Naprawdę różnych, nie 5 odcieni tego samego. Dla każdego podaj: - nazwę kierunku w 2-3 słowach, - 1 zdanie, dlaczego pasuje do mojego klienta, - paletę: tło, tekst i 1 kolor akcentu (HEX), - font nagłówkowy i font do treści (darmowe, z polskimi znakami), - rodzaj zdjęć: co jest w kadrze, jakie światło, - 1 element, który zostaje w pamięci (np. duże liczby, pełnoekranowe zdjęcie, ręczne podpisy), - ryzyko: kiedy ten kierunek nie zadziała. Potem dla każdego kierunku napisz, czego szukać: - 2-3 frazy po angielsku do wpisania w Land-book, Lapa Ninja albo Mobbin (np. "boutique hotel", "cabin rental"), - 1-2 frazy do Fonts In Use. Nie podawaj adresów konkretnych stron jako przykładów, bo możesz je pomylić. Podaj frazy, a strony znajdę sam. Na koniec zapytaj, który kierunek wybieram, i dopiero wtedy przejdź dalej.
Źródła
Adresy z listy sprawdzone 29.09.2026. Poniżej źródła cen i licencji.
Narzędzia i referencje w newsletterze
Narzędzia i referencje, które testuję w pracy, opisuję raz w tygodniu w newsletterze.