A NAP AI TUDÁSANYAGA: Kerüld el az alapértelmezett Claude esztétikát a Claude Designban
A Claude Designnal kapcsolatos legnagyobb panasz ezen a hétvégén az volt, hogy minden kimenet ugyanúgy néz ki: kékeszöld színátmenetek, serif betűtípus, villogó állapotjelző pont, egymásra épülő konténerelrendezések. Ennek az az oka, hogy a Claude Design a beépített frontend-design skilljére támaszkodik, amelynek van egy kis készlete alapértelmezett beállításokból, amelyekhez visszanyúl, ha laza promptot adsz neki. A megoldás egyszerű: adj neki egy design systemet, amit utánoznia kell, mielőtt bármilyen képernyőt kérnél. Tölts fel 3-5 referencia screenshotot olyan appokról, amelyeknek a kinézetét kölcsönözni szeretnéd, nevezd meg azokat a konkrét design tokeneket, amelyek érdekelnek (betűcsalád, színpaletta, border-radius, spacing scale), és hagyd, hogy Claude először építse fel a design systemet. Ezután generálj képernyőket ezen a rendszeren belül. Az Anthropic tervezője, Ryan Mather 7 tippje pontosan ezt a mintát követi; beállítja a rendszert és az alapképernyőket, mielőtt bármilyen generálást futtatna. Párosítsd az Anthropic saját frontend-design skilljével a legjobb eredményekért; valójában kiegészítik egymást, nem pedig ütköznek.
- Másolható-beilleszthető indító: Mielőtt bármit is terveznénk, építs nekem egy design systemet ezekre a referenciákra alapozva: [tölts fel 3-5 screenshotot kedvenc appjaidról] Határozz meg tokeneket a következőkhöz: színpaletta (nevezz el minden színt), tipográfiai skála, térköz skála, border-radius értékek, árnyékmélységek és alapkomponensek (gombok, inputok, kártyák). Ha elkészültél, mutasd meg a rendszert egy style guide oldalként. Még ne generálj semmilyen képernyőt. Én megmondom, ha készen állunk. Ezután iterálj a Comment eszközzel a pontos szerkesztésekhez, ahelyett, hogy az egész képernyőt újra promptolnád.
- Telepítsd az ui-ux-pro-max-ot, egy ingyenes open-source Claude skillt 55K+ GitHub csillaggal. Sokkal nagyobb design szókincset ad Claude-nak: 50+ stílust (glassmorphism, brutalism, bento grid, dark mode), 161 színpalettát, 57 betűtípus párosítást és 99 UX irányelvet, amelyek 161 terméktípushoz illeszkednek. A skill automatikusan aktiválódik, amikor UI/UX munkát kérsz, és olyan stílust választ, amely tényleg illik a termékedhez, nem az Anthropic házistílusát. Csak add meg ezt a repót Claude-nak, és kérd meg, hogy „telepítse ezt a https://github.com/nextlevelbuilder/ui-ux-pro-max-skill-t skillként a skill creator skill skill creator skilljével (scripts.package_skill), hogy egy kattintásos futtatható fájlt adjon nekem, amelyet lemásolhatok a skill library-mbe”.
- Ha műszaki beállítottságú vagy, és Claude kódot használsz, ezt is megteheted: claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
- A skill először egy teljes design systemet épít (egy MASTER.md-t tokenekkel és oldal szintű felülírásokkal), és csak ezután generál képernyőket. Ugyanaz a „rendszer először, képernyők másodszor” minta, amelyet Ryan Mather is kiemelt fentebb az immár kanonikusnak számító 7 tippjében.