( ಠ ʖ̯ ಠ)☞ Я тестую: SEO та ШІ 🇺🇦 | Як позбутися дефолтного ШІ-дизайнуБагато хто вже впізнає AI slop (непр...

Як позбутися дефолтного ШІ-дизайнуБагато хто вже впізнає AI slop (непримітний ШІ-контент) з першого погляду.Anthropic написали про це короткий пост і показали, як позбутися цього за допомогою Skills і готового промпта.Суть проблемиКоротко: моделі LLM навчені на тисячах сайтів зі стандартними шрифтами, однаковими кольорами та мінімумом анімацій. Ось вони й генерують це за замовчуванням.РішенняAnthropic запропонували готовий промпт та інструкцію в Skills — це контекст на вимогу, який завантажується тільки коли потрібно. Не роздуває системний промпт на завданнях, де фронтенд не потрібен.Промпт<frontend_aesthetics>Ви схильні сходитися до загальних, "типових" результатів. У фронтенд-дизайні це створює те, що користувачі називають "AI slop" естетикою. Уникайте цього: створюйте креативні, унікальні фронтенди, які дивують і захоплюють.Зосередьтеся на:- Типографіка: Обирайте шрифти, які є красивими, унікальними та цікавими. Уникайте загальних шрифтів на кшталт Arial та Inter; натомість обирайте виразні варіанти, які підвищують естетику фронтенду.- Колір і тема: Дотримуйтесь цілісної естетики. Використовуйте CSS-змінні для послідовності. Домінантні кольори з яскравими акцентами перевершують невиразні, рівномірно розподілені палітри. Черпайте натхнення з тем IDE та культурної естетики.- Рух: Використовуйте анімації для ефектів та мікровзаємодій. Надавайте перевагу CSS-рішенням для HTML. Використовуйте бібліотеку Motion для React, коли доступно. Зосередьтеся на моментах високого впливу: одне добре оркестроване завантаження сторінки з послідовними появами (animation-delay) створює більше задоволення, ніж розкидані мікровзаємодії.- Фони: Створюйте атмосферу та глибину замість стандартних однотонних кольорів. Накладайте CSS-градієнти, використовуйте геометричні патерни або додавайте контекстні ефекти, які відповідають загальній естетиці.Уникайте загальної ШІ-генерованої естетики:- Надмірно використовувані шрифти (Inter, Roboto, Arial, системні шрифти)- Банальні колірні схеми (особливо фіолетові градієнти на білому фоні)- Передбачувані макети та шаблони компонентів- Шаблонний дизайн без характеру, специфічного для контекстуІнтерпретуйте творчо та робіть несподівані рішення, які відчуваються справді розробленими для контексту. Варіюйте між світлими та темними темами, різними шрифтами, різною естетикою. Ви все ще схильні сходитися на загальних виборах (наприклад, Space Grotesk) у різних генераціях. Уникайте цього: критично важливо мислити нестандартно!</frontend_aesthetics> ЗастосуванняМожна використовувати не тільки в Claude, але й у Cursor, Windsurf, Codex, Lovable та інших ШІ-редакторах як кастомну інструкцію.Повний гайд доступний за посиланнями, для Claude використовуйте Skills.