Live

Nar du ska anvanda det

Anvand /impeccable live nar du vill iterera pa nagot visuellt pa det satt du skulle gora i ett designverktyg, men behalla produktionskod som utmatning. Det canvas-liknande flodet i Figma utan rundturen till ett implementeringssteg.

Anvand det for:

• Att utforska riktningar pa ett riktigt element. En hero-sektion, ett nyhetsbrevskort, en prisniva. Tre genuint olika tolkningar, sida vid sida, pa den faktiska sidan med det faktiska sammanhanget.
• Att polera en UI-del som ar nästan ratt. Du vet vad som känns fel men kan inte riktigt sager det. Valj elementet, skriv “mer lekfullt” eller dra ett streck genom det bit som stör dig, tryck pa Go.
• En snabb A/B mellan tva riktningar ditt team diskuterar. Generera varianter, acceptera ingenting, ga vidare. Poangen var jamforelsen.

Det ar INTE for nya gronmarksfunktioner (anvand /impeccable craft) eller hela sidor-omdesigner (anvand /impeccable eller ett specialiserat forfiningskommando).

Hur det fungerar

Ett kommando tar fram en valjar-overlagring ovanpa din körande dev-server. Du valjer valfritt element. Eatt litet kontextfalte doker upp bredvid det. Skriv en fri beskrivning eller valj en av atgardchippen (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Droppa valfritt kommentarstift eller dra streck direkt pa elementet forst, sa laser fardigheten dessa som avsikt.

Tryck pa Go. Tre produktionskvalitetsvarianter genereras, var och en förankrad till en genuint olika designarketyp (inte tre variationer pa farg) och hot-swapade till sidan via ditt ramverks HMR. Vaxla mellan dem med piltangenter. Acceptera en och varianten skrivs tillbaka till kallkoden. Forkasta alla tre och originalet star kvar.

Det stodjer Vite, Next.js (inklusive monorepos), SvelteKit, Astro, Nuxt och vanlig statisk HTML. Om din dev-server har en strikt Content Security Policy, upptacker den forstakörsuppsattningen det och erbjuder en engangs, dev-only-korrigering sa valjaren kan ladda. DESIGN.md vinner pa visuella beslut, PRODUCT.md vinner pa rost: om du har bada, haller varianterna sig till varumarket utan att bli tillsagda.

Prova det

/impeccable live

Oppna din dev-server-URL, valj nyhetsbrevsregistreringskortet, klicka pa delight-chipet, tryck pa Go. Du faar tre varianter som varierar over personalitetsdimensioner (en stämplad-och-vykort-kansla, en typografisk-overraskning-version, en illustrerad-accent-en), inte tre variationer pa samma behandling.

Eller valj en hero, skriv “mer redaktionellt, mindre SaaS”, tryck pa Go. De tre varianterna förankrar till olika redaktionella arketyper (bredtidnings-masthead, katalogstil-specrader, overdimensionerad-glyph-affisch) snarare an tre nyanser av samma idé.

Stoppa live-laget nar du ar klar: sager “stop live mode”, stang fliken eller tryck pa exit-knappen pa valjarfaltet.

Fallgropar

• Att kora det pa en sida som fortfarande ar halvskriven. Live variantgenerering behovr kontext. Om elementet har platshallartext, generisk Lorem ipsum, eller forformatrering fore stilmall, kommer varianterna att reflektera det. Fyll i innehallet forst.
• Att forventa att den fatter makrobeslut. Live-laget itererar pa ett enda valt element. For “gör om hela prissidan”, anvand /impeccable eller /impeccable craft istallet.
• Att ignorera fallback-meddelandena. Om elementet lever i en genererad fil (en kompilerad mall, en byggnadsutmatning), sager valjaren det uttryckligen och erbjuder att dirigera accepten till riktig kallkod. Tvinga inte accepten till den genererade filen: nasta bygge kommer att radera den.
• Att kora den utan PRODUCT.md eller DESIGN.md nar du bryr dig om varumarkespassning. Live kommer fortfarande att generera, men varianterna kommer att luta mot generiska standardvarden. Kor /impeccable teach och /impeccable document forst om resultatet behovr lata som din produkt.