Y
UKAPERO.COM
Realidade Indie Dev

Qual IA cria a página Web mais legal? GPT 5.2 vs Gemini 3.0 Pro vs Opus 4.5 vs bolt.new vs v0 vs Lovable

(Atualizado: )

Introdução

Como o primeiro passo no desenvolvimento do meu aplicativo móvel, estou criando o "Sumineko" (Gato de Canto), um aplicativo de smartphone muito simples que permite "assistir casualmente" a vídeos de gatos aleatórios infinitamente no canto da tela.

Sumineko (Em desenvolvimento)

Para registrar este aplicativo na loja oficial, é necessário preparar uma página de Política de Privacidade na Web, então decidi aproveitar a oportunidade para criar a LP (Landing Page) deste aplicativo.

Portanto, neste artigo, pedirei a LLMs representativos e serviços de codificação por IA para criar a base da LP e compararei os resultados com base em minha opinião pessoal e subjetiva.

Apresentação dos Competidores

CompetidorCaracterísticas
v0 (v0 Agent)Ferramenta de agente da Vercel. Suporte completo desde o prompt até a implementação da UI e depuração.
bolt.new (Claude Sonnet 4.5)Agente Claude baseado em navegador. Constrói aplicativos Next.js eficientemente em formato de diálogo.
LovableConstrutor compatível com múltiplos modelos de IA. Permite gerar e editar aplicativos React+Supabase intuitivamente.
Gemini 3.0 ProO modelo mais recente e de alto desempenho do Google. Gera páginas Web sofisticadas rapidamente com entrada multimodal.
Opus 4.5O modelo mais forte da Anthropic. Aproveita o contexto longo para lidar cuidadosamente com o design de aplicativos Web complexos.
GPT 5.2Modelo mais recente da OpenAI. Comparado ao GPT-5.1, a "taxa de respostas corretas" aumentou 1,8x, a "precisão do código" melhorou significativamente e as alucinações diminuíram 30%.

WARNING

Sobre o tratamento equivalente por conveniência
Embora os LLMs puros (Gemini 3.0 Pro, Opus 4.5, GPT 5.2) e os sistemas de apoio ao desenvolvimento com LLM integrado (bolt.new, v0, Lovable) tenham arquiteturas de sistema diferentes, neste artigo eles serão tratados como equivalentes por conveniência, com o objetivo de comparar subjetivamente a qualidade da geração de páginas Web com o mesmo prompt. Portanto, observe que este experimento não possui rigor científico.

Prompts

Preparei os 2 padrões abaixo para verificar de forma descontraída a capacidade de improvisação e a fidelidade aos requisitos.

  • Padrão Automático ("Deixo com você"): Apenas os requisitos mínimos são listados.

  • Padrão Detalhista: Instruções relativamente detalhadas são descritas.

Padrão Automático

Um padrão onde indico principalmente o resumo simples do "Sumineko" e apenas as seções necessárias, deixando o design e o texto por conta da IA.

Padrão
# 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."

Padrão Detalhista

Um padrão detalhista que, além do resumo do "Sumineko" e das seções necessárias, instrui a configuração detalhada de cada seção, textos e até aspectos de design como esquema de cores.

Padrão
# 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.

Resumo dos Resultados

NOTE

O design responsivo também foi implementado, mas este artigo abordará apenas a visualização em desktop.

Padrão Automático

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Padrão Detalhista

v0

bolt.new

Lovable

Gemini 3.0 Pro

Opus 4.5

GPT 5.2

Olhando os resultados individualmente em detalhes

v0 (v0 Agent)

Prompt automático

O Padrão Automático apresenta um design de UI extremamente clássico, com um esquema de cores muito discreto, passando uma impressão de ser "seguro" até demais, para o bem ou para o mal.
Como as imagens, vídeos e ícones são provisórios, essa sensação de simplicidade pode ter sido acentuada.
Se inseríssemos os materiais reais, talvez essa simplicidade se tornasse um bom equilíbrio, destacando elementos como screenshots e vídeos.

Prompt detalhista

Por outro lado, o Padrão Detalhista, embora siga fielmente o conteúdo do prompt, também resulta em um design geral bastante discreto.
Não há negrito para enfatizar textos, e a impressão é plana, para o bem ou para o mal, não diferindo muito da impressão do Padrão Automático.

bolt.new (Claude Sonnet 4.5)

Prompt automático

O Padrão Automático tem um design e esquema de cores suaves e vivos, baseados na cor laranja, guiando naturalmente o olhar para os textos e imagens em laranja, transmitindo uma impressão refinada.

Texto de apelo visível sem necessidade de rolagem

Um ponto sutil, mas interessante, é que na seção HERO, ou seja, na posição visível sem rolagem, há um elemento de apelo discreto que desperta interesse, como "Experience the magic (Experimente a mágica)", o que é uma boa estratégia para reduzir a taxa de abandono.

