Deskripsi
pen.dev adalah kanvas desain agensi dari High Agency Inc., pembuat yang sebelumnya dikenal sebagai Pencil (pencil.dev). Produk ini sekarang menggambarkan dirinya sebagai dibangun untuk membangun perangkat lunak daripada hanya layar statis: desainer dan pengembang bekerja di kanvas terbuka di mana agen AI dapat merancang bersama mereka, menyempurnakan pekerjaan yang ada, atau membangun layar baru dari sebuah prompt.
Baca Selengkapnya
Kanvas menyimpan desain dalam format file terbuka yang disebut .pen, sebuah file JSON biasa yang dapat dibaca dan diedit oleh orang dan agen, disimpan di dalam basis kode yang sama dengan produk yang dijelaskan. Pekerjaan dilakukan baik secara manual, menggunakan alat yang familiar dari Figma dan Sketch seperti alat pena, gradien, komponen, dan tata letak fleksibel, atau dengan mengarahkan agen untuk merancang, menyempurnakan, atau memperluas layar. Browser bawaan dan ekstensi Chrome memungkinkan pengguna mengimpor halaman web, aplikasi, atau desain apa pun langsung ke kanvas sebagai lapisan yang dapat diedit, dan file Figma, termasuk vektor, teks, dan gaya, diimpor secara langsung.
Pengguna membawa model mereka sendiri ke kanvas: pen.dev bekerja dengan Claude, GPT, Grok, Qwen, Gemini, Kimi, DeepSeek, dan Minimax, terhubung melalui langganan ChatGPT atau Claude yang ada, kunci API, atau MCP, WebMCP, atau baris perintah. Tautan MCP yang sama memungkinkan alat seperti Claude Code, Codex, Cursor, atau Antigravity merancang tanpa kepala melalui CLI pen.dev, tanpa membuka kanvas sama sekali.
Fitur kanvas lainnya termasuk efek shader waktu nyata yang disebut Vibe Shaders, menggambar ikon dan ilustrasi yang dibantu AI yang disebut AI Pen, perpustakaan komponen bersama di seluruh file, dan jalur rendering WebGL kustom yang dibangun untuk tetap lancar dengan ribuan lapisan atau puluhan gigabyte konten. Pekerjaan yang selesai diekspor sebagai PNG, JPEG, WEBP, atau PDF dalam skala apa pun, sebagai HTML dan CSS atau Tailwind dalam satu klik, atau sebagai tautan yang dapat dibagikan yang membuka versi terbaru di browser mana pun. Mode slide dan presentasi dibangun untuk mengubah pekerjaan kanvas menjadi dek.
pen.dev saat ini gratis; perusahaan mengatakan bahwa mereka akan menjelaskan rencana berbayar dengan jelas sebelum mengenakan biaya untuk itu. Ini dikirim sebagai aplikasi desktop yang dapat diunduh ditambah ekstensi browser dan editor untuk Chrome, VS Code, Cursor, dan OpenVSX, dan didukung oleh program Speedrun a16z. Ini cocok untuk desainer produk dan tim perangkat lunak kecil yang ingin berpindah antara desain visual dan kode yang bekerja tanpa mengganti alat, lebih dari tim yang mencari produk desain grafis murni.
- KategoriAlat Desain UI & UX AI
- Model HargaFreemium
- PenerapanDesktop, Ekstensi IDE, CLI
- PlatformmacOS, Windows, Linux
Fitur Inti pen.dev
Format file .pen terbuka yang dapat dibaca dan diedit oleh agen secara native
Dukungan bawa model sendiri untuk Claude, GPT, Gemini, Grok, Qwen, Kimi, DeepSeek, dan Minimax
Koneksi MCP, WebMCP, dan CLI untuk desain tanpa kepala dari Claude Code, Cursor, atau Codex
Browser bawaan dan ekstensi Chrome untuk mengimpor halaman web apa pun sebagai lapisan yang dapat diedit
Impor Figma yang mempertahankan vektor, teks, dan gaya
Kanvas WebGL kustom yang dibangun untuk tetap lancar dengan ribuan lapisan
Vibe Shaders untuk efek visual dan gradien waktu nyata
AI Pen untuk menghasilkan ikon dan ilustrasi dengan agen
Ekspor satu klik ke HTML/CSS/Tailwind atau PNG/JPEG/WEBP/PDF
Mode slide dan presentasi untuk mengubah pekerjaan kanvas menjadi dek
Cara menggunakan pen.dev?
Unduh: Dapatkan aplikasi desktop pen.dev atau tambahkan ekstensi Chrome, Cursor, atau VS Code.
Mulai kanvas: Buka kanvas kosong atau impor desain dari Figma, halaman web, atau basis kode Anda sendiri.
Sambungkan model: Masuk dengan langganan Claude atau ChatGPT, tambahkan kunci API, atau tautkan agen melalui MCP.
Desain atau prompt: Gambar secara manual dengan alat pena dan komponen, atau minta agen untuk membangun atau menyempurnakan layar.
Tambahkan efek: Terapkan shader, gradien, dan ikon yang digambar AI di tempat yang diperlukan.
Ekspor atau bagikan: Ekspor ke HTML/CSS, format gambar, atau PDF, atau kirim tautan ke versi terbaru.
Kasus Penggunaan pen.dev
- Desain UI Agensi
- Serah terima desain-ke-kode
- Kloning halaman web
- Desain tanpa kepala melalui MCP
