Comparativo: Sonnet vs Opus

• Seção: Assistente de código
• Vídeo (NÃO baixado): https://www.youtube.com/watch?v=ED6hH4u4Apc
• Duração do vídeo: 38min04s

Descrição

_(sem descrição)_

Recursos baixados

• 14-claude-sonnet-5-vs-opus-48.pdf — claude_sonnet5_vs_opus48_prompt_pack.pdf (ok (16487 bytes))

Claude Sonnet 5 vs Opus 4.8 Três Prompts de Construção em Uma Etapa Um pacote de prompts simples para testar o desempenho de dois modelos do assistente em design, funcionalidade de aplicativo e lógica de jogo complexa.

Site de Portfólio Testa design, texto, layout, responsividade e acabamento. Finanças Pessoais Testa formulários, cálculos, armazenamento local, validação e UX do painel. 2 Aplicativo

Defesa do Castelo Testa lógica de jogo, ondas, movimento, pontuação, melhorias e estados de vitória/derrota. 3 Jogo

Use o mesmo prompt para ambos os modelos, no mesmo ambiente, com as mesmas regras. Depois, compare os resultados finais lado a lado. Como Usar Este Pacote de Prompts Execute cada teste como uma construção em uma etapa. Dê ao Claude Sonnet 5 e ao Claude Opus 4.8 exatamente o mesmo prompt e, em seguida, compare a saída final sem dar ajuda extra a um dos modelos.

Configuração recomendada: React + Tailwind CSS, mesmo editor ou ambiente de código, mesmo prompt, mesma quantidade de ajuda em follow-up e a mesma lista de verificação de testes manuais.

Teste O que Mede Pontuação

Site de Portfólio Qualidade do design, texto, responsividade, espaçamento, acabamento visual /10

Aplicativo de Finanças Pessoais Funcionalidade, cálculos, armazenamento local, validação, usabilidade /10

Jogo de Defesa do Castelo Loop do jogo, movimento dos inimigos, defensores, pontuação, melhorias, lógica de vitória/derrota /10

Uma pergunta final simples para o vídeo: O Opus 4.8 ainda é claramente melhor, ou o Sonnet 5 agora é bom o suficiente para a maioria das pessoas?

Pacote de Prompts Claude Sonnet 5 vs Opus 4.8 | Página 2 Prompt 1: Site de Portfólio Objetivo: testar gosto em design, redação, layout, responsividade e acabamento.

Build a modern personal portfolio website for a freelance designer and developer named Alex Morgan.

Use React and Tailwind CSS.

The website should feel premium, clean, and modern. It should look like something a real creative professional could use to get clients.

Create a full landing page with the following sections:

1. Hero section

• Strong headline
• Short subheadline
• Two call-to-action buttons
• A visual area that shows a profile card, project preview, or creative mockup

1. About section

• Short professional bio
• Skills and tools
• A clean layout that feels personal but professional

1. Featured projects section

• Show 4 projects
• Each project should have a title, category, short description, and visual card
• Add hover effects

1. Services section

• Show 3 services:
• Website Design
• Web Development
• Brand Identity

1. Testimonials section

• Include 3 realistic client testimonials

1. Contact section

• Contact form with name, email, project type, and message
• Add basic form validation
• Show a success message after submission

1. Footer

• Include social links and copyright text

Design requirements:

• Premium portfolio style
• Clean spacing
• Modern typography
• Fully responsive for desktop, tablet, and mobile
• Smooth hover effects
• Subtle animations
• Good visual hierarchy
• Make it look polished, not like a basic template

Technical requirements:

• Use React components
• Use Tailwind CSS

Pacote de Prompts Claude Sonnet 5 vs Opus 4.8 | Página 3

• Keep everything frontend-only
• No backend required
• No external APIs
• Make sure the app does not crash
• Include comments for important sections

At the end, include a manual testing checklist for:

• Desktop responsiveness
• Mobile responsiveness
• Contact form validation
• Success message after form submission
• Hover effects
• All sections rendering correctly

Pacote de Prompts Claude Sonnet 5 vs Opus 4.8 | Página 4 Prompt 2: Aplicativo Web de Finanças Pessoais Objetivo: testar formulários, cálculos, gerenciamento de estado, armazenamento local, validação e design de dashboard útil.

Build a functional personal finance web app called BudgetFlow.

Use React and Tailwind CSS.

The app should help users track income, expenses, savings goals, and monthly budget progress.

Core features:

1. Dashboard overview

• Show total income
• Show total expenses
• Show remaining balance
• Show savings progress
• Show spending by category

1. Add transaction form

The user should be able to add a transaction with:

• Transaction name
• Amount
• Type: income or expense
• Category
• Date
• Notes

1. Transaction list

• Show all transactions
• Allow users to filter by income, expense, or category
• Allow users to search transactions by name
• Allow users to delete a transaction

1. Budget categories

Create default categories:

• Housing
• Food
• Transportation
• Entertainment
• Shopping
• Health
• Education
• Other

1. Savings goal tracker

• User can set a savings goal name
• User can set a target amount
• User can add money toward the goal
• Show percentage progress
• Show how much is left to reach the goal

