💡 แค่พิมพ์
ก็ได้คำตอบ
ลองเลย — พิมพ์สิ่งที่อยากได้ทางซ้าย → AI ตอบเป็นโค้ดทางขวา
ไม่ต้องเรียน syntax · ไม่ต้องจำคำสั่ง · แค่พิมพ์
1ลองเลย · Interactive Demo
พิมพ์ข้อความด้านซ้าย → กด "ส่ง" → AI ตอบเป็นโค้ดทางขวา · หรือคลิกตัวอย่างด้านล่าง
Prompt ของคุณ
AI ตอบ
← พิมพ์ prompt ทางซ้าย แล้วกด "ส่ง" → AI จะตอบเป็นโค้ดที่นี่
2ตัวอย่างจริง · 6 prompts ที่ใช้บ่อย
Prompt แต่ละอันเป็นของจริง — ใช้ได้เลย แค่ก็อปไปวางใน ChatGPT/Claude/MiniMax
🐍
ทำเกมงู 2D
Phaser 3ทำเกมงู 2D ใช้ Phaser 3 · single HTML file · ภาษาไทย · มี high score · ปรับความเร็วได้
// config.js
const config = {
type: Phaser.AUTO,
width: 600, height: 600,
backgroundColor: '#222',
scene: { preload, create, update }
};
const game = new Phaser.Game(config);
let snake, food, cursors, score = 0;
let scoreText, speed = 150;
function preload() {
this.load.image('food', '🍎');
}
function create() {
snake = this.add.group();
for (let i = 0; i < 3; i++) addPart(160 + i*16, 300);
food = this.add.image(300, 100, 'food');
cursors = this.input.keyboard.createCursorKeys();
scoreText = this.add.text(10, 10, 'คะแนน: 0',
{ fontSize: '20px', fill: '#fff' });
}
function update() {
// ...movement + collision logic
}
function addPart(x, y) { ... }
🌐
Landing Page
HTML/CSSสร้าง Landing Page ร้านกาแฟ · Hero + เมนู 6 อย่าง + รีวิว + ที่อยู่ · mobile-first · สีอบอุ่น
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="utf-8">
<title>กาแฟป้านิ้ม</title>
<style>
:root {
--cream: #FAF3E0;
--brown: #6F4E37;
}
body {
font-family: 'IBM Plex Sans Thai', sans-serif;
background: var(--cream);
color: var(--brown);
margin: 0;
}
.hero {
background: linear-gradient(135deg,
#6F4E37, #A67B5B);
color: white;
padding: 80px 20px;
text-align: center;
}
.hero h1 { font-size: 48px; }
</style>
</head>
<body>
<section class="hero">
<h1>กาแฟป้านิ้ม</h1>
<p>หอมกรุ่น สดใหม่ ทุกแก้ว</p>
</section>
<!-- เมนู + รีวิว -->
</body>
</html>
✅
Todo App
JavaScriptทำ Todo App · เพิ่ม/ลบ/ติ๊ก · บันทึก localStorage · เรียงตามวันที่ · filter ทำเสร็จแล้ว
// app.js
const state = {
todos: JSON.parse(localStorage.getItem('todos') || '[]')
};
function save() {
localStorage.setItem('todos',
JSON.stringify(state.todos));
}
function addTodo(text) {
state.todos.push({
id: Date.now(),
text, done: false,
createdAt: new Date()
});
save(); render();
}
function toggleTodo(id) {
const t = state.todos.find(t => t.id === id);
if (t) { t.done = !t.done; save(); render(); }
}
function deleteTodo(id) {
state.todos = state.todos.filter(
t => t.id !== id);
save(); render();
}
function render() {
const list = document
.getElementById('todo-list');
list.innerHTML = state.todos
.sort((a, b) => b.id - a.id)
.map(t => `
<li class="${t.done ? 'done' : ''}">
<input type="checkbox"
${t.done ? 'checked' : ''}
onchange="toggleTodo(${t.id})">
<span>${t.text}</span>
<button onclick=
"deleteTodo(${t.id})">×</button>
</li>
`).join('');
}
🤖
Chatbot ร้านค้า
APIเขียน Chatbot ตอบคำถามร้านเสื้อผ้า · รู้ราคา/ไซส์/สี · ส่งต่อแอดมินเมื่อลูกค้าขอ
// bot.js
const FAQ = {
'ราคา': 'เสื้อ 199-899 บาท',
'ไซส์': 'มี S M L XL',
'สี': 'ดำ ขาว ชมพู น้ำเงิน',
'ส่ง': 'ส่งฟรี 500฿+'
};
function reply(msg) {
for (const k in FAQ) {
if (msg.includes(k)) return FAQ[k];
}
if (msg.includes('แอดมิน')) {
return 'ส่งต่อให้แอดมินแล้วค่ะ';
}
return 'ไม่แน่ใจ ลองถามใหม่นะคะ';
}
document.getElementById('send')
.addEventListener('click', () => {
const input = document
.getElementById('chat-input');
const msg = input.value;
const replyEl = reply(msg);
addChat('me', msg);
addChat('bot', replyEl);
input.value = '';
});
✍️
เขียนบทความ SEO
Textเขียนบทความ 1,000 คำ เรื่อง "วิธีเลือกกาแฟ" · ใส่ SEO keyword "กาแฟคั่วสด" 5 ครั้ง · มี H1 H2 H3 · อ่านง่าย
# วิธีเลือกกาแฟคั่วสด ให้ถูกใจคุณ
## H1: กาแฟคั่วสด เริ่มต้นยังไง?
กาแฟคั่วสดคือหัวใจของร้านกาแฟ...
[เนื้อหา 1,000 คำ]
## H2: 3 ระดับคั่วที่ควรรู้
### H3: Light Roast
- สีอ่อน · รสผลไม้
- เหมาะ: filter, pour-over
### H3: Medium Roast
- สมดุล · หอมหวาน
- เหมาะ: ทั่วไป
### H3: Dark Roast
- เข้ม · ขม · smoky
- เหมาะ: espresso
## สรุป
เลือกกาแฟคั่วสดตามรสที่ชอบ...
[CTA: สั่งซื้อวันนี้]
📊
Dashboard ยอดขาย
Chart.jsสร้าง Dashboard ยอดขาย · 4 KPI card + Line chart 7 วัน + Bar chart top 5 สินค้า · ใช้ Chart.js · responsive
// dashboard.js
const salesData = {
labels: ['จ','อ','พ','พฤ','ศ','ส','อา'],
values: [1200,1900,1500,2100,1800,2500,2300]
};
new Chart(document
.getElementById('line'), {
type: 'line',
data: {
labels: salesData.labels,
datasets: [{
label: 'ยอดขาย (บาท)',
data: salesData.values,
borderColor: '#FFA8C4',
backgroundColor: '#FFA8C420',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false }
}
}
});
// KPI cards
function updateKPIs() {
const total = salesData.values
.reduce((a, b) => a + b, 0);
const avg = Math.round(total / 7);
document.getElementById('total')
.textContent = total.toLocaleString();
document.getElementById('avg')
.textContent = avg.toLocaleString();
}
updateKPIs();
3เล่นจริง · 6 เกมที่ AI สร้าง
เกมเหล่านี้เขียนด้วย Phaser 3 / Babylon.js โดยใช้ prompt + AI — เล่นได้เลย
🐍 Snake
Phaser 3🐦 Flappy Bird
Phaser 3🏃 Platformer
Phaser 3🧊 3D Maze
Babylon.js🔫 3D Shooter
Babylon.js🏃♂️ 3D Runner
Babylon.js4Vibe Coding เร็วกว่าจริงไหม?
ตัวเลขจากงานวิจัย + ประสบการณ์จริง
5-10×
เร็วกว่าเขียนเอง
(โปรเจกต์เล็ก-กลาง)
(โปรเจกต์เล็ก-กลาง)
94%
AI เขียน Phaser ได้แม่น
(จาก benchmark)
(จาก benchmark)
0
ต้องจำ syntax
(แค่บอก AI)
(แค่บอก AI)
เห็นแล้วใช่ไหม? แค่พิมพ์ 🎯
Section 3 กำลังจะมา — "AI 2025 vs 2026" — เปรียบเทียบว่า AI เปลี่ยนไปยังไงในปีเดียว