AI Mana yang Bisa Membuat Halaman Web Paling Keren? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

Pendahuluan

Sebagai langkah pertama dalam pengembangan aplikasi smartphone saya, saya sedang mengembangkan aplikasi yang sangat sederhana bernama "Sumineko", yang memungkinkan Anda "menonton sambil lalu" video kucing secara acak tanpa henti di sudut layar smartphone.

Untuk mendaftarkan aplikasi ini ke toko resmi, saya perlu menyiapkan halaman kebijakan privasi di web, jadi saya memutuskan untuk sekalian membuat LP (Landing Page) untuk aplikasi ini.

Oleh karena itu, dalam artikel ini, saya akan meminta LLM terkemuka dan layanan pengodean AI untuk membuat dasar LP tersebut, dan kemudian membandingkan hasilnya berdasarkan penilaian subjektif dan bias pribadi.

Perkenalan Kandidat

WARNING

Mengenai perlakuan setara demi kemudahan
Meskipun LLM murni (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) dan sistem dukungan pengembangan yang memiliki LLM bawaan (bolt.new, v0, Lovable) memiliki arsitektur sistem yang berbeda, artikel ini memperlakukan mereka secara setara demi kemudahan, dengan tujuan membandingkan hasil pembuatan halaman web secara subjektif menggunakan prompt yang sama. Oleh karena itu, harap dicatat bahwa eksperimen ini tidak memiliki ketelitian yang ketat.

Prompt

Saya menyiapkan 2 pola berikut untuk memverifikasi secara santai kemampuan improvisasi dan kemampuan merespons persyaratan dengan setia.

• Pola "Serahkan pada AI" (Omakase) yang hanya mencantumkan persyaratan minimum

• Pola "Instruksi Terperinci" yang mendeskripsikan persyaratan secara agak mendetail

Pola Serahkan pada AI (Omakase)

Pola ini terutama menjelaskan gambaran singkat tentang "Sumineko" dan bagian-bagian yang diperlukan saja, sementara desain dan kalimat diserahkan kepada AI.

# Landing Page Creation for "Sumineko" (Corner Cat)

## Request
Design and implement a landing page (Top page only) for the smartphone app "Sumineko".
**You have full creative freedom** regarding the layout, color palette, typography, and copywriting. Please build what you consider to be the **most attractive and modern** design for this product.

## Product Concept
- **App Name**: Sumineko (Corner Cat)
- **Core Value**: A "healing" app that lets users watch cat videos in a Picture-in-Picture (PiP) window while multitasking on their phone.
- **Vibe**: Relaxing, Minimal, Cute but sophisticated.

## Technical Stack
- Next.js 15 (App Router)
- Tailwind CSS
- TypeScript
- Lucide React (for icons)

## Essential Sections (Skeleton)
Please include the following three sections. The order and presentation are up to you.

### 1. Hero Section
- Create a catchy headline and sub-headline that conveys the app's appeal.
- Include "App Store" and "Google Play" buttons (UI only).
- Use a placeholder or CSS art for the main visual.

### 2. Experience / Demo Section (Critical Logic)
This section must adapt based on the user's device:
- **On Desktop (PC)**: Display a mock "Video Player" and a "Start Picture-in-Picture" button to let users simulate the experience in the browser.
- **On Mobile**: Display a message like "Experience the demo on PC" and guide them to the App Store buttons instead.

### 3. Collection Section
- Introduce the feature where users can "collect" the cats they have watched.
- visualize this "collection" aspect (e.g., a grid of cat placeholders, a list, etc.).

## Assets & Copy
- **No assets provided**: Use placeholders (e.g., `via.placeholder.com` or CSS shapes) for all images and videos.
- **Copywriting**: Please write engaging English copy for headings and descriptions based on the product concept.

## Goal
Surprise me with a high-quality, polished UI that balances "Healing/Cute" with "Modern Web Design."

Pola Instruksi Terperinci

Pola instruksi terperinci ini memberikan arahan yang masuk ke aspek desain seperti skema warna, kalimat, dan struktur rinci setiap bagian, selain gambaran umum "Sumineko" dan bagian yang diperlukan.

