Pi untuk desain.

Apa sebenarnya Pi itu

Pi adalah agen pengkodean AI open-source (MIT) untuk terminal, bagian dari toolkit pi earendil-works. Ia membaca repositori Anda, menyunting berkas, dan menjalankan perintah shell — merencanakan dan memverifikasi pekerjaan dari tugas berbahasa natural alih-alih sekadar melengkapi baris. Intinya sengaja kecil: empat tool bawaan — read, write, edit, dan bash — plus grep, find, dan ls bawaan.

Untuk pekerjaan desain, sifat yang menonjol adalah Pi bersifat provider-agnostic. Ia menormalkan lintas Anthropic, OpenAI, Google, dan banyak provider lain di balik satu API terpadu, sehingga Anda membawa kunci Anda sendiri dan memilih model per tugas — misalnya model multimodal yang kuat untuk membaca tangkapan layar referensi — dan beralih dengan /model atau Ctrl+L di tengah sesi tanpa mengubah alur kerja Anda.

• Model apa pun, kunci Anda: Pi merutekan ke 20+ provider termasuk Anthropic dan OpenAI. Anda mengautentikasi dengan kunci API Anda sendiri (BYOK), atau masuk ke langganan Claude Pro/Max, ChatGPT Plus/Pro, atau GitHub Copilot dengan /login.
• Skills + Extensions: Pi memuat Skills (paket kapabilitas Markdown yang mengikuti standar Agent Skills) dan Extensions TypeScript — tempat alami untuk mengkodekan konvensi desain Anda dan menambahkan tool kustom.
• Sesi bercabang: Sesi disimpan sebagai pohon JSONL, sehingga Anda bisa mencabangkan sebuah eksplorasi dan menavigasi riwayat dalam satu berkas tanpa kehilangan putaran sebelumnya.

• Vendor: earendil-works (proyek komunitas open-source)
• Kredensial: kunci API provider Anda sendiri (BYOK — Anthropic, OpenAI, Google, dll.) atau login langganan via /login; disimpan secara lokal di ~/.pi/agent/auth.json (0600)
• Lisensi: MIT, open source

Mengapa agen BYOK yang multi-provider cocok untuk desain

Keunggulan desain Pi adalah fleksibilitas, bukan satu model bawaan — tetapi, seperti setiap agen, selera tetap harus disediakan.

• Pilih model yang tepat per tugas: Karena Pi merutekan ke provider apa pun, Anda bisa meraih model multimodal yang kuat untuk membaca tangkapan layar referensi, lalu beralih ke yang lain untuk refaktor — tanpa meninggalkan agen.
• Kunci Anda, tanpa terkunci: BYOK berarti Anda tidak terikat pada harga atau batas konteks satu vendor; pilih model yang kelebihannya cocok dengan pekerjaan desain di depan Anda.
• Konvensi dalam Skills: Sebuah Skill (plus sumber MCP seperti server Figma) mengarahkan agen ke token, komponen, dan spesifikasi nyata Anda, sehingga ia bekerja terhadap sebuah brand alih-alih tampilan bawaan.

Pelajarannya sama dengan yang diajarkan setiap agen: Pi tidak memiliki selera secara bawaan, dan tidak ada pilihan model yang menyediakannya. Ia menghasilkan desain yang baik ketika Anda memberinya batasan — sebuah design system, sebuah skill estetika, dan referensi konkret. Open Design mengemas tepat masukan-masukan itu, itulah mengapa keduanya cocok dipadukan (lebih lanjut di bawah).

Menyiapkan Pi untuk pekerjaan desain, dari nol

Berikut jalur lengkap dari mesin bersih menuju Pi yang dapat membangun dan memverifikasi UI.

# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• Kodekan aturan desain Anda: Letakkan token, primitif, dan konvensi Anda dalam sebuah Skill lalu arahkan Pi ke sana, sehingga keluaran cocok dengan sebuah brand alih-alih jatuh ke tampilan generik.
• Tambahkan verifikasi peramban: Sambungkan Playwright atau MCP peramban sehingga Pi merender di peramban sungguhan dan memeriksa keluarannya di seluruh breakpoint alih-alih hanya memastikan build lolos.

Alur kerja tangkapan-layar-ke-UI

Loop desain dengan daya ungkit tertinggi pada Pi adalah mengubah gambar referensi menjadi UI yang berfungsi dan responsif, lalu berulang sampai cocok — bersandar pada model multimodal untuk membandingkan keluaran kembali ke referensi. Karena Pi provider-agnostic, arahkan ia ke model mana pun yang paling baik membaca gambar untuk putaran ini.

