Y
UKAPERO.COM
ความจริงอินดี้เดฟ

AI ตัวไหนสร้างเว็บเพจได้เจ๋งที่สุด? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

(อัปเดต: )

บทนำ

ในฐานะก้าวแรกของการพัฒนาแอปพลิเคชันบนมือถือของผม ผมกำลังพัฒนาแอปที่เรียบง่ายมากๆ ชื่อว่า "Sumineko" (สุมิเนโกะ) ซึ่งเป็นแอปที่ให้คุณสามารถ "ดูวิดีโอแมวแบบสุ่มไปเรื่อยๆ" ได้ที่มุมจอสมาร์ทโฟน ระหว่างที่ทำอย่างอื่นไปด้วย

Sumineko (อยู่ระหว่างการพัฒนา)

ในการนำแอปนี้ขึ้นสู่ Store ทางการ จำเป็นต้องเตรียมหน้านโยบายความเป็นส่วนตัว (Privacy Policy) บนเว็บไซต์ ไหนๆ ก็ต้องทำแล้ว ผมเลยถือโอกาสสร้าง Landing Page (LP) ของแอปนี้ ขึ้นมาซะเลย

ดังนั้น ในบทความนี้ผมจะให้ LLM และบริการ AI Coding ชั้นนำช่วยสร้างโครงร่างของ LP ให้ และจะมา เปรียบเทียบผลงานด้วยความเห็นส่วนตัวล้วนๆ ครับ

แนะนำผู้เข้าแข่งขัน

ผู้เข้าแข่งขันจุดเด่น
v0(v0 Agent)เครื่องมือ Agent จาก Vercel รองรับตั้งแต่ออกแบบ UI จากพรอมต์ ไปจนถึงการเขียนโค้ดและ Debug แบบครบวงจร
bolt.new (Claude Sonnet 4.5)Agent Claude บนเบราว์เซอร์ สร้างแอป Next.js ได้อย่างมีประสิทธิภาพในรูปแบบการสนทนา
LovableBuilder ที่รองรับ AI หลายโมเดล สามารถสร้างและแก้ไขแอป React+Supabase ได้อย่างเป็นธรรมชาติ
Gemini 3.0 Proโมเดลประสิทธิภาพสูงล่าสุดจาก Google สร้างหน้าเว็บที่สวยงามได้อย่างรวดเร็วด้วยการรับข้อมูลแบบ Multimodal
Opus 4.5โมเดลตัวเทพจาก Anthropic ใช้ประโยชน์จาก Context ที่ยาวเพื่อจัดการกับการออกแบบเว็บแอปที่ซับซ้อนได้อย่างปราณีต
GPT 5.2โมเดลล่าสุดจาก OpenAI เมื่อเทียบกับ GPT-5.1 แล้วมี "อัตราการตอบถูก" เพิ่มขึ้น 1.8 เท่า ความถูกต้องของโค้ดดีขึ้นมาก และอาการหลอน (Hallucination) ลดลง 30%

WARNING

หมายเหตุเกี่ยวกับการเทียบชั้น
แม้ว่า LLM เพียวๆ (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) และระบบช่วยพัฒนาที่มี LLM ในตัว (bolt.new, v0, Lovable) จะมี สถาปัตยกรรมระบบที่แตกต่างกัน แต่ในบทความนี้จะขอจัดให้อยู่ในระนาบเดียวกันเพื่อความสะดวก โดยมีจุดประสงค์เพื่อ เปรียบเทียบผลลัพธ์การสร้างหน้าเว็บจากพรอมต์เดียวกันด้วยความรู้สึกส่วนตัว เท่านั้น ดังนั้นโปรดทราบว่าการทดลองนี้ไม่มีความเคร่งครัดทางวิชาการแต่อย่างใด

พรอมต์ (Prompt)

ผมได้เตรียมพรอมต์ไว้ 2 รูปแบบ เพื่อทดสอบความสามารถในการพลิกแพลง (Ad-lib) และความสามารถในการทำตามความต้องการอย่างเคร่งครัดแบบสบายๆ ครับ

  • รูปแบบปล่อยตามใจ AI ที่ระบุเฉพาะความต้องการขั้นต่ำ

  • รูปแบบสั่งละเอียด ที่ระบุความต้องการไว้อย่างค่อนข้างละเอียด

