Prompt z videa Claude Fable 5 je zpět. Zkopíruj, vlož do Claude a máš prémiový editorial web s animacemi. Zdarma, bez háčků.
<aside> 💸
i když začínáš od nuly!**
⋆ 4,9/5 od 100+ účastníků · přihlášky procházíme individuálně, nebereme každého.
</aside>
Jsi senior UX/UI designér a art director specializující se na prémiové
editorial weby (úroveň Awwwards Site of the Day). Vytvoř kompletní
one-page web pro řemeslnou pražírnu výběrové kávy DVOJKA z Brna.
KONTEXT A CÍL
Cílovka: náročný městský zákazník 25 až 40 let, kupuje výběrovou kávu
domů, ocení design. Cíl webu: prodat předplatné kávy (box jednou
měsíčně, 3 tiery). Positioning: prémiová, ne hipsterská. Web musí
působit jako značka, za kterou stojí studio, ne šablona.
ART DIRECTION
- Editorial layout inspirovaný print magazínem: asymetrický 12sloupcový
grid, velkorysý whitespace, sekce nesmí být jen "nadpis + 3 karty".
- Typografie: display serif pro headliny (Fraunces z Google Fonts,
optical size, váha 300 až 600, velikosti až 12 vw v hero), grotesk
pro body (Inter). Číslování sekcí drobným monospace (01, 02, 03).
- Barvy: tmavý podklad #141110, krémová #F2EAE0, terakota akcent
#C96F4A, nic dalšího. Žádné gradienty, žádné glassmorphism,
žádné emoji, žádné generické stock ilustrace.
- Obrázky: použij CSS/SVG kompozice (zrnka, kruhy pražení, mapy
původu) místo fotek, ať soubor funguje offline.
HERO (musí být "wow")
- Full viewport. Obří serif headline přes 2 řádky, slova se odhalují
stagger animací zdola (clip-path reveal), až potom fade-in sub-line
a CTA. Za textem pomalu rotující SVG kruh s textem po křivce
("čerstvě praženo v Brně" dokola). Jemný parallax na scroll.
- Nahoře minimální sticky nav (logo vlevo, 3 kotvy + CTA vpravo),
po scrollu se podlije barvou pozadí s blur.
SEKCE (v tomto pořadí, každá jiný layout)
01 Manifest: editorial blok, velký pull-quote přes 8 sloupců,
text se odhaluje po řádcích při scrollu.
02 Jak to funguje: 3 kroky jako horizontální časová osa s velkými
číslicemi, ne karty.
03 Výběr káv: 3 kávy (Etiopie, Kolumbie, Brazílie) jako střídavé
editorial řádky obraz/text zrcadlově, u každé chuťový profil
a nadmořská výška, hodnoty se animují counterem.
04 Čísla: pás se 4 countery (kg upraženo, odběratelů, farem, let).
05 Recenze: 2 velké citace serif italikou, žádný carousel.
06 Pricing předplatného: 3 tiery, prostřední zvýrazněný terakotou,
roční/měsíční toggle.
07 FAQ: accordion s plusem rotujícím na křížek.
08 Footer: obří wordmark DVOJKA přes celou šířku, kontakt, IG.
GSAP (načti z cdnjs: gsap + ScrollTrigger)
- Hero stagger reveal, parallax vrstvy, scrub rotace SVG kruhu.
- Každá sekce fade-up s lehkým y posunem, stagger na dětech.
- Countery přes ScrollTrigger jednou při vjezdu do viewportu.
- Pull-quote v manifestu: line-by-line reveal se scrub.
- Marquee pás mezi sekcemi ("single origin — praženo ručně — Brno")
v nekonečné smyčce.
- Respektuj prefers-reduced-motion (animace vypnout).
KVALITA A TECHNIKA
- Jeden HTML soubor, vše inline (CSS i JS), externí jen Google Fonts
a gsap/ScrollTrigger z cdnjs. Musí fungovat po otevření souboru
lokálně v prohlížeči, bez build stepu a bez chyb v konzoli.
- Plně responzivní (360 px až 1920 px), na mobilu typografie škáluje
přes clamp().
- Texty česky, lidsky, sebevědomě, krátké věty. Žádné marketingové
klišé typu "jedinečný zážitek", žádný lorem ipsum.
- Hover mikrointerakce na všech odkazech a tlačítkách (underline
reveal, magnetický CTA button).
Tenhle prompt je nástroj. Řemeslo, tedy vědět, co má web prodat a jak to obhájit před klientem, je to, za co ti lidé platí. A přesně to učím.
💸 Zjisti, jestli se hodíš → webdesignhero.cz