Y
UKAPERO.COM
इंडी डेव वास्तविकता

सबसे शानदार वेब पेज कौन सा AI बना सकता है? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

(अपडेट किया गया: )

परिचय

मेरे स्मार्टफोन ऐप डेवलपमेंट के पहले प्रयास के रूप में, मैं "सुमिनेको" (Sumineko) नामक एक बहुत ही सरल ऐप विकसित कर रहा हूँ, जो स्मार्टफोन के कोने में बिल्ली के वीडियो को बेतरतीब ढंग से और अनंत रूप से 'देखते रहने' (काम करते हुए देखने) की सुविधा देता है।

सुमिनेको (विकास के चरण में)

इस ऐप को आधिकारिक स्टोर पर रजिस्टर करने के लिए, वेब पर एक प्राइवेसी पॉलिसी पेज तैयार करना आवश्यक था, तो मैंने सोचा कि क्यों न इस मौके का फायदा उठाकर इस ऐप का LP (लैंडिंग पेज) भी बना लिया जाए।

इसलिए, इस लेख में, मैं प्रमुख LLM और AI कोडिंग सेवाओं का उपयोग करके LP का आधार तैयार करवाऊंगा और उनके परिणामों की अपनी निजी राय और पसंद के आधार पर तुलना करूंगा।

खिलाड़ियों का परिचय

खिलाड़ीविशेषताएँ
v0(v0 Agent)Vercel का एजेंट टूल। प्रॉम्प्ट से लेकर UI इम्प्लीमेंटेशन और डिबगिंग तक सब कुछ एक साथ सपोर्ट करता है।
bolt.new (Claude Sonnet 4.5)ब्राउज़र-आधारित Claude एजेंट। Next.js ऐप्स को बातचीत के माध्यम से कुशलतापूर्वक बनाता है।
Lovableकई AI मॉडल्स को सपोर्ट करने वाला बिल्डर। React+Supabase ऐप्स को सहजता से जनरेट और एडिट करना संभव बनाता है।
Gemini 3.0 ProGoogle का नवीनतम हाई-परफॉरमेंस मॉडल। मल्टी-मॉडल इनपुट के साथ परिष्कृत वेब पेज तेजी से बनाता है।
Opus 4.5Anthropic का सबसे शक्तिशाली मॉडल। लंबे कॉन्टेक्स्ट का लाभ उठाकर जटिल वेब ऐप डिज़ाइन को सावधानी से संभालता है।​
GPT 5.2OpenAI का नवीनतम मॉडल। GPT-5.1 की तुलना में "सही उत्तर देने की दर" 1.8 गुना अधिक, "कोड की सटीकता" में भारी सुधार, और हैलुसिनेशन (भ्रम) में 30% की कमी।

WARNING

तुलना की सुविधा के बारे में
शुद्ध LLM (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) और LLM-युक्त डेवलपमेंट सपोर्ट सिस्टम (bolt.new, v0, Lovable) का सिस्टम आर्किटेक्चर अलग-अलग है, लेकिन इस लेख में सुविधा के लिए उन्हें एक समान माना गया है। इसका उद्देश्य एक ही प्रॉम्प्ट पर वेब पेज जनरेशन के परिणामों की व्यक्तिपरक तुलना करना है। इसलिए, कृपया ध्यान दें कि इस प्रयोग में कोई वैज्ञानिक कठोरता नहीं है।

प्रॉम्प्ट (Prompt)

मैंने नीचे दिए गए 2 पैटर्न तैयार किए हैं, ताकि उनकी कामचलाऊ क्षमता (improvisation skills) और आवश्यकताओं के प्रति वफादार रहने की क्षमता को अनौपचारिक रूप से परखा जा सके।

  • ओमाकासे पैटर्न: जिसमें केवल न्यूनतम आवश्यकताएं लिखी गई हैं।

  • विस्तृत निर्देश पैटर्न: जिसमें अपेक्षाकृत विस्तृत आवश्यकताएं लिखी गई हैं।

