Impeccable: Kemampuan Kode Claude untuk UI Frontend Unik

Impeccable adalah skill Claude Code sumber terbuka yang dibuat oleh Paul Bakaus yang memerangi masalah "AI slop" dalam output frontend yang dihasilkan AI. Ini dilengkapi dengan 20 perintah panduan (/audit, /polish, /critique, dan lainnya), 7 file referensi desain spesifik domain, dan anti-pola kurasi yang memberi tahu model secara tepat apa yang TIDAK boleh dihasilkan. Hasilnya: UI yang terlihat dirancang, bukan hasil otomatis.

Mengapa Setiap Frontend yang Dihasilkan AI Terlihat Sama

Tanyakan kepada asisten pengodean AI mana pun untuk membangun dasbor, halaman arahan, atau panel pengaturan untuk Anda. Beri kebebasan penuh. Apa yang Anda dapatkan?

Font Inter. Gradien ungu-ke-biru. Kartu tersarang di dalam kartu. Teks abu-abu pada latar belakang berwarna. Bagian hero dengan angka besar, label kecil, dan aksen bercahaya. Mungkin sedikit glassmorphism untuk "kedalaman."

Anda telah melihatnya ribuan kali karena setiap model bahasa besar yang dilatih pada template generik yang sama menghasilkan output generik yang sama. Itulah jebakan frontend yang dihasilkan AI: fungsional secara teknis, tetapi mudah dilupakan secara visual.

Impeccable diciptakan secara khusus untuk memutus siklus tersebut. Di mana skill resmi frontend-design Anthropic meletakkan fondasinya, Impeccable membangunnya dengan keahlian yang lebih dalam, cakupan domain yang lebih luas, dan batasan ketat yang mengarahkan AI menjauh dari pola-pola yang dapat diprediksi yang tertanam dalam bobotnya.

💡

Sebelum Anda mulai menjalankan /audit, /polish, atau /overdrive di Claude Code dengan Impeccable, unduh Apidog secara gratis. Ini memungkinkan Anda untuk menguji dan men-debug secara visual titik akhir API yang tepat yang akan dipanggil oleh frontend hasil AI Anda—memvalidasi payload, token otorisasi, bentuk respons, dan data tiruan dalam hitungan detik. Langkah kecil ini mencegah bolak-balik yang menyakitkan antara kode UI yang sudah disempurnakan dan integrasi backend yang tidak dapat diandalkan.

tombol

Apa Sebenarnya Impeccable Itu

Impeccable adalah skill Claude Code—sekumpulan instruksi, file referensi, dan perintah slash yang dapat diinstal yang memperluas cara Claude Code mendekati setiap tugas frontend.

Pada intinya, skill ini dilengkapi dengan tiga komponen:

Skill frontend-design Impeccable yang Diperluas

Skill frontend-design di dalam Impeccable adalah panduan desain komprehensif yang dibagi menjadi tujuh file referensi spesifik domain:

Setiap file referensi secara teknis presisi. Panduan tipografi, misalnya, melampaui "gunakan font yang bagus" dan menjelaskan cara kerja irama vertikal, mengapa FOUT (Flash of Unstyled Text) terjadi dan cara mencegahnya dengan penimpaan size-adjust, dan kapan jenis fluid dengan clamp() sebenarnya adalah pilihan yang salah. Kedalaman inilah yang membedakan Impeccable dari panduan gaya generik.

Protokol Pengumpulan Konteks Impeccable

Salah satu aspek desain Impeccable yang paling diremehkan adalah perintah /teach-impeccable. Sebelum pekerjaan desain dimulai, skill ini memerlukan konteks desain yang dikonfirmasi: audiens target, kasus penggunaan, dan kepribadian merek. Konteks ini disimpan ke .impeccable.md di root proyek dan secara otomatis dimuat dalam sesi mendatang.

