Live

Hvornår du skal bruge den

Grib efter /impeccable live, når du vil iterere på noget visuelt på den måde du ville i et designværktøj, men beholde produktionskode som output. Det canvas-lignende flow fra Figma uden returen til et implementeringstrin.

Brug den til:

• At udforske retninger på et rigtigt element. En hero-sektion, et nyhedsbrevskort, en prisniveau. Tre genuint forskellige tilgange, side om side, på den faktiske side med den faktiske kontekst.
• At polere et stykke UI der næsten er rigtigt. Du ved hvad der føles forkert, men kan ikke helt sige det. Vælg elementet, krible “mere legende” eller tegn en streg gennem det der irriterer dig, tryk Go.
• En hurtig A/B mellem to retninger dit team diskuterer. Generer varianter, accepter ingen, gå væk. Pointen var sammenligningen.

Den er IKKE til nye grønne features (grib efter /impeccable craft) eller hel-side-redesigns (grib efter /impeccable eller en specialiseret forfin-kommando).

Hvordan det virker

En kommando bringer en picker-overlay oven på din kørende dev-server. Du vælger et hvilket som helst element. En lille kontekstbjælke vises ved siden af. Skriv en fri beskrivelse eller vælg en af handlingschipsene (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Eventuelt drop kommentar-pins eller tegn streger direkte på elementet først, og færdigheden læser dem som intention.

Tryk Go. Tre produktionskvalitetsvarianter genereres, hver forankret til en genuint forskellig design-arketype (ikke tre riffar på farve) og hot-swappet ind på siden via dit frameworks HMR. Cykl dem med piletasterne. Accepter en, og varianten skrives tilbage til kilde. Kassér alle tre, og originalen forbliver.

Den understøtter Vite, Next.js (inklusive monorepos), SvelteKit, Astro, Nuxt og almindelig statisk HTML. Hvis din dev-server har en streng Content Security Policy, opdager den førstegangopsætningen det og tilbyder en engangs, kun-dev-lappeløsning, så pickeren kan indlæses. DESIGN.md vinder på visuelle beslutninger, PRODUCT.md vinder på stemme: hvis du har begge, forbliver varianter on-brand uden at blive fortalt.

Prøv det

/impeccable live

Åbn din dev-server-URL, vælg nyhedsbrevs-tilmeldingskortet, klik delight-chippet, tryk Go. Du får tre varianter der varierer på tværs af personlighedsdimensioner (et frimærke-og-postkort-følelse, en typografisk-overraskelse-version, en med illustreret accent), ikke tre riffar på samme behandling.

Eller vælg en hero, skriv “mere redaktionel, mindre SaaS”, tryk Go. De tre varianter forankrer til forskellige redaktionelle arketyper (broadsheet-masthead, katalog-stil spec-rækker, overdimensioneret-glyph plakat) frem for tre nuancer af samme idé.

Stop live mode, når du er færdig: sig “stop live mode”, luk fanen, eller tryk exit-knappen på picker-bjælken.

Faldgruper

• At køre den på en side der stadig er halvskrevet. Live variantgenerering har brug for kontekst. Hvis elementet har placeholder-tekst, generisk Lorem ipsum, eller pre-stylesheet standardformatering, vil varianter afspejle det. Udfyld indholdet først.
• At forvente at den træffer makro-beslutninger. Live mode itererer på et enkelt valgt element. For “omgør hele prissiden”, grib efter /impeccable eller /impeccable craft i stedet.
• At ignorere fallback-beskederne. Hvis elementet lever i en genereret fil (en kompileret skabelon, et build-output), siger pickeren det eksplicit og tilbyder at rute accepten ind i reel kilde. Tving ikke accepten ind i den genererede fil: næste build vil slette den.
• At køre den uden PRODUCT.md eller DESIGN.md, når du bekymrer dig om brand-fit. Live vil stadig generere, men varianterne vil leane mod generiske standarder. Kør /impeccable teach og /impeccable document først, hvis resultatet skal lyde som dit produkt.