Benzersiz Frontend UI için Kusursuz Claude Kodlama Yeteneği

Impeccable

Impeccable, Paul Bakaus tarafından geliştirilen açık kaynaklı bir Claude Code becerisi olup, yapay zeka tarafından oluşturulan ön uç çıktısındaki "yapay zeka çöpü" sorununa karşı mücadele eder. 20 yönlendirme komutu (/audit, /polish, /critique ve daha fazlası), 7 alana özgü tasarım referans dosyası ve modele tam olarak neyin ÜRETİLMEMESİ gerektiğini söyleyen küratörlü anti-kalıplarla birlikte gelir. Sonuç: Otomatik olarak oluşturulmuş değil, tasarlanmış görünen kullanıcı arayüzleri.

Neden Her Yapay Zeka Tarafından Oluşturulan Ön Uç Aynı Görünüyor?

Herhangi bir yapay zeka kodlama asistanından size bir kontrol paneli, bir açılış sayfası veya bir ayarlar paneli oluşturmasını isteyin. Ona tam serbestlik tanıyın. Ne elde edersiniz?

Inter yazı tipi. Mor-mavi gradyan. Kartların içine yerleştirilmiş kartlar. Renkli bir arka plan üzerinde gri metin. Büyük bir sayı, küçük bir etiket ve parlayan bir vurguya sahip bir kahraman bölümü. Belki de "derinlik" için biraz cam morfolojisi.

Bunu binlerce kez gördünüz, çünkü aynı genel şablonlar üzerinde eğitilmiş her büyük dil modeli, aynı genel çıktıyı üretir. İşte bu, yapay zeka tarafından oluşturulan ön uç tuzağıdır: teknik olarak işlevsel, görsel olarak unutulabilir.

Impeccable, özellikle bu döngüyü kırmak için oluşturuldu. Anthropic'in resmi frontend-design becerisi temeli atarken, Impeccable bunu daha derin uzmanlık, daha fazla alan kapsamı ve yapay zekayı ağırlıklarına kazınmış öngörülebilir kalıplardan uzaklaştıran katı kısıtlamalarla geliştirir.

💡

Impeccable ile Claude Code'da /audit, /polish veya /overdrive çalıştırmaya başlamadan önce, Apidog'u ücretsiz indirin. Bu, yapay zeka tarafından oluşturulan ön ucunuzun çağıracağı tam API uç noktalarını görsel olarak test etmenizi ve hata ayıklamanızı sağlayarak yükleri, kimlik doğrulama belirteçlerini, yanıt şekillerini ve sahte verileri saniyeler içinde doğrular. Bu küçük adım, cilalı UI kodu ile güvenilmez arka uç entegrasyonu arasındaki zahmetli gidiş-dönüşü önler.

düğme

Impeccable Gerçekte Nedir?

Impeccable, Claude Code'un herhangi bir ön uç görevine yaklaşımını geliştiren, yüklenebilir bir dizi talimat, referans dosyası ve eğik çizgi komutu olan bir Claude Code becerisidir.

Özünde, bu beceri üç bileşenle birlikte gelir:

Impeccable'ın Genişletilmiş Ön Uç Tasarım Becerisi

Impeccable içindeki frontend-design becerisi, yedi alana özgü referans dosyasına ayrılmış kapsamlı bir tasarım kılavuzudur:

Her referans dosyası teknik olarak kesindir. Örneğin tipografi kılavuzu, "iyi yazı tipleri kullanın"ın ötesine geçer ve dikey ritmin nasıl çalıştığını, FOUT'un (Stilsiz Metin Parlaması) neden meydana geldiğini ve bunu size-adjust geçersiz kılmalarıyla nasıl önleyeceğini ve clamp() ile akışkan tipin ne zaman aslında yanlış bir seçim olduğunu açıklar. Bu derinlik, Impeccable'ı genel bir stil kılavuzundan ayıran şeydir.

Impeccable'ın Bağlam Toplama Protokolü

Impeccable'ın tasarımının en az takdir edilen yönlerinden biri, /teach-impeccable komutudur. Herhangi bir tasarım çalışması başlamadan önce, beceri onaylanmış tasarım bağlamı gerektirir: hedef kitle, kullanım durumları ve marka kişiliği. Bu bağlam, proje kökünde .impeccable.md olarak kaydedilir ve gelecekteki oturumlarda otomatik olarak yüklenir.

