0Pricing
Vibe Coding · 课时

请求修改

通过对话调整颜色、文本和布局

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

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

Now You Steer

Your first version exists. It's close, but not quite you. The next vibe-coding skill is asking for changes — refining your app by chatting with the AI instead of editing code by hand.

This is where vibe coding feels like magic: you say "make the button bigger and blue," and it happens. In this lesson you'll learn how to ask for changes so the AI nails them on the first try.

Change One Thing at a Time

The golden rule of tweaking: small, focused requests beat giant ones. If you ask for ten changes in one message, the AI might do six well, two oddly, and forget two.

Ask for one or two related changes, see the result, then continue. It feels slower but it's actually faster, because you never have to untangle a messy multi-change response.

Instead of this:
"Make it blue, add dark mode, change the font, add 3 new buttons, make it responsive, add sounds, and translate it to Spanish."

Do this, step by step:
"Change the main button color to blue."
(then) "Now make the heading font larger and bolder."

Point to What You Mean

The AI can't read your mind about which element you mean. Be specific about the target: name the button, the section, the color, the text.

Compare a vague request to a precise one. Precision is the difference between getting your change and getting a surprise.

Vague:  "Make it look better."
Clear:  "Make the '+1 Glass' button larger, with rounded corners and a blue background."

Vague:  "The text is wrong."
Clear:  "Change the heading from 'Water App' to 'My Daily Water Tracker'."

Three Kinds of Changes

Most tweaks fall into three buckets. Knowing which you're asking for helps you phrase it well:

  • Text changes — wording, labels, headings, messages.
  • Look changes — colors, sizes, spacing, fonts, layout.
  • Behavior changes — what happens when you click, type, or load.

Behavior changes are the trickiest, so describe them as a clear cause-and-effect: "when X happens, do Y."

Text:     "Change the button label to 'Add Glass'."
Look:     "Use a soft green background and white text on the card."
Behavior: "When the counter reaches 8, show a confetti emoji and the message 'Goal reached!'."

Describe Behavior as If-Then

For interactions, the AI loves an if-then shape. It maps directly to code without guessing.

Run this snippet to see the kind of if-then logic the AI would generate from a behavior request like "when the counter hits the goal, celebrate."

function statusFor(count, goal) {
  if (count >= goal) return "Goal reached! Confetti time!";
  if (count >= goal - 2) return "Almost there!";
  return "Keep sipping.";
}

console.log(statusFor(3, 8));
console.log(statusFor(7, 8));
console.log(statusFor(8, 8));

Use 'Keep Everything Else'

Worried a change will wreck the parts you love? Tell the AI to leave them alone. The phrase "keep everything else the same" is a seatbelt for your app.

This focuses the AI on a narrow edit instead of regenerating the whole thing and accidentally changing your layout or losing a feature.

Make only this change: the Reset button should be red instead of gray.
Keep everything else exactly the same — layout, other buttons, and the counter logic.

Show, Don't Just Tell

When words are hard, give the AI an example. Reference a style you like, paste a color code, or describe a familiar app.

Examples shrink ambiguity fast — the AI has something concrete to match instead of interpreting adjectives.

Make the card style feel like a modern iOS settings screen:
rounded corners, subtle shadow, light gray background (#F2F2F7), generous padding.

Use #2563EB as the main button color and white text.

When a Change Goes Wrong

Sometimes a tweak breaks something or looks worse. Two easy moves:

  • Undo: "Undo that last change, go back to how it was before."
  • Redirect: "That made the spacing too wide — make it about half as much."

You're never stuck. Because you change one thing at a time, it's always clear what to undo or adjust.

That last change made the buttons overlap and hard to tap.
Please undo it and instead just increase the gap between the two buttons slightly.
Keep their size and color the same.

Iterate Toward the Vibe

Tweaking isn't just fixing — it's polishing toward your vision. Keep nudging: a little more rounded, a warmer color, a friendlier message. Each small request gets you closer.

This back-and-forth is the heart of vibe coding. You're the director; the AI is the crew. You keep saying "almost — now this" until it feels right.

Round 1: "Make the background a warm cream color."
Round 2: "A touch warmer, more like soft peach."
Round 3: "Perfect. Now make the heading a slightly darker shade so it stands out."

Confirm Before You Pile On

After each change, glance at the result before sending the next request. If you fire off changes blindly without checking, errors stack up and you lose track of what broke what.

Rhythm to build: ask → look → confirm → ask again. Slow is smooth, and smooth is fast.

A Mini Change Session

Here's what a healthy tweaking session looks like end to end — small, specific, and reviewed each step.

You: "Change the title to 'Stay Hydrated'."            -> check, looks good
You: "Make the +1 button blue and a bit bigger."       -> check, good
You: "When I reach 8 glasses, show a celebration message." -> check, works
You: "Keep everything else the same, add a little spacing under the title." -> done

Quick Check

You want the AI to make your Reset button red without disturbing the rest of your working app. What's the best request?

Recap: You Can Steer the AI

You learned to refine your app by chatting. The essentials of asking for changes:

  • One thing at a time — small focused requests win.
  • Point to what you mean — name the element, the color, the text.
  • Phrase behavior as if-then.
  • Add "keep everything else the same" as a seatbelt.
  • Show examples when words are hard, and review after each change.

Last stop: previewing your finished app, running it live, and sharing it with the world!

常见问题解答

「请求修改」课时是免费的吗?

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

「请求修改」这节课中我会学到什么?

通过对话调整颜色、文本和布局 你通过在浏览器中直接运行的动手代码来练习 Vibe Coding,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vibe Coding 需要有经验吗?

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

「请求修改」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 描述您的想法
  2. 生成第一个版本
  3. 请求修改
  4. 预览并运行
← 返回 Vibe Coding