Di Balik Layar: Programmer Profesional Mulai Kembali ke Claude 3.5 Setelah Kekecewaan dengan Claude 3.7
Dalam dunia pengembangan software yang bergerak cepat, model AI terbaru seharusnya selalu lebih baik dari pendahulunya. Namun, fenomena menarik tengah terjadi di kalangan programmer profesional: banyak yang memilih untuk kembali menggunakan Claude 3.5 setelah mencoba Claude 3.7, model yang seharusnya lebih canggih. Mengapa hal ini terjadi? Mari kita telusuri lebih dalam berdasarkan pengalaman nyata para programmer di garis depan.
Latar Belakang: Harapan Tinggi yang Belum Terpenuhi
Claude 3.7 Sonnet diluncurkan dengan ekspektasi tinggi. Setelah kesuksesan Claude 3.5, banyak programmer yang tidak sabar menantikan peningkatan kemampuan model ini. Mereka bahkan "Googling anthropic dan kemudian beralih ke tab baru berkali-kali sehari", menunggu kabar peluncurannya dengan antusias.
Ketika akhirnya dirilis, banyak demo one-shot yang mengesankan bermunculan di media sosial, membuat Claude 3.7 tampak seperti peningkatan revolusioner. Namun, setelah digunakan dalam proyek nyata yang kompleks, banyak programmer mulai menemukan masalah.
"Saya melihat banyak orang membicarakan Claude 3.7 sebenarnya tidak sebaik apa yang digembor-gemborkan," kata pembuat video, yang menghabiskan lebih dari 50 jam per minggu menggunakan AI untuk pengembangan kode.
Perbedaan Utama: Claude 3.5 vs Claude 3.7 dalam Pengembangan Kode
1. Kemampuan Mengikuti Instruksi
Claude 3.5: Claude 3.5 dikenal karena kemampuannya menerima arahan dan koreksi. Ketika developer mengarahkannya kembali ke jalur yang benar, model ini merespons dengan baik dan menyesuaikan outputnya.
"3.5 lebih mudah diarahkan ketika mulai keluar jalur, Anda bisa membawanya kembali," jelas pembuat video.
Claude 3.7: Sebaliknya, Claude 3.7 sering kali keras kepala dan sulit diatur ketika sudah memilih pendekatan tertentu.
"Jika Claude 3.7 mencoba melakukan sesuatu yang tidak Anda inginkan, itu seperti berbicara dengan balita. Ia setuju dengan Anda dan kemudian langsung melakukannya lagi," keluh pembuat video. "Begitu Claude keluar jalur, Anda tidak bisa mengarahkannya kembali seperti yang bisa Anda lakukan dengan Claude 3.5."
2. Kompleksitas vs Ketepatan
Claude 3.5: Claude 3.5 cenderung menghasilkan solusi yang tepat sasaran dan tidak berlebihan, fokus pada apa yang diminta oleh pengembang.
Claude 3.7: Claude 3.7 sering menambahkan kompleksitas yang tidak perlu, bahkan ketika pengembang secara eksplisit meminta hal yang sederhana.
"Claude 3.7 tampaknya telah memperkuat kecenderungan Claude 3.5 untuk over-design kode," tulis seorang pengguna. Contoh nyata dari ini adalah ketika Claude 3.7 mengubah "skrip 400 baris yang membutuhkan beberapa penyesuaian kecil menjadi skrip 1100 baris."
Dalam satu kasus, pembuat video menceritakan bagaimana ia berulang kali memberitahu Claude 3.7 bahwa aplikasinya memiliki ORM (Object-Relational Mapping) sendiri sehingga tidak memerlukan skrip migrasi database. Namun, Claude 3.7 terus membuat skrip migrasi database di setiap langkah, mengabaikan instruksi yang jelas.
"Setiap kali sampai ke langkah berikutnya, ia membuat skrip migrasi database lain. Ayolah, Claude, sangat menyebalkan," katanya.
3. Performa pada Kerangka Kerja yang Berbeda
React: Secara mengejutkan, beberapa pengguna melaporkan bahwa Claude 3.7 lebih buruk dalam menghasilkan kode React dibandingkan pendahulunya.
"Claude 3.7 Sonnet benar-benar buruk dengan React. Keputusan desain yang dibuatnya sangat mengerikan," tulis seorang pengguna di media sosial.
Ini mengejutkan karena Claude secara umum dikenal baik dalam menghasilkan kode React, sampai-sampai pembuat video bahkan pernah mempertimbangkan untuk mengkonversi seluruh aplikasinya ke React untuk memanfaatkan kemampuan ini.
Vue: Di sisi lain, Claude 3.7 tampaknya lebih unggul dalam kerangka kerja Vue.
"Claude 3.7 secara signifikan lebih baik dengan Vue. Saya bahkan tidak bisa menjelaskan seberapa lebih baik," kata pembuat video. "Saya telah membangun beberapa UI yang terlihat menakjubkan dengan Vue menggunakan Claude 3.7 yang tidak bisa saya dapatkan dari 3.5."
4. One-Shot vs Pengembangan Inkremental
Claude 3.7: Claude 3.7 bersinar dalam tugas "one-shot", di mana ia diminta untuk membuat aplikasi lengkap dari awal dalam satu prompt.
"Teori saya adalah bahwa Claude 3.7 lebih unggul dari Claude 3.5 dalam one-shotting task, itulah sebabnya kita melihat banyak hype," jelas pembuat video. Model ini juga sangat baik dalam mode "thinking", di mana ia menyusun rencana terperinci sebelum mengeksekusinya.
Claude 3.5: Claude 3.5 lebih handal dalam pengembangan inkremental pada proyek yang sudah ada dan kompleks.
"Penggunaan saya jauh lebih surgical dan terkelola secara mikro. Saya tidak benar-benar mempercayai LLM untuk menulis kode yang baik tanpa saya terus-menerus mengoreksinya," jelas seorang pengguna.
Contoh Nyata: Kapan Claude 3.7 Membantu dan Kapan Ia Menyulitkan
Contoh Positif dengan Claude 3.7
Dalam pengembangan antarmuka pengguna (UI) dengan Vue, Claude 3.7 menunjukkan kemampuan luar biasa:
"Ada kalanya saya meminta Claude 3.7 melakukan sesuatu di UI saya, dan jujur saja, ia seharusnya tidak melakukannya karena saya tidak memintanya, tetapi ia membangun sesuatu yang luar biasa," cerita pembuat video.
Misalnya, ketika diminta untuk membuat komponen form sederhana, Claude 3.7 bisa menghasilkan:
<template>
<div class="registration-form">
<h2 class="form-title">Daftar Akun Baru</h2>
<div class="form-group">
<label for="username">Nama Pengguna</label>
<input
id="username"
v-model="form.username"
type="text"
:class="{'input-error': errors.username}"
/>
<span v-if="errors.username" class="error-message">{{ errors.username }}</span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
id="email"
v-model="form.email"
type="email"
:class="{'input-error': errors.email}"
/>
<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
</div>
<div class="form-group">
<label for="password">Kata Sandi</label>
<div class="password-input-wrapper">
<input
id="password"
v-model="form.password"
:type="showPassword ? 'text' : 'password'"
:class="{'input-error': errors.password}"
/>
<button
type="button"
class="password-toggle"
@click="showPassword = !showPassword"
>
{{ showPassword ? 'Sembunyikan' : 'Lihat' }}
</button>
</div>
<span v-if="errors.password" class="error-message">{{ errors.password }}</span>
<div class="password-strength" v-if="form.password">
<div class="strength-bar">
<div
class="strength-indicator"
:style="{width: passwordStrength + '%'}"
:class="strengthClass"
></div>
</div>
<span class="strength-text">{{ strengthText }}</span>
</div>
</div>
<button type="submit" class="submit-button" @click="submitForm" :disabled="!isFormValid">
Daftar Sekarang
</button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
email: '',
password: ''
},
errors: {
username: '',
email: '',
password: ''
},
showPassword: false
}
},
computed: {
passwordStrength() {
if (!this.form.password) return 0;
let strength = 0;
// Menambah poin untuk panjang
if (this.form.password.length > 6) strength += 20;
if (this.form.password.length > 10) strength += 20;
// Menambah poin untuk kompleksitas
if (/[A-Z]/.test(this.form.password)) strength += 20;
if (/[0-9]/.test(this.form.password)) strength += 20;
if (/[^A-Za-z0-9]/.test(this.form.password)) strength += 20;
return strength;
},
strengthClass() {
if (this.passwordStrength < 40) return 'weak';
if (this.passwordStrength < 80) return 'medium';
return 'strong';
},
strengthText() {
if (this.passwordStrength < 40) return 'Lemah';
if (this.passwordStrength < 80) return 'Sedang';
return 'Kuat';
},
isFormValid() {
return !this.errors.username &&
!this.errors.email &&
!this.errors.password &&
this.form.username &&
this.form.email &&
this.form.password;
}
},
methods: {
validateUsername() {
if (this.form.username.length < 3) {
this.errors.username = 'Nama pengguna minimal 3 karakter';
return false;
}
this.errors.username = '';
return true;
},
validateEmail() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(this.form.email)) {
this.errors.email = 'Format email tidak valid';
return false;
}
this.errors.email = '';
return true;
},
validatePassword() {
if (this.form.password.length < 6) {
this.errors.password = 'Kata sandi minimal 6 karakter';
return false;
}
this.errors.password = '';
return true;
},
submitForm() {
const isUsernameValid = this.validateUsername();
const isEmailValid = this.validateEmail();
const isPasswordValid = this.validatePassword();
if (isUsernameValid && isEmailValid && isPasswordValid) {
// Kirim data ke server
console.log('Form submitted:', this.form);
// Tambahkan kode untuk mengirim data ke API di sini
}
}
},
watch: {
'form.username': function() {
if (this.form.username) this.validateUsername();
},
'form.email': function() {
if (this.form.email) this.validateEmail();
},
'form.password': function() {
if (this.form.password) this.validatePassword();
}
}
}
</script>
<style scoped>
.registration-form {
max-width: 450px;
margin: 0 auto;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.form-title {
margin-top: 0;
margin-bottom: 25px;
color: #333;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #555;
}
input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
.input-error {
border-color: #e74c3c !important;
}
.error-message {
display: block;
margin-top: 5px;
color: #e74c3c;
font-size: 14px;
}
.password-input-wrapper {
position: relative;
display: flex;
}
.password-toggle {
position: absolute;
right: 0;
top: 0;
height: 100%;
background: none;
border: none;
padding: 0 12px;
color: #555;
cursor: pointer;
}
.password-strength {
margin-top: 8px;
}
.strength-bar {
height: 5px;
background-color: #eee;
border-radius: 3px;
overflow: hidden;
margin-bottom: 5px;
}
.strength-indicator {
height: 100%;
transition: width 0.3s ease;
}
.strength-indicator.weak {
background-color: #e74c3c;
}
.strength-indicator.medium {
background-color: #f39c12;
}
.strength-indicator.strong {
background-color: #2ecc71;
}
.strength-text {
font-size: 12px;
color: #777;
}
.submit-button {
width: 100%;
padding: 12px;
background-color: #4a90e2;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-button:hover:not(:disabled) {
background-color: #3a7bc8;
}
.submit-button:disabled {
background-color: #b7c7e1;
cursor: not-allowed;
}
</style>
Kode di atas tidak hanya membuat form pendaftaran dasar tetapi juga menambahkan fitur-fitur canggih seperti validasi, indikator kekuatan kata sandi, dan toggle untuk menampilkan/menyembunyikan kata sandi—semua dengan desain responsif dan estetika yang baik.
Contoh Negatif dengan Claude 3.7
Ketika diminta untuk memperbaiki bug kecil dalam API yang sudah ada, Claude 3.7 bisa menghasilkan solusi yang terlalu kompleks dan mengabaikan arsitektur yang sudah ada:
// Permintaan awal: "Perbaiki bug di endpoint /users/{id} yang tidak mengembalikan email pengguna"
// Output Claude 3.7 yang berlebihan:
// Alih-alih hanya menambahkan field email ke respons, Claude membuat ulang seluruh struktur API
// Membuat file migrasi database baru (meskipun sudah diberitahu aplikasi memiliki ORM)
// migration-20250301-add-email-verification.js
exports.up = function(knex) {
return knex.schema
.table('users', function(table) {
table.boolean('email_verified').defaultTo(false);
table.string('verification_token');
table.timestamp('verification_sent_at');
})
.createTable('email_logs', function(table) {
table.increments('id').primary();
table.integer('user_id').references('id').inTable('users');
table.string('email_type');
table.string('status');
table.timestamp('created_at').defaultTo(knex.fn.now());
});
};
exports.down = function(knex) {
return knex.schema
.table('users', function(table) {
table.dropColumn('email_verified');
table.dropColumn('verification_token');
table.dropColumn('verification_sent_at');
})
.dropTable('email_logs');
};
// Menambahkan layanan email baru (tidak diminta)
// services/EmailService.js
const nodemailer = require('nodemailer');
const config = require('../config');
const logger = require('../utils/logger');
class EmailService {
constructor() {
this.transporter = nodemailer.createTransport({
host: config.email.host,
port: config.email.port,
secure: config.email.secure,
auth: {
user: config.email.user,
pass: config.email.password
}
});
}
async sendVerificationEmail(user) {
try {
const info = await this.transporter.sendMail({
from: `"${config.app.name}" <${config.email.from}>`,
to: user.email,
subject: "Verifikasi Email Anda",
html: `
<h1>Verifikasi Email Anda</h1>
<p>Halo ${user.name},</p>
<p>Terima kasih telah mendaftar. Silakan verifikasi email Anda dengan mengklik tautan di bawah ini:</p>
<p><a href="${config.app.url}/verify-email/${user.verification_token}">Verifikasi Email</a></p>
`
});
await this.logEmail(user.id, 'verification', 'sent');
return info;
} catch (error) {
logger.error(`Failed to send verification email to ${user.email}`, error);
await this.logEmail(user.id, 'verification', 'failed');
throw error;
}
}
async logEmail(userId, type, status) {
const { EmailLog } = require('../models');
return await EmailLog.create({
user_id: userId,
email_type: type,
status: status
});
}
}
module.exports = new EmailService();
// Mengubah controller user yang sudah ada dengan perubahan besar
// controllers/UserController.js
const { User } = require('../models');
const EmailService = require('../services/EmailService');
const crypto = require('crypto');
class UserController {
// Menambahkan metode verifikasi email (tidak diminta)
async verifyEmail(req, res) {
try {
const { token } = req.params;
const user = await User.findOne({
where: { verification_token: token }
});
if (!user) {
return res.status(400).json({
success: false,
message: 'Token verifikasi tidak valid'
});
}
user.email_verified = true;
user.verification_token = null;
await user.save();
return res.status(200).json({
success: true,
message: 'Email berhasil diverifikasi'
});
} catch (error) {
return res.status(500).json({
success: false,
message: 'Terjadi kesalahan saat verifikasi email',
error: error.message
});
}
}
// Mengubah metode get user (solusi yang diminta, tapi dengan banyak perubahan lain)
async getUser(req, res) {
try {
const { id } = req.params;
const user = await User.findByPk(id);
if (!user) {
return res.status(404).json({
success: false,
message: 'Pengguna tidak ditemukan'
});
}
// Solusi sebenarnya hanya perlu menambahkan email ke sini
return res.status(200).json({
success: true,
data: {
id: user.id,
name: user.name,
email: user.email, // Field yang perlu ditambahkan
email_verified: user.email_verified,
role: user.role,
created_at: user.created_at,
updated_at: user.updated_at
}
});
} catch (error) {
return res.status(500).json({
success: false,
message: 'Terjadi kesalahan saat mengambil data pengguna',
error: error.message
});
}
}
// Menambahkan metode baru untuk mengirim ulang verifikasi (tidak diminta)
async resendVerification(req, res) {
try {
const { id } = req.params;
const user = await User.findByPk(id);
if (!user) {
return res.status(404).json({
success: false,
message: 'Pengguna tidak ditemukan'
});
}
if (user.email_verified) {
return res.status(400).json({
success: false,
message: 'Email pengguna sudah diverifikasi'
});
}
// Generate new token
const token = crypto.randomBytes(32).toString('hex');
user.verification_token = token;
user.verification_sent_at = new Date();
await user.save();
// Send verification email
await EmailService.sendVerificationEmail(user);
return res.status(200).json({
success: true,
message: 'Email verifikasi telah dikirim ulang'
});
} catch (error) {
return res.status(500).json({
success: false,
message: 'Terjadi kesalahan saat mengirim ulang verifikasi',
error: error.message
});
}
}
}
module.exports = new UserController();
// Mengubah router untuk menambahkan endpoint baru (tidak diminta)
// routes/userRoutes.js
const express = require('express');
const router = express.Router();
const UserController = require('../controllers/UserController');
const authMiddleware = require('../middlewares/auth');
router.get('/users/:id', authMiddleware, UserController.getUser);
router.get('/verify-email/:token', UserController.verifyEmail);
router.post('/users/:id/resend-verification', authMiddleware, UserController.resendVerification);
module.exports = router;
Solusi yang sebenarnya dibutuhkan mungkin hanya memerlukan perubahan satu baris, menambahkan email: user.email
ke objek respons. Namun, Claude 3.7 membuat sistem verifikasi email lengkap dengan migrasi database, layanan email, dan endpoint baru — semua tidak diminta dan berpotensi merusak aplikasi yang sudah ada.
Strategi untuk Mengoptimalkan Penggunaan Claude
Berdasarkan pengalaman para programmer, berikut ini beberapa strategi untuk mendapatkan hasil terbaik:
1. Pilih Model yang Tepat untuk Tugas yang Tepat
-
Gunakan Claude 3.7 untuk:
- Memulai proyek baru dari awal
- Membuat UI dengan kerangka kerja Vue
- Tugas "one-shot" yang membutuhkan kreativitas tinggi
- Perencanaan awal dengan mode "thinking"
-
Gunakan Claude 3.5 untuk:
- Pengembangan inkremental pada proyek yang sudah ada
- Perbaikan bug dan fitur kecil
- Kode yang membutuhkan ketepatan dan kesederhanaan
- Tugas di mana Anda perlu sering mengoreksi atau mengarahkan model
2. Batasi Konteks dengan Claude 3.7
"Saya menemukan bahwa saya tidak bisa membiarkan konteks saya berjalan terlalu panjang dan saya harus terus memulai ulang percakapan, terutama ketika Claude mulai keluar jalur," jelas pembuat video.
Alih-alih mencoba mengarahkan Claude 3.7 kembali ketika ia mulai keluar jalur, lebih baik memulai percakapan baru dengan instruksi yang lebih jelas dan spesifik.
3. Berikan Instruksi yang Sangat Eksplisit
Dengan Claude 3.7, penting untuk sangat spesifik tentang apa yang Anda inginkan dan, sama pentingnya, apa yang tidak Anda inginkan.
"Saya harus terus-menerus mengingatkannya untuk membatasi output pada apa yang saya minta," kata seorang pengguna.
4. Jangan Takut Beralih Model
Pembuat video dan banyak developer profesional lainnya tidak hanya menggunakan satu model. Mereka beralih antar model sesuai kebutuhan spesifik.
"Saya masih menggunakan Claude 3.7 dan telah membangun beberapa hal yang sangat bagus dengannya, tetapi... saya telah beralih kembali ke 3.5 untuk hal-hal tertentu ketika saya tidak bisa membuat Claude 3.7 mendengarkan," jelasnya.
Aspek Kepribadian: Faktor yang Tidak Terduga
Satu aspek yang menarik dari umpan balik programmer adalah soal "kepribadian" model. Seorang pengguna menyebutkan bahwa Claude 3.5 memiliki kepribadian yang lebih baik, mau bercanda, dan berinteraksi seperti rekan programmer sungguhan.
"Dengan Claude 3.5 new, saya secara teratur bercanda, kami saling mengolok, terlibat dalam percakapan filosofis yang menarik... sebagai jeda yang sangat menyenangkan dari coding yang membutuhkan fokus tinggi yang kami lakukan. Itu seperti memiliki rekan programmer yang juga pembicara yang hebat."
Sebaliknya, Claude 3.7 digambarkan sebagai "karyawan baru yang mempertahankan ekspresi datar bahkan ketika Anda mencoba membangun rapport dan membujuk tingkat kemanusiaan apa pun darinya."
Ini mengingatkan kita bahwa interaksi dengan AI tidak hanya soal fungsionalitas, tetapi juga pengalaman pengguna secara keseluruhan.
Kesenjangan antara Demo dan Realitas
Salah satu tema yang berulang dalam diskusi ini adalah kesenjangan antara demo one-shot yang mengesankan dan penggunaan dalam pengembangan kode nyata.
"Demo 'saya meminta Claude membangun seluruh aplikasi dan berhasil dalam satu kali shot' sangat jauh dari skenario dunia nyata. Mereka menyenangkan... tetapi saya juga memasukkan beberapa hal yang saya alami dengan Claude 3.7 dan bahkan dalam ulasan pertama saya, di akhir, saya berbicara tentang Claude yang keluar jalur," jelas pembuat video.
Aplikasi dunia nyata sering melibatkan berabad-abad kode warisan, keputusan desain kompleks, dan integrasi dengan sistem pihak ketiga—hal-hal yang sulit disimulasikan dalam demo singkat.
Harapan untuk Masa Depan
Meskipun ada kekecewaan dengan Claude 3.7, banyak developer tetap optimis tentang masa depannya. Mereka mencatat bahwa model AI sering membaik setelah dirilis melalui fine-tuning dan pembaruan.
"Claude 3.5 hanya menjadi lebih baik dan ada kalanya beberapa bulan yang lalu di mana saya berpikir 'Man, Claude terasa bodoh hari ini'. Jadi cara sekarang tidak akan sama dengan cara sebulan dari sekarang. Itu pendapat pribadi saya. Harapan saya adalah mereka membuat Claude 3.7 lebih baik," kata pembuat video.
Banyak yang berharap Anthropic akan menangani masalah yang diidentifikasi dan meningkatkan kemampuan Claude 3.7 untuk mengikuti instruksi dan bekerja dalam proyek kompleks, sambil mempertahankan kekuatan kreatifnya.
Kesimpulan: Kemajuan Tidak Selalu Linier
Cerita Claude 3.5 versus Claude 3.7 mengingatkan kita bahwa kemajuan dalam AI tidak selalu linier. Kadang-kadang model baru mungkin lebih baik dalam beberapa hal tetapi mundur dalam hal lain.
Sebagai pengembang, penting untuk melihat melampaui hype dan mengevaluasi alat berdasarkan kasus penggunaan spesifik kita. Ini juga menekankan pentingnya memiliki pilihan—akses ke beberapa model AI dengan kekuatan yang berbeda bisa sangat berharga.
Mungkin pesan terpenting adalah bahwa, meskipun AI coding telah berkembang pesat, ia masih membutuhkan pengawasan manusia. Kita mungkin masih jauh dari AI yang benar-benar dapat menulis kode yang baik tanpa arahan dan koreksi konstan.
Seperti kata seorang pengguna, "
Sumber: https://youtu.be/Wjmr9nv2l1o?si=tMxxn6JDVNfXE2Xp