การขอให้เปลี่ยนแปลง
ปรับสี ข้อความ และเค้าโครงด้วยการสนทนา
การขอให้เปลี่ยนแปลง เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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." -> doneQuick 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 ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การขอให้เปลี่ยนแปลง”
ปรับสี ข้อความ และเค้าโครงด้วยการสนทนา คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การขอให้เปลี่ยนแปลง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม
ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การบรรยายแนวคิดของคุณ
- การสร้างเวอร์ชันแรก
- การขอให้เปลี่ยนแปลง
- การดูตัวอย่างและเรียกใช้