รูปแบบปล่อยตามใจ AI

รูปแบบนี้จะระบุเพียงภาพรวมง่ายๆ ของ "Sumineko" และส่วน (Section) ที่จำเป็นเท่านั้น ส่วนเรื่องดีไซน์หรือถ้อยคำต่างๆ จะปล่อยให้ 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."

รูปแบบสั่งละเอียด

รูปแบบนี้จะนอกจากจะระบุภาพรวมและส่วนที่จำเป็นของ "Sumineko" แล้ว ยังลงลึกไปถึงโครงสร้างของแต่ละส่วน ถ้อยคำ และการออกแบบเช่นคู่สี (Color Palette) อย่างละเอียด

รูปแบบสั่งละเอียด
# 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.

สรุปผลงาน

NOTE

แม้ว่าจะมีการรองรับ Responsive แต่ในบทความนี้จะขอนำเสนอเฉพาะมุมมองแบบ Desktop ครับ

รูปแบบปล่อยตามใจ AI

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

รูปแบบสั่งละเอียด

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

เจาะลึกผลงานแต่ละตัว

v0(v0 Agent)

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI ดีไซน์ UI ออกมาแบบมาตรฐานสุดๆ ใช้คู่สีที่เรียบง่ายมากๆ ให้ความรู้สึกว่าเป็นงานที่ปลอดภัยและกลางๆ ไม่ดีไม่แย่ครับ
เนื่องจากรูปภาพ วิดีโอ และไอคอนต่างๆ เป็นแค่ตัว placeholder ความเรียบง่ายเลยยิ่งดูโดดเด่น (หรือจืด) เข้าไปอีก
แต่ถ้าใส่พวก asset จริงๆ ลงไป ความเรียบง่ายนี้อาจจะช่วยส่งเสริมให้ screenshot หรือวิดีโอตัวอย่างดูเด่นขึ้นมาในระดับที่พอดีก็ได้ครับ

พรอมต์แบบสั่งละเอียด

ส่วนรูปแบบสั่งละเอียด ก็ทำตามพรอมต์ได้อย่างเคร่งครัด แต่ภาพรวมก็ยังคงเป็นดีไซน์ที่เรียบง่ายเหมือนเดิม
ไม่มีการทำตัวหนาเพื่อเน้นข้อความอะไร ให้ความรู้สึกเรียบๆ แบนๆ ไม่ดีไม่แย่ ซึ่งความรู้สึกไม่ต่างจากรูปแบบปล่อยตามใจ AI เท่าไหร่

bolt.new (Claude Sonnet 4.5)

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI ใช้สีส้มเป็นหลัก ให้ความรู้สึกนุ่มนวลและมีชีวิตชีวา สายตาจะถูกดึงดูดไปยังข้อความและรูปภาพสีส้มอย่างเป็นธรรมชาติ ดูมีความประณีตครับ

ข้อความเชิญชวนที่มองเห็นได้โดยไม่ต้องเลื่อนหน้าจอ

จุดเล็กๆ ที่น่าสนใจคือ ในส่วน HERO Section หรือส่วนที่มองเห็นได้ทันทีโดยไม่ต้องเลื่อนหน้าจอ มีการใส่ข้อความเชิญชวนเล็กๆ ว่า "Experience the magic (สัมผัสความมหัศจรรย์สิ)" ซึ่งช่วยกระตุ้นความสนใจและลดอัตราการกดออกได้ดีครับ

อย่างไรก็ตาม แม้จะเป็นองค์ประกอบสมมติ แต่ดีไซน์ของสมาร์ทโฟนในส่วน HERO และความรู้สึก "แบนๆ" ขององค์ประกอบในส่วน Collection ทำให้รู้สึกว่ามันดูเก่า ดูราคาถูก หรือมีความเป็นมือสมัครเล่นอยู่นิดหน่อยครับ

