Üretken Kullanıcı Arayüzü Tasarımı: 2026 İçin Pratik El Kitabı

2026'da piyasaya süreceğiniz ekran, kullanıcı isteyene kadar var olmayabilir. Üretken kullanıcı arayüzünün ardındaki iddia budur ve tasarımın ne olduğunu değiştirir.

Bu makale, üretken kullanıcı arayüzü için bir çalışma el kitabıdır. Terimi tanımlar, üretimde kullanılan dört mimariyi adlandırır, size bir desen sözlüğü sunar, hata modlarını isimleriyle belirtir ve güncel kalmak isteyen tasarımcılar için yeni iş tanımını ortaya koyar. Bilerek görüş bildiren bir metindir.

Hypercycle yeterince satıcı sayfası üretti. Tasarımcıların şimdi ihtiyaç duyduğu şey, bir sonraki model sürümünden sonra da geçerli olacak ilkelerdir.

Üretken Kullanıcı Arayüzü Gerçekte Nedir

Üretken kullanıcı arayüzü, kullanıcı niyetine yanıt olarak çalışma zamanında kendini oluşturan bir arayüzdür. Sistem, temel öğelerden oluşan bir sözlük, bunları nasıl birleştireceğini bilen bir model ve hangi birleştirmelerin izin verildiğini söyleyen bir sözleşme içerir. Kullanıcı yazar, konuşur veya tıklar. Arayüz oluşur.

Üretken kullanıcı arayüzünün (GUI) zıttı, yirmi yıldır yaptığımız tasarım anlayışıdır; burada her ekran önceden çizilmiş ve sabit bir akış olarak sunulan statik bir yapıttır. Üretken kullanıcı arayüzü statik ekranların yerini almaz. Uzun kuyruğu emer. Kullanıcıların belirli bir yanıt ve bunun etrafında çok az etkileşim istediği çoğu ürünün sıkıcı orta kısmı, site haritanızdaki bir rota yerine üretilmiş bir yüzey haline gelir.

Faydalı bir test: İki kullanıcının aynı sorusu makul bir şekilde iki farklı düzeni haklı çıkarabiliyorsa, bu yüzey üretken kullanıcı arayüzü için adaydır. Yanıt her zaman tarihe göre sıralanmış sipariş listesi ise, uygun değildir.

Bunun 2026'da değil de 2022'de neden gerçekleştiği

Üç şeyin aynı anda gerçekleşmesi gerekiyordu. Modellerin, araçları çağırabilecek ve paragraflar yerine geçerli bileşen ağaçları üretebilecek kadar yapılandırılmış çıktı konusunda iyi hale gelmesi gerekiyordu. Çerçevelerin, bu ağaçları çalışan bir uygulamaya aktarmanın bir yolunu sunması gerekiyordu. Bileşen kütüphanelerinin, bir modelin gerçekten üzerinde düşünebileceği sözlükler haline gelmesi gerekiyordu.

2026 yılının başlarında üçü de gerçek olacak. v0, kod tabanınıza zaten shadcn ve token'larınızla eşleşen bileşenler gönderiyor. Vercel AI SDK, model bunları ürettikçe bir sunucu rotasından React bileşenlerini akış halinde göndermenizi sağlıyor. Claude Artifacts, bir sohbet sırası içinde kendi kendine yeten etkileşimli bir program oluşturuyor.

ChatGPT Canvas, belgeyi ve etrafındaki kullanıcı arayüzünü tek bir düzenlenebilir yüzey olarak ele alıyor. Bolt ve Same.new, bir komut isteminden çalışan uygulamalar üretiyor. Anthropic araçları ve Cursor'ın composer'ı, ajanların yapılandırılmış sistemlere erişmesine ve bunlara karşı arayüzler oluşturmasına olanak tanıyor.

Bunların hiçbiri aynı ürün değil. Bunlar, altyapının nihayet var olduğunun ve tasarım tartışmasının üretken kullanıcı arayüzünün işe yarayıp yaramadığı sorusunun ötesine geçip nasıl iyi bir şekilde inşa edileceğine odaklanabileceğinin kanıtıdır.

