Live

Когда использовать

Обращайтесь к /impeccable live, когда хотите итерировать визуально так же, как в дизайн-инструменте, но с production-кодом как результатом. Холст-подобный процесс Figma без обратного пути к этапу реализации.

Используйте для:

• Исследования направлений на реальном элементе. Hero-блок, карточка рассылки, тарифный план. Три действительно разных подхода, бок о бок, на реальной странице в реальном контексте.
• Полировки UI, который почти готов. Вы знаете, что не так, но не можете точно сказать. Выберите элемент, напишите «более игриво» или нарисуйте штрих через то, что мешает, нажмите Go.
• Быстрого A/B между двумя направлениями, которые обсуждает команда. Сгенерируйте варианты, ничего не принимайте, уходите. Целью было сравнение.

Это НЕ для новых функций с нуля (обращайтесь к /impeccable craft) или полных редизайнов страниц (обращайтесь к /impeccable или специализированной команде доработки).

Как это работает

Одна команда вызывает оверлей-выборщик поверх вашего запущенного dev-сервера. Вы выбираете любой элемент. Рядом появляется маленькая контекстная панель. Введите свободное описание или выберите один из чипов действий (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Опционально сначала разместите комментарии-булавки или нарисуйте штрихи прямо на элементе — навык прочитает их как намерение.

Нажмите Go. Три production-качественных варианта генерируются, каждый привязан к действительно разному дизайнерскому архетипу (а не три вариации цвета) и подгружены на страницу через 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. Три варианта привязаны к разным редакторским архетипам (газетная шапка, каталожные строки-спецификации, плакат с негабаритным глифом), а не три оттенка одной идеи.

Остановите live mode, когда закончите: скажите «stop live mode», закройте вкладку или нажмите кнопку выхода на панели выборщика.

Подводные камни

• Запуск на странице, которая ещё наполовину написана. Для генерации вариантов live нужен контекст. Если элемент содержит текст-заглушку, стандартный Lorem ipsum или предтаблицные стили по умолчанию, варианты это отразят. Сначала заполните контент.
• Ожидание макро-решений. Live mode итерирует один выбранный элемент. Для «переделать всю страницу тарифов» обращайтесь к /impeccable или /impeccable craft.
• Игнорирование сообщений fallback’а. Если элемент находится в сгенерированном файле (скомпилированный шаблон, build-вывод), выборщик скажет об этом явно и предложит направить accept в настоящий исходный код. Не форсируйте accept в сгенерированный файл: следующая сборка его затрёт.
• Запуск без PRODUCT.md или DESIGN.md, когда важна принадлежность к бренду. Live всё равно сгенерирует варианты, но они будут тяготеть к стандартным умолчаниям. Сначала запустите /impeccable teach и /impeccable document, если результат должен звучать как ваш продукт.