Mendesain frontend yang lebih polished dengan GPT-5.4

• OpenAI merilis teknik prompting praktis dan panduan desain untuk meningkatkan kemampuan pengembangan frontend GPT-5.4
• Pemahaman gambar, kelengkapan fungsional, dan kemampuan Computer Use menjadi tiga sumbu utama peningkatan, memungkinkan pembuatan hasil yang lebih polished dan ambisius secara visual dibanding model sebelumnya
• OpenAI menyoroti bahwa jika prompt tidak jelas, model cenderung kembali ke pola berfrekuensi tinggi dalam data latih dan berhenti pada desain yang generik, lalu menawarkan teknik konkret untuk mengatasinya
• Empat tips praktis utama yang ditekankan: mendefinisikan design system, menyediakan referensi visual, menyusun narasi, dan menetapkan low reasoning level
• Paket prompt frontend-skill juga dirilis sebagai open source, sehingga bisa langsung dipakai di coding agent seperti Codex

---

Peningkatan pada model

• GPT-5.4 berfokus pada tiga peningkatan nyata dalam pekerjaan frontend:
  • Penguatan pemahaman gambar
  • Pembuatan app/website yang lebih lengkap
  • Peningkatan kemampuan memanfaatkan tool untuk memeriksa, menguji, dan memverifikasi pekerjaannya sendiri

• Pemahaman gambar dan penggunaan tool

  • Model ini dilatih untuk menggunakan pencarian gambar dan tool pembuatan gambar secara native, sehingga dapat melakukan penalaran visual langsung dalam proses desain
  • Untuk hasil terbaik, OpenAI menyarankan agar model diminta terlebih dahulu membuat moodboard atau beberapa opsi visual sebelum memilih aset final
  • Anda bisa mengarahkan model ke referensi visual yang kuat dengan menjelaskan secara eksplisit atribut yang harus ditangkap gambar, seperti gaya, palet warna, komposisi, dan suasana
  • Disajikan pula pola prompt yang secara default memprioritaskan gambar yang diunggah atau sudah dibuat sebelumnya, dan jika tidak ada, meminta model membuat visual baru dengan tool image generation

• Peningkatan kelengkapan fungsional

  • Model ini dilatih untuk membangun app yang lebih lengkap dan sehat secara fungsional
  • Lebih stabil dalam task jangka panjang, dan kini dapat mewujudkan game atau pengalaman pengguna yang kompleks hanya dalam 1–2 giliran yang sebelumnya sulit dilakukan

• Computer Use dan verifikasi

  • GPT-5.4 adalah model mainline pertama yang dilatih untuk Computer Use, sehingga dapat menavigasi antarmuka secara native
  • Jika dipadukan dengan Playwright, model dapat memeriksa halaman yang telah dirender, menguji berbagai viewport, menelusuri alur app, serta mendeteksi masalah status dan navigasi
  • Dengan menyediakan tool/skill Playwright, peluang GPT-5.4 untuk menghasilkan antarmuka yang polished dan matang secara fungsional meningkat signifikan
  • Berkat pemahaman gambar yang ditingkatkan, model juga dapat memverifikasi hasil secara visual dan memeriksa apakah hasilnya sesuai dengan referensi UI yang diberikan

Quickstart tips praktis

• Jika hanya mengadopsi beberapa praktik, mulailah dari empat hal berikut:
  • Mulai dengan low reasoning level
  • Definisikan lebih dulu design system dan constraint, seperti tipografi, palet warna, dan layout
  • Tetapkan guardrail visual dengan menyediakan referensi visual atau moodboard, misalnya lewat screenshot
  • Definisikan lebih dulu narasi atau strategi konten untuk mengarahkan model saat menghasilkan konten