No entanto, embora sejam elementos provisórios, senti uma certa aparência antiga, barata ou amadora no design do smartphone na seção HERO e na falta de profundidade dos elementos da seção de coleção.

Prompt detalhista

Já o Padrão Detalhista é realmente fiel ao prompt, o que é bom, mas é tão fiel que dá a impressão de ter matado as qualidades do bolt.
Não é que seja ruim no geral, mas comparado ao Padrão Automático, é monótono demais.
Isso não é culpa do bolt, mas pode ser considerado um reflexo direto do baixo nível do prompt que preparei.

Lovable

Prompt automático

No Padrão Automático, o que chama a atenção primeiro é a ilustração do gato com o rosto desfigurado.

Gato com rosto desfigurado 1

Gato com rosto desfigurado 2

Como não forneci os materiais, parece que ele gentilmente preparou alguns, mas o design surreal, como se desenhado por uma criança do jardim de infância, me fez rir involuntariamente.
No entanto, como são apenas provisórios, se ignorarmos esses gatos desfigurados e olharmos para o design das outras partes, não é ruim: há gatos espalhados pelo fundo e as partes que devem ser enfatizadas estão bem destacadas com cores de destaque marrom ou laranja.

Prompt detalhista

O Padrão Detalhista é muito fiel às instruções, mas mostra engenhosidade em vários pontos, como colocar as strings de texto que quero enfatizar em negrito e usar uma fonte suave que combina com o aplicativo, ou destacar o botão de transição PiP em laranja (que não foi especificado no prompt).

Fonte suave combinando com o app

Botão que se destaca bem com contraste em relação ao fundo

Gemini 3.0 Pro

Prompt automático

O Padrão Automático, para o bem ou para o mal, não tem brincadeiras e apresenta um design/esquema de cores geral sóbrio, dando a impressão de um aplicativo ou ferramenta de negócios em vez de um aplicativo de relaxamento.
É apenas um preconceito meu, mas é uma direção que parece "muito Google".
Quanto à direção do design, claramente não combina com o aplicativo, mas deixando isso de lado por um momento, sinto que a qualidade geral é muito alta.
Passa a impressão de "Fiz seguindo o livro didático de Web Design!", sem excentricidades, e sinto que posso confiar na solicitação.

Representação do PiP

Representação do navegador

Detalhe, mas a fidelidade das ilustrações provisórias como PiP e navegador é alta.
É um ponto sutilmente agradável, pois facilita a visualização da imagem final.

Prompt detalhista

O Padrão Detalhista, assim como as outras IAs, é fiel às instruções e acaba sendo arrastado pelo baixo nível das instruções de design do prompt. No entanto, em pontos sutis, ele improvisou um design com movimento, inclinando levemente a imagem do smartphone e a imagem da tela de coleção, o que se tornou um ótimo destaque.

Smartphone inclinado

Imagem da coleção inclinada

Além disso, o gato caminhando casualmente no rodapé também é estiloso.

Gato andando no rodapé

Opus 4.5

Prompt automático

O Padrão Automático tem um design geral brilhante, colorido e fofo, e pode-se ver que o tema "aplicativo de relaxamento com gatos" foi bem refletido no design.
O cabeçalho também tem um design moderno com transparência, o que é muito estiloso.

Design colorido e unificado

Parece um design excelente, cheio de jovialidade com ícones espalhados ao fundo, gradientes nos títulos e um esquema de cores variado, mas mantendo a consistência como design e sem parecer desconexo.

Prompt detalhista

Por outro lado, o Padrão Detalhista, quando comparado ao Padrão Automático, matou completamente as qualidades do Opus 4.5, resultando em um design entediante de uma só vez.
Assim como no bolt, parece que o baixo nível do prompt se manifestou diretamente na forma final.

GPT 5.2

Prompt automático

O Padrão Automático tem uma direção de design e esquema de cores semelhante ao Opus, usando gradientes coloridos como destaque em vários lugares, com uma atmosfera brilhante.
Quando um amador como eu tenta usar esses gradientes variados, inevitavelmente parece barato, mas aqui tenho a impressão de que foi bem organizado e limpo.

Outros modelos usaram emojis ou fotos de gatos para expressar materiais provisórios, mas o GPT 5.2 parece não usar nada desse tipo.
Além disso, a diferença em relação aos outros modelos é notável na seção HERO.

Seção HERO

Toda a seção HERO é representada como um elemento de cartão, e a imagem do smartphone é representada como um quadrado em vez de um retângulo vertical.
No entanto, sinto um certo desconforto, mesmo sendo um amador em design, como elementos na parte inferior da tela do smartphone vazando para fora, ou a linha onde os links de download estão instalados estar alinhada na mesma hierarquia que o texto de apelo do aplicativo, deixando tudo meio confuso.

Prompt detalhista

