98.8K+İndir
Kullanım kılavuzuna geç
prototypeyazan Emil Kowalski

Prototype Skill.

Claude Code ve Codex için bir UI tasarım skill'i: canlı bir görsel seçici arkasında bir UI parçasının gerçekten farklı versiyonlarını oluşturur.

  • Web & UI
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md
--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · toplam 7.432 karakter

01 Ne yapar

Claude Code ve Codex'te prototype Skill'in Ne Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Tek seferde tek bir UI parçasını keşfetmeye yönelik bir çeşitlendirme skill'i — bir toast, fiyatlandırma kartı, basılı tutarak silme düğmesi. Tanımlanan parçayı alır, belirlenmiş bir eksende (düzen, yoğunluk, karakter, hareket, etkileşim modeli) birbirinden gerçekten farklılaşan birkaç sürüm oluşturur ve bunları görsel bir seçicinin arkasına koyar; böylece kullanıcı canlı olarak aralarında geçiş yapıp bir kazananı öne çıkarabilir.

Sadece açıkça çağrıldığında çalışır, varsayılan olarak üç varyant üretir, keşfi üretim kodunun dışında tutar ve bir varyant entegre edildiğinde prototip yüzeyini siler.

Neler üretir

  • Varyantları barındıran canlı bir görsel seçici; böylece aralarında geçiş yapılıp biri öne çıkarılabilir.
  • Her varyantın eksenini, ne zaman doğru seçim olduğunu ve maliyetini belirten bir karşılaştırma tablosu.
  • Seçilen varyant için, kod tabanına entegre edilmiş ve prototip yüzeyi silinmiş üretim kodu.
  • Tarayıcı araçları mevcut olduğunda her varyantın ekran görüntüleri.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Tek Bir Parçaya Kapsamı Sınırla

    Brief birden fazla bileşeni kapsıyorsa, skill en yüksek etkiye sahip tek parçayı seçer, hangisini ve neden seçtiğini belirtir ve kalanını sonraki çalıştırmalar olarak sunar.

  2. 02
    Zemini Keşfet

    Çerçeveyi, stil sistemini, hareket kütüphanesini, token'ları, ürün karakterini ve parçanın içinde render edildiği bağlamı haritalar; böylece varyantlar ürüne yerli görünebilir.

  3. 03
    Önce Yönleri Adlandır

    Varsayılan olarak üç varyant üretir, istenildiğinde veya alan gerçekten genişse beşe kadar çıkar; herhangi bir kod yazılmadan önce her birine bir ad ve bir eksen verilir.

  4. 04
    Seçici İskeletini Oluştur

    Bir projede, izole bir route her varyant için bir dosya ile küçük bir iskelet dosyasını barındırır; seçicinin kendisi tasarlanmaz, PICKER.md'den kopyalanır.

  5. 05
    Göstermeden Önce Doğrula

    İskelet çalıştırılır ve her varyant render ve etkileşim doğruluğu için gözden geçirilir; tarayıcı araçları varsa ekran görüntüleriyle birlikte.

  6. 06
    Kazananı Öne Çıkar

    Kullanıcı seçim yaptıktan sonra, o varyant projenin dosya düzenine, adlandırmasına ve token kullanımına uygun şekilde entegre edilir ve prototip yüzeyi kaldırılır.

02 Uyumunuzu bulun

prototype Skill Ne Zaman Kullanılır

Claude Code veya Codex'te bu türden UI tasarımı söz konusu olduğunda prototype skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Keşfetmeniz gereken tanımlanmış bir UI parçanız var — bir toast, bir fiyatlandırma kartı, basılı tutarak silme düğmesi.
  • Yan yana birkaç savunulabilir yön istiyorsunuz ve bir spesifikasyon okumak yerine canlı olarak aralarında geçiş yaparak seçim yapmayı tercih ediyorsunuz.
  • Çalışma, bir dev sunucusuna sahip çalışan bir proje içinde yer alıyor ve izole bir route iskeleti barındırabiliyor.
  • Hiçbir proje olmadan keşif yapıyorsunuz ve doğrudan bir tarayıcıda açabileceğiniz bir şeye ihtiyacınız var.

Sınırları Bilin

  • Zaten var olan bir UI'yi gözden geçirmek — bu iş review-animations'a aittir.
  • Mevcut animasyon için düzeltmeler planlamak veya bir bağımlılık seçmek; her ikisi de başka skill'lerdir.
  • Farklılaşmayı, uygulama kalitesini düşürmek için bir bahane olarak kullanmak: özensiz bir varyant, temsil ettiği yön hakkında hiçbir şey öğretmez.

Ne Sağlamalısınız

  • UI parçasının bir açıklamasıŞeyin ne olduğu, nerede yer alacağı ve ne yapması gerektiği — brief tek bir cümlede yeniden ifade edilir.
  • Keşif için projeye erişimBöylece token'lar, kişilik ve çevredeki bağlam, en cesur varyantın ne kadar ileri gidebileceğini sınırlayabilir.
  • İsteğe bağlı olarak bir varyant sayısıÇağrının x5 biçimi daha fazla varyant ister, en fazla beş ile sınırlıdır.
  • Sonunda sizin seçiminizSkill, seti sunduktan sonra durur; ilerletme, seçimi veya bir keep/riff komutunu bekler.