• Prompt awal
  • When doing frontend design tasks, avoid generic, overbuilt layouts.
  • Saat mengerjakan task desain frontend, hindari layout yang generik dan terlalu dibuat-buat
  • Use these hard rules:
  • Gunakan hard rule berikut:
    • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
    • Viewport pertama harus terbaca sebagai satu komposisi, bukan dashboard, kecuali memang itu dashboard
    • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
    • Pada halaman bermerek, nama brand/produk harus menjadi sinyal setingkat hero, bukan sekadar teks navigasi atau eyebrow. Tidak boleh ada headline yang mengalahkan brand
    • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
    • Jika viewport pertama masih bisa terlihat milik brand lain setelah navigasi dihapus, berarti branding terlalu lemah
    • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
    • Gunakan font yang ekspresif dan punya tujuan jelas, serta hindari font stack default (Inter, Roboto, Arial, system)
    • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
    • Jangan bergantung pada latar datar satu warna; gunakan gradient, gambar, atau pola halus untuk membangun suasana
    • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
    • Pada landing page dan area promosi, hero image secara default harus berupa bidang visual full-bleed (edge-to-edge) atau latar belakang yang dominan. Jangan gunakan inset hero, hero panel samping, media card membulat, kolase ubin, atau blok gambar melayang kecuali design system yang ada memang mewajibkannya
    • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
    • Viewport pertama biasanya sebaiknya hanya berisi brand, satu headline, satu kalimat pendukung singkat, satu grup CTA, dan satu gambar dominan. Jangan menaruh statistik, jadwal, daftar acara, blok alamat, promo, callout "this week", baris metadata, atau konten pemasaran sekunder di viewport pertama
    • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
    • Jangan menaruh label terpisah, badge melayang, stiker promo, info chip, atau callout box di atas media hero
    • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
    • Default-nya jangan gunakan card. Jangan pernah memakai card di area hero. Card hanya boleh dipakai jika menjadi kontainer untuk interaksi pengguna. Jika menghapus border, shadow, background, atau radius tidak mengganggu interaksi atau pemahaman, maka itu tidak seharusnya menjadi card
    • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
    • Setiap section punya satu tujuan, satu headline, dan biasanya satu kalimat pendukung singkat
    • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
    • Gambar harus menunjukkan produk, tempat, suasana, atau konteks. Gradient dekoratif dan latar abstrak tidak dihitung sebagai ide visual utama
    • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
    • Kurangi clutter: hindari kumpulan pill, strip statistik, deretan ikon, promo berboks, potongan jadwal, dan banyak blok teks yang saling bersaing
    • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
    • Gunakan motion untuk membangun presence dan hierarki, bukan noise. Untuk karya yang berfokus visual, hadirkan setidaknya 2–3 motion yang disengaja
    • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
    • Pilih arah visual yang jelas; definisikan CSS variables; hindari default ungu-di-atas-putih. Jangan ada bias ke warna ungu atau dark mode
    • Ensure the page loads properly on both desktop and mobile.
    • Pastikan halaman dimuat dengan benar di desktop maupun mobile
    • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
    • Untuk kode React, utamakan pola modern seperti useEffectEvent, startTransition, dan useDeferredValue bila relevan dan digunakan tim. Jangan menambahkan useMemo/useCallback secara default kecuali memang sudah dipakai; ikuti panduan React Compiler di repo
    • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
    • Pengecualian: jika bekerja di dalam website atau design system yang sudah ada, pertahankan pola, struktur, dan bahasa visual yang telah mapan

Teknik untuk desain yang lebih baik

• Mulai dari prinsip desain

  • Tetapkan constraint seperti satu headline H1, maksimal 6 section, maksimal 2 jenis huruf, satu warna aksen, dan satu CTA utama di atas lipatan

• Berikan referensi visual

  • Screenshot referensi atau moodboard membantu menurunkan ritme layout, skala tipografi, sistem spacing, dan cara penanganan gambar
  • Termasuk contoh GPT-5.4 yang membuat moodboard sendiri untuk ditinjau pengguna, terinspirasi dari budaya kopi NYC dan estetika Y2K

• Strukturkan halaman sebagai narasi

  • Struktur umum halaman marketing:
    • Hero — menetapkan identitas dan janji
    • Supporting imagery — menampilkan konteks atau lingkungan
    • Product detail — menjelaskan penawaran
    • Social proof — membangun kredibilitas
    • Final CTA — mengubah minat menjadi tindakan

• Instruksikan kepatuhan pada design system

  • Dorong penetapan design system yang jelas di awal proses build
  • Definisikan design token inti: background, surface, primary text, muted text, accent
  • Definisikan peran tipografi: display, headline, body, caption
  • Untuk sebagian besar proyek web, memulai dengan stack React dan Tailwind efektif, dan GPT-5.4 tampil sangat kuat pada tool ini
  • Saat mengerjakan animasi, overlay, dan layer dekoratif, disarankan menyertakan panduan perilaku layout yang aman agar elemen UI tetap/floating tidak bertumpuk dengan konten inti seperti teks dan tombol

• Turunkan level reasoning

  • Pada website sederhana, lebih banyak reasoning tidak selalu lebih baik
  • Level reasoning rendah (low) dan menengah (medium) sering menghasilkan output frontend yang lebih kuat
  • Model menjadi lebih cepat, fokus, dan tidak terlalu overthinking, sambil tetap memberi ruang untuk desain yang lebih ambisius

• Bangun fondasi desain dengan konten nyata

  • Menyediakan copy nyata, konteks produk, dan tujuan proyek yang jelas adalah salah satu cara paling sederhana untuk meningkatkan hasil frontend
  • Konteks ini membantu memilih struktur situs yang tepat, menyusun narasi per section yang lebih jelas, dan menulis pesan yang lebih meyakinkan alih-alih placeholder generik

