Vibe Coding · 课时

明确具体

模糊的提示词只能产生模糊的代码，请具体说明

明确具体 是 CoddyKit 上的免费 Vibe Coding 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vibe Coding 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vibe Coding 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Vague In, Vague Out

AI builders like Cursor, Bolt and v0 are powerful, but they can't read your mind. When your prompt is fuzzy, the AI guesses — and its guess is rarely the app you pictured.

The fix is the single most valuable prompting skill: being specific. This lesson shows you how to turn a wish into a precise instruction.

Specific About What, Exactly?

You can add precision in four directions:

What — the exact feature or element
How it looks — colors, layout, size
How it behaves — what happens on click, on error
How much — counts, limits, ranges

Every detail you pin down is one fewer thing the AI gets wrong.

Specify the 'What'

Name the exact thing you want. 'A button' could be anything. 'A submit button labeled Save that appears under the form' leaves no doubt.

Vague:   "Add a button."

Specific: "Add a green 'Save Note' button below the textarea.
           When clicked, it adds the note to the list above."

Specify the Look

Design words like 'nice' or 'modern' mean different things to everyone. Give the AI concrete visual targets: colors, spacing, fonts, sizes.

You can even reference a known style — 'like Notion' or 'Apple-clean' — to anchor the vibe.

Vague:   "Make it look good."

Specific: "Use a clean white card on a light-gray background,
           rounded corners, soft shadow, and a single accent
           color of #7c3aed for buttons and links."

Specify the Behavior

Apps do things. Spell out what happens on each action — including the edge cases like empty input or errors. This is where vague prompts fail hardest.

Specific behavior:

"When the user clicks 'Add', take the text from the input,
 add it as a new list item, then clear the input.
 If the input is empty, do nothing and shake the input box."

Specify the Numbers

Numbers remove ambiguity instantly. How many items? What max length? What range? Give the AI real values instead of 'some' or 'a few'.

Here's a tiny function the AI might build from a numeric constraint — you can run it.

const MAX_LENGTH = 280;

function checkPost(text) {
  if (text.length > MAX_LENGTH) {
    return 'Too long by ' + (text.length - MAX_LENGTH) + ' chars';
  }
  return 'OK (' + text.length + '/' + MAX_LENGTH + ')';
}

console.log(checkPost('Hello world!'));
console.log(checkPost('x'.repeat(300)));

Replace Adjectives with Details

Watch out for slippery adjectives: fast, simple, clean, modern, professional, responsive, secure. Each one hides a decision you should make.

Whenever you write one, ask: 'what would that actually mean here?' — and write that instead.

Instead of: "Make it responsive."
Write:      "Stack the columns vertically on screens under 600px."

Instead of: "Keep it simple."
Write:      "One screen, no menu, three buttons max."

Specificity Beats Length

Being specific doesn't mean writing an essay. A short, precise prompt beats a long, fuzzy one. Pack meaning, not words.

Both prompts below are short — but only one will give you the app you imagined.

Fuzzy & short:  "Build a timer app."

Sharp & short:  "Build a 25-minute countdown timer with Start,
                 Pause and Reset buttons. Show MM:SS. Beep at zero."

Show, Don't Just Tell

When words get clumsy, switch to a concrete example. Paste a sample of the data, a row of a table, or a mini mock of the layout. Examples are the most specific thing you can give.

"Format each contact like this exactly:

   Ada Lovelace — ada@math.org — VIP

Name, then em-dash, email, em-dash, and a tag.
If there's no tag, leave off the last dash."

The Specificity Checklist

Before you hit enter, scan your prompt against this list:

Did I name the exact element/feature?
Did I give concrete colors/sizes if looks matter?
Did I describe what happens on each action and on errors?
Did I replace vague adjectives with real details?
Did I include numbers where they apply?

One pass over this list saves you three rounds of back-and-forth.

Don't Over-Specify Either

There's a balance. Pin down what you care about, and let the AI choose the rest. If you dictate every pixel, you slow yourself down and lose the AI's good instincts.

Rule of thumb: be specific about outcomes, flexible about implementation — unless implementation is the point.

Good balance:

"Make a contact form with name, email and message fields,
 and a Send button. Validate that email contains an '@'.
 You choose a tidy, accessible layout."

Quick Check

Which rewrite makes the prompt 'Make the app look modern' more specific and useful?

Recap: Get Concrete

Vague prompts give vague code. To get exactly what you pictured:

Name the exact what
Give concrete looks and numbers
Describe behavior and error cases
Trade vague adjectives for real details
Show an example when words fall short

Next: how to give the AI context about your files and goals so its code fits your project perfectly.

常见问题解答

「明确具体」课时是免费的吗？

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

「明确具体」这节课中我会学到什么？

模糊的提示词只能产生模糊的代码，请具体说明你通过在浏览器中直接运行的动手代码来练习 Vibe Coding，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vibe Coding 需要有经验吗？

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

「明确具体」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vibe Coding