# Panduan Lengkap impeccable (v4.5.2 / skill-v4.5.1 / Engine v0.1.14) Dokumentasi Design Language, Quality Gates, dan CLI Tools untuk AI Coding Agents Pembuat: Paul Bakaus (Creative Technologist — Google) | Repositori: https://github.com/pbakaus/impeccable | Situs: https://impeccable.style --- ## 1. Ikhtisar dan Nilai Teknis impeccable adalah toolkit bahasa desain, sistem detektor kualitas deterministik (61 aturan tanpa LLM), dan kumpulan sub-perintah CLI yang ditujukan untuk mengarahkan AI coding agent (Claude Code, Codex, Cursor, OpenCode, Grok, Hermes, Veto) agar menghasilkan kode antarmuka berstandar profesional. ### Permasalahan yang Diselesaikan Model bahasa besar (LLM) yang menghasilkan kode antarmuka pengguna (UI) sering jatuh ke dalam pola generik: - Tipografi tanpa kontras hirarki yang jelas (penggunaan font bawaan secara seragam). - Penggunaan kartu bersarang (nested cards) yang berlebihan. - Komposisi warna monoton (gradien ungu-ke-biru standar template). - Kurangnya penanganan kasus batas (text truncation, empty states, error bounds). impeccable mengatasi hal ini melalui: 1. Grounded Context (PRODUCT.md & DESIGN.md): Mengunci identitas dan spesifikasi visual di tingkat direktori proyek. 2. Executable Quality Gates: Menguji setiap fase komparasi desain sebelum kode disetujui. 3. Standalone Anti-Pattern Detector: Pemindai sintaks lokal yang memvalidasi kepatuhan CSS/HTML tanpa menggunakan kuota token API. --- ## 2. Informasi Rilis dan Metadata - Versi Rilis: v4.5.2 (Skill v4.5.1 / Engine v0.1.14 / CLI v4.5.2 - 13 Okt 2026) - Commit SHA: 2f98774f86bc05563876643db37e6c37c322850f - Ringkasan Pembaruan v4.5.x & v4.4.x: - Engine Binary v0.1.14: Rilis binary engine teroptimasi dengan akselerasi deteksi anti-pattern serta dukungan native ARM64 & Windows. - Audit Kontras Semantik: Validasi rasio kontras semantic token CSS yang diperketat dan deteksi otomatis palet warna adaptif dark/light mode. - Kompatibilitas Claude Code Terkini: Dukungan permission scoping baru dan integrasi brief keputusan interaktif saat melakukan refactor visual. - Quality Gates Container Queries: Dukungan deteksi dan validasi komponen antarmuka yang memanfaatkan CSS Container Queries modern. - Penguatan /impeccable polish & harden: Pencegahan layout shift (CLS), penanganan viewport lipat (foldables), dan audit dynamic system font scaling. - Fitur /impeccable generate: Generasi variasi desain langsung oleh AI agent dengan evaluasi instan dan pemilihan varian tercepat. --- ## 3. Katalog Sub-Perintah (/impeccable) Gunakan perintah /impeccable [target] langsung di terminal interaktif AI coding agent Anda: ### A. Inisialisasi dan Konsep Dasar - /impeccable init : Inisialisasi awal satu kali untuk memindai arsitektur proyek dan menghasilkan berkas PRODUCT.md serta DESIGN.md. - /impeccable craft : Memulai siklus perancangan dari eksplorasi konsep hingga implementasi komponen. - /impeccable document : Mengekstrak pola UI yang sudah ada di proyek menjadi dokumen acuan desain terpusat. - /impeccable generate : Generasi variasi desain komponen langsung yang diinisiasi oleh agen AI dengan evaluasi instan. ### B. Audit dan Kualitas Teknis - /impeccable audit : Menjalankan audit menyeluruh terhadap performa, aksesibilitas (a11y WCAG), dan responsivitas layar. - /impeccable critique : Meninjau komposisi visual, hirarki informasi, dan konsistensi antarmuka. - /impeccable polish : Pemeriksaan akhir untuk membersihkan detail visual mikro sebelum rilis produksi. - /impeccable harden : Memperkuat komponen terhadap kasus ekstrem (teks panjang, timeout, kegagalan jaringan). ### C. Penyesuaian Karakter Visual - /impeccable bolder : Meningkatkan kontras, ketegasan garis, dan aksen visual pada halaman yang terasa datar. - /impeccable quieter : Menurunkan intensitas elemen visual yang terlalu dominan agar fokus utama pengguna tidak terganggu. - /impeccable distill : Menyederhanakan tata letak dengan membuang kartu bertingkat atau dekorasi yang berlebihan. ### D. Tipografi, Warna, dan Gerak - /impeccable typeset : Memperbaiki skala ukuran font, line-height, letter-spacing, dan hirarki tipografi. - /impeccable layout : Menyelaraskan grid, konsistensi margin, dan padding antar-kontainer. - /impeccable colorize : Menerapkan palet warna berbasis semantic tokens dengan kontras rasio yang terverifikasi. - /impeccable animate : Menambahkan transisi dan animasi mikro yang fungsional. - /impeccable clarify : Menyempurnakan microcopy, pesan error, dan label tombol pada UI. - /impeccable live : Menampilkan sesi pengujian visual interaktif langsung pada peramban web. --- ## 4. Alur dan Prosedur Instalasi ### Metode 1: Instalasi Resmi CLI (Rekomendasi Utama) Jalankan perintah berikut di folder root proyek Anda: ```bash npx impeccable install ``` Installer akan mendeteksi direktori harness yang terpasang (~/.claude, .cursor, .codex) dan mendaftarkan plugin serta hook secara otomatis. Untuk memperbarui versi toolset kapan saja: ```bash npx impeccable update ``` ### Metode 2: Otomasi via Prompt AI Agent Jika bekerja langsung di dalam sesi Claude Code atau Codex, jalankan instruksi berikut: ```text Jalankan perintah terminal: npx impeccable install --providers=claude,codex,cursor --scope=project kemudian inisialisasi panduan desain proyek dengan /impeccable init. ``` ### Metode 3: Pemindaian Kualitas Desain Lokal Tanpa LLM Untuk menguji kode sumber tanpa konsumsi kuota token API: ```bash npx impeccable detect src/ ``` Perintah ini akan mengevaluasi berkas kode frontend terhadap 61 aturan anti-pattern (seperti font monoton, rasio kontras warna rendah, dan nesting kontainer berlebihan). --- Dokumen ini disusun untuk katalog repositori berkas dist.nex.biz.id.