# Landing Page Creation for "Sumineko" (Corner Cat)

## Project Overview
Create a landing page (Top page only) for the smartphone app "Sumineko" (Corner Cat), which allows users to watch cat videos in Picture-in-Picture (PiP) mode while multitasking. The PC browser version offers a free trial, while the smartphone version is a paid app.

## Assets
- **No assets are provided in advance.**
- Please use **placeholders** (e.g., solid colors, CSS patterns, or placeholder image services like `via.placeholder.com`) for all images, icons, and videos.
- Assume the file paths for images will be logically placed in `/public/images/` for future replacement, but use placeholders for now.

## Technical Requirements
- **Framework**: Next.js 15 (App Router)
- **Styling**: TailwindCSS
- **Language**: TypeScript
- **Deployment**: Targeted for Cloudflare Pages
- **i18n**: Foundation for multi-language support required (manage text in JSON files).
  - Create the **English** version as the default.
- **Code Quality**: Ensure components are modular and reusable. Avoid monolithic files.
- **Images**: Use standard `<img>` or Next.js `<Image>` with placeholder sources.
- **Videos**: Lazy loading implementation (Intersection Observer).
- **Fonts**: System fonts or optimized Fonts (e.g., Inter or a rounded font for a soft look).

## Environment Variables
Assume the following environment variables are used:
- `NEXT_PUBLIC_STORE_MODE` - Values: `coming-soon` or `live`
- `NEXT_PUBLIC_APP_STORE_URL` - URL for App Store
- `NEXT_PUBLIC_GOOGLE_PLAY_URL` - URL for Google Play

## Color Palette
- **Background**: #FAF8F5 (Warm off-white)
- **Main Text**: #8B7355 (Brownish)
- **Accent**: Add a soft, harmonious color if necessary.

## Design Guidelines
- Minimal and clean.
- Focus on "what we want to show the user" in each section.
- A soft, healing atmosphere suitable for a cat app.
- No header required.

---

## Page Structure

### 1. Top Page (`/`)

#### Section 1: Hero

**Layout**: 2 columns (Text on Left, Video on Right).

**Left Side:**
- **Mascot Image**: Use a placeholder.
- **Catchphrase**: "Cats in the Corner of Your Screen."
- **Sub-copy**: "Just open and play. Infinite cat videos for your multitasking moments."

- **3 Selling Points (Use icons for visual appeal):**
  1. **"Instant Comfort"** - One tap to play. No searching, no choosing.
  2. **"Heal Your Mind"** - Perfect for when you feel tired, stressed, or lonely.
  3. **"Stay Focused"** - Unintrusive PiP window. Work and study with cats by your side.

- **Store Buttons:**
  - If `NEXT_PUBLIC_STORE_MODE` is `coming-soon` -> Show "Coming Soon" label.
  - If `NEXT_PUBLIC_STORE_MODE` is `live` -> Show Store Links.

- **Supplementary Text**: "One-time purchase. Yours forever."

**Right Side:**
- **Demo Video Frame**:
  - Placeholder for WebM video (muted, loop, auto-play).
  - Ensure a poster image (thumbnail) can be set.

---

#### Section 2: Experience Section

**PC View:**
- **Heading**: "Try Sumineko in Your Browser"
- **Description**: "Click the button below to start the Picture-in-Picture player. Enjoy the cats while you work on other tasks."
- **Video Player Frame**: Placeholder (Logic implementation not required yet).
- **"Start PiP" Button**: UI only (Functionality to be implemented later).

**Mobile View:**
- **Heading**: "Try the Web Demo on Desktop"
- **Description**: "Open this page on your computer to try the Picture-in-Picture mode for free."
- **Action**: Display Store Buttons prominently.

---

#### Section 3: Collection Introduction

- **Heading**: "Build Your Cat Collection"
- **Description**: "Every cat you meet is saved to your history. Revisit your favorites anytime."
- **Visual**: Placeholder for Collection Screen Screenshot.
- **Note**: Indicate clearly that this feature is exclusive to the smartphone app.

---

#### Section 4: Final CTA

- **Heading**: "Take the Cats Wherever You Go"
- **Action**: Store Buttons (Reuse component from Hero).