03 Skill'in içinde

Prototip Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Keşif Yaparken Üretim Koduna Asla Dokunmayın

    Tüm çalışma yalıtılmış bir prototip yüzeyinde kalır; entegrasyon yalnızca Aşama 6'da ve yalnızca kullanıcının seçtiği varyant için gerçekleşir.

  2. Her Varyant Adlandırılmış Bir Eksende Yer Alır

    Varyantlar; düzen, yoğunluk, kişilik, hareket veya etkileşim modeli açısından farklılaşmalıdır ve her eksen, inşa edilmeden önce bir ifadeyle belirtilebilir olmalıdır.

  3. Her Varyantta Gerçek İçerik

    Gerçek etkileşimler, gerçek hareket, makul isim ve sayılarla gerçek ürün şeklinde metin; lorem ipsum yok, işlevsiz buton yok, "bu kısmı hayal edin" yok.

  4. Seçici Sabit Chrome'dur

    Markup'ı, stilleri, klavye bağlantıları ve davranışı kelimesi kelimesine PICKER.md'den gelir ve projeye asla uyum sağlamaz — görünümü bir tasarım kararı değildir.

  5. Kalite Çubuğu Her Varyant İçin Geçerlidir

    Farklılaşma standardı düşürmez: giriş hareketlerinde ease-out ve asla ease-in, 300 ms'nin altında UI hareketi, doğru transform-origin, yalnızca transform/opacity, reduced-motion ele alınmış olmalı.

  6. Varyant Geçişi Aninde Gerçekleşir

    Geçiş yapmak oturum başına 100'den fazla gerçekleşen bir eylemdir, dolayısıyla sıklık kuralına göre varyant değişimine animasyon uygulanmaz.

  7. İsimler Yönleri Tanımlar

    Varyantlar yön için adlandırılır — Quiet, Editorial, Playful, Dense — asla A/B/C Seçeneği değil; sadece vurgu rengi veya metin bakımından farklılaşan iki yön aslında bir tek yöndür.

  8. Seçimden Sonra Yüzeyi Silin

    Bir kazanan ilerletildiğinde, kullanıcı onu tutmayı istemedikçe prototip yüzeyi kaldırılır.

04 İşe koyun

Claude Code veya Codex'e prototype'ı yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Prototipi Claude Code, Codex veya Kendi Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

skills/prototype/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Build me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Her varyantın bir adı ve belirtilmiş bir ekseni vardır ve iki varyant aynı eksen konumunu paylaşmaz.
  • Her varyant seçiciden erişilebilir ve konsol hatası olmadan doğru şekilde çalışır.
  • Teslim tablosunda önceden seçilmiş bir favori yoktur; hangisini seçeceğiniz sorulursa, gerekçe ürünün kişiliğinden ve kullanım sıklığından gelir.
  • Yapım sırasında iki varyant birbirine yaklaştıysa, bunu belirterek birini eleyin, seti şişirmeyin.
  • Bir keep komutundan sonra, seçicinin kalması gerekip gerekmediğini kontrol edin: düz keep formu prototip yüzeyini siler, leave-the-picker formu onu korur.

OpenDesign'da prototip aracını SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Skill dosyası
skills/prototype/SKILL.md Doğrulamada kaydedilen içerik sağlama toplamı; commit d23d7f8
License
MIT LICENSE dosyasından.
Repository yıldızları
37.516 GitHub anlık görüntüsü 2026-09-14'te tüm emilkowalski/skills deposu için alınmıştır; bu katalogda 9 skill içerir. prototype için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

  1. Çalışma DuruşuKıdemli tasarım mühendisi tavrı; farklılaşma tüm değerdir, işçilik çıtası hâlâ geçerlidir
  2. Kesin KurallarÜretim kodu, eksenler, çalışan varyantlar, seçici ve temizlik üzerine numaralandırılmış beş kısıtlama
  3. İş Akışı1'den 6'ya evreler: kapsam, keşif, yönler, harness, doğrulama, terfi
  4. Çağırma VaryantlarıAçıklama, x5, riff ve keep çağırmaları ile davranışlarının tablosu
  5. TonHer varyantı dürüstçe tanıtın, maliyetini belirtin, asla önceden favori seçmeyin
Skill'in Kendi Açıklaması
"Tanımladığınız bir UI parçasının gerçekten farklı birden fazla versiyonunu oluşturun, görsel bir seçici arkasında render edilir, böylece canlı olarak aralarında geçiş yapabilir ve doğru hissettiren olanı yükseltebilirsiniz. Yalnızca açıkça çağrıldığında çalışır; kendi başına tetiklenmez."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 7.432 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

prototype Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

UI düzenlerken kendiliğinden çalışıyor mu?

Hayır. Yalnızca açıkça çağrıldığında çalışır ve kendiliğinden tetiklenmez; model çağırma özelliği bu araç için devre dışıdır. Bir açıklama, isteğe bağlı bir x5 sayısı veya bir riff ya da keep komutuyla çağırırsınız.

Prototype

Gerçek bir UI Tasarım Görevinde prototype'ı çalıştırın.

OpenDesign'ı indirin, prototype'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için