1. Mulailah dari referensi visual paling jelas yang Anda punya — dan sertakan beberapa keadaan (desktop dan mobile, hover, kosong, memuat), bukan hanya satu bidikan hero.
2. Pilih model multimodal yang kuat untuk putaran ini dengan /model, karena pemahaman gambar yang menggerakkan kualitas tangkapan-layar-ke-UI.
3. Bersikaplah spesifik dalam prompt; prompt yang kabur menghasilkan UI generik bahkan dengan model yang kuat.
4. Simpan design system dan konvensi Anda dalam sebuah Skill, dan beri tahu Pi di mana token dan primitif kanonis berada.
5. Jalankan server dev dan minta Pi merender di peramban sungguhan, mengubah ukuran ke breakpoint, lalu berulang dengan membandingkan implementasinya kembali ke tangkapan layar — bukan sekadar memastikan ia ter-build.

Beri agen referensi dan batasan konkret di awal:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Jaga prompt tetap kecil dan terfokus, commit iterasi yang baik dan kembalikan yang buruk (beri tahu Pi saat Anda mengembalikan), sehingga setiap putaran dibangun di atas dasar yang bersih. Sesi JSONL bercabang Pi juga membiarkan Anda menjelajahi alternatif tanpa kehilangan utas asli.

Skills, Extensions, dan tema

Pi memperluas dirinya saat runtime melalui beberapa lapisan, dan semuanya memetakan dengan rapi ke alur kerja desain terbuka.

• Skills: Paket kapabilitas Markdown yang mengikuti standar Agent Skills — rumah yang awet dan portabel untuk konvensi desain, token, dan daftar periksa tinjauan Anda. Skill yang sama bekerja lintas agen yang kompatibel, bukan hanya Pi.
• Extensions dan templat prompt: Extensions TypeScript menambahkan tool, perintah, dan UI kustom; templat prompt yang dapat digunakan ulang dijalankan via /name. Keduanya membiarkan Anda men-skrip loop verifikasi tanpa meninggalkan terminal.
• MCP dan tema: Pi terhubung ke server MCP untuk membawa konteks desain eksternal (yang paling relevan server Figma MCP), dan tema di-hot-reload sehingga UI terminal tetap terbaca saat Anda bekerja.

Ini adalah kapabilitas portabel — Skills dan MCP terutama — persis jenis hal yang dibangun untuk diorkestrasi oleh Open Design, alih-alih dibuat ulang per proyek.

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI untuk desain

Tidak ada satu pemenang tunggal untuk pekerjaan desain — setiap agen punya kekuatan berbeda, dan tim berpengalaman menumpuknya. Ringkasan yang adil:

Sudut pandang Pi ortogonal terhadap yang lain: ia adalah agen yang membiarkan Anda menggunakan model dasar mana pun itu dengan kunci Anda sendiri. Vonis komunitas yang berulang tetap berlaku — selera berasal dari manusia: semuanya jatuh ke estetika generik tanpa skill, referensi, dan batasan. Itulah masalah nyata yang harus dipecahkan, dan bentuknya adalah alat-desain, bukan model.

Jebakan, dan cara menghindari tampilan “AI slop”

Keluhan paling umum tentang desain hasil AI adalah tampak generik — gradien lembut, panel mengambang, sudut membulat berlebihan, bayangan dramatis, nuansa Inter-dan-ungu yang “berteriak bahwa ini buatan AI”. Masalah lain yang dilaporkan termasuk tata letak mobile yang rusak dan instruksi yang bocor ke teks UI. Tidak satu pun unik bagi Pi atau model mana pun; itu yang terjadi ketika agen mana pun berjalan tanpa konteks desain yang dikurasi.

• Tambahkan skill estetika: Skill desain yang dikurasi memaksa agen untuk berkomitmen pada arah nyata alih-alih tampilan bawaan — dan karena ia Skill yang portabel, ia ikut bersama Anda lintas model.
• Verifikasi di peramban sungguhan: Pilih model multimodal dan minta Pi merender dan memeriksa-sendiri di seluruh breakpoint sehingga tata letak tidak diam-diam rusak di mobile.
• Sediakan token dan referensi: Token desain nyata dan tangkapan layar referensi adalah tuas tunggal terbesar atas kualitas keluaran.
• Kodekan aturan di tempat Pi membacanya: Letakkan aturan bergaya “tanpa kartu hero, maksimal dua jenis huruf, hierarki brand-dulu” dalam sebuah Skill yang dimuat agen setiap putaran.