ओमाकासे (AI-निर्णय) पैटर्न

इसमें मुख्य रूप से "सुमिनेको" का संक्षिप्त विवरण और केवल आवश्यक सेक्शन्स बताए गए हैं, जबकि डिज़ाइन और शब्दों का चयन 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."

विस्तृत निर्देश पैटर्न

"सुमिनेको" के अवलोकन और आवश्यक सेक्शन्स के अलावा, इसमें प्रत्येक सेक्शन की विस्तृत संरचना, शब्द, और रंग जैसे डिज़ाइन पहलुओं पर भी निर्देश दिए गए हैं।

विस्तृत
# 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

यद्यपि रिस्पॉन्सिव डिज़ाइन भी लागू किया गया है, लेकिन इस लेख में हम केवल डेस्कटॉप व्यू पर विचार करेंगे।

ओमाकासे (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)

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न में एक बेहद पारंपरिक UI डिज़ाइन और बहुत ही हल्के रंग संयोजन का उपयोग किया गया है, जो अच्छा हो या बुरा, 'सुरक्षित' (safe) श्रेणी में आता है।
चूंकि इमेज, वीडियो और आइकन अस्थायी (placeholder) हैं, इसलिए शायद यह सादगी थोड़ी ज्यादा खाली-खाली लग रही है।
यदि वास्तविक सामग्री (assets) डाली जाएं, तो यह सादगी स्क्रीनशॉट या वीडियो जैसे तत्वों को उभारने के लिए एक अच्छा संतुलन बना सकती है।

विस्तृत निर्देश प्रॉम्प्ट

दूसरी ओर, विस्तृत निर्देश पैटर्न में, प्रॉम्प्ट का पूरी तरह से पालन करते हुए भी, कुल मिलाकर डिज़ाइन काफी संयमित है।
शब्दों को बोल्ड करके हाइलाइट करने जैसी कोई कोशिश नहीं की गई है, और अच्छा हो या बुरा, यह एक सपाट (flat) प्रभाव देता है, जो ओमाकासे पैटर्न से बहुत अलग नहीं लगता।

bolt.new (Claude Sonnet 4.5)

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न में नारंगी रंग पर आधारित एक नरम और जीवंत डिज़ाइन और रंग योजना है, जो स्वाभाविक रूप से आँखों को नारंगी टेक्स्ट और छवियों की ओर ले जाती है, जिससे एक परिष्कृत प्रभाव पड़ता है।

बिना स्क्रॉल किए दिखने वाला आकर्षक टेक्स्ट

एक छोटा सा बिंदु, लेकिन HERO सेक्शन में, यानी बिना स्क्रॉल किए दिखने वाले स्थान पर "Experience the magic" (जादू का अनुभव करें!) जैसा जिज्ञासा जगाने वाला, सूक्ष्म आकर्षक तत्व होना भी उपयोगकर्ताओं को पेज छोड़ने से रोकने (reduce bounce rate) का एक अच्छा तरीका है।

हालाँकि, भले ही ये अस्थायी तत्व हों, HERO सेक्शन के स्मार्टफोन डिज़ाइन और कलेक्शन सेक्शन के तत्वों का सपाटपन (flatness) कुछ हद तक पुराना, सस्ता और अनाड़ीपन (amateurish) का अहसास कराता है।

विस्तृत निर्देश प्रॉम्प्ट

दूसरी ओर, विस्तृत निर्देश पैटर्न प्रॉम्प्ट के प्रति वास्तव में वफादार है, जो अच्छी बात है, लेकिन ऐसा लगता है कि यह इतना वफादार है कि इसने bolt की खूबियों को ही खत्म कर दिया है।
यह कुल मिलाकर बुरा नहीं है, लेकिन ओमाकासे पैटर्न की तुलना में यह बहुत ही नीरस (monotonous) है।
इसमें bolt की गलती नहीं है, बल्कि ऐसा लगता है कि मेरे द्वारा तैयार किए गए प्रॉम्प्ट का निम्न स्तर सीधे रूप में दिखाई दे रहा है।

