Referenciák és kész komponensek
Két dolog dobja meg a végeredményt: jó referenciák (hogy a Claude tudja, milyen stílust szeretnél) és kész, minőségi komponensek.
Design-referenciák gyűjtése
Mielőtt promptolsz, gyűjts 3–5 oldalt vagy képet, ami megfogott. Add oda a linkeket a Claude-nak a briefben — így nem találgat, hanem célzottan a te ízlésedhez igazodik.
Dribbble
dribbble.com — dizájn-koncepciók, UI-ötletek, mikrointerakciók.
Awwwards
awwwards.com — díjnyertes, prémium weboldalak, a felső kategória.
pinterest.com — hangulattáblák, színvilág, tipográfiai irányok.
Konkurensek
A saját iparágad legjobb oldalai — mit csinálnak jól, mit lehet überelni.
Kész komponensek — 21st.dev
A 21st.dev modern, kész React-komponensek gyűjteménye (interaktív 3D-jelenetek, fényeffektek, kártyák). React + Tailwind CSS + TypeScript + shadcn/ui környezetbe valók.
A menet: a 21st.dev-en kiválasztasz egy komponenst, kapsz egy integrációs leírást (melyik fájl hova kerül, milyen NPM-csomagok kellenek), és ezt odaadod a Claude Code-nak, ami beépíti. Tipikus függőségek: framer-motion (animáció), lucide-react (ikonok), Spline-csomagok (3D).
Képek és média
A hős-kép (hero image) és a vizuálok sokat dobnak. Állítsd elő külön AI-eszközökkel, vagy használj jogtiszta stockfotót. A lényeg: valódi, a márkához illő képek legyenek, ne random placeholderek — és a szöveg se „Lorem ipsum”.
Munkafolyamat-tipp
Tartsd a referenciákat egy /refs mappában (screenshotok + link-lista egy markdownban), és hivatkozz rá a briefben. Komponens-integrációnál a 21st.dev-leírást tedd egy COMPONENT.md-be, és kérd a Claude-ot, hogy a /components/ui alá illessze, a meglévő design-tokenekkel összhangban. Így a vizuális nyelv konzisztens marad.
Görgess a fejezet végére, hogy továbbléphess — vagy válassz másik fejezetet a bal oldali listából.