Introduction
As the first step in my smartphone app development journey, I am developing "Sumineko", a very simple smartphone app that lets you watch random cat videos endlessly in the corner of your screen while multitasking.
To register this app on official stores, I need to prepare a privacy policy page on the web, so I decided to take this opportunity to create a Landing Page (LP) for the app.
Therefore, in this article, I will have representative LLMs and AI coding services create the foundation of the LP, and I will compare their results based on my own prejudice and bias.
Contenders
| Contender | Features |
|---|---|
| v0 (v0 Agent) | Vercel's agent tool. Supports everything from UI implementation to debugging based on prompts. |
| bolt.new (Claude Sonnet 4.5) | Browser-based Claude agent. Efficiently builds Next.js apps in a conversational format. |
| Lovable | A builder supporting multiple AI models. React+Supabase apps can be generated and edited intuitively. |
| Gemini 3.0 Pro | Google's latest high-performance model. Quickly generates sophisticated Web pages with multimodal input. |
| Opus 4.5 | Anthropic's strongest model. Leverages long context to carefully handle complex Web app design. |
| GPT 5.2 | OpenAI's latest model. Compared to GPT-5.1, it has 1.8x the "correct answer rate," significantly improved "code accuracy," and 30% fewer hallucinations. |
Note on Treating Them as Equals
Pure LLMs (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) and development support systems with built-in LLMs (bolt.new, v0, Lovable) have different system architectures. However, for the purpose of this article, I am treating them as equals for convenience, aiming to subjectively compare the quality of web page generation results using the same prompt. Please note that this experiment lacks strict rigor.
Prompts
I prepared the following two patterns to loosely verify their ability to ad-lib and their faithful adherence to requirements.
- Minimal Pattern: States only the minimum requirements (Hands-off).
- Detailed Instruction Pattern: Describes relatively detailed requirements.
Minimal Pattern
A pattern where I primarily provide a simple overview of "Sumineko" and the necessary sections, leaving the design and wording up to the 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
A micromanagement pattern that, in addition to the overview and necessary sections, gives detailed instructions on the structure of each section, wording, and design aspects like color schemes.
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 `<img>` or Next.js `` 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.
Results
v0 (v0 Agent)
The Minimal Pattern has a super standard UI design with a very reserved color scheme, giving the impression of being "safe" in both good and bad ways.
Since the images, videos, and icons are placeholders, the simplicity might be standing out even more.
Perhaps if actual assets were inserted, this simplicity would provide a good balance that highlights elements like screenshots and videos.
On the other hand, the Detailed Instruction Pattern faithfully follows the prompt's content, but generally results in a similarly reserved design.
It doesn't use bold text for emphasis, giving a rather flat impression—for better or worse—not much different from the Minimal Pattern.
bolt.new (Claude Sonnet 4.5)
The Minimal Pattern features a soft, lively design and color scheme based on orange. The eye is naturally drawn to the orange text and images, giving a sophisticated impression.
It's a small point, but having a subtle appeal element like "Experience the magic" in the HERO section—meaning it's visible without scrolling—is a good touch to reduce bounce rates.
However, even though they are placeholders, the design of the smartphone in the HERO section and the flatness of the elements in the collection section felt somewhat dated, cheap, or amateurish.
Conversely, the Detailed Instruction Pattern is very faithful to the prompt, which is good, but it gives the impression that this faithfulness killed bolt's strengths.
It's definitely not bad overall, but compared to the Minimal Pattern, it's too monotonous.
This isn't bolt's fault; rather, it's likely that the low quality of the prompt I prepared is reflected directly in the form.
Lovable
For the Minimal Pattern, the first thing that catches the eye is the illustration of a cat with a collapsed face.
Since I didn't provide assets, it seems to have kindly prepared them for me, but the surreal design looks like it was drawn by a kindergartner, which makes me chuckle.
However, these are just temporary placeholders, so if you ignore the collapsed-face cats and look at the design of the other parts, it's not bad—there are cats scattered in the background, and parts to be emphasized are properly highlighted with brown or orange accent colors.
The Detailed Instruction Pattern is very faithful to instructions, but it also shows ingenuity throughout, such as using bold text for strings I wanted to emphasize, using a soft font to match the app, and highlighting the PiP transition button in orange, which wasn't explicitly specified in the prompt.
Gemini 3.0 Pro
The Minimal Pattern lacks playfulness—for better or worse—and features an overall tight design/color scheme, giving the impression of a business app or tool rather than a healing app.
It's just my bias, but the direction feels very "Google-like."
Regarding the design direction, it clearly doesn't match the app, but putting that aside for a moment, I feel the overall quality is extremely high.
It gives the impression of "I made this following the Web Design Textbook!" It has no quirks, and I feel I could trust it with a request.
It's a small detail, but the reproduction quality of the placeholder illustrations for PiP and the browser is high.
It makes it easy to visualize the finished product, which is a surprisingly nice point.
The Detailed Instruction Pattern is faithful to instructions like the other AIs, and while it is dragged down by the low level of design instruction in the prompt, it ad-libbed a dynamic design where the smartphone image and collection screen image are slightly tilted—a small detail, but a very good accent.
Also, the cat casually walking in the footer is stylish.
Opus 4.5
For the Minimal Pattern, the design is generally bright, colorful, and cute, clearly reflecting the theme of "Cat Healing App."
The header also has a transparent, modern design that is very stylish.
With icons scattered in the background, gradients in headings, and a colorful palette, it seems to be an excellent design that is consistent and doesn't feel disjointed, while still being full of playfulness.
On the other hand, the Detailed Instruction Pattern completely killed the good qualities of Opus 4.5 when compared to the Minimal Pattern, resulting in a suddenly boring design.
Like bolt, it appears the low level of the prompt was directly reflected in the form.
GPT 5.2
The Minimal Pattern has a design and color direction similar to Opus, using colorful gradients as accents throughout for a bright atmosphere.
When an amateur like me tries to use such varied gradients, it inevitably looks cheap, but here it gives the impression of being put together beautifully and skillfully.
While other models expressed placeholder assets with cat emojis or photos, GPT 5.2 seems not to use such things at all.
Also, differences from other models are prominent in the HERO section.
The entire HERO section is represented as a card element, and the smartphone image is represented as a square rather than a vertical rectangle.
However, elements at the bottom of the smartphone screen are protruding, and the line with download links is placed on the same level as the app's appeal text, making it cluttered. Even as a design amateur, I feel a slight sense of incongruity.
The Detailed Instruction Pattern became a boring design, similar to Opus and bolt.
As I've mentioned many times, I think this is a manifestation of being faithful to the prompt, for better or worse.
However, while Lovable added orange as an accent color and used a softer font to match the app, and Gemini intentionally tilted elements, showing sparks of expressive ingenuity, absolutely nothing of that sort was seen in GPT 5.2.
General Review and Conclusion Dripping with Personal Bias
My Favorite AI Ranking
Based on the results obtained this time, I will rearrange the AIs in the order I liked, along with my reasons.
By the way, I am a complete amateur in terms of design and have no professional knowledge, so this evaluation is strictly based on an amateur's intuition and experience.
| # | Contender | Reason |
|---|---|---|
| 1st | Gemini 3.0 Pro | Whether instructed loosely or in detail, I felt a sense of design sophistication and stability in both cases. I felt most strongly that if I just ask Gemini for now, it will churn out a result that is comprehensively above average, so it's 1st place. |
| 2nd | Opus 4.5 | In the Minimal Prompt, it interpreted the app's intent well and reflected it in the design with high quality, which is wonderful. However, I felt caution is needed because if the prompt quality is low, the output quality drops sharply compared to Gemini. |
| 3rd | GPT 5.2 | The overall quality is high and I feel great potential, but I did feel a touch of anxiety about the design of the HERO section in the Minimal Pattern. |
| 4th | bolt.new (Sonnet 4.5) | In addition to the cheap feel of some elements in the Minimal Pattern, it's similar to Opus 4.5 in having high ad-lib ability, but I felt it requires caution as the prompt might kill bolt's good points, so 4th place. |
| 4th | Lovable | As expected, the collapsed-face cats are distracting. Since they are only temporary placeholders, maybe I shouldn't mind, but if the placeholder images are too sloppy, it's hard to visualize the finished product, so I personally have to deduct points. However, the Detailed Instruction Prompt had a level of perfection that rivals other AIs. |
| 5th | v0 (v0 Agent) | Overall safe, plain, and boring. Ad-lib ability is low, and I felt it was strongly dragged down by the user's low level of prompt engineering, so it seemed to require considerable caution for those with strong design preferences. Since it was a tool I used to love temporarily in the past, it's a bit disappointing. |
It's been a hot topic on social media recently that Gemini 3.0 Pro can make anything, but I take my hat off to its excellence in design as well.
I have mainly used Claude Code (Max Plan) and Cursor until now, but this result strongly made me think that switching to Antigravity might be an option.
People Without Design Sense Should Not Overstep with Prompts
I think everyone felt this looking at the results, but in the Detailed Instruction Pattern, while some models showed ingenuity, the outputs basically became plain and boring.
In particular, specifying only brownish colors to match the app's theme colors seemed to spur on the most monotonous designs.
Since AI is basically faithful to instructions—for better or worse—this may be natural, but people without design sense should not stretch themselves to micromanage the design parts in their prompt engineering.
By leaving areas you don't understand well to the AI to some extent, the AI should make judgments based on best practices in that domain.
Doing so inevitably brings out a "I've seen this somewhere before" feeling, but I felt it was far better than an amateur messing around randomly.
The Real Hell Starts Here
The deliverables this time are merely starting points; based on these, a process of repeatedly aligning directions with the AI to get closer to one's ideal UI/UX is necessary.
In my case, despite having no sense, I am strangely particular about UI, so this process takes especially long.
Considering that, factors like the shortness of the AI's thinking time (shortness of trial-and-error spans), low bug rate, and the ability to accurately grasp the intent of instructions and connect them to implementation are actually far more important than the first deliverable.
From that perspective, the ranking order would likely be completely different from the one listed above.
Therefore, it is definitely premature to judge superiority based solely on these results, so I hope you will try them out yourself as a reference.
About the Author
I'm a solo developer fighting with "Individual x AI" from Japan. I share raw insights about solo business, freelance engineering realities, and lessons learned along the way.
If you enjoyed this article, I'd be thrilled if you could give it a like or follow!
For more about my projects and detailed articles, please visit yukapero.com.
I'm active on social media - let's connect! @yukapero_com
X: @yukapero_com
Web: yukapero.com
Top comments (0)