Як уникнути шаблонного AI-дизайну в ваших застосунках

ШІ стає просто неймовірно крутим у створенні застосунків, але є одна проблема: вони всі виглядають як шаблон — максимально базово.

Ті самі картки із заокругленими кутами.

Ті самі м'які градієнти.

Та сама структура дашборду.

Той самий UI без жодної реальної ідеї за ним.

Тому я створив скіл для Claude Code, який переробляє інтерфейси застосунків саме так, щоб цього уникнути.

все починається з концепту

Замість того, щоб просити Claude зробити щось «чисте», «мінімалістичне» чи «преміальне», скіл спершу шукає візуальний концепт, який дійсно пасує застосунку.

Додаток для бігу можна побудувати навколо легкоатлетичної доріжки.

Додаток для сну може відчуватися як село, що повільно засинає.

Додаток про рослини може виглядати як паперова аплікація.

А додаток для вивчення італійської може запозичити стиль неаполітанських гральних карт.

Цей концепт стає основою для типографіки, верстки, кольорів, ілюстрацій та анімації.

Мета — перестати дизайнити на основі типових UI-патернів і почати відштовхуватися від справжньої ідеї.

він не чіпляється за перший варіант

Одна з найбільших проблем ШІ-дизайну — він надто рано фіксується на рішенні.

Ти даєш йому промпт, він генерує один напрямок, і далі все будується навколо цієї першої відповіді.

Цей скіл змушує Claude спочатку дослідити три різні напрямки.

І лише після їх порівняння він продовжує роботу з одним.

Вже тільки це робить фінальний результат значно менш передбачуваним.

потім він перевіряє сам себе

Коли екрани готові, вони рендеряться в реальній роздільній здатності iPhone з використанням шрифтів Apple.

Після цього ще один етап критики шукає типові ознаки згенерованого ШІ інтерфейсу.

Шаблонні патерни компонентів, слабка ієрархія, нерівномірні відступи, однотипні картки, зайві градієнти, верстка, яка виглядає як шаблон, а не як продукт.

Якщо щось здається надто банальним — воно йде на доопрацювання.

робочий процес такий:

концепт → напрямки → дизайн → рендер → критика → доведення до ладу.

сенс не в тому, щоб зробити ШІ красивішим, я створив це не тому, що ШІ не здатен малювати привабливі інтерфейси.

Ще й як здатен.

Проблема в тому, що «привабливо» і «по-різному» — це не одне й те саме.

Багато згенерованих ШІ застосунків виглядають лощено, якщо дивитися на них окремо. Але постав десять таких поруч — і вони почнуть відчуватися як один і той самий продукт.

Усі зображення вище створені саме для того, щоб цього уникнути.

Різні застосунки мають відчуватися як різні світи.

По суті, для цього скіл і потрібен:

зберегти швидкість ШІ-дизайну, але не отримати на виході щось, що кричить «мене зробив ШІ».