Paket prompt Frontend Skill

• Untuk membantu pemanfaatan GPT-5.4 pada task frontend umum, OpenAI merilis [frontend-skill](https://github.com/openai/skills/…) khusus di GitHub
• Paket ini memberi panduan kuat tentang struktur, selera, dan pola interaksi, sehingga secara default menghasilkan desain yang lebih polished, lebih disengaja, dan lebih menyenangkan
• Dapat diinstal di aplikasi Codex dengan perintah $skill-installer frontend-skill

• Struktur inti Frontend Skill

  • Working Model: sebelum build, tulis dulu tiga hal — tesis visual (suasana, material, energi), rencana konten (hero, support, detail, final CTA), dan tesis interaksi (2–3 ide motion)
  • Beautiful Defaults: mulai dari komposisi, bukan komponen. Utamakan hero full-bleed, jadikan nama brand/produk sebagai teks terbesar, buat copy bisa dipindai dalam beberapa detik, dan gunakan layout tanpa card sebagai default
  • Urutan default Landing Pages: Hero → Support → Detail → Final CTA
    • Aturan hero: satu komposisi, gambar full-bleed, brand didahulukan, tidak ada card, strip statistik, atau logo cloud di area hero
    • Anggaran viewport: jika ada header tetap, total bersama hero harus muat dalam viewport awal
  • Apps: default-nya ketegasan ala Linear — hierarki surface yang tenang, tipografi dan spacing yang kuat, warna sedikit, dan card hanya dipakai saat benar-benar untuk interaksi
  • Imagery: gambar harus punya fungsi naratif, dan lebih mengutamakan foto yang terasa nyata daripada gradient abstrak atau objek 3D palsu. Viewport pertama wajib punya jangkar visual nyata
  • Copy: tulis dengan bahasa produk, bukan komentar tentang desain. Headline harus menyampaikan makna; jika halaman membaik setelah 30% copy dihapus, teruskan memangkasnya
  • Utility Copy: untuk dashboard, app, dan tool administrasi, gunakan utility copy sebagai default alih-alih copy marketing — dahulukan arah, status, dan aksi
  • Motion: motion untuk presence dan hierarki, bukan noise. Implementasikan setidaknya 2–3 motion yang disengaja seperti urutan masuk hero, efek terkait scroll, atau transisi hover/reveal. Framer Motion direkomendasikan
  • Hard Rules: secara default tanpa card, satu ide dominan per section, tidak lebih dari 2 jenis huruf, tidak lebih dari 1 warna aksen, dan tanpa filler copy
  • Litmus Checks: cek apakah brand langsung jelas pada layar pertama, apakah ada jangkar visual yang kuat, apakah halaman bisa dipahami hanya dari headline, apakah setiap section hanya punya satu peran, apakah card benar-benar diperlukan, dan apakah motion meningkatkan hierarki

Contoh hasil

• OpenAI menampilkan contoh hasil yang dibuat dengan Frontend Skill dalam tiga kategori: landing page, game, dan dashboard (masing-masing disertai banyak demo video)

Poin penting

• GPT-5.4 dapat menghasilkan antarmuka frontend berkualitas tinggi ketika prompt berisi constraint desain yang jelas, referensi visual, narasi terstruktur, dan design system yang terdefinisi
• Proyek yang sepenuhnya dibuat hanya dengan GPT-5.4 melalui coding agent seperti Codex dapat dikirim ke galeri OpenAI untuk dipamerkan

[ndrgrd]

Sejujurnya, kalau lihat frontend layanan-layanan LLM, rasanya sampai mikir “ini apaan sih bikinnya begini” karena lambat, fiturnya kurang, dan interaksinya tidak nyaman, jadi setiap lihat tulisan seperti ini rasanya malah lucu.

[click]

Saya memakainya karena KakaoTalk ChatGPT Pro, tetapi menurut saya semua desain front-end yang dibuat GPT terasa kusam.

[slowandsnow]

Jangan pernah pakai gpt untuk frontend. Parah sekali. Coba bandingkan dengan opus memakai prompt yang sama.

[frogbam]

Desain frontend dari GPT memang kurang bagus, jadi saya meminta model lain yang membuatnya, tapi semoga dengan ini hasilnya bisa lumayan bagus.

[angrybird0]

Saya penasaran apa pembeda utamanya dibanding frontend-design milik Claude.
Rasanya sulit membandingkan dengan gaya seperti siapa yang lebih jago dalam desain frontend, tapi fakta bahwa ini juga muncul di Codex mungkin yang paling penting, ya?