Live

Ne zaman kullanılır

Görsel olarak bir şeyi, bir tasarım aracında yapacağınız gibi yinelemek, ancak üretim kodunu çıktı olarak tutmak istediğinizde /impeccable live komutunu kullanın. Bir uygulama adımına gidiş-dönüş olmadan Figma’nın tuval benzeri akışı.

Şunlar için kullanın:

• Gerçek bir öğe üzerinde yönleri keşfetmek. Bir hero bölümü, bir bülten kartı, bir fiyatlandırma katmanı. Gerçekten farklı üç yaklaşım, yan yana, gerçek sayfada gerçek bağlamda.
• Neredeyse doğru olan bir UI parçasını cilalamak. Neyin yanlış hissettirdiğini biliyorsunuz ama tam olarak söyleyemiyorsunuz. Öğeyi seçin, “daha eğlenceli” yazın veya sizi rahatsız eden kısmın üzerinden bir çizgi çizin, Başlat’a basın.
• Takımınızın tartıştığı iki yön arasında hızlı bir A/B. Varyantlar oluşturun, hiçbirini kabul etmeyin, ayrılın. Amaç karşılaştırmaydı.

Yeni sıfırdan özellikler (/impeccable craft komutunu kullanın) veya tam sayfa yeniden tasarımlar (/impeccable veya uzmanlaşmış bir iyileştirme komutu kullanın) için değildir.

Nasıl çalışır

Tek bir komut, çalışan geliştirme sunucunuzun üzerinde bir seçici katmanı getirir. Herhangi bir öğeyi seçin. Yanında küçük bir bağlam çubuğu belirir. Serbest biçimli bir açıklama yazın veya eylem çiplerinden birini seçin (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). İsteğe bağlı olarak önce öğe üzerine yorum pinleri bırakın veya çizgiler çizin ve beceri bunları niyet olarak okur.

Başlat’a basın. Her biri gerçekten farklı bir tasarım arketipine bağlı (renk üzerine üç ezgi değil) olan ve framework’ünüzün HMR’si aracılığıyla sayfada sıcak takas edilen üç üretim kalitesinde varyant oluşturulur. Ok tuşlarıyla bunlar arasında geçiş yapın. Birini kabul edin ve varyant kaynak koda geri yazılır. Üçünü de reddedin ve orijinal kalır.

Vite, Next.js (monorepo dahil), SvelteKit, Astro, Nuxt ve düz statik HTML’yi destekler. Geliştirme sunucunuzda sıkı bir Content Security Policy varsa, ilk çalıştırma kurulumu bunu algılar ve seçicinin yüklenmesi için yalnızca geliştirme için tek seferlik bir yama sunar. Görsel kararlerde DESIGN.md önceliklidir, seste PRODUCT.md önceliklidir: ikisine de sahipseniz, varyantlar söylenmeden markaya sadık kalır.

Deneyin

/impeccable live

Geliştirme sunucusu URL’nizi açın, bülten kayıt kartını seçin, delight çipine tıklayın, Başlat’a basın. Kişilik boyutları arasında farklılık gösteren üç varyant alacaksınız (pul ve kartpostal hissi, tipografik sürpriz sürümü, illüstrasyonlu vurgu sürümü), aynı işlemenin üç farklı ezgisi değil.

Veya bir hero seçin, “daha editoryal, daha az SaaS” yazın, Başlat’a basın. Üç varyant, aynı fikrin üç farklı tonu yerine farklı editoryal arketiplere (geniş format masthead, katalog tarzı spesifikasyon satırları, aşırı büyük glyph posteri) bağlanır.

İşiniz bittiğinde canlı modu durdurun: “canlı modu durdur” deyin, sekmeyi kapatın veya seçici çubuğundaki çıkış düğmesine basın.

Tuzaklar

• Henüz yarısı yazılmış bir sayfada çalıştırmak. Canlı varyant oluşturma bağlama ihtiyaç duyar. Öğede yer tutucu metin, genel Lorem ipsum veya stil sayfası öncesi varsayılan biçimlendirme varsa, varyantlar bunu yansıtır. Önce içeriği doldurun.
• Makro kararlar almasını beklemek. Canlı mod, seçilmiş tek bir öğe üzerinde yineleme yapar. “Tüm fiyatlandırma sayfasını yeniden yap” için bunun yerine /impeccable veya /impeccable craft komutunu kullanın.
• Geri dönüş mesajlarını görmezden gelmek. Öğe oluşturulmuş bir dosyadaysa (derlenmiş bir şablon, bir yapı çıktısı), seçici bunu açıkça söyler ve kabulü gerçek kaynak koduna yönlendirmeyi sunar. Kabulü oluşturulmuş dosyaya zorlamayın: sonraki yapı bunu siler.
• Marka uyumunu önemsediğinizde PRODUCT.md veya DESIGN.md olmadan çalıştırmak. Canlı mod yine de oluşturur, ancak varyantlar genel varsayılanlara eğilim gösterir. Sonucun ürününüze uygun ses çıkarması gerekiyorsa önce /impeccable teach ve /impeccable document komutlarını çalıştırın.