O Padrão Detalhista, assim como o Opus e o bolt, resultou em um design entediante.
Como mencionei várias vezes até agora, acho que isso é um reflexo de ser fiel ao prompt, para o bem ou para o mal.
No entanto, enquanto o Lovable adicionou laranja como cor de destaque, ou o Gemini inclinou elementos propositalmente, pequenas engenhosidades de expressão brilharam em outros, mas no GPT 5.2 não vi nada desse tipo.

Avaliação Geral e Resumo Cheio de Preconceitos

Ranking das IAs que mais gostei

Com base nos resultados obtidos desta vez, vou reordenar as IAs que mais gostei, acompanhadas dos motivos.
A propósito, sou um completo amador em termos de design e não tenho conhecimento especializado, então esta é uma avaliação baseada puramente na intuição e experiência de um amador.

#CompetidorMotivo
Gemini 3.0 ProSeja com instruções vagas ou detalhadas, senti um refinamento e estabilidade no design em ambos os casos. Fiquei com a forte sensação de que, se pedir ao Gemini, ele produzirá um resultado acima da média no geral, por isso ficou em 1º lugar.
Opus 4.5No prompt automático, interpretou bem o objetivo do aplicativo e refletiu isso no design com alta qualidade, o que foi maravilhoso. No entanto, senti que é preciso ter cuidado, pois se a qualidade do prompt for baixa, a qualidade do resultado cai drasticamente, mais do que no Gemini.
GPT 5.2A qualidade geral é alta e sinto muito potencial, mas senti uma leve insegurança no design da seção HERO no padrão automático.
bolt.new (Sonnet 4.5)Além da sensação de "barato" em alguns elementos no padrão automático, assim como o Opus 4.5, tem alta capacidade de improvisação, mas senti que, dependendo do prompt, ele mata as qualidades do bolt, por isso senti que requer cuidado, ficando em 4º.
LovableOs gatos com rosto desfigurado ainda me incomodam. Talvez não devesse me importar, já que são apenas materiais provisórios, mas quando a imagem provisória é muito ruim, é difícil visualizar o resultado final, então pessoalmente tive que tirar pontos. No entanto, o prompt detalhista teve um nível de perfeição que não perde para as outras IAs.
v0 (v0 Agent)No geral, seguro, sóbrio e entediante. Senti que a capacidade de improvisação é baixa e que ele é fortemente influenciado pelo baixo nível de engenharia de prompt do usuário, então me pareceu necessário usá-lo com bastante cuidado para quem é exigente com design. Como era uma ferramenta que eu amava e usava temporariamente no passado, fiquei um pouco decepcionado.

Recentemente, tem sido comentado nas redes sociais que o Gemini 3.0 Pro é incrível e pode criar qualquer coisa, e tiro o chapéu para sua excelência também no aspecto de design.
Até agora, usei principalmente o Claude Code (Max Plan) e o Cursor, mas este resultado me fez pensar fortemente que mudar para o Antigravity pode ser uma opção.

Pessoas sem senso de design não devem se intrometer demais no prompt

Acho que todos sentiram isso ao ver os resultados, mas no Padrão Detalhista, embora alguns modelos tenham mostrado engenhosidade, o resultado foi basicamente sóbrio e entediante.
Especialmente o fato de eu ter especificado apenas tons de marrom para combinar com a cor tema do aplicativo parece ter impulsionado o design mais monótono.
Pode-se dizer que é natural, já que a IA é basicamente fiel às instruções, para o bem ou para o mal, mas pessoas sem senso de design não devem tentar dar um passo maior que a perna e projetar prompts detalhando a parte de design.
Ao deixar certas áreas que não entendemos bem nas mãos da IA, ela deve julgar com base nas melhores práticas dessa área.
Fazendo isso, inevitavelmente surge aquela sensação de "já vi isso em algum lugar", mas senti que é muito melhor do que um amador mexendo de qualquer jeito.

O verdadeiro inferno começa agora

Os resultados desta vez são apenas o ponto de partida; com base neles, é necessário um processo de alinhar a direção com a IA várias vezes para se aproximar da UI/UX ideal.
No meu caso, apesar de não ter senso, sou exigente de forma estranha com a UI, então esse processo leva tempo.
Considerando isso, mais do que o resultado da primeira tentativa, o tempo de pensamento da IA (curto intervalo de tentativa e erro), a baixa taxa de bugs e a capacidade de entender a intenção das instruções e conectá-las à implementação são muito mais importantes.
Nessa perspectiva, a ordem do ranking provavelmente seria totalmente diferente da listada acima.
Portanto, sem dúvida é precipitado julgar a superioridade apenas com base nestes resultados, então espero que você também experimente por conta própria, usando isso apenas como referência.

Se achou este artigo útil, por favor compartilhe!

avatar
Yukapero
Um engenheiro louco que tolamente deixou um emprego confortável em uma grande empresa de TI para mergulhar no desenvolvimento de serviços web/aplicativos com receita zero. Compartilhando sucessos e fracassos, lições aprendidas e lutas diárias como desenvolvedor independente e engenheiro freelancer!