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

Impeccable

Impeccable, Paul Bakaus tarafından geliştirilen açık kaynaklı bir Claude Code becerisidir ve yapay zeka tarafından üretilen ön uçlarda sıkça karşılaşılan "yapay zeka çöpü" sorununu çözmek için tasarlanmıştır. 20 farklı yönlendirme komutu (/audit, /polish, /critique ve daha fazlası), 7 alana özgü tasarım referans dosyası ve modele üretmemesi gereken anti-kalıplarla birlikte gelir. Sonuç: Otomatik değil, tasarlanmış görünen kullanıcı arayüzleri.

Apidog'u bugün deneyin

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

Herhangi bir yapay zeka kod asistanından bir kontrol paneli, açılış sayfası veya ayarlar paneli üretmesini isteyin; sonuç hep benzer:

• Inter yazı tipi
• Mor-mavi gradyanlar
• Kart içinde kartlar
• Renkli zemin üzerinde gri metin
• Büyük sayı, küçük etiket, parlayan vurgu
• "Derinlik" için cam morfolojisi

Bu tekrar eden şablonlar, büyük dil modellerinin benzer veriyle eğitilmiş olmasından kaynaklanır. Sonuç teknik olarak işlevsel, ama görsel olarak sıradan ve unutulabilir tasarımlar olur.

Impeccable, bu döngüyü kırmak için üretildi. Anthropic’in resmi frontend-design becerisini temel alır, ancak daha fazla alan kapsamı ve katı kısıtlamalarla yapay zekayı şablon kalıplardan uzaklaştırır.

💡 Impeccable ile Claude Code'da /audit, /polish veya /overdrive çalıştırmadan önce, Apidog'u ücretsiz indirin. Bu, yapay zeka tarafından üretilen ön ucunuzun kullanacağı API uç noktalarını görsel olarak test etmenizi sağlar: yükler, kimlik doğrulama, yanıt şekilleri ve sahte verileri saniyeler içinde doğrulayabilirsiniz. Bu adım, cilalı UI ile güvenilmez arka uç entegrasyonu arasında gereksiz zaman kaybını önler.

Impeccable Gerçekte Nedir?

Impeccable, Claude Code’un ön uç üretimini iyileştiren yüklenebilir talimatlar, referans dosyaları ve eğik çizgi komutlarından oluşan bir beceridir.

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

Impeccable’daki frontend-design becerisi, yedi farklı alana özgü referans dosyasıyla kapsamlı bir tasarım rehberi sunar:

Her referans dosyası, örneğin tipografi için, dikey ritim, FOUT'un (Stilsiz Metin Parlaması) nedenleri ve önlemleri, clamp() ile akışkan tipografi gibi detaylara kadar iner. Bu derinlik, Impeccable’ı sıradan bir stil rehberinden ayırır.

Impeccable'ın Bağlam Toplama Protokolü

Impeccable’ın en önemli özelliklerinden biri /teach-impeccable komutudur. Tasarıma başlamadan önce, hedef kitle, kullanım durumu ve marka kişiliği gibi bağlamı toplar ve proje kökünde .impeccable.md dosyasına kaydeder. Gelecekteki oturumlarda otomatik olarak bağlamı yükler. Bu, yapay zekanın güvenli ve ortalama seçimler yerine, proje özelinde kararlar vermesini sağlar.

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

Impeccable, her biri belirli bir hata modunu hedefleyen 20 çağrılabilir komutla gelir. Komutlar Claude Code içinde eğik çizgi ile çağrılır:

/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        → Karmaşıklığı azaltma
/normalize      → Tasarım sistemiyle hizalama
/animate        → Amaçlı animasyon ekleme
/colorize       → Stratejik renk katma
/bolder         → Sıkıcı tasarımları güçlendirme
/quieter        → Aşırı agresif tasarımları yumuşatma
/delight        → Keyifli detaylar ekleme
/typeset        → Yazı tipi ve hiyerarşi düzeltme
/arrange        → Yerleşim ve boşluk düzenleme
/harden         → Hata yönetimi, i18n, uç durumlar
/optimize       → Performans iyileştirme
/extract        → Yeniden kullanılabilir bileşen ve belirteç çıkarma
/adapt          → Farklı cihaz/bağlam için uyarlama
/onboard        → Başlangıç akışlarını ve boş durumları tasarlama
/clarify        → Belirsiz UX metnini iyileştirme
/overdrive      → Teknik olarak iddialı efektler
/teach-impeccable → Tasarım bağlamı toplama ve kaydetme

Çoğu komut, belirli bir alanı hedeflemenizi sağlayan kapsam argümanı alır. Örneğin:

/audit header
/polish checkout-form