---

#### Section 5: Footer

- **Links**:
  - Privacy Policy (Link to `/privacy` - page implementation not required)
  - Contact (External link, URL changes based on locale):
    - ja -> `https://yukapero.com/ja/contact`
    - en-US -> `https://yukapero.com/en/contact`
    - (and so on for other locales, default to `en/contact`)
- **Copyright**: © 2025 yukapero

---

## Responsive Design

### PC (1024px+)
- Full feature display.
- Hero: 2-column layout (Text Left, Video Right).
- Experience Section: Show Video Player + PiP Button.

### Tablet (768px - 1023px)
- Hero: Keep 2 columns but compact.
- Experience Section: Same as PC.

### Smartphone (767px-)
- Hero: 1 column (Text Top, Video Bottom).
- Experience Section: Switch to "Experience on PC" message.
- Emphasize Store Buttons.

---

## i18n Infrastructure

- Load all text from JSON files (e.g., `/locales/en.json`).
- **Do not hardcode text in components.**
- Structure should allow easy addition of other languages later.
- Locale switching via URL path (`/en/`, `/ja/`) or similar mechanism.

---

## Accessibility (Basic)

- Proper `alt` attributes for images.
- Focus indicators for buttons/links.
- Sufficient color contrast for readability.

---

## Notes

- **No logic required** for video playback or PiP function (UI only).
- **Metadata/OGP**: Use temporary dummy data.
- **Favicon**: Use a placeholder or comment out the reference if file is missing.

Ringkasan Hasil

NOTE

Meskipun responsif sudah diterapkan, artikel ini hanya membahas tampilan desktop.

Pola Serahkan pada AI (Omakase)

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Pola Instruksi Terperinci

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Melihat Hasil Secara Individu dan Detail

v0（v0 Agent）

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", desain UI-nya sangat standar dengan skema warna yang sangat konservatif, memberikan kesan "sangat aman" baik dalam arti positif maupun negatif.
Mungkin karena gambar, video, dan ikon yang digunakan adalah placeholder, kesan sederhananya jadi semakin menonjol.
Jika materi yang sebenarnya dimasukkan, mungkin kesederhanaan ini justru menjadi keseimbangan yang baik yang menonjolkan elemen seperti tangkapan layar dan video.

Prompt Instruksi Terperinci

Di sisi lain, untuk pola instruksi terperinci, meskipun mematuhi isi prompt dengan setia, secara keseluruhan desainnya juga konservatif.
Tidak ada penekanan seperti menebalkan huruf, dan kesannya datar—baik dalam arti positif maupun negatif—sehingga tidak terlalu berbeda kesannya dengan pola "serahkan pada AI".

bolt.new （Claude Sonnet 4.5）

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", desain dan skema warnanya berbasis oranye yang lembut dan hidup, yang secara alami mengarahkan mata ke teks dan gambar berwarna oranye, memberikan kesan yang canggih.

Kalimat promosi yang terlihat tanpa perlu menggulir layar

Poin kecil tapi penting, di bagian HERO—yaitu posisi yang terlihat tanpa perlu menggulir—terdapat elemen promosi halus yang mengundang rasa ingin tahu seperti "Experience the magic (Rasakan keajaibannya!)", yang merupakan upaya bagus untuk mengurangi tingkat pentalan (bounce rate).

Namun, meskipun elemennya hanya sementara, desain tampilan smartphone di bagian HERO dan elemen di bagian koleksi terasa datar, entah kenapa memberikan kesan agak kuno, murahan, dan amatir.

Prompt Instruksi Terperinci

Di sisi lain, pola instruksi terperinci memang sangat setia pada prompt, tapi saking setianya, terkesan malah membunuh kelebihan bolt.
Secara keseluruhan tidak buruk, tapi dibandingkan dengan pola "serahkan pada AI", ini terlalu monoton.
Ini bukan salah bolt, melainkan level prompt yang saya buat tercermin secara langsung dalam bentuk hasilnya.

Lovable

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", hal pertama yang menarik perhatian adalah ilustrasi kucing yang wajahnya hancur.

Kucing wajah hancur 1

Kucing wajah hancur 2

