Vibe Coding · 课时

优秀构建提示词的结构

目标、上下文、约束和示例

优秀构建提示词的结构 是 CoddyKit 上的免费 Vibe Coding 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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.

常见问题解答

「优秀构建提示词的结构」课时是免费的吗？

是的 — 「优秀构建提示词的结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vibe Coding 课程的其余内容，请升级到 CoddyKit PRO。 Vibe Coding 课程共包含 4 节课。

「优秀构建提示词的结构」这节课中我会学到什么？

目标、上下文、约束和示例你通过在浏览器中直接运行的动手代码来练习 Vibe Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vibe Coding 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vibe Coding 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「优秀构建提示词的结构」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vibe Coding 课中编写并运行代码吗？

能。每节 Vibe Coding 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vibe Coding