Live

Кога да се използва

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

Използвайте го за:

• Проучване на посоки върху реален елемент. Hero секция, карта за бюлетин, ценово ниво. Три наистина различни подхода, един до друг, на действителната страница с действителния контекст.
• Полиране на парче UI, което е почти наред. Знаете какво се усеща не наред, но не можете точно да го кажете. Изберете елемента, надраскайте “по-игриво” или начертайте черта през частта, която ви дразни, натиснете Старт.
• Бързо A/B между две посоки, по които екипът ви дебатира. Генерирайте варианти, не приемайте нищо, тръгнете си. Целта беше сравнението.

НЕ е за нови greenfield функции (обърнете се към /impeccable craft) или преработки на цялата страница (обърнете се към /impeccable или специализирана команда за усъвършенстване).

Как работи

Една команда извежда overlay с избирач върху вашия работещ дев сървър. Избирате който и да е елемент. Появява се малка контекстна лента до него. Въведете свободно описание или изберете един от чиповете за действие (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). По желание пуснете коментарни карфици или начертайте черти директно върху елемента първо и умението ги чете като намерение.

Натиснете Старт. Три варианта с производствено качество се генерират, всеки закачен за наистина различен дизайн архетип (не три вариации по цвят) и горещо заменени в страницата чрез HMR-а на вашия фреймуърк. Разгънете ги със стрелките. Приемете един и вариантът се записва обратно в изходния код. Отхвърлете и трите и оригиналът остава.

Поддържа Vite, Next.js (включително монорепота), SvelteKit, Astro, Nuxt и обикновен статичен HTML. Ако вашият дев сървър има строга Content Security Policy, първоначалната настройка я засича и предлага еднократна, само за дев, кръпка, така че избирачът да се зареди. DESIGN.md печели във визуални решения, PRODUCT.md печели за глас: ако имате и двете, вариантите остават в рамките на бренда, без да им бъде казвано.

Пробвайте

/impeccable live

Отворете URL-а на вашия дев сървър, изберете картата за абонамент за бюлетин, кликнете чипа delight, натиснете Старт. Ще получите три варианта, които варират в измеренията на персоналността (усещане за печат и пощенска картичка, типографско-изненадваща версия, илюстрована акцентна), не три вариации на същото третиране.

Или изберете hero, напишете “по-редакционно, по-малко SaaS”, натиснете Старт. Трите варианта се закачат за различни редакционни архетипи (мачтата на броадшит, спецификационни редове в стил каталог, постер с преувеличен глиф) вместо три нюанса на същата идея.

Сприете live режима, когато сте готови: кажете “спрете live mode”, затворете таба или натиснете бутона за изход на лентата с избирача.

Клопки

• Изпълнение върху страница, която все още е наполовина написана. Генерирането на live варианти се нуждае от контекст. Ако елементът има заместващ текст, родов Lorem ipsum или форматиране по подразбиране преди стилове, вариантите ще отразяват това. Попълнете съдържанието първо.
• Очакване да взема макро решения. Live mode итерира върху един избран елемент. За “преработете цялата ценова страница”, обърнете се към /impeccable или /impeccable craft вместо това.
• Игнориране на fallback съобщенията. Ако елементът живее в генериран файл (компилиран шаблон, изход от билд), избирачът го казва изрично и предлага да насочи приемането към истинския изходен код. Не насилвайте приемането в генерирания файл: следващият билд ще го изтрие.
• Изпълнение без PRODUCT.md или DESIGN.md, когато ви е грижа за съответствието с бренда. Live все още ще генерира, но вариантите ще се накланят към родови стойности по подразбиране. Изпълнете /impeccable teach и /impeccable document първо, ако резултатът трябва да звучи като вашия продукт.