พรอมต์แบบสั่งละเอียด

ในทางกลับกัน รูปแบบสั่งละเอียดนั้นทำตามพรอมต์ได้ดีมาก แต่ดีเกินไปจนเหมือนไปฆ่าจุดเด่นของ bolt ซะงั้นครับ
ภาพรวมไม่ได้แย่ แต่เมื่อเทียบกับรูปแบบปล่อยตามใจ AI แล้ว มันดูน่าเบื่อเกินไป
อันนี้คงโทษ bolt ไม่ได้ น่าจะเป็นเพราะคุณภาพพรอมต์ที่ผมเตรียมมามันต่ำเอง ซึ่งผลลัพธ์ก็ฟ้องออกมาตามนั้นครับ

Lovable

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI สิ่งแรกที่สะดุดตาเลยคือภาพวาดแมวที่หน้าตาบิดเบี้ยวครับ

แมวหน้าเละ 1

แมวหน้าเละ 2

เนื่องจากผมไม่ได้เตรียมไฟล์ภาพให้ Lovable เลยใจดีวาดมาให้ แต่ดีไซน์มันช่างเหนือจริงเหมือนเด็กอนุบาลวาดจนผมอดขำไม่ได้
แต่ถ้ามองข้ามแมวหน้าเละพวกนี้ไป (เพราะเป็นแค่ของชั่วคราว) แล้วดูดีไซน์ส่วนอื่น จะเห็นว่ามีแมวอยู่ตามพื้นหลังบ้าง มีการใช้สีน้ำตาลหรือสีส้มเน้นจุดที่ต้องการจะสื่อบ้าง ถือว่าทำได้ไม่เลวเลยครับ

พรอมต์แบบสั่งละเอียด

ส่วนรูปแบบสั่งละเอียดนั้น นอกจากจะทำตามคำสั่งอย่างเคร่งครัดแล้ว ยังมีการปรับข้อความที่ต้องการเน้นให้เป็นตัวหนา เลือกใช้ฟอนต์ที่ดูนุ่มนวลเข้ากับธีมแอป หรือปุ่ม Start PiP ก็ใช้สีส้มที่ไม่ได้ระบุไว้ในพรอมต์เพื่อให้ดูเด่นขึ้นมา ถือว่ามีความคิดสร้างสรรค์แทรกอยู่ตามจุดต่างๆ ครับ

ฟอนต์นุ่มนวลเข้ากับธีมแอป

ปุ่มที่โดดเด่นตัดกับพื้นหลังอย่างชัดเจน

Gemini 3.0 Pro

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI ดีไซน์โดยรวมดูขึงขัง ไม่มีลูกเล่นหวือหวา ให้ความรู้สึกเหมือนเป็นแอปธุรกิจหรือเครื่องมือทำงานมากกว่าแอปสายฮีลใจ
อันนี้อาจจะเป็นอคติของผมเอง แต่ทิศทางมันดูมีความเป็น Google มากๆ
ถึงแม้ทิศทางดีไซน์จะไม่ค่อยเข้ากับตัวแอป แต่ถ้ามองข้ามจุดนั้นไป โดยรวมถือว่างานมีคุณภาพสูงมากครับ
ให้ความรู้สึกเหมือน "สร้างตามตำรา Web Design เป๊ะ!" ไม่มีอะไรแปลกประหลาด รู้สึกว่าวางใจให้ทำงานได้

การแสดงผล PiP

การแสดงผล Browser

จุดเล็กๆ น้อยๆ อย่างภาพประกอบจำลองของ PiP หรือ Browser ก็ทำออกมาได้สมจริงครับ
ช่วยให้เห็นภาพตอนเสร็จสมบูรณ์ได้ง่ายขึ้น ซึ่งเป็นจุดที่น่าประทับใจทีเดียว

พรอมต์แบบสั่งละเอียด