Üretimde Gönderilen Dört Mimari

Üretimde kullanılan üretken kullanıcı arayüzlerinin çoğu dört şekilden biridir. Seçiminizi bilinçli yapın, çünkü bu seçim tasarım sisteminizi, değerlendirmelerinizi ve gecikme bütçenizi kısıtlar.

1. LLM ile işlenmiş bileşenler. Model, kod tabanınızdaki sabit bir bileşen sözlüğünden seçim yapar ve türlendirilmiş bir ağaç üretir. Vercel AI SDK modeli. Tahmin edilebilir, marka tutarlılığına sahip, değerlendirilmesi kolay ve kütüphanenizin zenginliğiyle sınırlıdır.

2. Yapılandırılmış araç çağrıları. Model, yapılandırılmış veri döndüren bir aracı çağırır ve statik bir düzen bunu işler. Çoğu sohbet ürünü özelliği, sabit bir arayüz ve dinamik içerikle bu şekilde çalışır. Ucuz, güvenli ve esneklik açısından sınırlıdır.

3. İsteğe bağlı kod üretimi. Model, Claude Artifacts, v0, Bolt, Same.new ve ChatGPT Canvas gibi kalıplarda kod modunda arayüzü üreten kod yazar. Maksimum aralık, maksimum risk, marka tutarlılığını korumak ve erişilebilirliği sağlamak en zor olanı.

4. Hibritler. En ilginç kategori ve çoğu ciddi ürünün son bulduğu yer. Statik kullanıcı arayüzünün güvenilir bir kabuğu, dinamik orta kısım için LLM ile oluşturulmuş bileşenlerin bir sözlüğü ve nadir özel durumlar için kod üretimi kaçış yolu.

Hangi mimariyi kullandığınızı bilmiyorsanız, yanlış olanı kullanıyorsunuz demektir.

Aralarında Nasıl Seçim Yapılır

Üç soru mimariyi belirler.

| Soru | LLM ile oluşturulmuş | Araç çağrıları | Kod üretimi | Hibrit |

|---|---|---|---|---|

| Marka tutarlılığı yük taşıyıcı mı? | Güçlü | En güçlü | Zayıf | Güçlü |

| Yüzeyin yeni düzenlere ihtiyacı var mı? | Bazı | Neredeyse hiç | Evet | Evet |

| Üretim gecikmesine saniyelerce tahammül edebilir misiniz? | Hayır | Hayır | Genellikle evet | Karışık |

| Yanlış giderse ilk önce ne bozulur? | Kompozisyon hataları | Yanlış içerik | Bozuk kod | Sınır hataları |

LLM ile oluşturulan bileşenler çoğu ekip için doğru varsayılan ayardır. Kod üretimi, yüzey gerçekten tek seferlik olduğunda, örneğin özel bir analiz veya aceleyle oluşturulmuş bir prototip gibi, ve kullanıcının bir taslağa baktığını anladığı durumlarda işe yarar. Araç çağrıları, düzenin çözüldüğü ve yalnızca verilerin dinamik olduğu durumları ele alır. Hibritler, on iki aylık üretim trafiğinden sonra ulaştığınız noktadır.

Desen dili: Tasarımcıların aslında tasarladıkları

Üretken kullanıcı arayüzü tasarım işini ortadan kaldırmaz. Onu başka bir yere taşır. Gönderdiğiniz ürün bir ekran değil, bir sözlüktür.

Çalışan bir sözlüğün beş katmanı vardır.

1. Temel öğeler. Modelin kullanmasına izin verilen atomik bileşenler. Kart, tablo, grafik, form, liste, resim, açıklama balonu, kod bloğu. Her birinin modelin karşılayabileceği türlendirilmiş özelliklere ihtiyacı vardır.

2. Niyet yuvaları. Modelin kullanıcı niyetine göre doldurduğu adlandırılmış bölgeler. "Özet," "kanıt," "eylem," "takip." Yuvalar, bileşimi dondurmadan kısıtlar.

3. Yedek durumlar. Her temel öğenin zarif bir boş, yükleme, kısmi ve reddedilmiş duruma ihtiyacı vardır. Model sürekli olarak bu dört durumu da üretecektir. Bunları birinci sınıf yapılar olarak tasarlayın.

