Tasarımcılar için Hızlı Mühendislik: Belirsiz Özetlerden Kullanılabilir Yapay Zeka Çıktısına

Eğer yapay zeka çıktınız stok fotoğraf gibi görünüyorsa, verdiğiniz talimat bir dilek gibi okunuyor demektir.

Çoğu tasarımcının yapay zeka araçlarını nasıl kullanmayı öğrendiğiyle ilgili asıl sorun bu. "Bana bir fintech girişimi için kahraman görseli yap" bir talimat değil, bir his. Bir talimat, saatte 400 dolar alan ve keskin sorular soran serbest çalışan bir illüstratöre brifing verirken söyleyeceğiniz şeydir.

Tasarımcılar bunu zaten biliyor. Okulda brifler yazdınız. Her hafta işte brifler yazıyorsunuz. Yazılı olarak netliğin, referansın ve kısıtlamanın nasıl göründüğünü biliyorsunuz. Yapay zeka talimatları da aynı beceri, farklı bir hedef kitle için.

Bir talimat, düz yazıda bir tasarım brifidir

istemler'ı sihirli kelimeler olarak düşünmeyi bırakın. Onları, yaratıcı bir brifin ilk paragrafı ve altındaki son özellikler olarak düşünün.

İyi bir brif, yapana kim olduğunu, ne için olduğunu, kuralların neler olduğunu, neye referans verileceğini ve teslim edilecek ürünün nasıl göründüğünü söyler. Bunlardan herhangi birini kaçırırsanız, teknik olarak doğruya yakın ama duygusal olarak yanlış bir iş elde edersiniz. Bir stajyere "bir kahve dükkanı için logo tasarla" dediğinizde on iki kahve çekirdeği elde edersiniz. Ona "Blue Bottle'ın sadeliğinden ilham alan, kelime tabanlı, geometrik sans yazı tipi kullanan, piktogram içermeyen, serbest çalışanlara yönelik üçüncü dalga bir kahve dükkanı için logo tasarla" dediğinizde ise bir yere varırsınız.

Tasarım talimatları da aynı şekilde çalışır. Modelin akıllı olduğu için belirsiz olma içgüdüsü, yapay zeka destekli tasarım çalışmalarında yapılan en pahalı hatadır. Spesifik olmak, titizlik değil, oyunun temelidir.

İyi bir tasarım talimatı, bir tasarım özeti gibi okunur. Kötü bir tasarım talimatı ise bir dilek gibi okunur.

Her kullanılabilir tasarım talimatının beş bölümü

Gönderilebilir tasarım çıktısı üreten her tasarım talimatının beş bölümü vardır. Bunları ezberleyebilirsiniz, bir şablona koyabilirsiniz, yapışkan bir nota yazdırabilirsiniz. Bölümler:

1. Rol. Yapay zeka kimin rolünü oynuyor? ("New Yorker'da on yıllık deneyime sahip kıdemli bir editör illüstratörüsünüz.")
2. Bağlam. Bu ne için ve kimler için? ("Bu görsel, tasarımcıların yapay zeka araçlarıyla çalışmayı öğrenmesiyle ilgili bir blog yazısının kahramanıdır. Hedef kitle, çalışan tasarımcılar, erken benimseyenler, şüpheci ama meraklı kişilerdir.")
3. Kısıtlamalar. Kurallar nelerdir? ("Kurumsal değil, editoryal. Görünür bilgisayar yok. Stok fotoğraf yok. Düz renk, güçlü silüet, yüksek kontrast, düşük detay.")
4. Referanslar. Nasıl görünmeli veya nasıl hissettirmeli? ("Saul Steinberg'in çizim tarzı, 1960'ların İsviçre turizm posterlerinin sadeliğiyle birleşiyor. Marka renk paleti: #080404 arka plan, #ff6434 vurgu.")
5. Çıktı özellikleri. Teslim edilecek özellikler nelerdir? ("16:9 en boy oranı, 1200x630, PNG, resmin içinde metin yok.")

Rolü atlarsanız orta düzeyde bir çıktı alırsınız. Bağlamı atlarsanız kimseye yönelik olmayan bir çıktı alırsınız. Kısıtlamaları atlarsanız, modelin tahmin ettiği şeyi, yani genellikle stok fotoğrafçılığını alırsınız. Referansları atlarsanız, çıktı eğitim verilerinin baskın olduğu yöne doğru kayar. Çıktı özelliklerini atlarsanız, yanlış boyutları alırsınız.

| İstem bölümü | Ne işe yarar | Atlarsanız ne olur |

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

| Rol | Zevki ve uzmanlık seviyesini belirler | Genel çıktı |

