Jak projektować szybciej i bardziej kreatywnie? Jak zautomatyzować proste zadania i wygospodarować sobie więcej czasu na prawdziwie twórczą pracę? Dzięki narzędziom AI wiele zadań w pracy UX Designera można wykonać błyskawicznie zachowując przy tym wysoką jakość. Nasz trener, Sebastian Świtek przygotował mini przewodnik, z którego dowiecie się, z jakich narzędzi korzystać i jak wykorzystać je w praktyce (patrz wideo).
Relume (relume.io)
Generowanie gotowych struktur stron internetowych (wireframes i komponentów) wraz z kodem w React/Next.js
Plan darmowy:
- 1 projekt
- 1 strona
- Udostępnianie – link tylko do odczytu
- Eksport – tylko Figma
Plan starter ($18 USD ≈ 72 zł miesięcznie):
- 1 projekt
- 5 stron
- Eksport – Figma, Webflow i React
Freepik (freepik.com/pikaso/ai-image-generator)
Generowanie obrazów, grafik, wideo, ikon, mockupów oraz dźwięku
Plan darmowy:
- Generowanie obrazów: 20 obrazy/dzień
- Generowanie efektów dźwiękowych: 3 dźwięki/dzień
- Generowanie efektów dźwiękowych z wideo: 3 dźwięki/dzień
- Generowanie ikon: 4 ikony/dzień
- Generowanie mockupów: 2 mockupy/dzień
Plan podstawowy (36 zł/ miesięcznie):
- Generowanie efektów dźwiękowych: 460 dźwięków
- Generowanie efektów dźwiękowych z wideo: 460 dźwięków
- Obrazki w stylu marki (style reference): ✓
- Generowanie ikon: 46 ikon
- Generowanie mockupów: 140 mockupów
- Pobieranie ikon SVG: 11 SVG
- Komercyjna licencja AI: ✓
v0.dev (v0.dev)
Generowanie stron, komponentów, prototypów i kodu
Plan darmowy:
- Do 200 projektów
- Wdrażanie aplikacji na Vercel
- Dzienne i miesięczne limity wiadomości
Plan Premium ($20/miesiąc ≈ 80 zł):
Wszystko z planu Free, oraz:
- 10–20x więcej wiadomości niż w planie Free
- Brak miesięcznych limitów wiadomości
- 5x większy limit rozmiaru załączników
- Nielimitowana liczba projektów
- Import z Figma
Prototypy interfejsu użytkownika (UI) możesz tworzyć też w narzędziu Uizard (uizard.io)
Adobe Express (adobe.com/express/feature/ai/image/remove-background)
Usuwanie tła z grafik
Plan darmowy: bez limitu po zalogowaniu
Midjourney (midjourney.com)
Generowanie grafik lub zdjęć
Plan Basic
Cena miesięczna: $10 ≈ 40 zł
Cena roczna: $96 ($8/miesiąc ≈ 32 zł)
- Szybki czas GPU generowania obrazów: 3,3 godziny/miesiąc (200 minut)
- Możliwość dokupienia czasu GPU: $4/godz. ≈ 16 zł/godz.
- Maks. liczba jednoczesnych zadań: 3 szybkie zadania
Plan Standard
Cena miesięczna: $30 ≈ 120 zł
Cena roczna: $288 ($24/miesiąc ≈ 96 zł)
- Szybki czas GPU generowania obrazów: 15 godzin/miesiąc
- Czas GPU w trybie Relax: nielimitowany
- Możliwość dokupienia czasu GPU: $4/godz. ≈ 16 zł/godz.
- Maks. liczba jednoczesnych zadań: 3 szybkie lub Relax
- Maks. liczba powtórzeń/permutacji: 10 zadań
Alternatywne narzędzia do Midjourney to:
- Reve (reve.art)
- Recraft (recraft.ai)
Attention insights (attentioninsight.com)
Przewidywanie i analiza uwagi użytkowników (attention heatmaps) – pozwala przewidzieć i zweryfikować widoczność kluczowych elementów interfejsu
Plan darmowy (14 dni bezpłatnego testowania):
- 10 kredytów – 1 projekt zabiera ok 2 kredyty
- Znak wodny Attention Insight
Podstawowy plan (29 € / miesiąc ≈ 125 zł):
- 1 użytkownik
- 40 kredytów
- Znak wodny Attention Insight
Microsoft Clarity (clarity.microsoft.com)
Analiza zachowania użytkowników na stronach i aplikacjach webowych (w tym nagrania sesji, heatmapy).
Narzędzie jest darmowe
- Nagrania sesji użytkowników
- Natychmiastowe mapy kliknięć, przewijania, obszarów i konwersji
- Informacje o rage clicks i dead clicks
- Zaawansowana segmentacja z ponad 40 filtrami
- Wspomaganie (Copilot) i analiza sesji
- Wspomaganie (Copilot) i podsumowanie sesji grupowych
- Wspomaganie (Copilot) i podsumowanie map ciepła
Free Convert (freeconvert.com/video-compressor/download)
Kompresja wideo pod kątem umieszczenia na stronie www
Narzędzie jest darmowe
Chcesz nauczyć się projektowania UX z wykorzystaniem narzędzi AI?
Jak to wygląda w praktyce?
Obejrzyj webinar, podczas którego Sebastian Świtek pokazuje jak, krok po kroku, korzystać z opisanych wyżej narzędzi:
Projekt UI tester
Prompt do v0.dev:
Create a page where I can test the style of mobile UI components. I want to be able to control three colors: primary, secondary, and accent with color picker. I also want to control the font of headings and paragraphs separately. Import 10 modern interesting fonts from Google Fonts. Change of the colors or fonts should affect the components. On this page, showcase various mobile components that use those defined by user styles: Bottom Navigation Bar Top App Bar, donut chart, linear chart, Button Icon Button Dropdown / Picker Card with the photo and text below the photo Card with photo and text on the photo List / List Tile with icons Toast Popover. Those components should have colorfull backround to test colors.
Use Icons library lucide.dev For charts use library chart js
On the left sidebar put all settings for colors and text. Show all components at the same time on one page in rows
Use attached photos. [załączamy zdjęcia]
Projekt strony www
Prompt do chataGPT
Create a lo-fi wireframe of a homepage for a shoemaker's website. The client is a traditional shoemaker with a retro brand identity. The design should include the following sections: hero image with a tagline, short "About the Shoemaker" section, list of key services (e.g. custom shoes, repairs, leather care), customer testimonials, and contact information with a map. The layout should be simple, mobile-friendly, and prioritize readability. Use placeholder text and basic grayscale UI components. Don't add colors or detailed graphics — keep it strictly low-fidelity.
Kolejny prompt po wygenerowaniu szkicu
I'm creating this website in WordPress. Please prepare the code for a hero section that I can paste into the Gutenberg editor. Use this image: [wstawiamy link do obrazu]
Testimonials Prompt
Convert to code this section
add animations, use font zen maru gothic, use attached logo