4. Kurtarılabilirlik olanakları. Yerinde düzenleme, yeniden oluşturma, "bana farklı bir sürüm göster," geri alma. Üretken arayüzler konuşmalardır ve konuşmaların bir geri düğmesine ihtiyacı vardır.

5. Alıntı ve kaynak arayüzü. Verinin nereden geldiği, ne zaman alındığı ve sistemin ne kadar emin olduğu. Bunlar olmadan, üretken arayüz emin bir yalancı gibi görünür. Bunlarla birlikte, aynı çıktı dürüst görünür.

Bir tasarımcı, ürünündeki kelime dağarcığının her katmanının ne içerdiğini açıklayamıyorsa, kelime dağarcığı henüz mevcut değildir ve model sadece tahmin yürütmektedir.

Uygulamada Niyet Yuvaları

Niyet yuvaları, çoğu ekibin atladığı ve sonra pişman olduğu kısımdır. Bunları yeni tel çerçeveler olarak düşünün.

Bir yuva, içine neyin yerleştirilebileceğine dair kuralları olan, adlandırılmış, tiplendirilmiş bir bölgedir. "Birincil yanıt" bir çağrı kutusu, bir tablo veya bir grafik kabul edebilir, ancak asla bir form kabul edemez. "Önerilen sonraki adım" bir düğme veya tek bir CTA içeren bir kart kabul edebilir, asla uzun bir paragraf kabul edemez.

Model, tıpkı bir genç tasarımcıya bilgi verdiğiniz gibi, sistem isteminde yuvalar hakkında bilgilendirilir. Ön uç, yuvaları sabit bir düzen ızgarasında işler, böylece içeriği her seferinde değişse bile yüzey tek bir ürün gibi görünür.

Sonuç, oluşturulan bir karmaşa yerine, değişen tasarlanmış bir arayüz olarak okunur. Bu fark, tüm mücadelenin özüdür.

Karşılaşacağınız Hata Modları ve Bunlara Karşı Nasıl Tasarım Yapılır

Üretken kullanıcı arayüzü (UI) belirli, tekrarlanabilir şekillerde başarısız olur. Bunları şimdi adlandırın veya üretimde yeniden keşfedin.

• Halüsinasyonlu Kullanıcı Arayüzü. Model, hiçbir şey yapmayan bir düğme, içeriği olmayan bir sekme veya uydurduğu bir sayı tablosu icat eder. Buna karşı, katı bileşen sözleşmeleri, her üretilen ağacın sunucu tarafı doğrulaması ve işleyicisi bağlanmamış herhangi bir kontrolde devre dışı bırakılmış durumlar kullanarak önlem alın.

• Gecikme Korkusu. Kullanıcı, model düşünürken bir dönen simgeye bakar. Kısmi sonuçları akış halinde gösterin, içerikten önce düzen alanı ayırın ve veriler gelmeden önce modelin amacını ("karşılaştırma tablosu oluşturma") gösterin.

• Sonsuz tuval tuzağı. Kod üretimi yüzeyleri sınırsız gibi görünür ve sonuçta kullanılamaz hale gelir. Tuvali kısıtlayın. Kullanıcıya önceden hangi tür çıktıların mümkün olduğunu gösterin. Başlangıç ​​istemlerinden oluşan bir tablo, boş bir metin alanından her zaman daha iyidir.

• Tek modele bağımlılık. Bir sağlayıcının özelliklerine göre ayarlanmış bir kelime dağarcığı, modelleri değiştirdiğiniz gün bozulur. Herhangi bir makul modelin karşılayabileceği bileşen sözleşmeleri yazın ve yayınlamadan önce değerlendirmelerinizi en az iki sağlayıcıya karşı çalıştırın.

• Konuşma unutkanlığı. Arayüz, az önce ne ürettiğini unutur. Üretilen öğeleri, kullanıcıların adlandırabileceği, kaydedebileceği, paylaşabileceği ve geri dönebileceği birinci sınıf nesneler olarak saklayın. ChatGPT Canvas bunu doğru yaptı. Çoğu yalnızca sohbet odaklı ürün bunu yanlış yapıyor.

