Impeccable bukan ArtCraft dan bukan bagian dari produk atau suite ArtCraft; halaman ini adalah panduan independen, dan informasi resminya ada di impeccable.style serta github.com/pbakaus/impeccable.
Impeccable: kosakata desain untuk agen coding Anda
Impeccable adalah skill desain dan alat baris perintah open source yang memberi agen coding Anda kosakata bersama untuk meninjau, menyetel, dan memoles antarmuka. Dibuat oleh Paul Bakaus dengan titik awal skill frontend-design dari Anthropic, dan dirilis di bawah lisensi Apache-2.0. Halaman ini adalah panduan independen, bukan dokumentasi resmi.
- 24 perintah: critique, polish, audit, typeset, distill, dan lainnya
- Detektor dengan 62 aturan deterministik, tanpa LLM dan tanpa API key
- Mendukung Claude Code, Cursor, Codex CLI, Copilot, dan 19 agen secara total
Situs resmiRepositori GitHubDokumentasi
Terakhir diperbarui: · English
Apa itu Impeccable
Impeccable adalah skill yang dipasang di agen coding dan memberinya kosakata desain, ditambah CLI yang berdiri sendiri. Ia tidak membuka kanvas, melainkan mengubah desain menjadi perintah yang bisa dijalankan agen: mengkritik, memadatkan, menata tipografi, membersihkan, dan memperkuat. Proyek ini berangkat dari skill frontend-design milik Anthropic dan dirilis dengan Apache-2.0.
Sasarannya adalah selera bawaan agen: Inter di mana-mana, gradien ungu ke biru, kartu di dalam kartu, teks abu-abu di atas latar berwarna, dan ubin ikon membulat di atas setiap judul. 62 aturan deterministik menandai gejala itu saat penyuntingan, tanpa LLM dan tanpa API key.
Kekuatannya ada pada antarmuka yang sudah ada: tunjuk satu halaman atau komponen, lalu iterasi. Ia juga bisa membangun halaman baru, tetapi proyeknya sendiri mengakui mode itu lebih sulit. Perlu ditegaskan, Impeccable adalah proyek open source independen, bukan produk ArtCraft dan bukan bagian dari suite-nya.
Instalasi dan penyiapan
Jalankan perintah dari akar proyek. npx membutuhkan Node 18.19 atau lebih baru. Installer mendeteksi alat coding Anda, menanyakan apakah pemasangan untuk proyek atau global, dan menawarkan design hook bila alatnya mendukung. Sebaiknya terima hook tersebut.
Setelah itu, muat ulang alat coding dan jalankan /impeccable init ($impeccable init di Codex). Untuk skrip, gunakan --providers=claude,codex,cursor dan --scope=project|global. Pemasangan yang sudah ada diperbarui dengan npx impeccable update.
npx impeccable install- Pastikan Node 18.19+ tersedia dan buka akar proyek.
- Jalankan npx impeccable install, pilih cakupan proyek atau global, dan aktifkan design hook bila didukung.
- Muat ulang alat coding, lalu jalankan /impeccable init ($impeccable init di Codex) untuk membuat PRODUCT.md.
- Bila ingin mengunci sistem visual, jalankan /impeccable document dan buat DESIGN.md; setelah itu rawat dengan npx impeccable update.
Perintah inti
Ada 24 perintah. Pola pemakaiannya «perintah + target», misalnya /impeccable critique the pricing cards; di Codex ganti garis miring dengan $. Mengetik /impeccable saja akan menampilkan daftarnya. Berikut tujuh yang paling berguna.
| Perintah | Fungsinya | Kapan dipakai |
|---|---|---|
/impeccable init | Membaca kode, hanya bertanya hal yang tidak bisa disimpulkan, lalu menulis PRODUCT.md. | Sekali di awal proyek, untuk memberi konteks bagi perintah berikutnya. |
/impeccable critique | Menghasilkan tinjauan UX berbobot berdasarkan heuristik kegunaan dan mengurutkan apa yang harus diperbaiki lebih dulu. | Sebelum mendesain ulang, atau untuk mencari letak macetnya sebuah alur. |
/impeccable polish | Melakukan sentuhan terakhir sebelum rilis. | Saat fitur sudah final dan peluncuran mendekat. |
/impeccable audit | Menyusun laporan teknis tentang aksesibilitas, performa, tema, responsif, dan integritas implementasi, dengan temuan P0 hingga P3. | Sebelum rilis atau untuk membereskan utang implementasi. |
/impeccable typeset | Memperbaiki font, hierarki, ukuran, dan jarak. | Ketika tipografi terasa longgar atau hierarkinya kabur. |
/impeccable distill | Membuang hal yang tidak dibutuhkan halaman. | Ketika isinya terlalu padat dan fokusnya hilang. |
/impeccable hooks status|on|off | Menampilkan, menyalakan, atau mematikan design hook yang memindai berkas UI saat agen menyunting. | Untuk memastikan pemeriksaan otomatis berjalan atau ingin menjedanya. |
Alur kerja yang disarankan
Konteks dulu, layar kemudian. init hanya menanyakan hal yang tidak bisa disimpulkan: untuk siapa produk ini, apa yang harus dicapai, dan batasan apa yang berlaku. Jawabannya masuk ke PRODUCT.md dan dibaca semua perintah berikutnya. Kalau sudah ada sistem visual, jalankan document dan catat aturan merek di DESIGN.md agar agen tidak berganti gaya di tengah jalan.
Makin sempit targetnya, makin baik hasilnya. Daripada «rombak seluruh halaman», coba «critique kartu harga». Perintah yang sering dipakai bisa dipasangi pin lewat /impeccable pin audit sehingga menjadi pintasan /audit; sebelum rilis, tutup dengan audit lalu polish.
- Jalankan /impeccable init sekali per proyek dan tinjau PRODUCT.md yang dihasilkan.
- Bila sudah ada design system, jalankan /impeccable document dan rangkum font, warna, serta komponen di DESIGN.md.
- Iterasi per bagian: /impeccable critique the pricing cards, lalu bolder, quieter, distill, atau typeset untuk menyesuaikan arah.
- Sebelum publikasi, jalankan /impeccable audit dan /impeccable polish secara berurutan, dan pin perintah favorit Anda.
Agen yang didukung
Daftar resminya luas: Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness, dan Veto. Cara pemasangannya berbeda tiap alat; daftar lengkap ada di dokumentasi resmi.
Claude Code, Copilot, dan Grok punya plugin; design hook tersedia di Claude Code, Cursor, Codex, GitHub Copilot, Grok Build, dan Hermes Agent. Di Codex, hook proyek harus disetujui lewat /hooks; di Grok Build jalankan /hooks-trust; di Hermes aktifkan plugin-nya.
Tanpa Node, folder skill bisa disalin manual. Kalau hanya butuh detektor, npx impeccable detect berjalan tanpa agen. Mode live mendukung Vite, Next, SvelteKit, Astro, Nuxt, dan HTML biasa, tetapi hanya mengubah salinan kerja lokal.
Impeccable vs ArtCraft MCP
Namanya mirip karena keduanya membuat agen menghasilkan sesuatu, tetapi lapisannya berbeda. Impeccable bekerja pada kode sumber antarmuka; ArtCraft MCP adalah MCP/CLI resmi per aplikasi dari storytold yang mengendalikan Crafting Apps lokal seperti PhotoCraft. Ini juga bukan API langganan komunitas yang memakai nama artcraft-mcp.
| Aspek | Impeccable | ArtCraft MCP |
|---|---|---|
| Objek kerja | Kode frontend di repositori: komponen, JSX/TSX, CSS, dan struktur halaman. | Crafting Apps lokal (misalnya PhotoCraft) serta alur gambar dan videonya. |
| Keluarannya | Saran desain, perubahan kode, laporan critique/audit, serta berkas PRODUCT.md dan DESIGN.md. | Gambar atau video, dan operasi otomatis di dalam aplikasi tersebut. |
| Kapan dipilih | Saat membangun, menilai, atau memoles antarmuka frontend. | Saat memproduksi atau mengolah gambar dan video dalam jumlah banyak dan mengotomatiskan pekerjaan di aplikasi itu. |
| Bisa digabung? | Bisa: antarmuka dengan Impeccable, produksi materi dengan ArtCraft MCP. | Bisa, tetapi hanya untuk aset media: ia tidak melakukan tinjauan desain antarmuka dan tidak menggantikan Impeccable. |
Panduan ArtCraft MCPCrafting Apps
Batas dan keamanan
Impeccable adalah skill desain frontend dan CLI, bukan aplikasi desain dan bukan pembuat gambar. Mode live hanya mengubah salinan kerja lokal; jangan menyuntikkannya ke situs yang sudah diterapkan, dan jangan melonggarkan CSP produksi agar ia berjalan.
Hook berjalan di luar persetujuan model. Di Claude Code, hook perintah yang sudah terpasang bisa tetap dieksekusi meski Anda menolak perintah model, dan penyuntingan pertama dapat mengunduh engine. Periksa hook sebelum menjalankan tanpa pengawasan, atau matikan dengan --settings '{"disableAllHooks": true}'.
Telemetri mencatat secara anonim arah visual mana yang ditampilkan dan mana yang dipilih; nama proyek, berkas, kode, dan PRODUCT.md tidak dikirim. Matikan lewat npx impeccable telemetry off, DO_NOT_TRACK=1, atau "telemetry": false di .impeccable/config.json. Pada detektor, kode keluar 2 berarti ada temuan dan 1 berarti target tidak bisa dipindai.
Panduan terkait
Pertanyaan umum
Apa itu Impeccable, dan apakah ini produk ArtCraft?
Impeccable adalah skill desain dan CLI untuk agen coding karya Paul Bakaus, dengan 24 perintah dan detektor 62 aturan di bawah lisensi Apache-2.0. Ini bukan produk ArtCraft dan tidak termasuk suite-nya. Halaman ini panduan independen; sumber resminya adalah impeccable.style dan github.com/pbakaus/impeccable.
Bagaimana cara memasangnya?
Dari akar proyek, jalankan npx impeccable install lalu muat ulang alat coding Anda. Setelah itu jalankan /impeccable init, atau $impeccable init di Codex, untuk membuat PRODUCT.md. npx memerlukan Node 18.19 atau lebih baru, dan npx impeccable update memperbarui pemasangan yang ada; langkah lengkapnya di impeccable.style/docs.
Apa beda critique dan audit?
critique adalah tinjauan UX berbobot yang berpegang pada heuristik kegunaan dan memberi tahu apa yang perlu diperbaiki lebih dulu. audit adalah laporan teknis tentang aksesibilitas, performa, tema, responsif, dan integritas implementasi, dengan temuan berperingkat P0 sampai P3. Yang satu menilai pengalaman, yang lain memeriksa rekayasa, dan keduanya sering dipakai berurutan.
Apakah perlu API key?
Detektornya tidak: 62 aturannya deterministik dan tidak memanggil LLM maupun membaca kunci. Skill-nya sendiri berjalan di dalam agen Anda, jadi tidak perlu kunci model tambahan. Telemetri bisa dimatikan dengan npx impeccable telemetry off atau DO_NOT_TRACK=1.
Agen apa saja yang didukung?
Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness, dan Veto. Pemasangan dan dukungan hook berbeda tiap alat; daftar terbarunya ada di impeccable.style/docs.
Impeccable atau ArtCraft MCP?
Tergantung apa yang ingin Anda ubah. Impeccable bekerja pada kode antarmuka dan mengembalikan saran, perubahan, serta tinjauan. ArtCraft MCP mengendalikan aplikasi lokal seperti PhotoCraft untuk menghasilkan gambar dan video serta mengotomatiskan alurnya. Keduanya bisa dipakai bersama, tetapi ArtCraft MCP bukan alat tinjauan desain dan tidak menggantikan Impeccable.
Pemberitahuan independensi
Impeccable adalah proyek open source independen yang dibuat Paul Bakaus. Ia tidak berafiliasi dengan ArtCraft, bukan produk ArtCraft, dan bukan bagian dari suite maupun komponen resminya. Halaman ini ditulis pihak ketiga untuk pembaca Indonesia; untuk perintah, persyaratan, dan kabar terbaru, rujukannya adalah situs resmi impeccable.style dan repositori github.com/pbakaus/impeccable. ArtCraft MCP adalah integrasi resmi lain yang berfokus pada Crafting Apps dan menyelesaikan masalah berbeda.
Sources
Every fact on this page comes from the pages below, checked on 3 November 2026.