Karena saya tidak menyediakan materi, tampaknya mereka berbaik hati menyiapkannya, tetapi desainnya yang surealis seperti gambar anak TK membuat saya tertawa.
Namun, ini hanyalah materi sementara yang mereka siapkan, jadi jika kita mengabaikan kucing berwajah hancur ini dan melihat desain bagian lain, hasilnya tidak buruk; ada kucing di sana-sini di latar belakang, dan bagian yang ingin ditekankan ditonjolkan dengan warna aksen cokelat atau oranye.

Prompt Instruksi Terperinci

Untuk pola instruksi terperinci, selain sangat setia pada instruksi, ada berbagai upaya yang terlihat di sana-sini, seperti menebalkan teks yang ingin ditekankan & menggunakan font lembut yang sesuai dengan aplikasi, serta menggunakan warna oranye yang tidak ditentukan secara khusus dalam prompt untuk tombol transisi PiP agar menonjol.

Font lembut yang sesuai dengan aplikasi

Tombol yang menonjol dengan kontras yang baik terhadap latar belakang

Gemini 3.0 Pro

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", baik atau buruknya, tidak ada kesan main-main; desain/skema warnanya secara keseluruhan ketat, memberikan kesan seperti aplikasi atau alat bisnis daripada aplikasi penyembuhan (healing).
Ini mungkin hanya prasangka, tapi arahnya memang "sangat Google".
Meskipun arah desainnya jelas tidak cocok dengan aplikasi ini, jika kita kesampingkan hal itu sejenak, saya merasa kualitas keseluruhannya sangat tinggi.
Kesannya seperti "Saya membuatnya sesuai buku teks desain web!", tidak memiliki keanehan (eksentrik), dan rasanya bisa diandalkan dengan tenang.

Representasi PiP

Representasi Browser

Detail kecil, tapi tingkat reproduksi ilustrasi sementara untuk PiP dan browser juga tinggi.
Karena mudah untuk membayangkan hasil akhirnya, ini adalah poin yang secara diam-diam menyenangkan.

Prompt Instruksi Terperinci

Pola instruksi terperinci, seperti AI lainnya, setia pada instruksi dan terseret oleh rendahnya level instruksi desain pada prompt. Namun, ada poin detail di mana gambar smartphone dan gambar layar koleksi dibuat agak miring secara improvisasi untuk memberikan kesan dinamis, yang menjadi aksen yang sangat bagus.

Smartphone miring

Gambar koleksi miring

Selain itu, kucing yang berjalan santai di footer juga terlihat bergaya.

Kucing berjalan di footer

Opus 4.5

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", secara keseluruhan desainnya cerah, penuh warna, dan imut, terlihat jelas bahwa tema "aplikasi penyembuhan kucing" tercermin dengan baik dalam desainnya.
Headernya juga memiliki desain modern dengan transparansi, sangat bergaya.

Desain penuh warna dan terpadu

Ikon yang tersebar di latar belakang, gradasi pada judul, dan skema warna yang beragam menunjukkan desain yang luar biasa, penuh keceriaan namun tetap konsisten dan tidak terasa berantakan.

Prompt Instruksi Terperinci

Di sisi lain, pola instruksi terperinci, jika dibandingkan dengan pola "serahkan pada AI", benar-benar membunuh kelebihan Opus 4.5, dan desainnya menjadi membosankan seketika.
Sama seperti bolt, sepertinya rendahnya level prompt tercermin langsung dalam bentuk hasilnya.

GPT 5.2

Prompt Serahkan pada AI

Untuk pola "serahkan pada AI", arah desain dan skema warnanya mirip dengan Opus, menggunakan gradasi warna-warni sebagai aksen di berbagai tempat, memberikan suasana yang cerah.
Jika orang awam seperti saya mencoba menggunakan gradasi warna-warni seperti ini, biasanya akan terlihat murahan, tetapi di sini kesannya disatukan dengan rapi dan indah.

Model lain menggunakan emoji atau foto kucing untuk materi sementara, tetapi GPT 5.2 tampaknya tidak menggunakan hal semacam itu sama sekali.
Selain itu, perbedaan dengan model lain terlihat jelas di bagian HERO.

