어떤 AI가 가장 멋진 웹 페이지를 만들 수 있을까? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

Source: Dev.to

Introduction

스마트폰 앱 개발 여정의 첫 단계로, “Sumineko” 라는 아주 간단한 앱을 만들고 있습니다. 이 앱은 멀티태스킹 중에도 화면 구석에서 무한히 고양이 영상을 시청할 수 있게 해줍니다.

공식 스토어에 앱을 등록하려면 웹에 개인정보 처리방침 페이지를 준비해야 하므로, 이번 기회에 앱 랜딩 페이지(LP) 를 만들기로 했습니다.

따라서 이 글에서는 대표적인 LLM과 AI 코딩 서비스를 이용해 LP의 기본 골격을 만들고, 내 개인적인 편견과 선입견에 따라 결과를 비교해 보겠습니다.

Contenders

Note on Treating Them as Equals
순수 LLM(Gemini 3.0 Pro, Opus 4.5, GPT 5.2)과 내장 LLM을 갖춘 개발 지원 시스템(bolt.new, v0, Lovable)은 시스템 구조가 다릅니다. 편의를 위해 동일 프롬프트로 웹 페이지 생성 결과의 품질을 주관적으로 비교하기 위해 동등하게 취급합니다. 이 실험은 엄격한 과학적 엄밀성을 갖추지는 않았습니다.

Prompts

두 가지 프롬프트 패턴을 준비해, AI가 즉흥적으로 작업할 수 있는지와 요구사항을 충실히 따르는지를 대략적으로 검증했습니다.

Minimal Pattern

아래 코드는 번역하지 않습니다.

# 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."

Detailed Instruction Pattern

아래 코드는 번역하지 않습니다.

# 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 Image component 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 experience the full demo."