Зібрати сайт у 2026 році може кожен. Claude Code, Codex, будь-який конструктор зі штучним інтелектом — і сторінка готова за вечір. Я сам так роблю. Проблема давно не в тому, щоб зробити сайт. Проблема в тому, що всі ці сайти однакові.
Відкрийте десять сайтів, зібраних через нейромережі, і побачите один і той самий набір: фіолетовий градієнт, шрифт Inter, кнопка «Get started», цифри й заголовки, прибиті до лівого краю, стандартні блоки один за одним. Ваш сайт у цьому ряду не відрізнити від сусідніх. Він тоне серед мільйона таких самих — і нічого не продає.
Рішення я знайшов на GitHub: 4 відкриті скіли для Claude Code — Impeccable, Taste Skill, Animation Skill та UI UX Pro Max. Кожен лікує свій шматок дизайну: правила, смак, рух, систему. Разом вони збирають сайт, який виглядає як ваш бренд, а не як шаблон. Далі — розбір кожного скіла з прямими посиланнями.
Сайти-клони: у чому біль
Власники бізнесу навчилися робити сайти самі. Це факт, і це добре: не треба чекати підрядника, платити за кожну правку, пояснювати очевидне. Відкрив Claude Code, описав задачу — отримав сайт.
Але подивіться на результат чесно. Сайти, зібрані через ШІ, хворіють на одне й те саме: однакова структура, однакові прийоми, однакові цілі блоків. Заголовок ліворуч, цифри ліворуч, три колонки переваг, відгуки каруселлю, форма «залиште заявку». Текст змінюється — каркас лишається.
Відвідувач такого сайту не бачить різниці між вами й конкурентом через дорогу. А якщо різниці немає, рішення ухвалюють за ціною. Ви втягуєтесь у гонку знижок, яку неможливо виграти: завжди знайдеться той, хто дешевше.
Шаблонність б'є і по довірі. Людина заходить на сайт, бачить знайомий до болю каркас — і в неї складається відчуття конвеєра. Конвеєр не викликає бажання лишити заявку. Живий, характерний дизайн — викликає.
Я не кажу, що треба наймати агентство за великі гроші. Я кажу, що в шаблонності є технічне рішення, і воно безкоштовне.
Анатомія шаблонного сайта: впізнайте свій
Шаблон видно за три секунди. Перевірте свій сайт за цим списком — що більше збігів, то глибше ви в шаблоні:
- hero-блок: фіолетовий або синій градієнт, заголовок ліворуч, кнопка «Get started» або «Залишити заявку»;
- шрифт Inter скрізь — у заголовках, у тексті, у кнопках;
- цифри й заголовки прибиті до лівого краю без видимої системи;
- блок «переваги» — три однакові колонки з іконками;
- відгуки — каруселлю, з однаковими п'ятизірковими цитатами;
- тонка рамка в карток із широкою розмитою тінню;
- картка всередині картки — вкладеність заради вкладеності.
Кожен пункт окремо — не злочин. Проблема в тому, що вони йдуть пакетом. Мозок відвідувача миттєво зчитує цей пакет як «я це вже бачив» — і перестає читати. Увага — головна валюта сайта — обнуляється за перші три секунди.
Гірше того, в шаблонних сайтів однакові не лише форми, а й цілі. Усі блоки ведуть до одного: «залиште заявку». Усі говорять про одне: «ми найкращі, в нас якісно». Коли цілі однакові й форми однакові, сайтам нічим відрізнятися — і відвідувач обирає за ціною. Ви хотіли сайт, який продає, а отримали сайт, який бере участь у тендері навпаки: хто дешевше.
Чому Claude Code малює шаблони
Claude Code — чудовий виконавець, але смаку в нього немає. Смак — це тисячі ухвалених рішень: який відступ, який кегль, де пауза, де акцент. Нейромережа таких рішень не ухвалювала. Вона бачила мільйони сайтів і вивчила найчастіше. Найчастіше — це і є шаблон.
Тому за замовчуванням ви отримуєте усереднений дизайн: безпечний, охайний і безликий. Claude Code не ризикує. Він ставить Inter, бо Inter ставлять усі. Він фарбує hero-блок у фіолетовий градієнт, бо так робили тисячі лендингів до вас. Він не знає, що ваш бренд — зухвалий, або строгий, або теплий. Вашого брендбука в нього в голові немає.
Є й друга проблема, менш помітна: дрейф стилю від сторінки до сторінки. Сьогодні Claude Code зібрав головну в одному настрої, завтра — каталог в іншому. Шрифти трохи інші, відступи трохи інші, кнопки трохи інші. Окремо кожна сторінка виглядає пристойно. Разом — як сайти різних компаній. Відвідувач цього не формулює, але відчуває: щось не сходиться. Зафіксовані правила прибирають і цей дрейф: система пам'ятає рішення краще, ніж модель конкретного вечора.
Скіли вирішують саме це: вони дають Claude Code те, чого йому бракує, — правила, смак, відчуття руху й систему. Це не плагіни у звичному сенсі. Скіл — це упакований досвід: розбори, правила, приклади, які Claude Code підвантажує в момент роботи й застосовує до вашого проєкту.
Impeccable: мова дизайну, яка знає 62 ШІ-штампи
Impeccable зробив Пол Бакаус — той самий, що створив jQuery UI. У репозиторію 87 тисяч зірок на GitHub, і це не випадковість: скіл б'є точно в головну хворобу.
Impeccable знає 62 типові ШІ-штампи в обличчя. Фіолетовий градієнт — штамп. Inter скрізь — штамп. Тонка рамка з широкою тінню, картка в картці, кнопка «Get started» — усе це в його чорному списку. Коли Claude Code тягнеться до звичного прийому, скіл його зупиняє й пропонує рішення рівнем вище.
Друге, що робить Impeccable, — фіксує правила дизайну на старті проєкту. Ви один раз описуєте, що за продукт і які в нього правила, — і далі Claude Code їх тримається на всіх екранах. Шрифти не розповзаються, відступи не плавають, стиль не змінюється від сторінки до сторінки. Це те, що в агентствах називають дизайн-системою на мінімалках, тільки тут вона живе просто в проєкті.
Третє — розбір готового інтерфейсу. Скіл вміє взяти зібраний екран, розкласти його по кісточках, довести деталі, поправити шрифти, додати рух там, де його бракує. Я проганяв через нього свої збірки: різниця між «до» і «після» — як між чернеткою та релізом.
Якщо коротко: Impeccable — це редактор з характером, який сидить поруч із Claude Code і не дає йому лінуватися.
Що це дає вашому сайту на практиці: зникають маркери «зібрано роботом», які відвідувач зчитує несвідомо. Сайт перестає бути схожим на тисячу сусідніх ще до того, як людина прочитала перше слово. Перше враження — «тут думали», а не «тут згенерували».
Taste Skill: смак замість «на око»
Taste Skill зібрали на розборі 247 найкращих сайтів світу. 102 тисячі зірок. Ідея проста й сильна: смак можна декомпозувати.
Працює це так. Ви описуєте задачу — і скіл пропонує не один варіант, а три напрямки з двадцяти можливих, після чого обирає слушний. Ви отримуєте не «як у всіх», а усвідомлений вибір стилістики під вашу задачу.
Далі — найцікавіше. Taste Skill сам відкриває зібрану сторінку в браузері: на телефоні, на планшеті, на ноутбуці. Дивиться на свої скріншоти очима користувача й виправляє знайдене. До трьох кіл перевірки. Це те, що живий дизайнер робить перед здачею макета, тільки тут це автоматизовано.
І головне правило скіла: якщо результат схожий на типовий ШІ-лендинг — перевірку він не проходить. Робота повертається на доопрацювання. Уявіть, що у вашій команді з'явився арт-директор, який ніколи не втомлюється й ніколи не каже «і так зійде».
Для власника бізнесу це означає конкретне: сайт перестає виглядати як зібраний за вечір. З'являється відчуття, що над ним думали: підібрали ритм, розставили акценти, перевірили на всіх екранах.
Практичний ефект: три напрямки на вибір перетворюють дизайн із лотереї на рішення. Ви не приймаєте те, що випало, — ви обираєте з осмислених варіантів. А автоматична перевірка на трьох пристроях закриває вічний біль «на моєму ноутбуці було нормально, а в клієнта на телефоні роз'їхалось».
Animation Skill: рух без смикання
Animation Skill — від Еміля Ковальски. Він працював у Vercel і Linear, зробив бібліотеки Sonner і Vaul, які ви напевно бачили в сучасних інтерфейсах. 49 тисяч зірок.
Анімація — це те, де шаблонність видно найсильніше. Або її немає взагалі, і сайт виглядає мертвим. Або вона є, але смикана: все вилітає зліва, все підстрибує, все блимає. Обидва варіанти кричать «мене зібрав робот».
Скіл оперує точними цифрами, а не відчуттями: кнопка — 100–160 мілісекунд, підказка — 125–200, модальне вікно — 200–500. Плавне сповільнення наприкінці руху, без різких ривків. Кнопка при натисканні трохи стискається, а не стрибає. Це рівень деталей, до якого у власника бізнесу зазвичай не доходять руки, — а відвідувач різницю відчуває, навіть не розуміючи, у чому річ.
Правильна анімація робить дві речі: скеровує увагу й створює відчуття якості. Коли інтерфейс рухається точно й стримано, мозок зчитує це як ознаку дорогої роботи. Коли все смикається — як ознаку виробу.
На практиці це працює на конверсію мовчки: відвідувач не думає «яка гарна анімація кнопки», він просто відчуває, що сайту можна довіряти. Довіра — це те, що перетворює візит на заявку.
UI UX Pro Max: ціла база дизайну в одному файлі
UI UX Pro Max — наймасивніший із чотирьох: 140 тисяч зірок, 192 палітри, 74 пари шрифтів, 119 правил зручності, 79 стилів. Це не скіл, це бібліотека.
Підхід тут інший: скіл не вигадує, а шукає найкраще під вашу задачу. Пишете «кав'ярня» — отримуєте слушний стиль, кольори, шрифти й перелік того, чого робити не треба. Пишете «юридична фірма» — отримуєте зовсім інший набір. Рішення беруться з розібраної практики, а не з голови нейромережі.
Усе знайдене збирається в один файл — готову дизайн-систему вашого проєкту. Палітра, шрифтові пари, правила, стилі компонентів: один документ, на який Claude Code спирається за кожної наступної збірки. Дизайн перестає залежати від настрою моделі конкретного вечора.
Для бізнесу це найпрактичніша частина: ви один раз задаєте візуальну мову — і далі всі сторінки, всі нові розділи говорять нею ж. Сайт росте, а не розповзається.
Що це дає в перекладі на сенс: 192 палітри означають, що колірне рішення добирається, а не призначається. 74 шрифтові пари — що заголовки й текст поєднуються осмислено. 119 правил зручності — що відвідувач не спотикається об дрібниці. Кожне з цих чисел — це рішення, яке вам не довелося ухвалювати наосліп.
Як чотири скіли працюють разом
Окремо кожен скіл — сильний інструмент. Разом вони закривають весь дизайн цілком:
- Impeccable задає правила й не дає скотитися в штампи;
- Taste Skill обирає стилістику й перевіряє результат очима користувача;
- Animation Skill додає точний, стриманий рух;
- UI UX Pro Max збирає все в єдину систему, яка живе в проєкті.
Порядок саме такий: спочатку правила, потім смак, потім рух, потім система. Виходить конвеєр, на виході якого — сайт із характером. Не «сайт як у всіх, тільки з іншим логотипом», а інтерфейс, який можна впізнати.
Важливий нюанс: конвеєр працює ітеративно. Зібрали першу версію — Taste Skill знайшов проблеми на планшеті — виправили — Impeccable перевірив, що правки не порушили правил, — Animation Skill підтягнув рух під новий розклад. Кожне коло робить сайт точнішим. Без скілів ці кола людина робить очима й руками; зі скілами кола крутить машина, а людина лише вирішує.
Важливо: скіли не сперечаються між собою. Вони вирішують різні задачі на різних рівнях, і їх можна ставити всі чотири одразу. Я так і роблю.
Як це виглядає в роботі: розбір на прикладі
Візьмемо задачу, яку скіли описують самі: сайт кав'ярні. Не реальний кейс, а ілюстрація механіки — щоб було видно, де працює кожен скіл.
Ви описуєте Claude Code: кав'ярня, тепла, власна обсмажка, гості приходять попрацювати й зустрітися. Без скілів ви отримали б стандартний набір: hero з градієнтом, три колонки «чому ми», карусель відгуків.
Зі скілами ланцюжок інший. Impeccable першим ділом фіксує правила: тепла палітра замість фіолетового градієнта, шрифтова пара з характером замість Inter скрізь, заборона на картку в картці. UI UX Pro Max добирає під «кав'ярню» конкретну палітру зі своїх 192, шрифтову пару з 74, перелік прийомів, яких варто уникати. Taste Skill пропонує три стилістичні напрямки з двадцяти — скажімо, «скандинавський мінімалізм», «тепла крафт-естетика», «міський лофт» — і допомагає обрати той, що лягає на ваш бренд. Потім він же відкриває зібране на телефоні, планшеті й ноутбуці та править те, що роз'їхалось. Animation Skill налаштовує рух: кнопка «Забронювати столик» відгукується за 100–160 мілісекунд, меню розкривається плавно, нічого не стрибає.
На виході — сайт, який ні з чим не сплутати: теплий, характерний, ваш. Той самий контент, ті самі блоки за змістом — але зовсім інше враження. Ось що означає «дизайн під бренд» на практиці.
Часті питання (FAQ)
Це заміна дизайнеру? Ні. Скіли прискорюють рутину й тримають планку, але характер бренду задаєте ви, а стратегію — людина. Якщо у вас є дизайнер, скіли стануть його прискорювачем: чернетки й перевірки робляться швидше. Якщо дизайнера немає, скіли закриють типові задачі: правила, смак, рух, систему.
Треба вміти програмувати? Ні. Ви описуєте задачу й бренд словами — як ви вже робите, коли збираєте сайти через Claude Code. Скіли працюють усередині цього самого процесу: ви кажете, що треба, вони стежать, щоб вийшло нешаблонно.
А якщо я користуюсь не Claude Code, а іншим інструментом? Ці чотири скіли зроблені для Claude Code. Для інших інструментів дивіться документацію в репозиторіях авторів — я описую те, що перевірив сам.
Скільки часу це займає? Встановлення — один раз, далі скіли працюють у тлі кожного проєкту. Розбір готового екрана через Impeccable — хвилини. Три кола перевірки Taste Skill — автоматично, поки ви п'єте каву. Це не окремий проєкт, це новий режим роботи.
А якщо в мене вже є сайт? Скіли працюють і з готовим. Impeccable вміє розбирати зібраний інтерфейс: проганяєте через нього наявні сторінки, отримуєте розбір — що поправити, — і правите тим самим Claude Code. Зносити й будувати заново не треба.
Це платно? Усі чотири — відкриті репозиторії на GitHub. Посилання наприкінці статті.
З чого почати
Усі чотири скіли — відкриті репозиторії на GitHub. Посилання — наприкінці статті, встановлення описане в авторів. Ставляться вони в Claude Code й починають працювати з першого ж проєкту.
Моя порада щодо порядку: почніть з Impeccable — він дає найпомітніший ефект одразу, бо першим ділом убиває штампи. Потім додайте UI UX Pro Max, щоб зафіксувати систему. Taste Skill і Animation Skill підключайте, коли база вже стоїть: смак і рух лягають на готові правила значно краще.
І один практичний момент: скіли не скасовують вашої участі. Ви й далі вирішуєте, який у бізнесу характер, — зухвалий, спокійний, преміальний. Скіли перекладають цей характер у конкретні дизайн-рішення. Що точніше ви описуєте бренд, то точніший результат.
Коли це не підходить
Чесно про межі. Якщо сайт — внутрішній інструмент, який бачать троє співробітників, — дизайн-система надмірна, вистачить шаблону.
Якщо у вас уже працює дизайнер, який веде брендбук і малює систему вручну, — скіли його не замінять. Вони прискорять рутину, але стратегію бренду й далі визначає людина.
Якщо потрібен не інтерфейс, а відеоролик або 3D-сцена, — це інші інструменти, скіли про екрани й рух у них.
В усіх інших випадках — сайт, лендинг, інтернет-магазин, сторінка експерта — чотири скіли закривають питання «чому в мене як у всіх» повністю.
Підсумок
Шаблонний дизайн — не вирок і не привід наймати агентство. Це технічна проблема, в якої є технічне рішення: 4 відкриті скіли для Claude Code. Impeccable прибирає штампи й тримає правила. Taste Skill додає смак і перевіряє результат. Animation Skill дає точний рух. UI UX Pro Max збирає все в систему під ваш бренд.
Ваш сайт перестає бути одним із мільйона. Він стає вашим: з вашим характером, вашим брендбуком, вашим стилем. А це вже не про красу — це про заявки.
Мільйон однакових сайтів — не метафора, а стрічка, в якій тоне ваш. Чотири скіли — спосіб із неї виплисти без бюджету агентства: правила замість випадковості, смак замість шаблону, рух замість смикання, система замість дрейфу. Сайт стає впізнаваним. А впізнаваність — це те, за що платять. Почніть з одного скіла вже сьогодні — і завтра ваш сайт перестане бути клоном.