Codex untuk desain.

Apa sebenarnya OpenAI Codex itu (dan apa yang bukan)

Pertama, sebuah penjelasan yang membingungkan hampir semua orang yang mencari “Codex.” OpenAI Codex yang asli adalah model penyelesaian kode tahun 2021 yang menggerakkan GitHub Copilot awal dan dihentikan pada 2023. Itu bukan yang dibahas halaman ini. Codex masa kini adalah alat coding agentic dari OpenAI — ia merencanakan, menulis, menjalankan, dan memverifikasi kode dari tugas berbahasa alami.

Codex modern hadir di empat permukaan: CLI terminal (ditulis ulang dalam Rust, berlisensi Apache-2.0), ekstensi IDE untuk VS Code, Cursor, dan Windsurf, pengalaman cloud/web untuk tugas asinkron yang didelegasikan, dan aplikasi desktop dengan browser internal dan Computer Use.

• Model default: Per pertengahan 2026, model yang direkomendasikan adalah gpt-5.5, dengan gpt-5.4 sebagai model yang secara eksplisit dilatih OpenAI untuk frontend dan computer use.
• File instruksi: Codex membaca file AGENTS.md di proyek Anda (standar lintas alat) untuk aturan proyek — tempat alami untuk menuliskan konvensi desain Anda.
• Sandbox: Ia berjalan dalam sandbox tingkat kernel (workspace-write secara default), sehingga agen yang menyunting UI Anda tidak dapat berkelana ke luar proyek.

• Vendor: OpenAI
• Kredensial: kunci API OpenAI (BYOK) atau langganan ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Lisensi CLI: Apache-2.0, open source

Mengapa Codex sekarang bagus untuk desain

Tiga hal berkonvergensi pada awal 2026 untuk menjadikan Codex alat desain sungguhan, bukan sekadar generator kode generik.

• Model yang dilatih untuk frontend: OpenAI merilis GPT-5.4, model mainline pertamanya yang dilatih untuk frontend dan computer use, dengan pemahaman gambar yang jauh lebih baik di seluruh alur kerja desain dan verifikasi diri yang lebih kuat. Ia bahkan dapat menghasilkan mood board dan opsi visual sebelum berkomitmen pada aset final.
• Skill frontend resmi: Katalog openai/skills menyediakan frontend-skill terkurasi yang menegakkan selera nyata: layout tanpa card, hero full-bleed, hierarki brand-first, gerak yang terkendali, paling banyak dua typeface dan satu accent color — dan membuat Codex menulis tesis visual sebelum membangun.
• Verifikasi browser: Dengan skill Playwright, Codex membuka browser sungguhan, mengubah ukuran ke breakpoint, dan membandingkan output-nya kembali ke referensi alih-alih hanya memeriksa bahwa build lolos.

Pelajaran di balik ketiganya: Codex tidak punya selera secara default. Ia menghasilkan desain yang baik ketika Anda memberinya batasan — design system, skill estetik, dan referensi konkret. Open Design mengemas masukan-masukan itu secara persis, dan itulah mengapa keduanya cocok bersama (lebih lanjut di bawah).

Menyiapkan Codex untuk pekerjaan desain, dari nol

Berikut jalur lengkap dari mesin yang bersih hingga Codex yang dapat membangun dan memverifikasi UI.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• Tuliskan aturan desain Anda: Letakkan tokens, primitif, dan konvensi Anda di AGENTS.md atau DESIGN.md dan arahkan Codex ke sana, sehingga output sesuai dengan brand alih-alih jatuh ke tampilan generik.
• Pilih tingkat reasoning yang tepat: OpenAI mencatat bahwa tingkat reasoning rendah hingga sedang sering menghasilkan hasil frontend yang lebih kuat daripada pengaturan tertinggi.

Alur kerja screenshot-to-UI

Loop desain dengan daya ungkit tertinggi pada Codex adalah mengubah gambar referensi menjadi UI yang berfungsi dan responsif, lalu mengiterasinya hingga cocok. Panduan OpenAI sendiri menyaringnya menjadi lima langkah.

