Коли клієнт хоче оновити дизайн — змінити кольори, ущільнити відступи чи додати інтерфейсу корпоративного стилю — розробники зазвичай переписують код. Ви або правите шаблони власноруч, або доручаєте це AI-агенту, а потім перевіряєте сотні правок у кожному view. У будь-якому разі стилістичне рішення перетворюється на зміну коду, і кожен наступний рестайлінг коштує так само дорого.
Pinion UI пропонує інший підхід: повне оновлення дизайну має бути справою атрибутів, а не переписуванням коду. Це безкоштовна бібліотека UI-компонентів для Laravel з ліцензією MIT, яка розділяє колір та форму на два HTML-атрибути:
<html data-theme="finance" data-tune="corporate">data-theme відповідає за колір. data-tune керує формою: відступами, радіусом закруглення, типографікою та тінями. Ці параметри незалежні, тому будь-яка тема сумісна з будь-яким налаштуванням форми. Завдяки 39 темам, 11 варіантам форми та підтримці світлого й темного режимів, та сама розмітка може мати 858 різних варіантів вигляду. Достатньо змінити одне значення — і весь застосунок оновиться миттєво та консистентно на кожному екрані.
# Що насправді передбачає рестайлінг
Справжній рестайлінг — це не лише новий основний колір. Це цілісна система відступів, шрифтів та тіней, витримана на кожній сторінці. Саме такої послідовності важко досягти від AI: моделі добре розуміють наміри, але часто помиляються в деталях, видаючи щоразу трохи інший результат. Pinion UI вирішує це детерміновано. Кожна тема — це вивірена палітра, а кожна форма — продумана система візуальних параметрів. Дизайнерські рішення вже закладені в бібліотеці та застосовуються уніфіковано.
(Подивитися, як це працює в реальному часі, можна на pinion-ui.dev — ви можете самостійно перетягнути роздільник.)
# На основі стандартних інструментів
Pinion UI — це плагін для TALL stack (Tailwind, Alpine.js, Laravel, Livewire). Він базується на двох відомих рішеннях: daisyUI (використовується лише для токенів кольорів) та Alpine.js для легкої реактивності. Бібліотека не створює жодних зайвих абстракцій. Усі 56 Blade-компонентів генерують чистий та зрозумілий Tailwind-код:
<x-button color="primary" icon="rocket">Ship it</x-button>
<x-badge color="success">Active</x-badge>
<x-input label="Email" type="email" />
<x-rating :value="4" />У вашому репозиторії залишається звичайний Blade та Tailwind. Його легко читати, відлагоджувати та підтримувати — навіть ті частини, які згенерував AI-агент.
# Робота з AI-агентами
Pinion UI розроблений із чітким розподілом обов'язків: агент відповідає за логіку, а бібліотека — за стабільність стилів. Команда php artisan ui:install --ai створює у проєкті файл AGENTS.md. Він надає AI-агенту достатньо контексту для самостійного вибору компонентів та тем — наприклад, агент може сам вибрати data-theme="health" для медичного застосунку.
Робочий процес підтримують дві команди. ui:lint перевіряє Blade-шаблони на наявність класів поза словником бібліотеки, щоб код залишався чистим. А ui:eject у будь-який момент дозволяє перетворити все на стандартний Tailwind — ви не стаєте заручником інструменту.
# 39 готових тем
Теми названі відповідно до сфер застосування: payments, legal, education, health, kids, estate. Також є «настроєві» варіанти, як-от zen чи vapor. Загалом доступно: одна стандартна тема, 11 настроєвих, 11 для SaaS та 16 галузевих. Кожна тема містить світлу та темну версії, що автоматично адаптуються під prefers-color-scheme.
# Як почати
Налаштування виконується двома командами:
composer require sparrowhawk-labs/pinion-ui
php artisan ui:install --aiНаступного разу, коли проєкту знадобиться новий вигляд, просто змініть атрибут замість коду. Усі 858 комбінацій доступні для попереднього перегляду на pinion-ui.dev. Pinion UI — це безкоштовний продукт від Sparrowhawk Labs.