Você não deveria usar o ChatGPT para gerar código... Use essa outra IA...
Subi pra Nuvem13 min read
O ChatGPT é uma das ferramentas de IA mais populares para gerar código, mas será que ele é realmente a melhor opção? 🤔
Decidi testar três modelos de IA — ChatGPT-4o, Deepseek R1 e Claude Sonnet 3.7 — pedindo que cada um gerasse um card de previsão do tempo usando HTML, CSS e JavaScript.
O resultado? O ChatGPT atendeu ao pedido, mas entregou um código básico. Enquanto isso, outra IA surpreendeu com um design muito mais bonito e funcional:
A seguir, vamos analisar os resultados de cada ferramenta e ver qual realmente se destacou. Mas, antes de revelarmos qual ferramenta fez o melhor trabalho, confira abaixo o prompt que foi utilizado:
Quero o código de um card animado que mostra o tempo na cidade de São Paulo. O card precisa ser temático com o tempo atual na cidade.
Você deve retornar o código somente usando JS, HTML e CSS, sem nenhuma outra biblioteca externa ou algo do tipo.
Você deve consultar a API de Forescast da OpenMeteo para obter o clima atual e a temperatura e também a API de Geolocalização para obter as coordenadas da cidade de São Paulo.
---
Contexto:
Estou criando um aplicativo em HTML, CSS e JS para mostrar a previsão do tempo consultando a previsão atual na API de Forescast da OpenMeteo.
Preciso desse card para mostrar de forma intuitiva o clima atual.
Agora, vamos analisar os resultados gerados por cada uma das ferramentas que foram testadas.
ChatGPT 4o
Começando pelo ChatGPT, que atendeu ao pedido, mas de forma bastante básica. Ele gerou um card funcional, porém estático e sem nenhum efeito visual especial. A estrutura do código estava correta, mas não havia diferenciação no design, tornando o resultado simples e sem grande impacto.
Código gerado pelo GPT 4o:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima em São Paulo</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.weather-card {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
width: 300px;
animation: fadeIn 1s ease-in-out;
}
.weather-icon {
font-size: 48px;
margin-bottom: 10px;
}
.temperature {
font-size: 36px;
font-weight: bold;
margin-bottom: 5px;
}
.description {
font-size: 18px;
color: #666666;
margin-bottom: 20px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="weather-card">
<div class="weather-icon" id="weather-icon">☀️</div>
<div class="temperature" id="temperature">--°C</div>
<div class="description" id="description">Carregando...</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const weatherIcon = document.getElementById('weather-icon');
const temperature = document.getElementById('temperature');
const description = document.getElementById('description');
// Coordenadas de São Paulo
const latitude = -23.5505;
const longitude = -46.6333;
// URL da API da Open-Meteo para obter o clima atual
const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`;
// Função para mapear códigos de clima para emojis
function getWeatherEmoji(code) {
if (code >= 0 && code <= 3) return '☀️'; // Céu limpo a parcialmente nublado
if (code >= 45 && code <= 48) return '🌫️'; // Nevoeiro
if (code >= 51 && code <= 67) return '🌧️'; // Chuvisco
if (code >= 71 && code <= 77) return '❄️'; // Neve
if (code >= 80 && code <= 82) return '🌦️'; // Pancadas de chuva
if (code >= 95 && code <= 99) return '⛈️'; // Tempestade
return '❓'; // Desconhecido
}
// Função para obter a descrição do clima com base no código
function getWeatherDescription(code) {
const descriptions = {
0: 'Céu limpo',
1: 'Principalmente limpo',
2: 'Parcialmente nublado',
3: 'Nublado',
45: 'Nevoeiro',
48: 'Nevoeiro com geada',
51: 'Chuvisco leve',
53: 'Chuvisco moderado',
55: 'Chuvisco intenso',
56: 'Chuvisco congelante leve',
57: 'Chuvisco congelante intenso',
61: 'Chuva leve',
63: 'Chuva moderada',
65: 'Chuva intensa',
66: 'Chuva congelante leve',
67: 'Chuva congelante intensa',
71: 'Neve leve',
73: 'Neve moderada',
75: 'Neve intensa',
77: 'Grãos de neve',
80: 'Pancadas de chuva leve',
81: 'Pancadas de chuva moderada',
82: 'Pancadas de chuva violenta',
85: 'Pancadas de neve leve',
86: 'Pancadas de neve intensa',
95: 'Tempestade leve',
96: 'Tempestade com granizo leve',
99: 'Tempestade com granizo intenso'
};
return descriptions[code] || 'Condição desconhecida';
}
// Função para atualizar o card com os dados do clima
function updateWeatherCard(data) {
const weatherCode = data.current_weather.weathercode;
const temp = data.current_weather.temperature;
weatherIcon.textContent = getWeatherEmoji(weatherCode);
temperature.textContent = `${temp}°C`;
description.textContent = getWeatherDescription(weatherCode);
}
// Requisição para obter os dados do clima
fetch(apiUrl)
.then(response => response.json())
.then(data => {
updateWeatherCard(data);
})
.catch(error => {
console.error('Erro ao obter os dados do clima:', error);
description.textContent = 'Não foi possível carregar os dados do clima.';
});
});
</script>
</body>
</html>
Veredito: Atendeu ao pedido, mas gerou uma interface muito simples.
Deepseek R1
A IA Chinesa melhorou um pouco o resultado. O card gerado era mais bonito e contava com uma leve animação (mexendo o card pra cima e pra baixo), tornando a experiência visual mais interessante. Além disso, o plano de fundo em degradê deu um ar de sofisticação.
Código gerado pelo Deepseek R1:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima em São Paulo</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #6a11cb, #2575fc);
font-family: 'Arial', sans-serif;
color: white;
}
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 300px;
text-align: center;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.weather-icon {
font-size: 60px;
margin-bottom: 15px;
}
.location {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.temperature {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}
.description {
font-size: 18px;
font-style: italic;
}
</style>
</head>
<body>
<div class="card">
<div class="weather-icon"></div>
<div class="location">São Paulo, SP</div>
<div class="temperature">--°C</div>
<div class="description">--</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const apiUrl = 'https://api.open-meteo.com/v1/forecast';
const latitude = -23.5505; // Latitude de São Paulo
const longitude = -46.6333; // Longitude de São Paulo
fetch(`${apiUrl}?latitude=${latitude}&longitude=${longitude}¤t_weather=true`)
.then(response => response.json())
.then(data => {
const weather = data.current_weather;
const temperature = weather.temperature;
const weatherCode = weather.weathercode;
const weatherIcon = document.querySelector('.weather-icon');
const temperatureElement = document.querySelector('.temperature');
const descriptionElement = document.querySelector('.description');
temperatureElement.textContent = `${temperature}°C`;
descriptionElement.textContent = getWeatherDescription(weatherCode);
weatherIcon.textContent = getWeatherIcon(weatherCode);
})
.catch(error => {
console.error('Erro ao buscar dados do clima:', error);
});
});
function getWeatherDescription(weatherCode) {
const weatherDescriptions = {
0: 'Céu limpo',
1: 'Principalmente limpo',
2: 'Parcialmente nublado',
3: 'Nublado',
45: 'Nevoeiro',
48: 'Nevoeiro com geada',
51: 'Chuvisco leve',
53: 'Chuvisco moderado',
55: 'Chuvisco denso',
56: 'Chuvisco congelante leve',
57: 'Chuvisco congelante denso',
61: 'Chuva leve',
63: 'Chuva moderada',
65: 'Chuva forte',
66: 'Chuva congelante leve',
67: 'Chuva congelante forte',
71: 'Queda de neve leve',
73: 'Queda de neve moderada',
75: 'Queda de neve forte',
77: 'Grãos de neve',
80: 'Pancadas de chuva leves',
81: 'Pancadas de chuva moderadas',
82: 'Pancadas de chuva violentas',
85: 'Pancadas de neve leves',
86: 'Pancadas de neve fortes',
95: 'Trovoada',
96: 'Trovoada com chuva leve',
99: 'Trovoada com chuva forte'
};
return weatherDescriptions[weatherCode] || 'Condição desconhecida';
}
function getWeatherIcon(weatherCode) {
const weatherIcons = {
0: '☀️',
1: '🌤',
2: '⛅',
3: '☁️',
45: '🌫',
48: '🌫',
51: '🌧',
53: '🌧',
55: '🌧',
56: '🌧',
57: '🌧',
61: '🌧',
63: '🌧',
65: '🌧',
66: '🌧',
67: '🌧',
71: '🌨',
73: '🌨',
75: '🌨',
77: '🌨',
80: '🌦',
81: '🌦',
82: '🌧',
85: '🌨',
86: '🌨',
95: '⛈',
96: '⛈',
99: '⛈'
};
return weatherIcons[weatherCode] || '❓';
}
</script>
</body>
</html>
Veredito: Um avanço em relação ao ChatGPT, com um design mais refinado e uma leve animação.
Claude Sonnet 3.7
Agora sim, temos o verdadeiro campeão! O Claude Sonnet não só gerou um card muito mais bonito, como também adicionou animações mais fluídas e mais informações úteis, como umidade, sensação térmica e velocidade do vento. O resultado final ficou muito mais profissional e atrativo, apesar do código gerado ter sido bem maior.
Código gerado pelo Claude Sonnet 3.7
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima em São Paulo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #4b6cb7, #182848);
}
.card {
width: 300px;
padding: 25px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
color: white;
overflow: hidden;
position: relative;
transition: all 0.5s ease;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
pointer-events: none;
transform: translateX(-100%);
}
.card:hover::before {
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.card-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.5rem;
}
.card-body {
display: flex;
flex-direction: column;
align-items: center;
}
.weather-icon {
font-size: 80px;
margin-bottom: 15px;
animation: float 3s ease-in-out infinite;
}
.temperature {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.weather-info {
text-align: center;
margin-bottom: 15px;
}
.weather-description {
font-size: 1.2rem;
margin-bottom: 10px;
}
.details {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 20px;
}
.detail {
display: flex;
flex-direction: column;
align-items: center;
}
.detail-icon {
font-size: 20px;
margin-bottom: 5px;
}
.loading {
text-align: center;
font-size: 1.2rem;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
/* Temas baseados no clima */
.clear-day {
background: linear-gradient(to bottom right, #4facfe, #00f2fe);
}
.clear-night {
background: linear-gradient(to bottom right, #141e30, #243b55);
}
.cloudy, .partly-cloudy-day, .partly-cloudy-night {
background: linear-gradient(to bottom right, #606c88, #3f4c6b);
}
.rain, .showers {
background: linear-gradient(to bottom right, #373b44, #4286f4);
}
.thunderstorm {
background: linear-gradient(to bottom right, #283048, #859398);
}
.snow {
background: linear-gradient(to bottom right, #e6dada, #274046);
}
.fog, .mist {
background: linear-gradient(to bottom right, #757f9a, #d7dde8);
}
/* Animações para elementos climáticos */
.rain-container, .snow-container, .cloud-container, .sun-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.rain-drop {
position: absolute;
width: 2px;
height: 10px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 0 0 5px 5px;
animation: rain 1s linear infinite;
}
.snowflake {
position: absolute;
color: white;
font-size: 16px;
animation: snow 5s linear infinite;
}
.cloud {
position: absolute;
color: rgba(255, 255, 255, 0.8);
font-size: 40px;
animation: clouds 15s linear infinite;
}
.sun {
position: absolute;
color: #FFD700;
font-size: 35px;
animation: sun-rotate 20s linear infinite;
}
@keyframes rain {
0% {
transform: translateY(0) translateX(0);
opacity: 1;
}
100% {
transform: translateY(100px) translateX(20px);
opacity: 0;
}
}
@keyframes snow {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
100% {
transform: translateY(100px) rotate(360deg);
opacity: 0;
}
}
@keyframes clouds {
0% {
transform: translateX(-100%);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes sun-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Ícones de tempo */
.wi {
display: inline-block;
font-family: 'WeatherIcons';
}
/* Responsividade */
@media screen and (max-width: 400px) {
.card {
width: 90%;
padding: 15px;
}
.weather-icon {
font-size: 60px;
}
.temperature {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="card" id="weather-card">
<div class="loading">Carregando informações do clima...</div>
</div>
<script>
// Coordenadas de São Paulo
const SAO_PAULO_LAT = -23.5505;
const SAO_PAULO_LON = -46.6333;
// Códigos WMO para condições climáticas
const weatherCodes = {
0: { description: "Céu limpo", icon: "☀️", class: "clear-day", animation: "sun" },
1: { description: "Predominantemente limpo", icon: "🌤️", class: "clear-day", animation: "sun" },
2: { description: "Parcialmente nublado", icon: "⛅", class: "partly-cloudy-day", animation: "cloud" },
3: { description: "Nublado", icon: "☁️", class: "cloudy", animation: "cloud" },
45: { description: "Nevoeiro", icon: "🌫️", class: "fog", animation: "cloud" },
48: { description: "Nevoeiro com geada", icon: "🌫️", class: "fog", animation: "cloud" },
51: { description: "Garoa leve", icon: "🌦️", class: "showers", animation: "rain" },
53: { description: "Garoa moderada", icon: "🌦️", class: "showers", animation: "rain" },
55: { description: "Garoa intensa", icon: "🌧️", class: "rain", animation: "rain" },
56: { description: "Garoa congelante leve", icon: "🌨️", class: "snow", animation: "snow" },
57: { description: "Garoa congelante intensa", icon: "🌨️", class: "snow", animation: "snow" },
61: { description: "Chuva leve", icon: "🌦️", class: "showers", animation: "rain" },
63: { description: "Chuva moderada", icon: "🌧️", class: "rain", animation: "rain" },
65: { description: "Chuva intensa", icon: "🌧️", class: "rain", animation: "rain" },
66: { description: "Chuva congelante leve", icon: "🌨️", class: "snow", animation: "snow" },
67: { description: "Chuva congelante intensa", icon: "🌨️", class: "snow", animation: "snow" },
71: { description: "Neve leve", icon: "🌨️", class: "snow", animation: "snow" },
73: { description: "Neve moderada", icon: "🌨️", class: "snow", animation: "snow" },
75: { description: "Neve intensa", icon: "❄️", class: "snow", animation: "snow" },
77: { description: "Grãos de neve", icon: "❄️", class: "snow", animation: "snow" },
80: { description: "Pancadas de chuva leves", icon: "🌦️", class: "showers", animation: "rain" },
81: { description: "Pancadas de chuva moderadas", icon: "🌧️", class: "rain", animation: "rain" },
82: { description: "Pancadas de chuva violentas", icon: "🌧️", class: "rain", animation: "rain" },
85: { description: "Pancadas de neve leves", icon: "🌨️", class: "snow", animation: "snow" },
86: { description: "Pancadas de neve fortes", icon: "❄️", class: "snow", animation: "snow" },
95: { description: "Tempestade", icon: "⛈️", class: "thunderstorm", animation: "rain" },
96: { description: "Tempestade com granizo leve", icon: "⛈️", class: "thunderstorm", animation: "rain" },
99: { description: "Tempestade com granizo forte", icon: "⛈️", class: "thunderstorm", animation: "rain" }
};
// Função para formatar data
function formatDate(date) {
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
return date.toLocaleDateString('pt-BR', options);
}
// Criar elementos de animação baseados no clima
function createWeatherAnimation(animationType) {
const container = document.createElement('div');
container.className = `${animationType}-container`;
switch(animationType) {
case 'rain':
for (let i = 0; i < 20; i++) {
const drop = document.createElement('div');
drop.className = 'rain-drop';
drop.style.left = `${Math.random() * 100}%`;
drop.style.animationDuration = `${0.7 + Math.random() * 0.3}s`;
drop.style.animationDelay = `${Math.random() * 2}s`;
container.appendChild(drop);
}
break;
case 'snow':
for (let i = 0; i < 15; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = '❄';
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.animationDuration = `${5 + Math.random() * 5}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(snowflake);
}
break;
case 'cloud':
for (let i = 0; i < 3; i++) {
const cloud = document.createElement('div');
cloud.className = 'cloud';
cloud.textContent = '☁️';
cloud.style.top = `${10 + Math.random() * 40}%`;
cloud.style.animationDuration = `${15 + Math.random() * 15}s`;
cloud.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(cloud);
}
break;
case 'sun':
const sun = document.createElement('div');
sun.className = 'sun';
sun.textContent = '☀️';
sun.style.top = '10%';
sun.style.right = '10%';
container.appendChild(sun);
break;
}
return container;
}
// Função para buscar dados do clima na API OpenMeteo
async function fetchWeatherData() {
try {
const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${SAO_PAULO_LAT}&longitude=${SAO_PAULO_LON}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,weather_code,wind_speed_10m&timezone=America%2FSao_Paulo`);
if (!response.ok) {
throw new Error('Falha ao obter dados meteorológicos');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Erro ao buscar dados meteorológicos:', error);
throw error;
}
}
// Função principal para renderizar o card
async function renderWeatherCard() {
const cardElement = document.getElementById('weather-card');
try {
// Buscar dados do clima
const weatherData = await fetchWeatherData();
const current = weatherData.current;
// Obter informações do código climático
const weatherCode = current.weather_code;
const weatherInfo = weatherCodes[weatherCode] || {
description: "Indisponível",
icon: "❓",
class: "cloudy",
animation: "cloud"
};
// Aplicar classe temática ao card
cardElement.className = `card ${weatherInfo.class}`;
// Adicionar animação baseada no clima
const animation = createWeatherAnimation(weatherInfo.animation);
cardElement.appendChild(animation);
// Formatar dados
const temp = Math.round(current.temperature_2m);
const humidity = Math.round(current.relative_humidity_2m);
const windSpeed = Math.round(current.wind_speed_10m);
const feelsLike = Math.round(current.apparent_temperature);
const precipitation = current.precipitation;
// Criar conteúdo do card
const now = new Date();
const formattedDate = formatDate(now);
// Renderizar HTML no card
cardElement.innerHTML = `
<h2 class="card-title">Clima em São Paulo</h2>
<div class="card-body">
<div class="weather-icon">${weatherInfo.icon}</div>
<div class="temperature">${temp}°C</div>
<div class="weather-info">
<div class="weather-description">${weatherInfo.description}</div>
<div class="date">${formattedDate}</div>
</div>
<div class="details">
<div class="detail">
<div class="detail-icon">💧</div>
<div>${humidity}%</div>
<div>Umidade</div>
</div>
<div class="detail">
<div class="detail-icon">💨</div>
<div>${windSpeed} km/h</div>
<div>Vento</div>
</div>
<div class="detail">
<div class="detail-icon">🌡️</div>
<div>${feelsLike}°C</div>
<div>Sensação</div>
</div>
</div>
</div>
`;
// Adicionar animação novamente (já que innerHTML a remove)
cardElement.appendChild(animation);
} catch (error) {
cardElement.innerHTML = `
<div class="error">
<h2>Erro ao carregar dados</h2>
<p>Não foi possível obter informações sobre o clima em São Paulo.</p>
<button onclick="renderWeatherCard()">Tentar novamente</button>
</div>
`;
}
}
// Iniciar ao carregar a página
document.addEventListener('DOMContentLoaded', renderWeatherCard);
</script>
</body>
</html>
Veredito: Disparado o melhor resultado! Design bonito, animações fluidas e mais informações.
Conclusão
Se você usa o ChatGPT para gerar código, pode estar perdendo soluções muito melhores.
Enquanto o GPT-4o criou um card estático e sem graça, o Claude Sonnet 3.7 gerou um design bonito, animado e com mais informações úteis.
Se você quer código mais eficiente, bonito e funcional, o Claude Sonnet é a melhor escolha!
E aí, já testou alguma dessas ferramentas? Conta nos comentários qual foi sua experiência!
0
Subscribe to my newsletter
Read articles from Subi pra Nuvem directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by