Skill'in Kendi İfadeleriyle
Panolar, yönetici panelleri, SaaS uygulamaları, araçlar, ayarlar sayfaları ve veri arayüzleri gibi ürün arayüzleri oluşturmak için, en iyi bir tasarım ekibinin vereceği kararlarla çalışan, zanaat odaklı bir disiplin. Koddan önce çalışan bir brief zorunlu kılar: insan kim, yapmaya geldiği tek fiil ne ve arayüzün anlamı olan kelimelerle nasıl hissettirmesi gerektiği.
Buradan itibaren domain keşfini (domain, renk dünyası, imza, reddedilen varsayılanlar), hiyerarşi işini ağırlık ve rengin üstlendiği bir orana dayalı tip skalasını, tek bir kararlaştırılmış derinlik stratejisini, sabit kodlanmış değerler yerine anlamsal token'ları ve cila ile hareket temellerini — tablo hâlinde hizalanmış sayılar, eş merkezli radius, 300ms'nin altında süreler, sık kullanılan aksiyonlarda animasyon yok — öngörür. Açıkça landing sayfaları, pazarlama siteleri, kampanyalar veya sadece marka odaklı çalışmalar için değildir.
Neler üretir
- Domain, Renk dünyası, İmza, Reddetme ve Yön'ü adlandıran bir Suggest + Ask önerisi.
- Bir render aracı mevcut olduğunda satır içi olarak render edilen örnekler — palet renk kartları, gerçek yazı tipiyle tip skalası, üst üste yükseklik kartları, gerçek bir bileşen olarak imza; uygulamanın kendisi yine kod tabanına girer.
- Kullanıcı onay verdikten sonra yazılan; yön, derinlik stratejisi, hiyerarşi kararları ve tekrarlanan bileşen desenlerini içeren kaydedilmiş bir .interface-design/system.md.
Nasıl Çalışır
- 01Çalışma Brief'ini Yazın
Herhangi bir koddan önce, insanın kim olduğunu, gerçekleştirmesi gereken fiili ve arayüzün nasıl hissettirmesi gerektiğini yanıtlayın — yön onay gerektirmedikçe kısa tutun.
- 02Ürün Domain'ini Keşfedin
Bir yön önermeden önce dört çıktı üretin: en az 5 domain kavramı, üründen alınan fiziksel dünyaya ait 5+ renk, bir imza öğe ve reddedilecek 3 bariz varsayılan.
- 03Yönü Önerin ve Onaylatın
Domain, Renk dünyası, İmza, Reddetme ve Yön'ü adlandıran bir Suggest + Ask bloğuyla başlayın, ardından inşa etmeden önce yönün doğru hissettirdiğini kontrol edin.
- 04Mümkün Olduğunda Örnekleri Render Edin
Oturumda satır içi görsel render aracı varsa, paleti, tip skalasını, yükseklik adımlarını ve imzayı tarif etmek yerine gerçek bileşenler olarak gösterin; aksi hâlde koda geri dönün.
- 05Var Olana Göre İnşa Edin, Ardından Doğrulayın
Uygulamayı, token'ları, bileşen desenlerini ve system.md'yi inceleyin, uygulamayı yamalayın, mevcutsa build, tip denetimi veya testleri çalıştırın, ardından masaüstü ve mobil genişliklerde görsel olarak doğrulayın.
- 06Desenleri Kaydetmeyi Önerin
Bir görevin ardından, sonraki oturumların tutarlı kalması için yönü, derinlik stratejisini, hiyerarşi kararlarını ve tekrarlanan bileşen desenlerini kayıt altına almayı önerin.