ส่วนรูปแบบสั่งละเอียด ก็เหมือน AI ตัวอื่นๆ ที่ทำตามคำสั่งอย่างเคร่งครัด และโดนคุณภาพพรอมต์ที่ต่ำของผมดึงลงมา แต่ก็มีจุดเล็กๆ ที่ Gemini ใส่ความคิดสร้างสรรค์เพิ่มเข้ามา คือการวางภาพสมาร์ทโฟนและภาพหน้าจอ Collection ให้เอียงเล็กน้อย ดูมีการเคลื่อนไหว เป็นลูกเล่นที่ดีมากครับ

สมาร์ทโฟนวางเอียง

ภาพ Collection วางเอียง

นอกจากนี้ยังมีแมวเดินอยู่ตรง Footer ด้วย เก๋ไม่เบาครับ

แมวเดินบน Footer

Opus 4.5

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI ภาพรวมดูสดใส มีสีสัน และน่ารัก สะท้อนธีม "แอปแมวฮีลใจ" ออกมาในการออกแบบได้อย่างชัดเจน
Header ก็ดูโปร่งใส ทันสมัย และสวยงามมากครับ

ดีไซน์ที่มีสีสันและเป็นเอกภาพ

ไอคอนที่กระจายอยู่บนพื้นหลัง การไล่ระดับสีของหัวข้อ และการใช้คู่สีที่หลากหลาย ล้วนเต็มไปด้วยลูกเล่นแต่ก็ยังมีความเป็นเอกภาพ ไม่รู้สึกว่าขัดตา ถือเป็นการออกแบบที่ยอดเยี่ยมครับ

พรอมต์แบบสั่งละเอียด

ในทางกลับกัน รูปแบบสั่งละเอียด เมื่อเทียบกับแบบปล่อยตามใจ AI แล้ว เหมือนไปฆ่าจุดเด่นของ Opus 4.5 ทิ้งจนหมด กลายเป็นดีไซน์ที่น่าเบื่อไปเลย
เหมือนกับ bolt ครับ คือคุณภาพของพรอมต์ที่ต่ำของผมส่งผลออกมาให้เห็นเป็นรูปธรรมชัดเจน

GPT 5.2

พรอมต์แบบปล่อยตามใจ AI

สำหรับรูปแบบปล่อยตามใจ AI ทิศทางของดีไซน์และสีสันคล้ายกับ Opus คือมีการใช้การไล่ระดับสี (Gradient) ที่สดใสเป็นลูกเล่นในหลายจุด บรรยากาศดูสว่างสดใส
ถ้ามือสมัครเล่นอย่างผมพยายามใช้ Gradient หลากหลายสีแบบนี้ มักจะออกมาดูราคาถูก แต่ GPT 5.2 จัดการออกมาได้สวยงามลงตัวครับ

โมเดลอื่นๆ มีการใช้อีโมจิแมวหรือรูปภาพแทน asset ชั่วคราว แต่ GPT 5.2 ไม่ใช้อะไรพวกนั้นเลย
และในส่วน HERO Section ก็มีความแตกต่างจากโมเดลอื่นอย่างเห็นได้ชัด

ส่วน HERO Section

HERO Section ทั้งหมดถูกนำเสนอในรูปแบบ Card และภาพสมาร์ทโฟนก็แสดงเป็นสี่เหลี่ยมจัตุรัสแทนที่จะเป็นแนวตั้ง
แต่องค์ประกอบด้านล่างของหน้าจอสมาร์ทโฟนดูล้นๆ ออกมา หรือบรรทัดที่มีลิงก์ดาวน์โหลดก็วางอยู่ในระนาบเดียวกับข้อความเชิญชวนจนดูรกๆ แม้ผมจะไม่มีความรู้เรื่องดีไซน์แต่ก็รู้สึกทะแม่งๆ อยู่บ้างครับ

พรอมต์แบบสั่งละเอียด

ส่วนรูปแบบสั่งละเอียด ก็กลายเป็นดีไซน์ที่น่าเบื่อเหมือนกับ Opus และ bolt ครับ
อย่างที่ย้ำไปหลายรอบ นี่น่าจะเป็นผลจากการที่มันซื่อสัตย์ต่อพรอมต์ (ไม่ว่าจะดีหรือแย่)
แต่ในขณะที่ Lovable มีการเพิ่มสีส้มเป็นสีเน้น หรือเปลี่ยนฟอนต์ให้นุ่มนวล และ Gemini มีการวางองค์ประกอบเอียงๆ เพื่อเพิ่มลูกเล่น แต่ใน GPT 5.2 กลับไม่เห็นความพยายามในการปรับแต่งเล็กๆ น้อยๆ เหล่านั้นเลยครับ