Küçük ama büyük fark yaratan bir şeydir. Yapay zeka tarafından oluşturulan ön uç çıktısı kısmen modelin proje bağlamına sahip olmamasından kaynaklanır; güvenli, ortalama seçimlere yönelir. Impeccable, bu bağlamın önce oluşturulmasını zorlar.

Yapay Zeka Tarafından Oluşturulan Ön Uçları Düzelten 20 Komut

Impeccable, her biri yapay zeka tarafından oluşturulan ön uç çalışmalarındaki belirli bir hata modunu ele alan 20 kullanıcı tarafından çağrılabilir komutla birlikte gelir. Bunları Claude Code içinde eğik çizgi komutları olarak çağırırsınız:

/audit          → Erişilebilirlik, performans ve duyarlı kalite kontrolü
/critique       → UX incelemesi: hiyerarşi, netlik, duygusal rezonans
/polish         → Yayınlamadan önceki son geçiş (hizalama, boşluk, ayrıntılar)
/distill        → Özüne indirgeme – yerini hak etmeyen karmaşıklığı kaldırma
/normalize      → Tasarım sistemi standartlarıyla hizalama
/animate        → Amaçlı hareket ekleme (dekoratif titreme değil)
/colorize       → Tek renkli arayüzlere stratejik renk katma
/bolder         → Güvenli, sıkıcı tasarımları güçlendirme
/quieter        → Aşırı agresif tasarımları yumuşatma
/delight        → Akılda kalıcı neşe anları ekleme
/typeset        → Yazı tipi seçimlerini, hiyerarşiyi ve boyutlandırmayı düzeltme
/arrange        → Yerleşimi, boşlukları ve görsel ritmi düzeltme
/harden         → Hata işleme, i18n, uç durumlar
/optimize       → Performans iyileştirmeleri
/extract        → Yeniden kullanılabilir bileşenleri ve tasarım belirteçlerini çıkarma
/adapt          → Farklı cihazlar/bağlamlar için uyarlama
/onboard        → Başlangıç akışlarını ve boş durumları tasarlama
/clarify        → Belirsiz UX metnini iyileştirme
/overdrive      → Teknik olarak iddialı efektler (gölgelendiriciler, yay fiziği, kaydırma tabanlı açılışlar)
/teach-impeccable → Tek seferlik kurulum: tasarım bağlamını toplama ve kaydetme

Çoğu komut isteğe bağlı bir kapsam bağımsız değişkeni kabul eder. /audit header denetimi yalnızca gezinme çubuğunda çalıştırır. /polish checkout-form cilalama işlemini ödeme akışına odaklar. Bu cerrahi hedefleme, Claude'u odaklanmış tutar ve yapay zeka tarafından oluşturulan ön ucun zaten çalışan kısımlarına dokunmasını engeller.

Gerçek güç, komutları zincirlemekten gelir. Tipik bir iş akışı, sorunları ortaya çıkarmak için /audit'i, düzen sorunlarını düzeltmek için /arrange'i, tip hiyerarşisini temizlemek için /typeset'i ve yayınlamadan önceki son geçiş olarak /polish'i çalıştırabilir; her adım bir öncekine dayanır.

Anti-Kalıp Kütüphanesi: Yapay Zekaya Ne Yapmaması Gerektiğini Öğretmek

Impeccable'ın yapay zeka tarafından oluşturulan ön uç sorununa yaptığı en orijinal katkı, komutlar değil, anti-kalıplardır.

Bu beceri, açık "YAPMAYIN" kısıtlamalarını doğrudan modelin bağlamına yerleştirir. Bunlar belirsiz stil tercihleri değildir; yapay zeka tarafından oluşturulan ön uç çıktısında tekrar tekrar ortaya çıkan belirli, tekrarlayan hata imzalarıdır:

Tipografi anti-kalıpları:

Inter, Roboto, Arial veya sistem varsayılanlarını kullanmayın (tasarımları görünmez yaparlar)
"Geliştirici havası" için tembel bir kısayol olarak monospace yazı tiplerini kullanmayın
Her başlığın üzerine büyük yuvarlak simgeler koymayın — şablonlu görünür

Renk anti-kalıpları:

Renkli arka planlar üzerinde gri metin kullanmayın — soluk görünür; bunun yerine arka plan renginin daha koyu bir tonunu kullanın
"Yapay zeka paleti"ni kullanmayın: koyu zemin üzerinde camgöbeği, mor-mavi gradyanlar, koyu arka planlar üzerinde neon vurgular
Saf siyah (#000) veya saf beyaz (#fff) kullanmayın — nötr renklerinizi renklendirin

Düzen anti-kalıpları:

Her şeyi kartlara sarmayın — her öğenin bir kapsayıcıya ihtiyacı yoktur
Kartları kartların içine yerleştirmeyin
Aynı kart ızgaralarını kullanmayın (simge + başlık + metin, sonsuza dek tekrarlanan)
Her şeyi ortalamayın — asimetrik düzenlere sahip sola hizalı metin tasarlanmış gibi okunur

Hareket anti-kalıpları:

Sekme veya elastik kolaylaştırma kullanmayın — modası geçmiş hissettirir; gerçek nesneler sorunsuz bir şekilde yavaşlar
width, height, padding gibi düzen özelliklerini canlandırmayın — yalnızca transform ve opacity kullanın

Bu kurallar, yapay zeka tarafından oluşturulan ön uç kodunu bir bakışta tanınabilir kılan alışkanlıklarla tam olarak eşleştirilmiştir. Bunları açıkça adlandırarak, Impeccable modele dış rehberlik olmadan sahip olamayacağı düzeltici bir mercek sağlar.

Kamera Arkası: Derleme Sistemi, Birim Testleri ve Çoklu Araç Desteği

Impeccable sadece bir komut istemi dosyası değil; bir derleme sistemine, bir birim test paketine ve çoklu sağlayıcı desteğine sahip gerçek bir yazılım projesidir.

Derleme Sistemi

Beceri kaynak dosyaları source/skills/ içinde yer alır ve zengin YAML ön metin kullanır (Agent Skills spesifikasyonunu takiben). Tek bir derleme adımı, bunları Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro ve Pi için sağlayıcıya özgü formatlara derler:

bun run build      # Tüm 8 sağlayıcı formatını derle
bun run rebuild    # Baştan temizle ve yeniden derle

Her sağlayıcı doğru lehçeyi alır. Claude Code ve OpenCode, args ve allowed-tools dahil olmak üzere tam meta verileri alır. Codex CLI, $ARGNAME yer tutucularıyla argument-hint formatını alır. Gemini minimal ön metin alır. Derleme, tüm bunları scripts/lib/transformers/ içindeki modüler bir transformatör mimarisi aracılığıyla otomatik olarak yönetir.

Birim Test Paketi

Impeccable, tests/build.test.js konumunda Bun tabanlı bir birim test paketiyle birlikte gelir. Testler tüm derleme hattını kapsar:

Orkestrasyon testleri her dönüştürücü fonksiyonunun doğru argümanlarla çağrıldığını doğrular
Entegrasyon testleri geçici bir dizinde gerçek kaynak dosyaları oluşturur ve her sağlayıcı için beklenen çıktı dosyalarının bulunduğunu doğrular
Dönüşüm doğruluk testleri belirli dönüşümleri kontrol eder — Gemini çıktısının {{args}} içerdiğini, Codex çıktısının $TARGET içerdiğini, Claude Code çıktısının user-invokable: true içerdiğini
Uç durum testleri boş beceri listelerini işler ve hattın bozulmadığını doğrular

Birim test paketini çalıştırmak tek bir komutla yapılır:

bun test

Bu birim testleri, Impeccable'a katkıda bulunmayı güvenli hale getirir. Bir dönüştürücüyü değiştirebilir, birim testlerini çalıştırabilir ve değişikliğinizin desteklenen sekiz araçtan herhangi biri için çıktıyı bozup bozmadığını hemen anlayabilirsiniz. Bakımı yapılan açık kaynak projeleri terk edilmiş komut istemi koleksiyonlarından ayıran mühendislik güveni budur.

Impeccable + Apidog: Tasarım Kalitesini API Kalitesiyle Eşleştirme

Impeccable, yapay zeka tarafından oluşturulan ön uç kalite sorununu kullanıcı arayüzü katmanında çözer. Apidog ise API katmanında çözer.

Yapay zeka desteğiyle gerçek bir ürün geliştirirken, her iki katman da önemlidir. Cilalı görünen yapay zeka tarafından oluşturulmuş bir ön uç, yaptığı API çağrıları kötü belgelenmiş, test edilmemiş veya güvenilmezse yine de kullanıcıları hayal kırıklığına uğratacaktır. Apidog, API'niz için Impeccable'ın kullanıcı arayüzünüz için sağladığı hassasiyetin aynısını sunar.

Apidog ile şunları yapabilirsiniz:

Tek bir arka uç kodu satırı yazmadan önce API'leri görsel olarak tasarlayın
API şemanızdan otomatik olarak sahte sunucular oluşturun, böylece yapay zeka tarafından oluşturulan ön ucunuz geliştirme sırasında gerçekçi verileri görüntüleyebilir
Her uç noktaya karşı otomatik API testleri çalıştırın, regresyonları üretime ulaşmadan önce yakalayın
Ekibinizle interaktif API dokümantasyonunu paylaşın, ön uç ve arka uç geliştiricilerini uyumlu tutun

Bu kombinasyon doğaldır: yapay zeka tarafından oluşturulan ön ucunuzun görsel olarak ayırt edici ve üretime hazır olduğundan emin olmak için Impeccable'ı kullanın ve bu ön uca güç veren API'lerin güvenilir ve iyi belgelenmiş olduğundan emin olmak için Apidog'u kullanın. Birlikte, yalnızca yapay zeka destekli geliştirmenin açık bıraktığı kalite boşluğunu kapatırlar.

Bir sonraki yapay zeka tarafından oluşturulan ön uç projeniz için sahte sunucular ve API belgeleri oluşturmak üzere Apidog'u ücretsiz deneyin.

düğme

Impeccable ile Başlarken

En hızlı yol, impeccable.style adresinden kullanıma hazır paketi indirmek, aracınızı seçmek ve çıkarmaktır.

Özellikle Claude Code için:

# Proje düzeyinde kurulum
cp -r dist/claude-code/.claude your-project/

# Veya tüm projeler için global olarak kurun
cp -r dist/claude-code/.claude/* ~/.claude/

Ardından projenizin tasarım bağlamını kaydetmek için bir kez /teach-impeccable komutunu çalıştırın ve tüm 20 komutu kullanmaya hazırsınız.

Sıkça Sorulan Sorular

Impeccable'ı Anthropic'in resmi frontend-design becerisinden farklı kılan nedir? Impeccable, Anthropic'in becerisini 7 alana özgü referans dosyası, 20 yönlendirme komutu ve açık bir anti-kalıp kütüphanesi ile geliştirir. Resmi beceri bir başlangıç noktasıdır; Impeccable, bunun üzerine inşa edilmiş kapsamlı bir tasarım sistemidir.

Impeccable, Claude Code dışındaki araçlarla çalışıyor mu? Evet. Impeccable, Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro ve Pi'yi destekler. Derleme sistemi, her araç için tek bir kaynak formatını sağlayıcıya özgü lehçelere derler.

/overdrive komutu ne işe yarar? /overdrive, geleneksel sınırların ötesine geçen teknik olarak iddialı efektler içindir: WebGL gölgelendiricileri, 60fps sanal tablolar, diyaloglarda yay fiziği, kaydırma tabanlı açılışlar. Kullanıcıların "bunu nasıl yaptılar?" diye sormasına neden olacak bir şey istediğinizde kullanın.

Impeccable birim testlerini nasıl ele alır? Proje, dönüştürücü doğruluğu ve gerçek kaynak dosyaları oluşturan ve çıktıyı doğrulayan entegrasyon testleri dahil olmak üzere tüm derleme hattını kapsayan Bun tabanlı bir birim test paketiyle birlikte gelir. Tam birim test paketini çalıştırmak için bun test komutunu çalıştırın.

Impeccable, API odaklı ön uçlara yardımcı olabilir mi? Impeccable, UI kalitesini ele alır. API katmanı için, onu görsel API tasarımı, otomatik test ve sahte sunucu oluşturma sağlayan Apidog ile eşleştirin — yapay zeka tarafından oluşturulan ön ucunuz için güvenilir arka uçlar oluşturmak için ihtiyacınız olan her şey.

Impeccable'ı kullanmak ücretsiz mi? Evet. Impeccable Apache 2.0 lisanslı ve açık kaynaktır. Kaynak kodu GitHub'da ve derlenmiş paketler impeccable.style adresinde mevcuttur.