Bagian HERO

Seluruh bagian HERO ditampilkan sebagai elemen kartu, dan gambar smartphone ditampilkan dalam bentuk persegi, bukan persegi panjang vertikal.
Namun, elemen bagian bawah layar smartphone keluar dari batas, dan baris tempat tautan unduhan ditempatkan sejajar dengan elemen teks promosi aplikasi sehingga terlihat berantakan; meskipun saya awam desain, saya merasakan sedikit ketidaknyamanan.

Prompt Instruksi Terperinci

Pola instruksi terperinci, sama seperti Opus dan bolt, menjadi desain yang membosankan.
Seperti yang telah disebutkan berkali-kali, ini mungkin merupakan manifestasi dari kesetiaan terhadap prompt, baik atau buruknya.
Namun, jika Lovable menambahkan warna oranye sebagai aksen atau menggunakan font lembut yang sesuai aplikasi, dan Gemini sengaja memiringkan elemen, sedikit sentuhan kreatif seperti itu terlihat bersinar, tetapi pada GPT 5.2 hal semacam itu tidak terlihat sama sekali.

Penilaian Umum dan Kesimpulan yang Penuh Prasangka

Peringkat AI Favorit

Berdasarkan hasil yang diperoleh kali ini, saya akan mengurutkan AI yang saya sukai beserta alasannya.
Omong-omong, saya adalah pemula total dalam hal desain dan tidak memiliki pengetahuan khusus, jadi penilaian ini didasarkan pada intuisi dan perasaan seorang pemula.

Gemini 3.0 Pro yang "bisa membuat apa saja, hebat lho!" memang sedang ramai diperbincangkan di media sosial akhir-akhir ini, dan saya angkat topi karena ternyata ia juga unggul dalam aspek desain.
Selama ini saya menggunakan Claude Code (Max Plan) dan Cursor sebagai andalan, tetapi hasil ini membuat saya sangat berpikir bahwa beralih ke Antigravity mungkin merupakan pilihan yang baik.

Orang Tanpa Selera Desain Sebaiknya Tidak Terlalu Banyak Mengatur di Prompt

Melihat hasilnya, saya rasa semua orang juga merasakannya, bahwa pada pola instruksi terperinci, meskipun ada upaya kreatif pada beberapa model, pada dasarnya hasilnya menjadi sederhana dan membosankan.
Terutama penetapan skema warna yang hanya menggunakan nuansa cokelat sesuai warna tema aplikasi, rasanya menjadi pemicu desain yang paling monoton.
Karena AI pada dasarnya setia pada instruksi (baik atau buruknya), ini mungkin hal yang wajar, tetapi orang yang tidak memiliki selera desain sebaiknya tidak memaksakan diri untuk masuk terlalu dalam ke bagian desain saat merancang prompt.
Dengan menyerahkan area yang kurang dipahami sampai batas tertentu, AI seharusnya akan membuat keputusan berdasarkan praktik terbaik di area tersebut.
Meskipun hal itu mungkin memunculkan kesan "sepertinya pernah lihat ini di suatu tempat", saya merasa itu jauh lebih baik daripada jika diacak-acak sembarangan oleh pemula.

Neraka Sebenarnya Baru Saja Dimulai

Output kali ini hanyalah titik awal, dan berdasarkan ini, diperlukan proses untuk menyelaraskan arah dengan AI berkali-kali guna mendekati UI/UX ideal saya.
Dalam kasus saya, meskipun tidak punya selera, saya punya obsesi aneh terhadap UI, jadi proses ini memakan waktu paling lama.
Mengingat hal itu, daripada output pertama, hal-hal seperti kecepatan berpikir AI (pendeknya rentang trial and error), tingkat bug yang rendah, dan kemampuan untuk memahami maksud instruksi dengan akurat lalu menghubungkannya ke implementasi mungkin jauh lebih penting.
Dari sudut pandang tersebut, peringkatnya mungkin akan menjadi sangat berbeda dari yang disebutkan di atas.
Jadi, tidak diragukan lagi bahwa menilai keunggulan hanya berdasarkan hasil ini adalah terlalu dini, jadi silakan mencobanya sendiri sebagai referensi.