Lovable

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न में, सबसे पहले जो चीज नजर आती है वह है बिल्ली का विकृत चेहरा (distorted illustration)।

विकृत चेहरे वाली बिल्ली 1

विकृत चेहरे वाली बिल्ली 2

चूंकि मैंने कोई सामग्री (assets) प्रदान नहीं की थी, इसलिए उन्होंने अपनी तरफ से इसे तैयार कर दिया, लेकिन यह बालवाड़ी के बच्चे द्वारा बनाई गई एक अजीबोगरीब ड्राइंग जैसा है जिसे देखकर हंसी आ जाती है।
हालाँकि, ये केवल अस्थायी रूप से तैयार किए गए हैं, इसलिए अगर हम इन विकृत बिल्लियों को नजरअंदाज करें और डिज़ाइन के अन्य हिस्सों को देखें, तो बैकग्राउंड में जगह-जगह बिल्लियाँ हैं, और हाइलाइट करने वाले हिस्सों को भूरे और नारंगी एक्सेंट रंगों के साथ अच्छी तरह से उभारा गया है, जो बुरा नहीं है।

विस्तृत निर्देश प्रॉम्प्ट

विस्तृत निर्देश पैटर्न निर्देशों के प्रति बहुत वफादार रहते हुए भी, हाइलाइट किए जाने वाले टेक्स्ट को बोल्ड और ऐप के अनुसार सॉफ्ट फॉन्ट में रखा गया है, और PiP स्टार्ट बटन को नारंगी रंग (जो प्रॉम्प्ट में विशेष रूप से नहीं बताया गया था) से हाइलाइट किया गया है, जो जगह-जगह रचनात्मकता दिखाता है।

ऐप के अनुसार सॉफ्ट फॉन्ट

बटन जो बैकग्राउंड कंट्रास्ट के साथ अच्छे से उभर रहा है

Gemini 3.0 Pro

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न में, अच्छा हो या बुरा, कोई चंचलता (playfulness) नहीं है, और कुल मिलाकर यह एक कसा हुआ डिज़ाइन/रंग संयोजन है, जो एक हीलिंग ऐप के बजाय बिजनेस ऐप या टूल जैसा प्रभाव देता है।
यह सिर्फ मेरा पूर्वाग्रह हो सकता है, लेकिन यह Google जैसा ही लगता है।
डिज़ाइन की दिशा स्पष्ट रूप से ऐप के साथ मेल नहीं खाती है, लेकिन अगर हम इसे एक पल के लिए अलग रखें, तो कुल मिलाकर क्वालिटी बहुत उच्च महसूस होती है।
ऐसा लगता है जैसे "वेब डिज़ाइन की पाठ्यपुस्तक के अनुसार बनाया गया है!", जिसमें कोई अजीबोगरीब बात नहीं है और ऐसा लगता है कि आप निश्चिंत होकर काम सौंप सकते हैं।

PiP का प्रतिनिधित्व

ब्राउज़र का प्रतिनिधित्व

छोटी बात है, लेकिन PiP और ब्राउज़र जैसे डमी चित्रों की सटीकता (reproducibility) भी उच्च है।
चूंकि अंतिम रूप की कल्पना करना आसान है, यह एक सुखद बात है।

विस्तृत निर्देश प्रॉम्प्ट

विस्तृत निर्देश पैटर्न अन्य AI की तरह ही निर्देशों के प्रति वफादार है और प्रॉम्प्ट के डिज़ाइन निर्देशों के निम्न स्तर से प्रभावित हुआ है, लेकिन छोटी-छोटी बातों में, जैसे कि स्मार्टफोन की छवि और कलेक्शन स्क्रीन की छवि को थोड़ा तिरछा करके एक गतिशील डिज़ाइन (dynamic design) को अपनी सूझबूझ से शामिल किया गया है, जो एक बहुत अच्छा एक्सेंट बन गया है।