บทสรุปและการจัดอันดับด้วยความลำเอียงล้วนๆ

อันดับ AI ที่ผมถูกใจ

จากผลลัพธ์ที่ได้ ผมขอจัดอันดับ AI ที่ผมชอบที่สุดพร้อมเหตุผลประกอบครับ
ขอย้ำอีกครั้งว่าผมไม่มีความรู้เชี่ยวชาญด้านการออกแบบ ดังนั้นนี่เป็นการประเมินจากสัญชาตญาณและความรู้สึกของมือสมัครเล่นล้วนๆ ครับ

อันดับผู้เข้าแข่งขันเหตุผล
1Gemini 3.0 Proไม่ว่าจะสั่งแบบหยาบๆ หรือสั่งละเอียด ก็ให้ความรู้สึกถึงความประณีตและความมั่นคงในงานดีไซน์ รู้สึกมั่นใจที่สุดว่าถ้าโยนงานให้ Gemini แล้วจะได้ผลงานที่คุณภาพสูงกว่าค่าเฉลี่ยกลับมาแน่นอน เลยยกให้เป็นที่ 1 ครับ
2Opus 4.5ในพรอมต์แบบปล่อยตามใจ AI สามารถตีโจทย์แอปแตกและถ่ายทอดออกมาเป็นดีไซน์คุณภาพสูงได้อย่างยอดเยี่ยม แต่ต้องระวังตรงที่ถ้าพรอมต์คุณภาพต่ำ ผลงานก็จะดิ่งลงเหวยิ่งกว่า Gemini
3GPT 5.2ภาพรวมคุณภาพสูงและดูมีอนาคตไกล แต่ยังรู้สึกกังวลนิดหน่อยกับดีไซน์ส่วน HERO ในรูปแบบปล่อยตามใจ AI
4bolt.new (Sonnet 4.5)นอกจากความรู้สึก "ราคาถูก" ของบางองค์ประกอบในรูปแบบปล่อยตามใจ AI แล้ว เหมือนกับ Opus 4.5 คือแม้จะเก่งเรื่องพลิกแพลง (Ad-lib) แต่ถ้าพรอมต์ไม่ดีก็เหมือนฆ่าจุดเด่นของ bolt ทิ้ง รู้สึกว่าต้องระวัง เลยให้อยู่ที่ 4
4Lovableยังไงก็ติดใจเรื่องแมวหน้าเละครับ ถึงจะเป็นแค่ของชั่วคราวที่ไม่ควรเก็บมาใส่ใจ แต่ถ้าภาพ placeholder มันดูแย่เกินไป ก็ทำให้จินตนาการภาพตอนเสร็จยาก ส่วนตัวเลยต้องขอหักคะแนน แต่ในส่วนของพรอมต์สั่งละเอียดนั้นทำออกมาได้สมบูรณ์แบบไม่แพ้ AI ตัวอื่นเลย
5v0(v0 Agent)ภาพรวมดูปลอดภัย จืดชืด และน่าเบื่อ ความสามารถในการพลิกแพลงต่ำ แถมยังถูกฉุดด้วยคุณภาพ Prompt Engineering ที่ต่ำของผู้ใช้ได้ง่ายมาก สำหรับคนที่ซีเรียสเรื่องดีไซน์อาจต้องระวังในการใช้งานพอสมควร แอบเสียดายนิดหน่อยเพราะเคยเป็นเครื่องมือที่ผมชอบมากช่วงหนึ่ง