Sürdürülebilir üretken kullanıcı arayüzü (UI) geliştiren ekipler, bunları ilk günden itibaren mimari sorunlar olarak ele alırlar, QA'da düzeltilmesi gereken hatalar olarak değil.

Üretken bir UI yüzeyini nasıl değerlendirirsiniz?

Üretken bir UI özelliğini, statik bir sayfayı incelediğiniz gibi inceleyemezsiniz. Çıktı tek bir öğe değil, bir dağıtımdır.

Çalışan bir değerlendirmenin üç katmanı vardır. Birincisi, her oluşturulan ağaç üzerinde kod olarak çalışan deterministik bir değerlendirme ölçütüdür: model yalnızca izin verilen bileşenleri kullandı mı, amaç yuvalarını karşıladı mı, şema gerektirdiğinde bir alıntı ekledi mi, herhangi bir kontrol kablolu bir işleyici olmadan mı çalıştı?

Bu kontroller başarılı veya başarısızdır. İsteme, bileşenler veya modeldeki her değişiklikte çalışırlar. Başarısız olurlarsa, yüzey oluşturulmayı reddeder ve güvenli bir duruma geri döner. Bunları, bir arka uç ekibinin entegrasyon testlerine davrandığı gibi, dağıtımda aynı engelleme gücüyle ele alın.

İkinci katman, örneklenmiş insan incelemesidir. İdeal olarak bir marka tasarımcısı ve bir alan uzmanı içeren küçük bir panel, haftada on ila yirmi oluşturulan çıktıyı ton, marka uyumu ve kullanışlılık üzerine beş puanlık bir değerlendirme ölçütüne göre puanlar.

Puanı zaman içinde takip edin. Düştüğü gün, bir gerileme vardır. Yükseldiği gün, değiştirdiğiniz bir şey işe yaramıştır ve ne olduğunu bilmeniz gerekir.

Üçüncü katman, ürün içi geri bildirimdir. Oluşturulan her yüzey, bir onay işareti, bir olumsuz işaret ve serbest metin yorumuyla birlikte gelir. Bu sinyali, genel bir geri bildirim kutusuna değil, kelime dağarcığının sahibi olan ekibe geri iletin. Gelişen üretken kullanıcı arayüzü ürünleri, sahiplerinin ilk üç ay boyunca her yorumu okuduğu ürünlerdir.

Üretken Kullanıcı Arayüzü Projesinin Kapsamı Nasıl Belirlenir

Çoğu üretken kullanıcı arayüzü projesi, uygulama aşamasında değil, kapsam belirleme aşamasında başarısız olur. Ekipler çok önemli, çok düzenlenmiş veya çok karmaşık bir yüzey seçer ve altı hafta sonra geri alma işlemi, yapay zekanın hazır olmadığına dair bir hikaye olur.

Doğru ilk yüzey üç özelliğe sahip olandır. Kullanıcı açıkça kişiselleştirilmiş bir cevaptan faydalanır, üretim başarısız olursa statik geri dönüş kabul edilebilir ve yanlış bir cevap felaket değil, kurtarılabilir.

İç panolar bu üç özelliği de karşılar. Yardım merkezi cevapları bu üç özelliği de karşılar. Kişiselleştirilmiş analitik özetler bu üç özelliği de karşılar. Hesap oluşturma, ödeme yetkilendirmesi ve tıbbi tavsiye bunların hiçbirini karşılamaz.

Çalışmayı bir özellik sürümü olarak değil, bir sözlük sürümü olarak ele alın. Teslim edilecek ürün "oluşturulan gösterge paneli 3. çeyrekte gönderilecek" değil, "v1 sözlüğü, v1 değerlendirme paketi ve v1 oluşturulan yüzey birlikte 3. çeyrekte gönderilecek ve bundan sonraki herhangi bir üründeki v2 oluşturulan yüzey aynı sözlüğü kullanacak" şeklinde olmalıdır. Sözlüğü platform yatırımı olarak ele alın. Bu, çalışmanın gerçekten gerektirdiği tasarım sistemi çabasını haklı çıkaran tek çerçevedir.

