Live

Wanneer te gebruiken

Gebruik /impeccable live wanneer je visueel wilt itereren op iets zoals je in een ontwerptool zou doen, maar productiecode als output behoudt. De canvas-achtige flow van Figma zonder de retourtrip naar een implementatiestap.

Gebruik het voor:

• Richtingen verkennen op een echt element. Een hero-sectie, een nieuwsbriefkaart, een prijstier. Drie echt verschillende benaderingen, naast elkaar, op de daadwerkelijke pagina met de daadwerkelijke context.
• Een stuk UI polijsten dat bijna goed is. Je weet wat niet goed voelt maar kunt het niet precies zeggen. Kies het element, krabbel “speelser” of teken een arcering door het deel dat je stoort, klik op Start.
• Een snelle A/B tussen twee richtingen waar je team over debatteert. Genereer varianten, accepteer niets, loop weg. Het punt was de vergelijking.

Het is NIET voor nieuwe groene-weide functies (gebruik /impeccable craft) of volledige pagina-herontwerpen (gebruik /impeccable of een gespecialiseerd verfijningscommando).

Hoe het werkt

Eén commando brengt een picker-overlay bovenop je draaiende dev-server. Je kiest elk element. Een kleine contextbalk verschijnt ernaast. Typ een vrije-vorm beschrijving of kies een van de actiechips (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Optioneel kun je eerst commentaarpinnen plaatsen of arceringen direct op het element tekenen, en de skill leest die als intentie.

Klik op Start. Drie productiekwaliteit varianten worden gegenereerd, elk verankerd aan een echt verschillend ontwerparchetype (niet drie variaties op kleur) en hot-swapped in de pagina via de HMR van je framework. Blader erdoor met pijltjestoetsen. Accepteer een en de variant wordt teruggestuurd naar de broncode. Verwerp alle drie en het origineel blijft staan.

Het ondersteunt Vite, Next.js (inclusief monorepos), SvelteKit, Astro, Nuxt en gewone statische HTML. Als je dev-server een strikt Content Security Policy heeft, detecteert de first-run setup dit en biedt een eenmalige, dev-only patch aan zodat de picker kan laden. DESIGN.md wint bij visuele beslissingen, PRODUCT.md wint bij stem: als je beide hebt, blijven varianten on-brand zonder dat het wordt verteld.

Probeer het

/impeccable live

Open je dev-server-URL, kies de nieuwsbrief-aanmeldkaart, klik op de delight-chip, klik op Start. Je krijgt drie varianten die variëren over persoonlijkheidsdimensies (een postzegel-en-ansichtkaart-gevoel, een typografisch-verrassingsversie, een geillustreerd-accent-versie), niet drie variaties op dezelfde behandeling.

Of kies een hero, typ “meer redactioneel, minder SaaS”, klik op Start. De drie varianten verankeren aan verschillende redactionele archetypen (broadsheet-masthead, catalogus-stijl specificatierijen, oversized-glyph poster) in plaats van drie tinten van hetzelfde idee.

Stop live mode als je klaar bent: zeg “stop live mode”, sluit het tabblad, of klik op de afsluitknop op de picker-balk.

Valkuilen

• Het uitvoeren op een pagina die nog half geschreven is. Live variant-generatie heeft context nodig. Als het element plaatstekst heeft, generieke Lorem ipsum, of pre-stylesheet standaardformattering, zullen varianten dat weerspiegelen. Vul eerst de inhoud in.
• Verwachten dat het macro-beslissingen maakt. Live mode itereert op een enkel gekozen element. Voor “maak de hele prijspagina opnieuw”, gebruik /impeccable of /impeccable craft in plaats daarvan.
• De fallback-berichten negeren. Als het element in een gegenereerd bestand leeft (een gecompileerde template, een build-output), zegt de picker dat expliciet en biedt aan de acceptatie door te sturen naar de echte broncode. Forceer de acceptatie niet in het gegenereerde bestand: de volgende build wist het.
• Het uitvoeren zonder PRODUCT.md of DESIGN.md wanneer je om merkfit geeft. Live genereert nog steeds, maar de varianten leunen naar generieke standaardwaarden. Voer eerst /impeccable teach en /impeccable document uit als het resultaat als jouw product moet klinken.