| Bağlam | Modele çalışmanın ne için olduğunu söyler | Yanlış problemi çözer |

| Kısıtlamalar | Nelerden kaçınılacağını tanımlar | Nefret ettiğiniz klişeleri elde eder |

| Referanslar | Görsel veya ton yönünü belirler | Eğitim ortalamalarına doğru kayar |

| Çıktı özellikleri | Biçimi ve teslim edilebilirliği kontrol eder | Yanlış boyutlar, yanlış biçim |

Örnek uygulama: Kahraman görseli için resim oluşturma

Her tasarımcının en az bir kez yazdığı belirsiz versiyon:

"Tasarımcılar için prompt mühendisliği hakkında bir blog yazısı için kahraman görseli."

Elde ettiğiniz şey: dizüstü bilgisayar başında bir tasarımcı, parlayan bir beyin, kalem tutan bir robot veya bunların üçünün bir kombinasyonu. Stok. Ölü.

Yapılandırılmış versiyon:

On yıldır The New Yorker ve Wired için çalışan bir editör illüstratörsünüz. "Tasarımcılar için Prompt Mühendisliği" başlıklı bir blog yazısı için kahraman görseli oluşturun. Hedef kitle, yapay zeka abartısına şüpheyle yaklaşan ancak araçları ciddi olarak kullanmaya hazır çalışan tasarımcılardır.

Kompozisyon: Çerçevenin solunda, elle çizilmiş ve notlandırılmış bir tasarımcının kağıt üzerindeki özet metni, sağda temiz, daktilo edilmiş yönlendirme metnine dönüşüyor veya çözülüyor. Bu, tasarım özeti ile yapılandırılmış yönlendirme metni arasındaki geçişi ima eder.

Stil: Editöryel, düz renk, güçlü silüet, yüksek kontrast, düşük detay. Kağıt dokusu kabul edilebilir. Bilgisayar yok. Robot yok. Beyin yok. Parlayan küreler yok.

Referanslar: Özet için Saul Steinberg'in çizimleri. Yönlendirme metni tarafı için İsviçre turizm posteri sadeliği. Marka paleti: #080404 arka plan, #ff6434 vurgu, #d0d3d8 nötr.

Çıktı: 1200x630, resmin içinde metin yok.

Elde edeceğiniz şey: Dört kez yeniden oluşturmak yerine, gerçekten gönderebileceğiniz bir kahraman görseli.

Fark yetenek değil. Yapıdır.

Çalışılmış Örnek: v0 veya Lovable'da UI prototipi

Belirsiz:

"Bir tasarım ajansı için bir açılış sayfası oluşturun."

Ne elde edersiniz: Hazır gradyanlı, üç özellik kartı, hazır bir ana görsel ve internetteki diğer tüm ajanslarınkine benzeyen bir metin içeren Tailwind tarzı bir şablon.

Yapılandırılmış:

Instagram ve Threads'te 2 milyondan fazla takipçisi olan Brainy adlı tasarım stüdyosu için bir açılış sayfası oluşturun. Hedef Kitle: Marka, web ve tasarım hizmetlerine ihtiyaç duyan A serisi ile C serisi arasında yatırım alan SaaS şirketlerinin kurucuları. Her ajans sitesini görmüşlerdir. Şablon gibi görünüyorsa hemen ayrılırlar.

Düzen: Tek sütunlu ana sayfa, tek satırlık kalın başlık ve tek bir harekete geçirici mesaj (CTA), ardından yatay kayan müşteri logoları şeridi, ardından bento ızgara düzeni kullanan üç bölümlü hizmet açıklaması (marka, web, içerik), ardından üç alıntı içeren referans bölümü ve ardından basit bir iletişim altbilgisi.

Kısıtlamalar: Gradyan yok, hazır görsel yok, genel ana sayfa illüstrasyonları yok. Sadece karanlık mod, arka plan #080404. Vurgu #ff6434. Tipografi: Her şey için tek bir sans-serif yazı tipi, başlıklar için kalın, gövde için açık. Her şey 4 piksel aralık ölçeği kullanıyor.

Referanslar: Linear'in aralık kısıtlaması. Vercel'ın tipografik ağırlığı. Apple'nin bento ızgara bölüm deseni. Hiçbirinin kopyası değil.

Çıktı: duyarlı, mobil öncelikli, shadcn bileşenleri.

Aynı araç. Tamamen farklı çıktı.

Çalışılan örnek: bir bileşen oluşturan kodlama ajanı

Belirsiz:

"Bana bir Düğme bileşeni yap."

Elde edeceğiniz şey: bir Düğme. Tek bir varyant. Erişilebilirlik yok. Odak durumu yok. İstemediğiniz renkler.

