Vibe Coding · 강의

좋은 빌드 프롬프트의 구성

목표, 맥락, 제약 조건과 예시를 알아봅니다.

좋은 빌드 프롬프트의 구성은(는) CoddyKit의 무료 Vibe Coding 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vibe Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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.

자주 묻는 질문

“좋은 빌드 프롬프트의 구성” 강의는 무료인가요?

네 — “좋은 빌드 프롬프트의 구성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vibe Coding 강의 전체를 잠금 해제할 수 있습니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

“좋은 빌드 프롬프트의 구성”에서 뭘 배우나요?

목표, 맥락, 제약 조건과 예시를 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vibe Coding을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vibe Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“좋은 빌드 프롬프트의 구성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vibe Coding 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vibe Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vibe Coding(으)로 돌아가기