Live

Коли використовувати

Зверніться до /impeccable live, коли хочете ітерувати щось візуально так, як у дизайн-інструменті, але зберігаючи продакшн-код як результат. Canvas-подібний процес Figma без етапу реалізації.

Використовуйте для:

• Дослідження напрямків на реальному елементі. Hero-секція, картка розсилки, тарифний план. Три дійсно різні підходи поруч, на фактичній сторінці з фактичним контекстом.
• Полірування частини UI, яка майже правильна. Ви знаєте, що щось не так, але не можете точно сказати що. Оберіть елемент, напишіть “більш грайливий” або закресліть те, що дратує, натисніть Go.
• Швидкий A/B між двома напрямками, про які сперечається команда. Згенеруйте варіанти, нічого не приймайте, йдіть далі. Мета була в порівнянні.

Це НЕ для нових greenfield-функцій (зверніться до /impeccable craft) або повних редизайнів сторінки (зверніться до /impeccable або спеціалізованої команди вдосконалення).

Як це працює

Одна команда викликає оверлей пікера поверх вашого запущеного dev-серверу. Ви обираєте будь-який елемент. Поруч з’являється невелика контекстна панель. Введіть вільний опис або оберіть один з чипів дій (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). За бажанням, спочатку залиште коментарі або намалюйте штрихи безпосередньо на елементі, і навичка зчитує їх як намір.

Натисніть Go. Генеруються три продакшн-якісні варіанти, кожен прив’язаний до дійсно різного дизайнерського архетипу (не три варіації кольору) та гаряче підмінюються на сторінці через HMR вашого фреймворку. Перемикайтеся між ними стрілками. Прийміть один, і варіант записується у вихідний код. Відхильте всі три, і оригінал залишається.

Підтримуються Vite, Next.js (включаючи монорепозиторії), SvelteKit, Astro, Nuxt та звичайний статичний HTML. Якщо ваш dev-сервер має сувору Content Security Policy, налаштування при першому запуску виявить це і запропонує одноразове, лише для dev, виправлення, щоб пікер міг завантажитися. DESIGN.md пріоритетніший для візуальних рішень, PRODUCT.md пріоритетніший для голосу: якщо у вас є обидва, варіанти залишаються в рамках бренду без додаткових вказівок.

Спробуйте

/impeccable live

Відкрийте URL вашого dev-серверу, оберіть картку підписки на розсилку, натисніть чип delight, натисніть Go. Ви отримаєте три варіанти, що різняться за вимірами індивідуальності (стиль марки та листівки, версія з типографським сюрпризом, варіант з ілюстрованим акцентом), а не три варіації одного й того самого підходу.

Або оберіть hero, введіть “більш редакційний, менш SaaS”, натисніть Go. Три варіанти прив’язані до різних редакційних архетипів (газетний masthead, рядки специфікацій у стилі каталогу, постер з гліфами великого розміру), а не три відтінки однієї ідеї.

Зупиніть live mode, коли закінчите: скажіть “stop live mode”, закрийте вкладку або натисніть кнопку виходу на панелі пікера.

Підводні камені

• Запуск на сторінці, яка ще напівнаписана. Генерація живих варіантів потребує контексту. Якщо елемент має текст-заглушку, узагальнений Lorem ipsum або форматування за замовчуванням до таблиці стилів, варіанти відображатимуть це. Спочатку заповніть контент.
• Очікування макро-рішень. Live mode ітерує один обраний елемент. Для “переделайте всю сторінку тарифів” зверніться до /impeccable або /impeccable craft.
• Ігнорування резервних повідомлень. Якщо елемент знаходиться у згенерованому файлі (скопілений шаблон, вихідний файл збірки), пікер каже про це прямо і пропонує спрямувати прийняття у справжній вихідний код. Не примушуйте прийняття в згенерований файл: наступна збірка витре його.
• Запуск без PRODUCT.md або DESIGN.md, коли вам важлива відповідність бренду. Live все одно генеруватиме, але варіанти схилятимуться до типових значень за замовчуванням. Спочатку запустіть /impeccable teach та /impeccable document, якщо результат має звучати як ваш продукт.