Yapılandırılmış:

Siz kıdemli bir tasarım sistemleri mühendisisiniz. Tasarım sistemimizde bir Düğme bileşeni oluşturun.

Bağlam: Bu Düğme, on iki pazarlama sayfasına dağılmış eski geçici düğme stillerimizin yerini alıyor. Birincil, ikincil ve hayalet varyantları, üç boyutu (küçük, orta, büyük) ve yükleme, devre dışı bırakma ve odaklanma durumlarını desteklemesi gerekiyor.

Kısıtlamalar: tokens.css'deki mevcut token'larımızı kullanın (yeni renkler eklemeyin). Odak halkası 2px ofset --color-accent olmalıdır. Boşluk için asla px kullanmayın, her zaman --space token'larını kullanın. Tipografi her zaman boyuta bağlı olarak --font-sans ve --text-sm veya --text-base ile kullanılır. Yükleme durumu bir dönen simge gösterir ve tıklamaları devre dışı bırakır.

Referanslar: Erişilebilirlik kalıpları için Radix UI temel öğeleri. Dosya yapısı referansı için /components/Card.tsx adresindeki mevcut Kart bileşenimiz.

Çıktı: TypeScript, Tailwind, her varyantı ve durumu test eden bir Storybook hikayesi. Devre dışı bırakma, yükleme ve odaklanma davranışlarını kapsayan testler.

Bir kodlama ajanına bunu verin, gerçek bir Düğme elde edersiniz. Ona "bana bir Düğme yap" deyin, elle yeniden yazacağınız bir şey elde edersiniz.

Her tasarımcının çalması gereken kısıtlama kütüphanesi

Kısıtlamalar gizli silahtır. Ayrıca tasarımcıların en az kullandığı kısımdır. Bu kütüphaneyi kopyalayın, ilgili satırları komutlarınıza yapıştırın, markanıza göre ayarlayın.

| Alan | Dahil edilecek kısıtlamalar |

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

| İllüstrasyon | Düz renk, güçlü silüet, yüksek kontrast, düşük detay, resimde metin yok, açıkça istenmedikçe bilgisayar/telefon/robot/beyin yok, kurumsal değil editoryal |

| Fotoğraf stili oluşturma | Stok fotoğraf görünümü yok, parlak aydınlatma yok, istenmedikçe 3D render yok, doğal kompozisyon, gerçek dünya kusurları hoş karşılanır |

| Kullanıcı arayüzü oluşturma | Mevcut bileşenleri kullanın, token'lar dışında yeni renkler yok, mobil öncelikli, erişilebilirlik gerekli (odak durumları, kontrast oranları), marka gerektirmedikçe gradyan yok |

| Tipografi | Kullanıcı arayüzü için bir sans-serif, serif yalnızca marka gerektiriyorsa, bir kompozisyonda üçten fazla kalınlık yok, iki yana hizalanmış metin yok, 4 kelimeden uzun büyük harfli metin yok |

| Renk | Token kullanın, onaltılık sayı sistemini kullanmayın, asla tamamen siyah zemin üzerine beyaz metin, asla tamamen yeşil zemin üzerine tamamen kırmızı metin kullanmayın, gövde metni için kontrast minimum 4,5:1 olmalıdır |

| Düzen | 4px veya 8px aralık ölçeği, asla gövde metnini ortalamayın, asla tam yaslamayın, satır başına maksimum 75 karakter, kompozisyon aksi gerektirmediği sürece resimleri sola sabitleyin |

| Kod | TypeScript katı, varsayılan olmayan adlandırılmış dışa aktarımlar, sormadan yeni bağımlılıklar eklemeyin, her yeni bileşen için test kapsamı |

Bunları yapıştırmaya hazır bloklar olarak kullanın. İlk başta kendinizi aptal hissedeceksiniz. Sonra çıktının bir gecede iki kat daha iyi olduğunu fark edeceksiniz.

Daha fazla yapay zeka iş akışı dökümü istiyorsanız, Brainy Kağıtlar'in geri kalanına göz atın. Ekibinizin markası için oluşturulmuş, rastgele ChatGPT geçmişiniz için değil, gerçek bir komut istemi kütüphanesi istiyorsanız, Brainy'ı işe alın'ye bakın.

Baştan Başlamadan Nasıl Yineleme Yapılır

Komut istemi mühendisliğindeki en kötü alışkanlık, çıktı yanlış olduğunda tüm komut istemini silip yeniden yazmaktır. On defadan dokuzunda komut istemi doğruya yakındı. Sadece bir değişken yanlıştı.

Ameliyatla yineleme yapın. Her seferinde sadece bir şeyi değiştirin.