ช่วงนี้ในโซเชียลฮือฮากันว่า Gemini 3.0 Pro ทำได้ทุกอย่าง ซึ่งพอมาลองด้านดีไซน์แล้วก็ต้องยอมรับว่าสุดยอดจริงๆ ครับ
ที่ผ่านมาผมใช้ Claude Code (Max Plan) กับ Cursor เป็นหลัก แต่ผลลัพธ์นี้ทำให้เริ่มคิดหนักเลยว่าหรือควรจะย้ายค่ายไป Antigravity ดีนะ

คนไม่มีเซนส์ดีไซน์ อย่าพยายามสั่งงานละเอียดเกินไป

ดูจากผลลัพธ์แล้ว ทุกคนก็น่าจะคิดเหมือนกันว่า ในรูปแบบสั่งละเอียด (Detailed Pattern) แม้บางโมเดลจะมีลูกเล่นบ้าง แต่โดยพื้นฐานแล้วผลงานออกมาดูจืดชืดและน่าเบื่อ
โดยเฉพาะการที่ผมกำหนดสีให้มีแค่โทนสีน้ำตาลเพื่อให้เข้ากับธีมแอป น่าจะเป็นตัวการสำคัญที่ทำให้ดีไซน์ออกมาดูแบนราบที่สุด
AI นั้นโดยพื้นฐานแล้วซื่อสัตย์ต่อคำสั่ง (ไม่ว่าจะดีหรือร้าย) ดังนั้น คนไม่มีเซนส์ดีไซน์ไม่ควรจะ "อวดรู้" ลงลึกไปสั่งรายละเอียดด้านดีไซน์ในพรอมต์มากเกินไป ครับ
ในเรื่องที่เราไม่ถนัด การปล่อยให้ AI จัดการไปบ้าง AI มักจะตัดสินใจโดยอิงจาก Best Practice ในด้านนั้นๆ ให้เราเอง
ถึงแม้ผลลัพธ์อาจจะออกมาดู "คุ้นๆ ตาเหมือนเคยเห็นที่ไหน" ไปบ้าง แต่ผมรู้สึกว่ามันก็ยังดีกว่าให้มือสมัครเล่นไปรื้อแก้จนเละเทะครับ

นรกของจริงมันต่อจากนี้ต่างหาก

ผลงานที่ได้ในครั้งนี้เป็นเพียงจุดเริ่มต้นเท่านั้น จากนี้ต้องมีการ ปรับจูนทิศทางกับ AI ซ้ำแล้วซ้ำเล่า เพื่อให้เข้าใกล้ UI/UX ในอุดมคติของเรา
สำหรับผมที่เป็นพวกไม่มีเซนส์แต่ดันเรื่องมากเรื่อง UI ขั้นตอนนี้จะกินเวลามากเป็นพิเศษ
เมื่อพิจารณาจุดนี้ สิ่งที่สำคัญกว่าผลงานในก้าวแรกอาจจะเป็น ระยะเวลาในการคิดของ AI (ความเร็วในการ Trial & Error), อัตราการเกิดบั๊กที่ต่ำ และความสามารถในการเข้าใจเจตนาของคำสั่งและแปลงเป็นโค้ดที่ถูกต้อง ครับ
ถ้ามองในมุมนั้น อันดับที่จัดไว้อาจจะเปลี่ยนไปเป็นคนละเรื่องเลยก็ได้
ดังนั้น การตัดสินแพ้ชนะจากผลลัพธ์ในบทความนี้เพียงอย่างเดียวคงจะด่วนสรุปเกินไป อยากให้ทุกคนลองไปเล่นด้วยตัวเองดูนะครับ เพื่อเป็นข้อมูลประกอบการตัดสินใจ

หากบทความนี้เป็นประโยชน์ โปรดแชร์!

avatar
Yukapero
วิศวกรบ้าที่โง่เขลาทิ้งงานสบาย ๆ ในบริษัท IT ขนาดใหญ่เพื่อดำดิ่งสู่การพัฒนาเว็บเซอร์วิส/แอปด้วยรายได้ศูนย์ แชร์ความสำเร็จและความล้มเหลว บทเรียนที่ได้เรียนรู้ และการต่อสู้ในแต่ละวันในฐานะนักพัฒนาอิสระและวิศวกรฟรีแลนซ์!