तिरछा स्मार्टफोन

तिरछा कलेक्शन इमेज

इसके अलावा, फुटर में चुपचाप चल रही बिल्ली भी स्टाइलिश है।

फुटर पर चलती हुई बिल्ली

Opus 4.5

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न कुल मिलाकर उज्ज्वल, रंगीन और प्यारा डिज़ाइन है, और यह देखा जा सकता है कि "बिल्ली हीलिंग ऐप" की थीम को डिज़ाइन में अच्छी तरह से उतारा गया है।
हैडर भी पारदर्शी और आधुनिक डिज़ाइन वाला है, जो बहुत स्टाइलिश है।

रंगीन और एकसमान (consistent) डिज़ाइन

पृष्ठभूमि में बिखरे हुए आइकन, शीर्षकों का ग्रेडिएंट, और विविध रंग संयोजन—इसमें चंचलता होते हुए भी, डिज़ाइन के रूप में स्थिरता है और यह बिखरा हुआ नहीं लगता, जो इसे एक उत्कृष्ट डिज़ाइन बनाता है।

विस्तृत निर्देश प्रॉम्प्ट

दूसरी ओर, विस्तृत निर्देश पैटर्न, ओमाकासे पैटर्न की तुलना में Opus 4.5 की खूबियों को पूरी तरह से खत्म कर देता है और अचानक एक उबाऊ डिज़ाइन बन जाता है।
bolt की तरह, यहाँ भी ऐसा लगता है कि प्रॉम्प्ट का निम्न स्तर सीधे रूप में दिखाई दे रहा है।

GPT 5.2

ओमाकासे प्रॉम्प्ट

ओमाकासे पैटर्न में डिज़ाइन और रंग की दिशा Opus के समान है, जिसमें जगह-जगह एक्सेंट के रूप में रंगीन ग्रेडिएंट का उपयोग किया गया है और माहौल उज्ज्वल है।
जब मेरे जैसा नौसिखिया इस तरह के विविध ग्रेडिएंट का उपयोग करने की कोशिश करता है, तो अक्सर सस्तापन (cheapness) आ जाता है, लेकिन यहाँ इसे खूबसूरती से और अच्छी तरह से संयोजित किया गया है।

अन्य मॉडलों ने डमी सामग्री को बिल्ली के इमोजी या फोटो के साथ प्रदर्शित किया था, लेकिन GPT 5.2 ने ऐसा कुछ भी उपयोग नहीं किया है।
इसके अलावा, HERO सेक्शन में अन्य मॉडलों के साथ अंतर स्पष्ट रूप से दिखाई देता है।

HERO सेक्शन

पूरा HERO सेक्शन एक कार्ड तत्व के रूप में प्रस्तुत किया गया है, और स्मार्टफोन की छवि को लंबवत (portrait) के बजाय वर्गाकार (square) में दिखाया गया है।
लेकिन स्मार्टफोन स्क्रीन के नीचे के तत्व बाहर निकल रहे हैं, और डाउनलोड लिंक वाली लाइन ऐप के प्रचार वाक्यों के साथ एक ही पंक्ति में रखी गई है जिससे भीड़भाड़ (clutter) हो गई है, जिससे एक डिज़ाइन नौसिखिया होने के बावजूद मुझे थोड़ी अजीब महसूस हो रही है।

विस्तृत निर्देश प्रॉम्प्ट

विस्तृत निर्देश पैटर्न Opus और bolt की तरह ही एक उबाऊ डिज़ाइन बन गया है।
जैसा कि मैंने कई बार कहा है, अच्छा हो या बुरा, यह प्रॉम्प्ट के प्रति वफादार रहने का परिणाम हो सकता है।
लेकिन जहां Lovable ने नारंगी रंग को एक्सेंट के रूप में जोड़ा था, या फॉन्ट को ऐप के अनुसार सॉफ्ट बनाया था, और Gemini ने तत्वों को जानबूझकर तिरछा किया था, ऐसी छोटी-छोटी अभिव्यक्तियों की चमक GPT 5.2 में बिल्कुल भी देखने को नहीं मिली।