1. Komut istemini bir kez çalıştırın. Neyin yanlış olduğunu not edin.

2. Beş bölümden hangisinin başarısız olduğunu belirleyin. Çıktı çok genel ise, referanslar zayıftır. Yanlış öğeler içeriyorsa, kısıtlamalarda "X yok" eksiktir. Yanlış hedef kitleye yönelikse, bağlam yetersizdir.

3. Sadece o kısmı düzenleyin. Her şeyi yeniden yazmayın.

4. Tekrar çalıştırın. İlk çıktıyla karşılaştırın. Daha iyi mi, daha kötü mü, aynı mı?

5. Tekrarlayın. Genellikle üç ila beş tur sizi hedefe ulaştırır.

İlgili: bağlam çürümesi gerçek. Aynı sohbette yineleme yapıyorsanız ve çıktı daha iyi değil de daha kötüleşiyorsa, oturum kirlenmiştir. Yeni bir sohbet açın, mevcut en iyi komutu yapıştırın ve devam edin.

Çöpü Garanti Eden Üç Hata

Her hafta gördüğüm üç kalıp, her biri çıktı kalitesini öldürüyor.

Hata 1: "Daha iyi yap." Model, sizin için daha iyinin ne anlama geldiğini bilmiyor. "Daha iyi", modelin daha iyinin ortalaması anlamına gelir ki bu da ortalamaya gerilemedir. Spesifik olun. "Renk kontrastını daha güçlü yap." "Kompozisyonu daha asimetrik yap." "Arka plandaki detayların yarısını kes."

Hata 2: Beş seçeneği birden istemek. Bir tane iyi seçenek yerine beş tane vasat seçenek alırsınız. Bir tane isteyin. Yineleyin. İlk iyi olanı kabul edin.

Hata 3: Referans vermemek. Referanslar modelin zevkini belirler. Onlar olmadan, eğitim verilerinin ortalamasını alırsınız. Üç iyi seçilmiş referansla, istediğinize yakın bir şey elde edersiniz.

SSS

Metin yönlendirme mühendisliği gerçek bir beceri mi yoksa abartı mı?

Gerçek bir beceridir ve iyi bir yaratıcı brief yazmakla aynı beceridir. Bir serbest çalışana brief verebiliyorsanız, bir modele de metin yönlendirmesi yapabilirsiniz. Abartı, buna "mühendislik" denmesidir. Gerçek ise buna "açık talimatlar" denmesidir.

Hangi araç en iyi metin yönlendirmesi özelliğine sahiptir?

Görseller için, Midjourney ve Gemini Pro, detaylı metin yönlendirmelerinde en iyi performansı gösterir. Kullanıcı arayüzü için, v0 ve Lovable yapılandırılmış kısıtlamalara iyi yanıt verir. Kodlama için, özellikle iyi yazılmış bir CLAUDE.md ile Claude Code ve Cursor en güçlü olanlardır. Araçtan ziyade metin yönlendirmesinin kalitesi daha önemlidir.

Bir metin yönlendirme kütüphanesi kullanmalı mıyım?

Evet. Bir tane oluşturun. Kullanım durumuna göre düzenleyin. Her başarılı komut için kaydedin. Başarısız olan her komut için nedenini not edin. Üç ay sonra, herhangi bir araç aboneliğinden daha değerli bir kütüphaneniz olacak.

Bir komut ne kadar uzun olmalı?

Beş bölümü kapsayacak kadar uzun, her cümlenin işe yarayacak kadar kısa olmalı. Benimkilerin çoğu 100 ile 300 kelime arasında. Bundan daha kısa ise yetersiz tanımlama yapıyorsunuz demektir. Çok daha uzun ise muhtemelen kendinizi tekrar ediyorsunuz demektir.

Sıcaklık veya top_p gibi teknik komut hilelerini öğrenmem gerekiyor mu?

Çoğu tasarım işi için gerek yok. Bunlar API çağrılarında yer alır, sohbet arayüzlerinde değil. Önce beş bölümü doğru yapın. API çağrıları yapmaya başladıktan sonra parametreler hakkında endişelenebilirsiniz.

Gerçekten istediğiniz gibi yazın

Her belirsiz komut, çöp üreten on dakikalık bir sapmadır. Her yapılandırılmış komut, teslim edilen on dakikalık bir yatırımdır.

Rolü, bağlamı, kısıtlamaları, referansları ve çıktı spesifikasyonunu yazın. Her seferinde bir değişkeni yineleyin. İşe yarayanları saklayın.

Zaten nasıl özet yazacağınızı biliyorsunuz. Model, özetin diğer ucundaki bir stajyer.

İçinden geldiği gibi yazın.