Tasarımcının yeni işi: sözlükler, değerlendirmeler ve amaç

Üretken kullanıcı arayüzü, duyarlı tasarımdan bu yana en büyük değişikliği yaparak tasarımcının iş tanımını yeniden yazıyor.

Çalışma birimi ekranlardan sistemlere kayıyor. Tasarımcılar her durumu çizmeyi bırakıp, modelin oluşturduğu temel öğeleri, yuvaları ve yedekleri düzenlemeye başlıyorlar. Figma dosyası, çalışmanın hedefi değil, sözlük için bir referans haline geliyor.

Özellikler değerlendirmelere dönüşüyor. Üretken bir yüzey, tek bir prototip üzerinde kabul testine tabi tutulamaz, çünkü aynı komut birçok geçerli çıktı üretir.

Tasarımcılar bunun yerine değerlendirme kriterleri yazarlar: "Sonuç bir alıntı içermeli, marka şeması paletini kullanmalı, bir takip eylemi ortaya çıkarmalı ve asla bir rakip ürününü önermemelidir." Bu kriterler, her model sürümünde otomatik değerlendirmeler olarak çalışır. Tasarım kalitesi ölçülebilir hale gelir.

Dokümantasyon, yönlendirme haline gelir. Modelin kelime dağarcığınızı nasıl oluşturması gerektiğini açıklayan sistem komutu artık bir tasarım ürünüdür. Sürümlendirilir, gözden geçirilir ve birçok üründe ekibin yazdığı en önemli "tasarım metni" parçasıdır.

Ürünlerin piyasaya sürülmesinde iyi olanın görünümü

İlkeleri desteklemek için birkaç örnek, onay olarak değil.

Vercel AI SDK üretken UI ilkel öğesi, bileşenleri modelin sunucu tarafından oluşturulan bir rotaya aktardığı türlendirilmiş bir kelime dağarcığı olarak ele alır. Kazanım, marka tutarlılığı ve öngörülebilirliğidir. Maliyet, yazdığınız kütüphane tarafından sınırlandırılıyor.

Claude Artifacts, kalıcılık ve yerinde düzenleme ile birlikte, sohbet sırası içinde isteğe bağlı kod üretimi gösterir. Kurtarılabilirlik ve yapıt-nesne modeli konusunda güçlüdür. Cilalanmış bir ürün değil, taslak bir yüzey olduğu konusunda dürüsttür.

ChatGPT Canvas hibrit bir yapıdır. Konuşma amacı sağlar, canvas istikrarlı, düzenlenebilir bir yapıt sağlar ve model içine metin veya kod üretebilir. Öğrenilen ders, üretilen içeriği kalıcı bir canvas'a sabitlemenin, bir modelle çalışmanın bilişsel maliyetini önemli ölçüde düşürmesidir.

v0 ve Bolt, üretim teslimi için optimize edilmiş kod üretimidir. Çıktı, inceleyebilecek bir geliştiriciye teslim edildiğinde hata modlarının yönetilebilir olduğunu, çıktı doğrudan son kullanıcıya gösterildiğinde ise işe yaramaz olduğunu kanıtlar.

Same.new, tüm uygulamayı üretilen yapıt olarak ele aldığınızda ne olduğunu gösterir. Prototipleme için kullanışlı, yük taşıyan her şey için tehlikelidir. Anthropic ve Cursor'ın Composer araçları, ajanların oluşturulan kullanıcı arayüzünü yapılandırılmış arka uçlara bağladığı bir sonraki aşamaya işaret ediyor.

Hepsinde ortak olan model şudur: Çekirdek yüzey ne kadar üretken olursa, çevredeki olanakların da o kadar çok işlevi olur ve modelin etrafındaki tasarım sistemi marka, erişilebilirlik ve güvenin ağırlığını o kadar çok taşır. Üretken kullanıcı arayüzü asla sadece model değildir. Model artı ekibin onun için oluşturduğu raylardır.

Bu çeyrekte nasıl başlanır?

Herhangi bir ürün ekibinin hemen uygulamaya koyabileceği somut adımlar, sırasıyla:

1. Bir yüzey seçin. Kullanıcıların bugün statik bir sayfa aldığı, muhtemelen dinamik olması gereken tek bir özellik. Raporlar, gösterge panoları, öneriler, özetler iyi adaylardır. Ödeme işlemini, kimlik doğrulamasını, düzenlemeye tabi her şeyi atlayın.

2. Sözlüğü envanterleyin. Tasarım sisteminizdeki, tipli özelliklere ve test edilmiş boş/yükleme/hata durumuna sahip her temel bileşeni listeleyin. Liste on öğeden azsa, herhangi bir şey oluşturmadan önce bunu düzeltin.

3. Üç niyet yuvası tanımlayın. En basit uygulanabilir düzen "cevap, kanıt, sonraki adım"dır. Bunu, kullanmamak için bir nedeniniz olana kadar kullanın.

4. Sözlüğü adlandıran bir sistem istemi yazın. Sadece "vibes" değil. Bileşen adları, özellik türleri, yuva kuralları ve modelin üretmesi yasak olan şeylere ilişkin açık kısıtlamalar.

5. Özelliği oluşturmadan önce değerlendirmeler oluşturun. Her biri için bir değerlendirme ölçütü olan beş ila on test istemi. Bunları istemde, bileşenlerde veya modelde yapılan her değişiklikte çalıştırın.

6. Her oluşturulan yüzeyde geri bildirim olanağıyla, trafiğin yüzde onuna bir bayrak arkasında yayınlayın. İlk ay boyunca her sabah geri bildirimi okuyun.

7. İkinci modelinizi belirleyin. Yedek bir sağlayıcı seçin ve birincil modele bağımlı olmadan önce aynı değerlendirmeleri ona karşı çalıştırın. Bir model sürümü sözlüğünüzü bozduğu gün, yeniden mimari oluşturmak yerine tek satırlık bir yapılandırma değişikliği istersiniz.

Bu teorik değil. Üç kişilik bir ekip bu döngüyü altı haftada çalıştırabilir ve bir yıllık okumadan daha fazla üretken kullanıcı arayüzü hakkında bilgi edinebilir.

Bunun önümüzdeki üç yıl için anlamı

Bunu bir araç döngüsü olarak ele alan tasarımcılar yanılıyor olacak. Bunu bir kategori değişikliği olarak ele alan tasarımcılar ise erken davranmış olacak.

Statik ekran ölmüyor. Web uygulaması giriş formu, ayarlar sayfası, ödeme akışı, bunlar otoyolların asfaltlanmasının aynı nedeni nedeniyle çizilmeye devam ediyor. Değişen şey, her ürünün ortasındaki uzun kuyruk, kullanıcının belirli bir cevabın iyi bir şekilde sunulmasını istediği yüzeylerdir. Bu kuyruk üretilir ve kuyruk yüzey alanının çoğunu oluşturur.

Hayatta kalacak tasarım sistemleri, iki okuyucu için, insanlar ve modeller için yazılanlar olacaktır. Açık isimli token'lar, tipli prop'lara sahip bileşenler, istem görevi gören dokümantasyon, birim testlerinin mantığı kontrol ettiği gibi kompozisyonu test eden değerlendirmeler. Bu şekilde çalışan ekipler her çeyrekte daha da öne geçiyor. Bir modelin oluşturabileceği yüzeyler için piksel mükemmelliğinde Figma dosyaları göndermeye devam eden ekipler, alakasızlığın son aşamasının nasıl bir his olduğunu yakında öğrenecekler.

Daha derin bahis daha basittir. Arayüzler tasarımın hedefi olmaktan çıkıp çıktısı haline gelir. Tasarımcının ustalığı bir üst seviyeye, arayüzleri üreten sistemlere, ölçütlere ve sözlüklere doğru ilerler. İş zorlaşır, etki büyür ve bunu şimdi öğrenen tasarımcılar 2029'da bu alanda lider olacaklardır.

İşte görev bu. Bu hafta bir yüzey seçin, bir sözlük gönderin, değerlendirmeleri yazın ve başlayın.

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900