Lista · materiał ze szkolenia
Skąd brać smak strony.
01 · Galerie stron i UI
Gdzie szukać referencji.
Recent (dawniej Godly)
recent.design
Kuratorowana galeria stron aktualizowana codziennie. Stary adres godly.website przekierowuje tutaj.
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 Styles („Style Reference Design”)
styles.refero.design
Ponad 2000 stylów z prawdziwych stron: kolory, typografia, odstępy. Do każdego gotowy plik DESIGN.md, który wklejasz do Claude Code, Codex, v0 albo Lovable.
Wersja beta, cennika nie udało mi się sprawdzić.
Refero
refero.design
Ponad 142 tys. ekranów (74 tys. ze stron www) z wyszukiwaniem po obrazie. Ma MCP dla Claude Code i Codex.
20 USD/mies. albo 140 USD/rok.
Mobbin
mobbin.com
Ekrany, ścieżki i sekcje z prawdziwych, działających produktów, web i mobile.
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 900 wybranych projektów 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.
Za darmo 2 kopie dziennie, 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.
02 · Fonty
Jeden wyrazisty font z polskimi znakami.
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ć.
03 · Zdjęcia i ikony
Prawdziwe zdjęcia przed ikonami.
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.
04 · Animacje i efekty
Jeden efekt, dobrze zrobiony.
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.
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.
05 · Licencje
Darmowe nie znaczy komercyjne.
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.
06 · Metoda
Jak pracować z referencją.
4 kroki, zanim poprosisz AI o pierwszą sekcję.
- 01
Zbierz 3-5 referencji
Przy każdej zapisz jedno zdanie: co z niej bierzesz i czego nie chcesz.
- 02
Rozbij je na elementy
Hero z jednej strony, galeria z drugiej. Jedna wiodąca referencja na hero zamiast mieszania 5 stron naraz.
- 03
Wklej zrzut ekranu do czatu
Ctrl+V albo Cmd+V. Claude, ChatGPT i Gemini czytają obrazy, więc nie musisz opisywać stylu słowami.
- 04
Zapisz styl jako plik
DESIGN.md z Refero Styles albo własna karta wizualna: kolory, fonty, odstępy. AI trzyma się wtedy zmiennych zamiast zgadywać.
07 · Prompty
2 prompty do pracy z referencją.
Prompt 1
Przenieś styl z referencji
Wklej razem ze zrzutem ekranu strony, która Ci się podoba.
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.
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, Mobbin albo Recent (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.
Następny krok