Design-skillek: Frontend Design + UI/UX Pro Max (hogy ne legyen AI-szagú)

[Scofield]

A skill egy mappa, benne egy SKILL.md fájllal (és kiegészítőkkel), ami a Claude-ot egy adott területen profivá teszi. Weboldalépítéshez kettőt ajánlunk – ez a titka annak, hogy ne „AI-szagú” legyen az eredmény.

Hol tárolódnak?​

• Windows: C:\Users\<felhasználónév>\.claude\skills\
• macOS / Linux: ~/.claude/skills/

Skill #1 – Frontend Design (Anthropic hivatalos)​

Ezért lesz az oldal megjelenése egyedi és igényes. Legegyszerűbb telepítés: indítsd el a Claude Code-ot, és írd be neki:

Telepítsd ezt a skillt: https://github.com/anthropics/skills/tree/main/skills/frontend-design

A Claude letölti és a helyére másolja. Utána a /frontend-design paranccsal manuálisan is aktiválható, de automatikusan is betöltődik, amikor webes felületet, landing page-et vagy React komponenst kérsz.

Skill #2 – UI/UX Pro Max​

A felhasználói élményre (UX) és a konverzióra fókuszál: jobb elrendezés, tisztább felépítés, erősebb CTA.

Telepítsd ezt a skillt: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Használat (a parancs után jön a brief):

/ui-ux-pro-max Készíts egy prémium weboldalt egy budapesti
steakhouse-nak. Tartalmazzon elegáns animációkat. Tegyél fel
tisztázó kérdéseket, mielőtt elkezded.

Skillek nélkül a Claude is tud weboldalt építeni – de hajlamos a „biztonságos”, generikus megoldásokra (unalmas betűtípus, lila gradiens fehér háttéren, kiszámítható elrendezés). A Frontend Design skill kifejezetten ezt tiltja, és bátor, kontextushoz illő dizájnra ösztönöz.

Nyersanyag: referenciák és kész komponensek​

Mielőtt promptolsz, gyűjts 3–5 oldalt vagy képet, ami megfogott, és add oda a linkeket a Claude-nak a briefben – így nem találgat.

• Dribbble – dizájn-koncepciók, mikrointerakciók
• Awwwards – díjnyertes, prémium weboldalak
• Pinterest – hangulattáblák, színvilág, tipográfia
• Konkurensek – a saját iparágad legjobb oldalai

Kész React-komponensekhez: 21st.dev (React + Tailwind + TypeScript + shadcn/ui). Egyszerű HTML/CSS/JS vagy WordPress oldalnál ezt nyugodtan hagyd ki.

A hős-kép és a vizuálok sokat dobnak: valódi, a márkához illő képek legyenek, ne random placeholderek – és a szöveg se „Lorem ipsum”.