Komutları zincirleyerek sorunları tespit edip, düzeltmeleri aşamalı şekilde uygulayabilirsiniz:

1. /audit ile sorunları bul
2. /arrange ile düzenleri düzelt
3. /typeset ile tipografiyi iyileştir
4. /polish ile son dokunuşları yap

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

Impeccable’ın en orijinal katkılarından biri komutlar değil, anti-kalıplardır. Modelin bağlamına açıkça "YAPMAYIN" kısıtları ekler:

Tipografi anti-kalıpları:

• Inter, Roboto, Arial veya sistem fontları kullanmayın
• Monospace fontları tembelce kullanmayın
• Başlık üstüne büyük ikon koymayın

Renk anti-kalıpları:

• Renkli zemin üzerinde gri metin kullanmayın
• Camgöbeği/mor-mavi gradyanlardan kaçının
• Tam siyah/beyaz kullanmayın; nötrleri renk katın

Düzen anti-kalıpları:

• Her şeyi karta sarmayın, kart içinde kart yapmayın
• Standart gridleri sürekli tekrarlamayın
• Her şeyi ortalamayın; asimetrik düzenler kullanın

Hareket anti-kalıpları:

• Sekme veya elastik kolaylaştırma kullanmayın
• width, height, padding gibi özellikleri canlandırmayın; sadece transform ve opacity kullanın

Bu kurallar, yapay zeka tarafından oluşturulan ön uç kodunu özgünleştirir.

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

Impeccable sadece komut istemi koleksiyonu değil; gerçek bir yazılım projesidir.

Derleme Sistemi

Beceri kaynakları source/skills/ dizinindedir ve zengin YAML ön metin içerir (Agent Skills spesifikasyonu). Tek komutla 8 farklı sağlayıcıya derlenir:

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

Her sağlayıcı, uygun meta verileri ve formatı alır.

Birim Test Paketi

Impeccable, tests/build.test.js içinde Bun tabanlı bir test paketiyle gelir. Testler:

• Orkestrasyon
• Entegrasyon (kaynak dosyalar ve çıktı kontrolü)
• Dönüşüm doğruluğu
• Uç durumlar

Testleri çalıştırmak için:

bun test

Bu, projeye katkı yapmayı ve sekiz farklı araç için çıktının doğruluğunu güvence altına alır.

Impeccable + Apidog: Tasarım Kalitesi = API Kalitesi

Impeccable, ön uç kalitesini; Apidog ise API kalitesini garanti altına alır.

• API’leri arka uç kodu yazmadan görsel olarak tasarlayın
• Şemanızdan otomatik sahte sunucular oluşturun
• Her uç noktaya karşı otomatik API testleri çalıştırın
• Ekibinizle interaktif API dokümantasyonu paylaşın

Birlikte kullanıldığında, yapay zeka tabanlı projelerde hem UI'nin hem de API'nin üretime hazır olduğundan emin olursunuz.

Bir sonraki AI tabanlı ön uç projenizde sahte sunucular ve API belgeleri oluşturmak için Apidog'u ücretsiz deneyin.

Impeccable ile Başlarken

En hızlı başlama yolu:

1. impeccable.style adresinden paketleri indir
2. Aracını seç ve çıkar

Claude Code için:

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

# Veya global kurulum
cp -r dist/claude-code/.claude/* ~/.claude/

Sonrasında, projenin tasarım bağlamını kaydetmek için bir kez /teach-impeccable çalıştır ve 20 komutu kullanmaya başla.

Sıkça Sorulan Sorular

Impeccable'ı Anthropic'in resmi frontend-design becerisinden ayıran nedir?

Impeccable, 7 referans dosyası, 20 yönlendirme komutu ve açık anti-kalıp kütüphanesiyle resmi beceriyi genişletir.

Impeccable, Claude Code dışındaki araçlarla çalışır mı?

Evet. Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro ve Pi desteklenir. Derleme sistemi tüm sağlayıcılar için uyumlu çıktı üretir.

/overdrive komutu ne işe yarar?

Teknik olarak iddialı efektler (WebGL gölgelendiriciler, 60fps tablolar, yay fiziği, kaydırma tabanlı açılışlar) üretir.

Impeccable birim testlerini nasıl ele alır?

Birim testler, dönüştürücü doğruluğu ve entegrasyonu içerir. bun test ile çalıştırılır.

Impeccable, API odaklı ön uçlara yardımcı olabilir mi?

UI kalitesi için Impeccable, API için ise Apidog’u kullanarak arka uç ve ön ucu entegre şekilde geliştirebilirsiniz.

Impeccable kullanmak ücretsiz mi?

Evet. Apache 2.0 lisanslı açık kaynak. Kaynak kodu GitHub’da ve paketler impeccable.style adresinde.