1. Mulai dari referensi visual paling jelas yang Anda miliki — dan sertakan banyak state (desktop dan mobile, hover, kosong, loading), bukan hanya satu hero shot.
2. Bersikaplah spesifik dalam prompt; prompt yang samar menghasilkan UI generik.
3. Siapkan design system dan beri tahu Codex di mana tokens dan primitif kanonis berada.
4. Aktifkan skill interaktif Playwright agar Codex merender di browser sungguhan dan mengubah ukuran ke breakpoint.
5. Iterasi dengan meminta Codex membandingkan implementasinya kembali ke screenshot — bukan sekadar memastikan ia berhasil build.

Beri gambar dengan menyeret screenshot ke dalam terminal atau dengan flag image, lalu beri prompt dengan batasan konkret:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

Jalankan dev server di terminal kedua, jaga prompt tetap kecil dan terfokus, lalu commit iterasi yang baik / revert yang buruk (beri tahu Codex saat Anda revert) sehingga setiap putaran dibangun di atas dasar yang bersih.

Codex + Figma: round-trip desain ↔ kode

Pada Februari 2026 OpenAI dan Figma mengumumkan kemitraan resmi, mengubah beta Figma MCP sebelumnya menjadi integrasi dwiarah kelas satu. Ia bekerja di kedua arah.

• Desain → Kode: Salin “link to selection” sebuah frame di Figma, tempelkan ke Codex dengan get_design_context, dan minta ia mengimplementasikan desain menggunakan pustaka komponen Anda yang ada.
• Kode → Desain: Alat generate_figma_design (“Code to Canvas”) mengubah UI yang hidup dan berjalan kembali menjadi frame Figma yang dapat disunting — seluruh layar, elemen terpilih, atau seluruh file.

Figma MCP berjalan sebagai server remote dan dikecualikan dari rate limit. Tambahkan sekali dan ia tersedia untuk Codex, Claude Code, Cursor, VS Code, dan lainnya — persis jenis kemampuan portabel dan multi-agen yang dibuat untuk diorkestrasikan oleh Open Design.

Codex vs Cursor vs Claude Code untuk desain

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

Putusan komunitas yang berulang adalah bahwa selera datang dari manusia: ketiganya jatuh ke estetika generik tanpa skill, referensi, dan batasan. Itulah masalah sebenarnya yang harus dipecahkan — dan bentuknya seperti alat desain, bukan seperti model.

Jebakan, dan cara menghindari tampilan “AI slop”

Keluhan paling umum tentang desain hasil Codex adalah tampilannya yang generik — gradien lembut, panel mengambang, sudut membulat berukuran berlebihan, bayangan dramatis, nuansa Inter-dan-ungu yang “berteriak ini buatan AI.” Masalah lain yang dilaporkan termasuk layout mobile yang rusak, instruksi yang bocor ke teks UI, dan cepat mencapai batas penggunaan.

• Install sebuah skill frontend: Skill estetik terkurasi memaksa Codex berkomitmen pada arah nyata alih-alih tampilan default.
• Aktifkan verifikasi Playwright: Buat Codex merender dan memeriksa diri sendiri di berbagai breakpoint sehingga layout tidak diam-diam rusak di mobile.
• Sediakan tokens dan referensi: Design tokens nyata dan screenshot referensi adalah satu daya ungkit terbesar bagi kualitas output.
• Tuliskan aturan di AGENTS.md: Letakkan aturan bergaya “tanpa hero card, maksimal dua typeface, hierarki brand-first” di tempat yang dibaca agen pada setiap putaran.

Perhatikan bahwa setiap mitigasi adalah soal memberi agen konteks desain yang terkurasi. Memelihara konteks itu secara manual, per proyek, adalah kerja melelahkan yang dihapus Open Design.

Mendesain dengan Codex di dalam Open Design