मनमानी और पक्षपातपूर्ण समीक्षा और निष्कर्ष

पसंदीदा AI रैंकिंग

प्राप्त परिणामों के आधार पर, मैं कारणों के साथ अपने पसंदीदा AI को क्रमबद्ध कर रहा हूँ।
वैसे मैं डिज़ाइन के मामले में एकदम नौसिखिया हूँ और मेरे पास कोई विशेषज्ञ ज्ञान नहीं है, इसलिए यह मूल्यांकन पूरी तरह से एक आम आदमी की अंतर्ज्ञान और अनुभव पर आधारित है।

#खिलाड़ीकारण
1Gemini 3.0 Proचाहे आप लापरवाही से निर्देश दें या विस्तार से, दोनों ही मामलों में डिज़ाइन में परिष्कार और स्थिरता महसूस होती है। मुझे सबसे ज्यादा यह महसूस हुआ कि अगर मैं बस Gemini को काम सौंप दूं, तो यह कुल मिलाकर औसत से ऊपर का परिणाम देगा, इसलिए यह पहले स्थान पर है।
2Opus 4.5ओमाकासे प्रॉम्प्ट में इसने ऐप के उद्देश्य को अच्छी तरह से समझा और उच्च गुणवत्ता वाले डिज़ाइन में प्रतिबिंबित किया, जो शानदार है। लेकिन मुझे यह चेतावनी महसूस हुई कि यदि प्रॉम्प्ट की गुणवत्ता कम है, तो परिणाम की गुणवत्ता Gemini की तुलना में काफी कम हो जाती है।
3GPT 5.2कुल मिलाकर गुणवत्ता उच्च है और इसमें बहुत संभावनाएँ दिखती हैं, लेकिन ओमाकासे पैटर्न में HERO सेक्शन के डिज़ाइन को लेकर मुझे थोड़ी चिंता महसूस हुई।
4bolt.new (Sonnet 4.5)ओमाकासे पैटर्न में कुछ तत्वों के सस्तेपन के अलावा, Opus 4.5 की तरह इसकी रचनात्मकता (ad-lib power) उच्च है, लेकिन मुझे लगा कि प्रॉम्प्ट के आधार पर यह bolt की खूबियों को खत्म कर सकता है, इसलिए सावधानी की आवश्यकता है, अतः यह चौथे स्थान पर है।
4Lovableविकृत चेहरे वाली बिल्ली अभी भी परेशान करती है। यह केवल एक अस्थायी सामग्री है इसलिए शायद इस पर ध्यान नहीं देना चाहिए, लेकिन यदि डमी इमेज बहुत ही खराब होती हैं, तो अंतिम रूप की कल्पना करना मुश्किल होता है, इसलिए मुझे व्यक्तिगत रूप से अंक काटने पड़े। हालाँकि, विस्तृत निर्देश प्रॉम्प्ट की पूर्णता अन्य AI की तुलना में कम नहीं थी।
5v0(v0 Agent)कुल मिलाकर सुरक्षित, सादा और उबाऊ। इसकी रचनात्मकता (ad-lib power) कम है, और मुझे लगा कि यह उपयोगकर्ता की प्रॉम्प्ट इंजीनियरिंग के निम्न स्तर से भी बुरी तरह प्रभावित होता है, इसलिए जिन लोगों को डिज़ाइन की गहरी समझ है, उन्हें इसका उपयोग करते समय बहुत सावधान रहने की आवश्यकता है। चूंकि यह एक ऐसा टूल था जिसे मैं अतीत में अस्थायी रूप से पसंद करता था, इसलिए थोड़ा दुख हुआ।

