Vibe Coding · บทเรียน

การระบุเทคโนโลยีและรูปแบบ

กำหนดเฟรมเวิร์ก แบบแผน และรูปแบบการจัดวาง

การระบุเทคโนโลยีและรูปแบบ เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vibe Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Pin the Tech, Pin the Style

Ask AI to "build a contact form" and you might get React, or jQuery, or plain HTML — with tabs or spaces, semicolons or not, in a style nothing like your project. The fix is to specify the tech and style up front.

When you pin the framework, conventions and formatting, AI produces code that drops straight into your codebase instead of fighting it.

Name Your Stack Explicitly

The single biggest win: state your tech stack. Don't make the AI guess. Say the language, framework, and any key libraries by name.

"Use React with functional components and hooks."
"Plain HTML, CSS and vanilla JavaScript — no frameworks."
"Node.js with Express for the backend."

One sentence here saves you from rewriting an answer built on the wrong tools.

Build a contact form. Stack: plain HTML and vanilla JavaScript only, no frameworks, no libraries. The form has name, email and message fields and logs the values to the console on submit.

Pin the Version Too

Frameworks change a lot between versions, and AI sometimes mixes old and new patterns. If a version matters, say it.

"React 18 with hooks — no class components."
"Modern JavaScript (ES2020+), use const/let, arrow functions, async/await."
"Tailwind CSS v3 utility classes for styling."

This stops the AI from handing you outdated syntax that won't run in your setup.

Use modern JavaScript (ES2020+): const/let only, arrow functions, async/await, optional chaining where useful. No var, no callbacks-with-nested-callbacks. Write a function that fetches /api/quote and returns the quote text.

Specify Conventions

Beyond the framework, tell the AI your conventions — the small choices that keep a codebase consistent:

Naming: camelCase for variables, PascalCase for components.
File structure: "one component per file."
Comments: "a one-line comment above each function."
Error handling: "return null on failure, never throw."

These are exactly the things that make code feel like yours.

Conventions for this project:
- camelCase for variables and functions
- one-line comment above each function describing what it returns
- return null on failure instead of throwing

Write getInitials(fullName) that returns the uppercase initials, e.g. 'Ada Lovelace' -> 'AL'.

Style in Action

When you pin conventions, the output is predictable and clean. Here's code matching the conventions from the last scene: camelCase, a comment, and a null return on bad input.

Run it to see it handle a normal name and a blank one.

// Returns the uppercase initials of a full name, or null if empty
function getInitials(fullName) {
  if (!fullName) return null;
  return fullName
    .split(' ')
    .filter(Boolean)
    .map((word) => word[0].toUpperCase())
    .join('');
}

console.log(getInitials('Ada Lovelace'));
console.log(getInitials(''));

Match an Existing Codebase

When you join or grow a project, the goal is code that looks like the rest. The easiest way: paste a representative file and say "match this style." The AI infers your conventions from the sample.

In Cursor and Claude Code this is even easier — the AI reads your files directly, so you can say "follow the patterns in this folder."

Here is a typical file from our project. Match its imports, naming, comment style and formatting exactly when writing new code.

[paste an existing component or module here]

Now add a new function deleteItem(id) consistent with this file.

Save Rules in a Config File

Repeating your stack and style every prompt is tedious. AI editors let you set it once:

Cursor: a .cursorrules file.
Claude Code: a CLAUDE.md file.
GitHub Copilot: repository custom instructions.

Put your stack, conventions and never-list there and every prompt inherits them automatically — no copy-paste.

# .cursorrules (or CLAUDE.md)
Stack: React 18 + TypeScript, Tailwind CSS v3.
Conventions:
- Functional components and hooks only.
- One component per file, PascalCase filename.
- Prefer async/await over .then().
Never: use class components, add new dependencies without asking.

Specify Formatting

Formatting matters when you paste AI code next to your own. Tell the AI to match your formatter so you don't get noisy diffs:

"2-space indentation."
"Single quotes, semicolons at line ends."
"Follow Prettier defaults."

Better yet, if your project uses Prettier or ESLint, just say so — the AI knows those conventions and will follow them.

Format all code with 2-space indentation, single quotes, and semicolons (Prettier defaults). Follow our ESLint rules: no unused variables, prefer const. Write a small utility clamp(value, min, max).

Style for App Builders

Prompt-to-app tools also respond to style direction. In v0, Bolt or Lovable, describe the visual stack and feel, not just the logic:

"Use Tailwind, a clean minimal look, rounded corners, lots of whitespace."
"Dark theme, purple accent color, sans-serif font."
"Match the style of Linear / Stripe / Notion."

Naming a familiar product as a style reference is a powerful shortcut.

Build a pricing page in v0. Stack: React + Tailwind. Style: clean and minimal like Stripe, lots of whitespace, rounded-xl cards, a single purple accent color, and a dark mode toggle. Three pricing tiers in a row.

Avoid Mixed or Conflicting Tech

One trap: vague prompts make AI mix stacks — React components glued to jQuery, or modern and old syntax in one file. The result runs poorly and confuses future edits.

Prevent it by being explicit and adding a never-list:

"No jQuery."
"Don't mix CSS frameworks — Tailwind only."
"Stick to the stack above; don't introduce new tools."

Stack: React + Tailwind only.
Never: use jQuery, add a second CSS framework, or pull in a UI library like Bootstrap.
If you think another tool is needed, ask me first instead of adding it.
Task: build a collapsible FAQ accordion.

Your Stack-and-Style Template

Wrap it all into a reusable opener you paste (or store in a config file) for serious builds:

Stack: language, framework, versions.
Conventions: naming, structure, error handling.
Formatting: indentation, quotes, linter.
Never: forbidden tools and patterns.

With this in place, AI output stops surprising you — it just fits.

STACK: Vanilla JS + HTML/CSS, ES2020+, no frameworks.
CONVENTIONS: camelCase, one function per job, comment above each function, return null on failure.
FORMATTING: 2-space indent, single quotes, semicolons.
NEVER: add libraries, use var, edit unrelated files.
TASK: <describe the feature here>

Quick Check

You keep retyping your stack and conventions in every prompt. Across a real project, what's the best way to make AI follow them automatically?

Recap: Make AI Build It Your Way

You learned to control exactly how AI builds:

Name the stack — language, framework, and versions.
Specify conventions — naming, structure, error handling.
Pin formatting — indentation, quotes, linter rules.
Match existing code by pasting a sample or pointing at files.
Save it once in .cursorrules / CLAUDE.md and add a never-list.

That's the full Prompt Engineering for Code toolkit: roles, examples, decomposition, and now precise tech and style. You're prompting like a pro.

คำถามที่พบบ่อย

บทเรียน “การระบุเทคโนโลยีและรูปแบบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การระบุเทคโนโลยีและรูปแบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การระบุเทคโนโลยีและรูปแบบ”

กำหนดเฟรมเวิร์ก แบบแผน และรูปแบบการจัดวาง คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การระบุเทคโนโลยีและรูปแบบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม

ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vibe Coding