Ini adalah hal kecil yang membuat perbedaan besar. Output frontend yang dihasilkan AI bersifat generik sebagian karena model tidak memiliki konteks proyek—ia akan memilih pilihan yang aman dan rata-rata. Impeccable memaksa konteks tersebut untuk ditetapkan terlebih dahulu.

20 Perintah yang Memperbaiki Frontend yang Dihasilkan AI

Impeccable dilengkapi dengan 20 perintah yang dapat dipanggil pengguna, masing-masing menangani mode kegagalan spesifik dalam pekerjaan frontend yang dihasilkan AI. Anda memanggilnya sebagai perintah slash di dalam Claude Code:

/audit          → Pemeriksaan kualitas aksesibilitas, performa, dan responsif
/critique       → Ulasan UX: hierarki, kejelasan, resonansi emosional
/polish         → Tahap akhir sebelum pengiriman (penyelarasan, jarak, detail)
/distill        → Sari ke intinya—hapus kompleksitas yang tidak pantas ada
/normalize      → Selaraskan dengan standar sistem desain
/animate        → Tambahkan gerakan yang bertujuan (bukan getaran dekoratif)
/colorize       → Perkenalkan warna strategis ke antarmuka monokrom
/bolder         → Perkuat desain yang aman dan membosankan
/quieter        → Redakan desain yang terlalu agresif
/delight        → Tambahkan momen kegembiraan yang tak terlupakan
/typeset        → Perbaiki pilihan font, hierarki, dan ukuran
/arrange        → Perbaiki tata letak, jarak, dan ritme visual
/harden         → Penanganan kesalahan, i18n, kasus khusus
/optimize       → Peningkatan performa
/extract        → Tarik komponen yang dapat digunakan kembali dan token desain
/adapt          → Adaptasi untuk perangkat/konteks yang berbeda
/onboard        → Rancang alur orientasi dan keadaan kosong
/clarify        → Tingkatkan salinan UX yang tidak jelas
/overdrive      → Efek ambisius secara teknis (shader, fisika pegas, pengungkapan berbasis gulir)
/teach-impeccable → Pengaturan satu kali: kumpulkan dan simpan konteks desain

Sebagian besar perintah menerima argumen cakupan opsional. /audit header menjalankan audit hanya pada bilah navigasi. /polish checkout-form memfokuskan proses pemolesan pada alur pembayaran. Penargetan presisi ini menjaga Claude tetap fokus dan mencegahnya menyentuh bagian-bagian frontend yang dihasilkan AI yang sudah berfungsi.

Kekuatan sebenarnya berasal dari rangkaian perintah. Alur kerja tipikal mungkin menjalankan /audit untuk menemukan masalah, /arrange untuk memperbaiki masalah tata letak, /typeset untuk membersihkan hierarki jenis, dan /polish sebagai tahap akhir sebelum pengiriman—setiap langkah dibangun di atas langkah sebelumnya.

Pustaka Anti-Pola: Mengajari AI Apa yang Tidak Boleh Dilakukan

Kontribusi paling orisinal yang diberikan Impeccable pada masalah frontend yang dihasilkan AI bukanlah perintah-perintahnya—melainkan anti-pola.

Skill ini menyertakan batasan eksplisit "JANGAN LAKUKAN" langsung ke dalam konteks model. Ini bukan preferensi gaya yang samar; ini adalah tanda kegagalan spesifik yang berulang yang muncul dalam output frontend yang dihasilkan AI lagi dan lagi:

Anti-pola tipografi:

Jangan gunakan Inter, Roboto, Arial, atau default sistem (mereka membuat desain tidak terlihat)
Jangan gunakan font monospace sebagai singkatan malas untuk "developer vibes"
Jangan letakkan ikon bulat besar di atas setiap judul—itu terlihat seperti template

Anti-pola warna:

Jangan gunakan teks abu-abu pada latar belakang berwarna—itu terlihat pudar; gunakan warna yang lebih gelap dari warna latar belakang sebagai gantinya
Jangan gunakan "palet AI": cyan-on-dark, gradien ungu-ke-biru, aksen neon pada latar belakang gelap
Jangan gunakan hitam murni (#000) atau putih murni (#fff)—berikan sedikit rona pada warna netral Anda

Anti-pola tata letak:

Jangan membungkus semuanya dalam kartu—tidak setiap elemen membutuhkan wadah
Jangan menyarangkan kartu di dalam kartu
Jangan gunakan grid kartu yang identik (ikon + judul + teks, diulang terus-menerus)
Jangan memusatkan semuanya—teks rata kiri dengan tata letak asimetris terbaca sebagai sesuatu yang dirancang

Anti-pola gerakan:

Jangan gunakan easing pantul atau elastis—mereka terasa ketinggalan zaman; objek nyata melambat dengan mulus
Jangan menganimasikan properti tata letak seperti width, height, padding—gunakan transform dan opacity saja

Aturan-aturan ini dicocokkan polanya dengan persis kebiasaan-kebiasaan yang membuat kode frontend hasil AI dapat dikenali sekilas. Dengan menamainya secara eksplisit, Impeccable memberikan model lensa korektif yang tidak akan dimilikinya tanpa panduan eksternal.

Di Balik Layar: Sistem Build, Uji Unit, dan Dukungan Multi-Alat

Impeccable bukan hanya file prompt—ini adalah proyek perangkat lunak yang layak dengan sistem build, rangkaian uji unit, dan dukungan multi-penyedia.

Sistem Build

File sumber skill berada di source/skills/ dan menggunakan frontmatter YAML yang kaya (mengikuti spesifikasi Agent Skills). Satu langkah build mengompilasinya ke format spesifik penyedia untuk Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, dan Pi:

bun run build      # Kompilasi semua 8 format penyedia
bun run rebuild    # Bersihkan dan bangun ulang dari awal

Setiap penyedia mendapatkan dialek yang tepat. Claude Code dan OpenCode mendapatkan metadata lengkap termasuk args dan allowed-tools. Codex CLI mendapatkan format argument-hint dengan placeholder $ARGNAME. Gemini mendapatkan frontmatter minimal. Proses build menangani semua ini secara otomatis melalui arsitektur transformer modular di scripts/lib/transformers/.

Rangkaian Uji Unit

Impeccable dilengkapi dengan rangkaian uji unit berbasis Bun di tests/build.test.js. Pengujian mencakup seluruh pipeline build:

Pengujian orkestrasi memverifikasi bahwa setiap fungsi transformer dipanggil dengan argumen yang benar
Pengujian integrasi membuat file sumber nyata dalam direktori sementara dan menegaskan bahwa file output yang diharapkan ada untuk setiap penyedia
Pengujian kebenaran transformasi memeriksa transformasi spesifik—bahwa output Gemini mengandung {{args}}, bahwa output Codex mengandung $TARGET, bahwa Claude Code output mengandung user-invokable: true
Pengujian kasus khusus menangani daftar skill kosong dan memverifikasi bahwa pipeline tidak rusak

Menjalankan rangkaian uji unit adalah satu perintah:

bun test

Uji unit inilah yang membuatnya aman untuk berkontribusi pada Impeccable. Anda dapat memodifikasi transformer, menjalankan uji unit, dan segera mengetahui apakah perubahan Anda merusak output untuk salah satu dari delapan alat yang didukung. Itulah jenis kepercayaan rekayasa yang memisahkan proyek open-source yang dipelihara dari koleksi prompt yang ditinggalkan.

Impeccable + Apidog: Memadukan Kualitas Desain dengan Kualitas API

Impeccable menyelesaikan masalah kualitas frontend yang dihasilkan AI pada lapisan UI. Apidog menyelesaikannya pada lapisan API.

Ketika Anda membangun produk nyata dengan bantuan AI, kedua lapisan itu penting. Frontend yang dihasilkan AI yang terlihat polesan akan tetap mengecewakan pengguna jika panggilan API yang dibuatnya didokumentasikan dengan buruk, tidak teruji, atau tidak dapat diandalkan. Apidog memberi Anda tingkat presisi yang sama untuk API Anda seperti yang diberikan Impeccable untuk UI Anda.

Dengan Apidog, Anda dapat:

Merancang API secara visual sebelum menulis satu baris kode backend pun
Menghasilkan server tiruan (mock servers) secara otomatis dari skema API Anda, sehingga frontend hasil AI Anda memiliki data realistis untuk dirender selama pengembangan
Menjalankan uji API otomatis terhadap setiap titik akhir, menangkap regresi sebelum mencapai produksi
Berbagi dokumentasi API interaktif dengan tim Anda, menjaga pengembang frontend dan backend tetap selaras

Kombinasi ini alami: gunakan Impeccable untuk memastikan frontend hasil AI Anda secara visual berbeda dan siap produksi, dan gunakan Apidog untuk memastikan API yang mendukung frontend tersebut andal dan terdokumentasi dengan baik. Bersama-sama, mereka menutup celah kualitas yang dibiarkan terbuka oleh pengembangan yang dibantu AI saja.

Coba Apidog gratis untuk menghasilkan server tiruan dan dokumen API untuk proyek frontend hasil AI Anda berikutnya.

tombol

Memulai dengan Impeccable

Jalur tercepat adalah mengunduh bundel siap pakai dari impeccable.style, pilih alat Anda, dan ekstrak.

Khusus untuk Claude Code:

# Instalasi tingkat proyek
cp -r dist/claude-code/.claude your-project/

# Atau instal secara global untuk semua proyek
cp -r dist/claude-code/.claude/* ~/.claude/

Kemudian jalankan /teach-impeccable sekali untuk menyimpan konteks desain proyek Anda, dan Anda siap menggunakan semua 20 perintah.

Pertanyaan Umum (FAQ)

Apa yang membedakan Impeccable dari skill frontend-design resmi Anthropic? Impeccable dibangun di atas skill Anthropic dengan 7 file referensi spesifik domain, 20 perintah panduan, dan pustaka anti-pola eksplisit. Skill resmi adalah titik awal; Impeccable adalah sistem desain komprehensif yang berlapis di atasnya.

Apakah Impeccable berfungsi dengan alat selain Claude Code? Ya. Impeccable mendukung Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, dan Pi. Sistem build mengompilasi satu format sumber menjadi dialek spesifik penyedia untuk setiap alat.

Untuk apa perintah /overdrive? /overdrive adalah untuk efek yang ambisius secara teknis yang melampaui batas konvensional—shader WebGL, tabel virtual 60fps, fisika pegas pada dialog, pengungkapan berbasis gulir. Gunakan saat Anda menginginkan sesuatu yang membuat pengguna bertanya "bagaimana mereka melakukannya?"

Bagaimana Impeccable menangani uji unit? Proyek ini dilengkapi dengan rangkaian uji unit berbasis Bun yang mencakup seluruh pipeline build, termasuk kebenaran transformer dan uji integrasi yang membuat file sumber nyata dan memverifikasi output. Jalankan bun test untuk mengeksekusi rangkaian uji unit lengkap.

Bisakah Impeccable membantu dengan frontend berbasis API? Impeccable menangani kualitas UI. Untuk lapisan API, pasangkan dengan Apidog, yang menyediakan desain API visual, pengujian otomatis, dan pembuatan server tiruan—semua yang Anda butuhkan untuk membangun backend yang andal untuk frontend hasil AI Anda.

Apakah Impeccable gratis untuk digunakan? Ya. Impeccable dilisensikan Apache 2.0 dan open source. Kode sumber tersedia di GitHub dan bundel yang dikompilasi tersedia di impeccable.style.