Open Design adalah lapisan desain open-source yang terus diminta oleh alur kerja di atas. Ia memperlakukan Codex sebagai adaptor first-party dan membungkusnya dengan pustaka skill dan design system terkurasi, pipeline render terstruktur, dan UI desktop lokal — sehingga konteks desain yang membuat Codex bagus sudah ada sejak putaran pertama, bukan dirakit secara manual setiap kali.

1. Install Open Design dan pilih Codex sebagai agen Anda.
2. Autentikasi dengan kunci API OpenAI (BYOK) atau langganan ChatGPT Anda — kredensial tetap di mesin Anda dan tidak pernah diproksi melalui kami.
3. Pilih design system dan skill, lalu hasilkan deck, prototipe, dan landing page dengan selera yang konsisten.
4. Setiap artefak dan file DESIGN.md hidup di repo Anda sendiri, bukan di cloud yang dihosting.

Agen Codex yang sama, kunci yang sama — ditambah alur kerja desain open-source yang nyata dan portabel di sekelilingnya. Ia local-first dan Apache-2.0, sehingga tidak ada bagian dari pekerjaan atau kredensial Anda yang meninggalkan mesin Anda.

Pertanyaan yang sering diajukan

1. 01 Apakah OpenAI Codex benar-benar bisa melakukan pekerjaan desain? +

   Ya — dengan skill frontend, design system, dan gambar referensi nyata dalam konteks, Codex (terutama pada GPT-5.4) menghasilkan UI berkualitas produksi dan responsif serta dapat memverifikasinya di browser. Tanpa konteks itu, ia cenderung jatuh ke tampilan generik, dan itulah celah yang diisi Open Design.

2. 02 Apakah ini plugin Product Design OpenAI Codex? +

   Bukan. Open Design adalah proyek open-source independen yang mengintegrasikan Codex sebagai agen. Ia melengkapi tooling OpenAI sendiri dengan pustaka skill dan design system yang terbuka dan local-first.

3. 03 Apakah saya butuh langganan ChatGPT untuk mendesain dengan Codex? +

   Anda dapat menggunakan kunci API OpenAI (BYOK) atau langganan ChatGPT Anda. Masuk dengan ChatGPT umumnya memberi batas yang lebih murah hati; Open Design tidak pernah memproksi kredensial Anda dengan cara apa pun.

4. 04 Codex atau Claude Code untuk desain frontend? +

   Keduanya kuat. Claude Code dikenal karena keputusan desain yang spesifik dan sadar codebase; Codex punya poles visual yang kuat setelah GPT-5.4 dan unggul dalam build yang didelegasikan dan tersandbox. Banyak tim memakai keduanya — Open Design memungkinkan Anda berganti agen tanpa mengubah alur kerja desain Anda.

5. 05 Bagaimana cara menghubungkan Codex ke Figma? +

   Tambahkan server Figma MCP resmi (codex mcp add figma --url https://mcp.figma.com/mcp). Anda kemudian dapat mengimplementasikan frame Figma dalam kode dengan get_design_context dan mendorong UI yang berjalan kembali ke frame Figma yang dapat disunting dengan generate_figma_design.

6. 06 Bagaimana cara menghindari estetika “AI slop” yang generik? +

   Install skill frontend, sediakan design tokens nyata dan screenshot referensi, tuliskan aturan brand di AGENTS.md, dan aktifkan verifikasi Playwright. Open Design menyediakan ini sebagai pustaka terkurasi sehingga Anda melewati penyiapan per proyek.

7. 07 Apakah Open Design berafiliasi dengan OpenAI? +

   Tidak. Codex adalah produk OpenAI; Open Design adalah proyek open-source independen yang mendukungnya sebagai adaptor first-party. OpenAI dan Codex adalah merek dagang OpenAI.

8. 08 Apakah file dan kredensial saya aman? +

   Ya — Open Design bersifat local-first. File, artefak, dan DESIGN.md Anda tetap di repo Anda sendiri, dan kredensial OpenAI Anda digunakan langsung oleh agen Anda, tidak pernah dirutekan melalui server Open Design.