Kullanım kılavuzuna geç
improve-uiyazan Julien Thibeaut

Improve UI Skill.

Claude Code ve Codex için tasarım incelemesi skill'i: bir ürün yüzeyini kendi tasarım kanıtlarına göre denetler ve uygulama planları yazar.

  • Tasarım İncelemesi & Erişilebilirlik
  • İnceleme raporu
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplam 7.816 karakter

01 Ne yapar

Claude Code ve Codex'te improve-ui Skill Ne Yapar

Ö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

Improve UI, tutarlı bir ürün yüzeyini onu gerçekten yöneten tasarım sistemine göre denetler ve ardından başka bir ajanın uygulaması için kendi kendine yeterli uygulama planları yazar. Ürün kaynak kodu üzerinde salt okunurdur: dosyalar yalnızca design-plans altında oluşturulur veya düzenlenir; bağımlılık, biçimlendirici, commit veya push işlemlerine izin verilmez.

Bulgular üç kanıttan geçmelidir: sözleşme, çalışma zamanı ve düzeltme, ayrıca sonradan yapılan bir çürütme geçişi; rapor güvene, kullanıcı etkisine, kapsama ve düzeltme maliyetine göre sıralanmış olarak üçte durur. Bu, bir arayüzü kimliğini değiştirmeden inceleyen, iyileştiren ya da düzenleyen, tasarım sistemi sapmasını araştıran veya tasarım teslimi hazırlayan tasarımcı ve geliştiriciler için uygundur. Erişilebilirlik, davranış, performans ve mimari sorunlar talep edilmedikçe kapsam dışıdır.

İnceleme raporu
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Tutarlı Bir Yüzey Seçin

    Geniş bir istek, birincil bir ürün görevi için tek bir dağıtılabilir uygulamaya ve tek bir tutarlı yüzey ailesine indirgenir; skill, depoyu tek bir ürün olarak ele almak yerine bu seçimi belirtir.

  2. 02
    Yerel Sistemi Yeniden Kurun

    Bir kaynağı, güncel olduğunu ve seçilen yüzeyi yönettiğini kanıtladıktan sonra kullanır; taslaklar, öneriler, geçişler ve görev listeleri, açıkça kabul edilip güncel olmadıkça gelecekteki niyeti tarif eder.

  3. 03
    Aday Başına Üç Kanıt Gerektirin

    Tutulan her adayın bir sözleşmesi, bir çalışma zamanı yolu ve bir belirleyici düzeltmesi olmalıdır; arama sonuçları, tekrar ve uygulama farkları aday üretir, bulgu üretmez.

  4. 04
    Doğrulayın ve Çürütün

    Adaylar raporlamadan önce yeniden saldırıya uğratılır ve yalnızca bu geçişten sağ çıkanlar bulgular tablosuna girebilir.

  5. 05
    Rapor, Sıralı ve Sınırlı

    Bulgular güvene, kullanıcı etkisine, kapsama ve düzeltme maliyetine göre sıralanır ve liste üçte kesilir.

  6. 06
    Seçilen Değişiklikleri Belirtin

    Yazmadan önce alıntılanan kaynaklar yeniden açılır, mümkünse geçerli commit kaydedilir ve etkilenen yüzeyler boyunca tam olarak yeniden kullanılabilir bileşenler ve örnekler belirlenir.

02 Uyumunuzu bulun

improve-ui Skill Ne Zaman Kullanılır

İş bu türden bir tasarım incelemesi olduğunda Claude Code veya Codex'te improve-ui skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Kimliğini değiştirmeden bir arayüzü incelemek, iyileştirmek, geliştirmek veya temizlemek istendiğinde

Sınırları Bilin

  • Asla ürün kaynağını değiştirmeyin. Yalnızca design-plans/ altında dosya oluşturun veya düzenleyin.
  • Bağımlılıkları yüklemeyin, biçimlendiricileri çalıştırmayın, commit yapmayın, push etmeyin veya başka şekilde çalışma ağacını değiştirmeyin.
  • Tasarım dokümantasyonunu güncellemeyin. Kabul edilen dokümantasyon değişikliklerini, uygulayıcı için plana kaydedin.
  • Yalnızca kullanıcı sağladığında veya görsel inceleme açıkça talep edildiğinde işlenmiş kanıt kullanın.

03 Skill'in içinde

improve-ui Skill Tasarım İncelemesine Ne Getirir

SKILL.md'nin Claude Code veya Codex'e yapmasını söylediği 4 şey, dosyanın kendi bölüm sırasına göre.

  1. 1. Yüzeyi Seçin

    Kullanıcının kapsamına saygı gösterin. İstek genelse, birincil bir ürün görevini temsil eden bir dağıtılabilir uygulama ve bir tutarlı yüzey ailesi seçin.

  2. 2. Yerel Sistemi Yeniden Oluşturun

    DESIGN.md, depo kılavuzu ve yüzey düzeyindeki tasarım belgelerini kontrol edin.

  3. Tasarım Dili

    Alıntılanan bir kaynak istisnayı açıkça belirtmedikçe Açık istisnalar altına Belgelenmemiş yazın.

  4. 3. Bulguları Kanıtlayın

    Kanıt kapısını uygulamadan önce, izlenen her yüzeyin kullanıcıya yönelik etiketlerini, aktif durum sunumunu, duyarlı dallarını ve kardeş varyantlarını iç çelişkiler açısından inceleyin.

04 İşe koyun

improve-ui'yi Claude Code veya Codex'e Yükleyin

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

improve-ui'yi Claude Code, Codex veya Ajanınıza Ekleyin

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

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

Beceriye İlk Tasarım İnceleme Görevi Verin

SKILL.md bir örnek prompt içermez; bu başlangıç, katalog tek satırından yazılmıştır. Görev satırını gerçek brief'inizle değiştirin.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Kaynak: katalog tek satır kullanımından yazılmış başlangıç promptu (SKILL.md'den değil).

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

  • Sonuç, kataloğun bu skill için listelediği gibi İnceleme raporu olarak teslim edilir.
  • Ajan, sonucu üretmeden önce planında veya transkriptinde improve-ui skill'ini adlandırır.
  • Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da improve-ui'yi SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

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

Repository
github.com/ibelick/ui-skills Branch main
Skill dosyası
skills/improve-ui/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 79081ab
License
MIT LICENSE dosyasından.
Repository yıldızları
8.402 GitHub anlık görüntüsü 2026-09-14 tarihinde, bu katalogda 5 beceri içeren ibelick/ui-skills deposunun tamamı için alındı. improve-ui için bir değerlendirme 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'in Kendi Açıklaması
"Mevcut bir ürün yüzeyini kendi tasarım kanıtına göre denetleyin, doğrulanmış UI sorunlarını belirleyin ve başka bir ajan için bağımsız uygulama planları yazın. Ürün kaynağında kesinlikle salt okunur. Kimliğini değiştirmeden bir arayüzü incelemek, geliştirmek, iyileştirmek veya temizlemek istendiğinde; tasarım sistemi sapmasını araştırmak veya bir tasarım teslimatı hazırlamak için kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 7.816 karakterdir. GitHub'da tam dosyayı okuyun.

Improve UI

improve-ui'yi gerçek bir tasarım inceleme görevinde çalıştırın.

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

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

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