1. Charts and visual summaries

• Add a simple chart or visual breakdown for spending by category
• Add a monthly income vs expense summary
• Use simple frontend visuals if a chart library is not available

1. Local storage

• Save transactions to local storage
• Save savings goal to local storage

Pacote de Prompts Claude Sonnet 5 vs Opus 4.8 | Página 5

• Data should still be there after refresh

1. Validation

• Do not allow empty transaction names
• Do not allow invalid amounts
• Do not allow negative amounts
• Show helpful error messages

1. UI requirements

• Clean dashboard style
• Modern cards
• Clear labels
• Responsive layout
• Easy to understand
• Works well on desktop and mobile

Technical requirements:

• Use React state properly
• Use clean component structure
• Use Tailwind CSS
• Keep everything frontend-only
• No backend required
• No external APIs
• Make sure the app does not crash during normal use
• Add comments for the main logic

At the end, include a manual testing checklist for:

• Adding income
• Adding expenses
• Deleting transactions
• Filtering transactions
• Searching transactions
• Budget totals updating correctly
• Savings goal updating correctly
• Local storage persistence after refresh
• Form validation
• Mobile responsiveness

Pacote de Prompts Claude Sonnet 5 vs Opus 4.8 | Página 6 Prompt 3: Jogo de Defesa do Castelo Objetivo: testar construção complexa em uma única etapa com lógica de jogo, ondas, movimento, pontuação, melhorias e estados de vitória/derrota.

Build a complete browser-based game called Castle Defense.

Use React and Tailwind CSS.

Game concept: The player is defending a castle from waves of enemies. Enemies move from the left side of the screen toward the castle on the right side. The player places defenders on the battlefield to stop the enemies before they reach the castle.

The game should feel like a simple tower defense game.

Core gameplay:

• Enemies move from left to right across the game board
• If an enemy reaches the castle, the player loses one life
• The player starts with 20 lives
• The player starts with 150 gold
• The player earns gold when enemies are defeated
• The game has 10 waves
• Each wave should become harder
• The player wins after surviving all 10 waves
• The player loses if lives reach 0

Enemy types:

1. Goblin

• Fast movement
• Low health
• Reward: 10 gold

1. Orc

• Medium speed
• Medium health
• Reward: 20 gold

1. Troll

• Movimento lento
• Vida alta
• Recompensa: 35 ouro

1. Cavaleiro Sombrio

• Aparece nas ondas posteriores
• Vida alta
• Velocidade média
• Recompensa: 50 ouro

Tipos de defensores:

1. Arqueiro

• Custo baixo
• Velocidade de ataque rápida
• Dano baixo

1. Cavaleiro

• Custo médio
• Velocidade de ataque média
• Dano médio

1. Mago

• Custo mais alto
• Velocidade de ataque mais lenta
• Dano em área

1. Guardião

• Caro
• Aumenta a capacidade dos defensores próximos

Funcionalidades obrigatórias:

• Tela inicial com explicação do jogo
• Tabuleiro de jogo
• Painel de seleção de defensores
• Colocar defensores selecionando um e clicando no tabuleiro
• Não permitir colocação se o jogador não tiver ouro suficiente
• Inimigos devem se mover pelo tabuleiro
• Defensores devem atacar automaticamente inimigos dentro do alcance
• Exibir animações de ataque ou efeitos visuais
• Sistema de ondas
• Sistema de ouro
• Sistema de vidas
• Sistema de pontuação
• Sistema de melhoria de defensores
• Tela de vitória
• Tela de fim de jogo
• Botão de reiniciar
• Botão de pausar
• Botão simples para alternar som, mesmo que usando apenas estado visual de som
• Registro de atividades que explica o que está acontecendo durante o jogo

Requisitos de interface:

• Fazer o jogo parecer polido e divertido
• Usar tema de castelo fantástico
• Tabuleiro de jogo claro
• Cartões e botões limpos
• Exibir onda atual, vidas, ouro e pontuação
• Exibir estatísticas do defensor antes de colocá-lo
• Exibir vida do inimigo visualmente
• Layout responsivo para desktop e mobile

Requisitos técnicos:

• Manter tudo em um único aplicativo React funcional
• Usar estado do React corretamente
• Usar estrutura de componentes limpa
• Evitar APIs externas
• Evitar requisitos de backend
• Usar apenas estado local
• Adicionar comentários para a lógica principal do jogo
• Garantir que o jogo não trave durante o jogo normal

No final, incluir uma lista de verificação de testes manuais para:

• Iniciar o jogo
• Colocar cada tipo de defensor
• Impedir colocação sem ouro suficiente
• Inimigos se movendo corretamente
• Defensores atacando inimigos
• Vida do inimigo diminuindo
• Ouro aumentando após inimigos serem derrotados
• Vidas diminuindo quando inimigos alcançam o castelo
• Ondas ficando mais difíceis
• Melhorando defensores
• Pausar e reiniciar o jogo
• Vencer após a onda 10
• Perder quando as vidas chegam a 0
• Responsividade no mobile