/impeccable live
Live
Iteráció a felületen a böngészőben. Válassz egy elemet, adj hozzá megjegyzést, kapj három változatot. Fogadd el valamelyiket, és a forrásba írja.
Levelek, alkalmanként.
Képeslap a szerkesztőtől, nagyjából havonta egyszer. Nincs követő pixel, nincs „csak jelentkezem”.
A Live Mode félúton a ciklusban: a választó körvonalazza a kiválasztott elemet, a környezeti sáv mutatja, melyik változaton vagy, és a globális sáv alul rögzítve marad. Az elfogadás ezen a ponton a 2. variánst visszaírja a forrásba.
Mikor használd
Nyúlj a /impeccable live parancshoz, amikor vizuálisan szeretnél iterálni valamin, úgy, ahogy egy tervezőeszközben tennéd, de a kimenet továbbra is gyártási kód marad. A vászonhoz hasonló Figma-élmény az implementációs lépés oda-vissza utazása nélkül.
Használd ilyen esetekre:
- Irányok felfedezése egy valós elemen. Egy hero szekció, egy hírlevél-kártya, egy árazási szint. Három valóban különböző megközelítés, egymás mellett, a tényleges oldalon a tényleges környezetben.
- Egy majdnem jó felületi elem polírozása. Érzed, mi a baj, de nem tudod pontosan megfogalmazni. Válaszd ki az elemet, firkáld rá, hogy „játékosabb”, vagy húzz egy vonalat a zavaró részen, és nyomj Go-t.
- Gyors A/B összehasonlítás két irány között, amiről a csapat vitatkozik. Generálj variánsokat, ne fogadj el semmit, menj tovább. A lényeg az összehasonlítás volt.
NEM való új zöldmezős funkciókhoz (ahasználd a /impeccable craft parancsot) vagy egész oldalas átdizájnhoz (ahasználd a /impeccable parancsot vagy egy specializált refine parancsot).
Hogyan működik
Egyetlen parancs felhoz egy választó overlay-t a futó fejlesztői szerveredre. Válassz bármelyik elemet. Egy kis környezeti sáv jelenik meg mellette. Írj egy szabad formátumú leírást, vagy válassz egyet az művelet chipek közül (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Opcionálisan tegyél megjegyzés-pinokat vagy húzz vonalakat közvetlenül az elemre, és a szakértelem ezeket szándékként olvassa.
Nyomj Go-t. Három gyártási minőségű variáns generálódik, mindegyik egy valóban különböző dizájn archetípushoz rögzítve (nem három szín-változat), és a keretrendszered HMR-én keresztül az oldalba cserélődik. Lépkedj köztük a nyílbillentyűkkel. Fogadj el egyet, és a variáns visszaírásra kerül a forrásba. Dobd el mindhármat, és az eredeti marad.
Támogatja a Vite, Next.js (monorepókat is beleértve), SvelteKit, Astro, Nuxt és sima statikus HTML rendszereket. Ha a fejlesztői szervered szigorú Content Security Policy-vel rendelkezik, az első futtatás észleli, és egyszeri, csak fejlesztői javaslatot tesz, hogy a választó be tudjon tölteni. A DESIGN.md nyer a vizuális döntéseknél, a PRODUCT.md nyer a hangnemnél: ha mindkettő megvan, a variánsok márka-helyesek maradnak anélkül, hogy mondanád.
Próbáld ki
/impeccable live
Nyisd meg a fejlesztői szerver URL-t, válaszd ki a hírlevél-feliratkozási kártyát, kattints a delight chipre, nyomj Go-t. Három variánst kapsz, amelyek személyiség-dimenziók mentén változnak (bélyeg-és-képeslap érzés, tipográfiai meglepetés verzió, illusztrált akcentus), nem a ugyanazon kezelés három változata.
Vagy válassz egy herot, írd be, hogy „szerkesztőiesebb, kevésbé SaaS”, nyomj Go-t. A három variáns különböző szerkesztői archetípusokhoz rögzül (széles lap masthead, katalógus-stílusú spec sorok, túlméretezett glyph poszter), nem ugyanazon ötlet három árnyalata.
Állítsd le a live mode-ot, ha végeztél: mondd, hogy „állítsd le a live mode-ot”, zárd be a lapot, vagy nyomd meg a kilépés gombot a választó sávon.
Gyakori buktatók
- Olyan oldalon futtatva, ami még félkész. A live variáns-generálás kontextusra van szüksége. Ha az elem helyőrző szöveget, általános Lorem ipsumot vagy stíluslap előtti alapértelmezett formázást tartalmaz, a variánsok ezt tükrözik. Először töltsd ki a tartalmat.
- Arra számítani, hogy makro döntéseket hoz. A live mode egyetlen kiválasztott elemen iterál. A „csináld újra az egész árazási oldalt” feladathoz használd a
/impeccablevagy/impeccable craftparancsot. - A tartalék üzenetek figyelmen kívül hagyása. Ha az elem egy generált fájlban van (fordított sablon, build kimenet), a választó ezt kifejezetten jelzi, és felajánlja, hogy az elfogadást az igazi forrásba irányítsa. Ne kényszerítsd az elfogadást a generált fájlba: a következő build letörli.
- PRODUCT.md vagy DESIGN.md nélkül futtatva, amikor a márka-illeszkedés számít. A Live akkor is generál, de a variánsok általános alapértékek felé hajlanak. Futtasd először a
/impeccable teachés/impeccable documentparancsokat, ha az eredménynek a terméked hangján kell szólnia.