Perhatikan bahwa setiap mitigasi adalah tentang memberi agen konteks desain yang dikurasi — terlepas dari provider mana yang Anda arahkan. Memelihara konteks itu secara manual, per proyek, adalah kerja keras yang dihilangkan Open Design.

Mendesain dengan Pi di dalam Open Design

Open Design adalah lapisan desain open-source yang terus diminta oleh alur kerja di atas. Ia memperlakukan Pi sebagai adaptor first-party dan membungkusnya dengan pustaka skill dan design-system kurasi, pipeline render terstruktur, serta UI desktop lokal — sehingga konteks desain yang membuat Pi bagus sudah ada sejak putaran pertama, bukan dirakit dengan tangan setiap kali. Keduanya open-source dan mengutamakan lokal, yang menjadikan pasangan ini cocok secara alami.

1. Pasang Open Design dan pilih Pi sebagai agen Anda.
2. Autentikasi dengan kunci API provider Anda sendiri (BYOK) atau login langganan — kredensial tetap di mesin Anda di ~/.pi/agent/auth.json dan tidak pernah diproksikan melalui kami.
3. Pilih sebuah design system dan sebuah skill, lalu hasilkan deck, prototipe, dan landing page dengan selera yang konsisten.
4. Setiap artefak dan berkas DESIGN.md tinggal di repo Anda sendiri, bukan cloud terkelola.

Agen Pi yang sama, kunci yang sama, kebebasan yang sama untuk mengganti model — plus alur kerja desain open-source yang nyata dan portabel di sekelilingnya. Ia mengutamakan lokal dan MIT, sehingga tidak ada apa pun tentang pekerjaan atau kredensial Anda yang meninggalkan mesin Anda.

Pertanyaan yang sering diajukan

1. 01 Apakah Pi benar-benar bisa mengerjakan pekerjaan desain? +

   Ya — dengan skill estetika, design system, dan gambar referensi nyata dalam konteks, Pi menghasilkan UI berkualitas produksi dan responsif, dan Anda bisa merutekannya ke model multimodal yang kuat untuk memverifikasi keluaran terhadap referensi. Tanpa konteks itu ia cenderung jatuh ke tampilan generik, dan itulah celah yang diisi Open Design.

2. 02 Apakah saya perlu membayar untuk mendesain dengan Pi? +

   Pi sendiri gratis dan open source (MIT). Anda hanya membayar model dasarnya — bawa kunci API provider Anda sendiri (BYOK), atau gunakan langganan Claude Pro/Max, ChatGPT Plus/Pro, atau GitHub Copilot via /login. Open Design tidak pernah memproksikan kredensial Anda dengan cara apa pun.

3. 03 Apa yang membuat Pi bagus khusus untuk desain? +

   Ia provider-agnostic: Anda membawa kunci Anda sendiri dan merutekan ke salah satu dari 20+ provider, memilih model yang kelebihannya cocok dengan tugas dan beralih di tengah sesi. Tetapi selera tetap berasal dari design system, skill, dan referensi yang Anda sediakan, bukan dari model.

4. 04 Model mana yang sebaiknya saya gunakan dengan Pi untuk desain frontend? +

   Pi merutekan ke banyak provider, jadi pilih per tugas — model multimodal yang kuat membaca tangkapan layar referensi dengan baik, sementara yang lain mungkin cocok untuk refaktor. Keunggulan Pi adalah Anda bisa beralih tanpa mengubah alur kerja Anda. Open Design membiarkan Anda menjaga konteks desain yang sama lintas model mana pun yang Anda pilih.

5. 05 Bagaimana cara menghubungkan Pi ke Figma? +

   Pi mendukung server MCP, sehingga Anda bisa menambahkan server Figma MCP dan menarik konteks desain nyata — komponen, variabel, data tata letak — sehingga kode yang dihasilkan cocok dengan sumber alih-alih memperkirakannya.

6. 06 Apakah Open Design berafiliasi dengan Pi? +

   Tidak. Pi adalah proyek open-source independen dari earendil-works; Open Design adalah proyek open-source independen terpisah yang mendukung Pi sebagai adaptor first-party.

7. 07 Apakah berkas dan kredensial saya aman? +

   Ya — Open Design mengutamakan lokal dan open source. Berkas, artefak, dan DESIGN.md Anda tetap di repo Anda sendiri, dan kunci provider Anda digunakan langsung oleh Pi (disimpan secara lokal di ~/.pi/agent/auth.json), tidak pernah dirutekan melalui server Open Design.