Gemini 3.0 Pro सब कुछ बना सकता है और यह अद्भुत है! यह हाल ही में सोशल मीडिया पर चर्चा का विषय रहा है, लेकिन यह डिज़ाइन के मामले में भी उत्कृष्ट है, इसके लिए मैं नतमस्तक हूँ।
अब तक मैं मुख्य रूप से Claude Code (Max Plan) और Cursor का उपयोग करता रहा हूँ, लेकिन इस परिणाम ने मुझे यह सोचने पर मजबूर कर दिया है कि Antigravity पर स्विच करना भी एक अच्छा विकल्प हो सकता है।

जिन लोगों में डिज़ाइन सेंस नहीं है, उन्हें प्रॉम्प्ट में ज्यादा दखल नहीं देना चाहिए

परिणामों को देखकर सभी ने यह महसूस किया होगा कि विस्तृत निर्देश पैटर्न में, हालांकि कुछ मॉडलों में रचनात्मकता देखी गई, लेकिन मूल रूप से परिणाम सादे और उबाऊ ही रहे।
विशेष रूप से, रंग संयोजन को ऐप के थीम रंग के अनुसार केवल भूरे (brown) तक सीमित रखने के निर्देश ने सबसे नीरस डिज़ाइन को बढ़ावा दिया।
AI अच्छा हो या बुरा, मूल रूप से निर्देशों के प्रति वफादार होता है, इसलिए यह स्वाभाविक ही है, लेकिन जिन लोगों में डिज़ाइन सेंस नहीं है, उन्हें अपनी हद से बाहर जाकर डिज़ाइन के बारीक हिस्सों में दखल देते हुए प्रॉम्प्ट नहीं बनाना चाहिए
जिन क्षेत्रों के बारे में आप अच्छी तरह नहीं जानते, उन्हें कुछ हद तक AI पर छोड़ देने से, AI संभवतः उस क्षेत्र के बेस्ट प्रैक्टिस के अनुसार निर्णय लेगा।
ऐसा करने पर "अरे, यह मैंने कहीं देखा है" वाली भावना तो आ सकती है, लेकिन मुझे लगा कि यह एक नौसिखिए द्वारा बेतरतीब छेड़छाड़ करने से कहीं बेहतर है।

असली चुनौती आगे है

आज के परिणाम केवल एक शुरुआती बिंदु हैं, और इसके आधार पर AI के साथ बार-बार दिशा को समायोजित करने और अपने आदर्श UI/UX के करीब पहुंचने की प्रक्रिया आवश्यक है
मेरे मामले में, सेंस न होने के बावजूद UI को लेकर अजीब तरह की जिद है, इसलिए इस प्रक्रिया में विशेष रूप से समय लगता है।
इसे ध्यान में रखते हुए, पहले परिणाम की तुलना में, AI का सोचने का समय (ट्रायल और एरर की अवधि की कमी), बग्स की कम दर, और निर्देशों के इरादे को सही ढंग से समझने और उसे लागू करने की क्षमता कहीं अधिक महत्वपूर्ण हो जाती है।
उस दृष्टिकोण से, रैंकिंग का क्रम ऊपर बताए गए क्रम से पूरी तरह अलग हो सकता है।
इसलिए, केवल इस परिणाम को देखकर श्रेष्ठता का निर्णय लेना जल्दबाजी होगी, इसलिए कृपया इसे केवल संदर्भ के रूप में लें और स्वयं भी प्रयास करें।

यदि आपको यह लेख उपयोगी लगा, कृपया इसे साझा करें!

avatar
Yukapero
एक पागल इंजीनियर जिसने मूर्खतापूर्वक एक बड़ी IT कंपनी में आरामदायक नौकरी छोड़ दी और शून्य आय के साथ वेब सेवा/ऐप विकास में डूब गया। एक स्वतंत्र डेवलपर और फ्रीलांस इंजीनियर के रूप में सफलताओं और असफलताओं, सीखे गए पाठों और दैनिक संघर्षों को साझा करता है!