Anatomi Prompt Build yang Baik
Tujuan, konteks, batasan, dan contoh.
Anatomi Prompt Build yang Baik adalah pelajaran Vibe Coding gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vibe Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vibe Coding mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
The Prompt Is the New Code
In vibe coding, your prompt is the most powerful tool you have. You don't memorize syntax — you describe what you want, and tools like Cursor, Claude Code and v0 write the code.
But here's the secret: a great prompt gets great code on the first try. A vague one sends you in circles. This lesson breaks down the anatomy of a build prompt that works.
The Four Ingredients
Every strong build prompt has four parts. Memorize these like a recipe:
- Goal — what you want built
- Context — what already exists (tools, files, style)
- Constraints — rules and limits to respect
- Examples — a sample of the output you imagine
You won't always need all four, but the more you give, the less the AI has to guess.
Ingredient 1: The Goal
The goal is the one thing the AI must accomplish. State it as an action: build, add, fix, refactor.
Compare a weak goal to a strong one. Notice how the second tells the AI exactly what success looks like.
Weak goal:
"Make me a website."
Strong goal:
"Build a single-page landing site for a coffee subscription service, with a hero section, a 3-tier pricing table, and a sign-up form."Ingredient 2: Context
Context tells the AI about your world: what tech you're using, what files exist, who the app is for. Without it, the AI picks defaults that may not match your project.
In Cursor or Claude Code, context can come from open files automatically — but spelling it out still helps.
Build prompt with context:
"I'm building a to-do app using plain HTML, CSS and vanilla
JavaScript (no framework). It's for busy students.
Add a feature to mark tasks as 'urgent' with a red flag icon."Ingredient 3: Constraints
Constraints are your guardrails. They keep the AI from over-building or going off-style. Use them to pin down libraries, file size, browser support, or what NOT to do.
Constraints are how you turn a generic answer into your answer.
Constraints examples:
"Use only vanilla JavaScript — no jQuery, no npm packages."
"Keep it under 100 lines."
"Don't add a backend; store data in localStorage."
"Match the existing blue-and-white color scheme."Ingredient 4: Examples
An example shows the AI the shape of what you want. Even a tiny sample of input/output, or a snippet of your existing style, dramatically improves the result.
Here we give the AI an example of the data format so it builds around it correctly.
"Render a list of products as cards.
Here's the data each product looks like:
{ name: 'Mug', price: 12, inStock: true }
Show the name, a '$' price, and an 'Out of stock'
badge when inStock is false."Putting It All Together
Now stack all four ingredients into one clear prompt. This is what a professional vibe-coder hands to Bolt or Lovable to get a working app fast.
Read it slowly — see the goal, context, constraints and example all in one place.
"Build a daily water-tracker web app. (GOAL)
Use plain HTML/CSS/JS, no frameworks, single file. (CONTEXT + CONSTRAINTS)
It should let me tap a '+1 glass' button up to 8 times and
show progress as a filling bar. Save progress in localStorage
so it survives a refresh. (CONSTRAINTS)
Example look: big number '3 / 8 glasses' centered at the top,
calm blue theme. (EXAMPLE)"A Tiny Result You Can Read
From a prompt like that, the AI might generate a function like this. You don't have to write it — but learning to read it helps you ask for better changes later.
This snippet is self-contained JavaScript, so you can run it and watch the count grow.
let glasses = 0;
const goal = 8;
function addGlass() {
if (glasses < goal) glasses++;
return glasses + ' / ' + goal + ' glasses';
}
console.log(addGlass());
console.log(addGlass());
console.log(addGlass());Order Matters Less Than Clarity
You don't have to write the ingredients in a strict order. The AI reads the whole prompt. What matters is that each ingredient is clear and present.
A handy habit: write the goal first, then add context, constraints and examples as bullet points underneath. Bullets keep the AI from missing a requirement.
Goal: Add a dark-mode toggle to my settings page.
Context: React app, Tailwind CSS, file is Settings.jsx.
Constraints: Remember the choice in localStorage.
Example: A small moon/sun switch in the top-right corner.What Happens When an Ingredient Is Missing
Skip an ingredient and the AI fills the gap with a guess:
- No goal → it asks 'what do you want?' or builds the wrong thing.
- No context → it may pick a framework you don't use.
- No constraints → it over-engineers with extra libraries.
- No example → the layout or format surprises you.
If a result feels off, ask yourself: which ingredient did I forget?
Your Prompt Template
Keep this template handy. Paste it into Cursor, Claude Code or any builder and fill in the blanks. Over time it becomes second nature.
Build / Add / Fix: ____________________ (GOAL)
My setup: ____________________ (CONTEXT)
Rules:
- ____________________ (CONSTRAINTS)
- ____________________
Example of what I want:
____________________ (EXAMPLE)Quick Check
Which prompt ingredient tells the AI about the tech you're already using and what files exist?
Recap: The Anatomy of a Build Prompt
You now know the four ingredients of a prompt that gets great code on the first try:
- Goal — the one thing to build
- Context — your tech, files and audience
- Constraints — rules and limits
- Examples — the shape you imagine
When a result disappoints, find the missing ingredient and add it. Next up: how being truly specific turns vague code into exactly what you pictured.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 25
- Pelajaran
- 100
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Anatomi Prompt Build yang Baik” gratis?
Ya — teks lengkap “Anatomi Prompt Build yang Baik” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vibe Coding, upgrade ke CoddyKit PRO. Kursus Vibe Coding mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Anatomi Prompt Build yang Baik”?
Tujuan, konteks, batasan, dan contoh. Kamu berlatih Vibe Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vibe Coding?
Tidak diperlukan pengalaman sebelumnya. Vibe Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Anatomi Prompt Build yang Baik” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vibe Coding ini?
Ya. Setiap pelajaran Vibe Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Anatomi Prompt Build yang Baik
- Bersikap Spesifik
- Memberikan Konteks kepada Kecerdasan Buatan
- Mengiterasi Prompt