โดย Insightist™ | เผยแพร่: 26 กรกฎาคม 2569 | อ้างอิง: Blog Base44
สรุปสาระสำคัญ
- Prompt ที่ได้ผลมีแค่ 3 ส่วน คือ function, layout, visual style
- Base44 รันด้วยโมเดล Base 1 ที่เทรนมาเพื่อไม่ให้เว็บหน้าตาซ้ำกันไปหมด
- มี 6 สูตร prompt พร้อมใช้ ครอบคลุมตั้งแต่ dashboard ถึงเว็บ corporate
- มีวิธี iterate โดยไม่เปลือง credit และจุดพลาดที่พบบ่อยที่สุด
คนส่วนใหญ่พิมพ์ prompt สั่ง AI สร้างเว็บเหมือนพิมพ์คำค้นหาใน Google เอง สั้นๆ กว้างๆ แล้วก็หวังว่าจะได้ผลลัพธ์ที่ใช่ ปัญหาคือ AI ไม่ใช่ search engine มันเป็นเหมือน senior product manager ที่ต้องการ brief ที่ชัดเจน Insightist™ ชวนมาดูสูตรเขียน prompt สร้างเว็บไซต์ด้วย AI ที่ทำให้ draft แรกออกมาใกล้เคียงกับที่ต้องการมากที่สุด
Prompt ที่ดีต้องมีอะไรบ้าง?
Prompt ที่ได้ผลจริงมีโครงสร้างแค่ 3 ส่วน คือ function (ทำอะไร), layout (จัดวางแบบไหน) และ visual style (หน้าตาเป็นยังไง) ตัวอย่างเช่น สั่งสร้าง portfolio ให้ motion designer คนหนึ่ง ด้วย bento grid แล้วใส่ mood dark glassmorphic โทนม่วง neon ผลลัพธ์ที่ได้มักจะใกล้เคียงกับภาพในหัวตั้งแต่รอบแรก เพราะให้ข้อมูลครบทั้ง 3 มิติไปพร้อมกัน
01. Dashboard — สะอาด เป็น enterprise น่าเชื่อถือ โทนสี slate blue กับขาว ให้ความรู้สึกเหมือน Stripe
- สร้าง sidebar ใส่ลิงก์ dashboard, clients, schedule, settings
- เพิ่ม overview card แถวบน โชว์ 4 metric หลัก (revenue, active clients, upcoming events)
- ใส่ line chart แสดง revenue ย้อนหลัง 30 วัน
- เพิ่มตาราง activity ที่ sort ได้ มี status badge และ hover effect
- ทำให้ sidebar collapse ได้ และตารางรองรับ pagination
02. Portfolio — dark mode ล้ำอนาคต แบบ glassmorphism พื้นดำเข้ม (bg-zinc-950) เน้น neon ม่วง font Inter
- hero พิมพ์ชื่อใหญ่จัดกลาง มี marquee scroll โชว์ skill ด้านล่าง
- work section แบบ bento-box grid ไม่เท่ากัน มี glow ตอน hover, responsive 1 col มือถือ / 3 col เดสก์ท็อป
- about section 2 column ข้อความซ้าย รูป headshot ขวาแบบมุมโค้ง
- footer แบบ minimal มีลิงก์ social ขีดเส้นใต้ตอน hover
03. Landing Page — อบอุ่น พรีเมียม แบบ editorial พื้นครีม/beige ตัวอักษร forest green font serif
- navigation sticky มีโลโก้ + ปุ่ม Buy Now สี contrast จัด
- hero แบบ split screen headline+CTA ซ้าย รูปใหญ่ขวา
- social proof เป็นแถบโลโก้ grayscale 5 อัน
- layout zig-zag สลับข้อความ-รูป ใส่ 3 benefits
- pricing card 3 อัน เน้นตรงกลางด้วยเส้นขอบ + badge most popular
- FAQ accordion 5 ข้อด้านล่างสุด
04. Ecommerce — streetwear luxury ขาวดำ contrast จัด font sans-serif หนา whitespace เยอะ
- global cart แบบ drawer เลื่อนจากขวา โชว์ items, subtotal, checkout
- product grid responsive (2 col มือถือ, 4 col เดสก์ท็อป) มีปุ่ม quick add ตอน hover + badge new arrival 2 ชิ้นแรก
- filter sidebar ซ้าย สำหรับไซส์ สี ช่วงราคา แบบ accordion
- กดสินค้าแล้วเปิด modal โชว์รูปใหญ่ + size selector + add to cart
05. Blog — editorial แบบ Substack/Medium แต่สะอาดกว่า พื้นครีม ตัวอักษรเทาเข้ม font serif (Merriweather)
- featured post hero รูปใหญ่ซ้าย headline ขวา
- category pill scroll แนวนอนใต้ hero
- grid 3 column แต่ละ card มี category tag, read time, avatar+ชื่อผู้เขียน
- section subscribe มีเส้นขอบตรงกลาง feed
- ตัวอย่างหน้า single post มี sticky table of contents + progress bar
06. Corporate — Fortune 500 น่าเชื่อถือ navy blue (#0a192f) + gold/orange font sans-serif มั่นคง
- value proposition กลางจอ ไม่มีรูปรบกวน มีปุ่ม Request demo + Watch video
- trust strip โลโก้ partners แบบ gray-scale opacity ต่ำ
- tabbed interface สำหรับ services กดแล้วสลับ content จริง ไม่ใช่แค่ list
- section เข้มพร้อม counter animated 4 ตัว
- slider ทีมงาน 4 คน พร้อมไอคอน LinkedIn
- mega footer 4 column + navigation bar sticky เปลี่ยนสีตอน scroll
“The prompt is the new business plan.” — Rebecca Tomasis, Head of AI Visibility & OG Content at Wix
อยากได้เว็บแบบไหน ต้องเขียน Prompt ต่างกันยังไง?
แต่ละประเภทเว็บไซต์มี vibe และจุดที่ต้องเน้นไม่เหมือนกัน
ยิ่งบอกอารมณ์และ element ที่อยากได้ชัดเจนแค่ไหน AI ก็ยิ่งเข้าใจง่ายขึ้นเท่านั้น
แก้เว็บทีหลังยังไงไม่ให้เปลือง Credit?
ไม่ต้อง rebuild ใหม่ทุกครั้งที่อยากแก้ Base44 มีเครื่องมือช่วยคุมทิศทางอยู่ 4 อย่าง คือ Discuss mode สำหรับคุยแผนก่อนลงมือจริง, Visual Edits สำหรับกดแก้ element ตรงๆ ใน preview, AI Controls สำหรับล็อกส่วนที่พอใจไว้ไม่ให้ AI ไปยุ่ง และ Revert history สำหรับย้อนกลับเวอร์ชันเก่าเวลาลองอะไรที่พลาด
Prompt แบบไหนที่ทำให้ AI งงบ่อยที่สุด?
ส่วนใหญ่พังเพราะขอ “ทำให้ดีขึ้น” แบบไม่ระบุ element หรือยัดทุก feature ลงไปในข้อความเดียว (payment, inventory, review, analytics มาพร้อมกันหมด) วิธีที่ได้ผลกว่าคือสร้างโครงหลักก่อน แล้วค่อยเพิ่มทีละ feature พร้อมบอก layout ที่อยากได้ให้ชัดไปเลย ไม่ต้องหวังให้ AI เดาใจ
เว็บไซต์ที่ดีไม่ได้เริ่มจากโค้ด แต่เริ่มจาก brief ที่ชัดเจน — ลองเปิด Base44 แล้วเขียน prompt แรกตามสูตร 3 ส่วนนี้ดู แล้วค่อยไล่แก้ทีละจุดด้วย Visual Edits ก่อนจะ rebuild ใหม่ทั้งหมด
คำถามที่พบบ่อย (FAQ)
Q: สร้างเว็บทั้งเว็บด้วย prompt เดียวได้จริงไหม?
A: ได้ระดับหนึ่ง แต่ผลลัพธ์ดีกว่าถ้าขอทีละ section เช่น hero section ก่อน แล้วค่อยเพิ่มส่วนอื่นทีหลัง
Q: Prompt แรกควรยาวแค่ไหน?
A: ยาวพอครอบคลุม purpose, audience และ vibe ไม่ต้องใส่รายละเอียดทุกจุดตั้งแต่แรก เก็บไว้เติมทีหลังได้
Q: ทำไม AI ไม่ทำตามที่สั่ง?
A: ส่วนใหญ่เพราะคำสั่งกว้างเกินไป ลองระบุ element ที่ต้องการเปลี่ยนตรงๆ แทนการบอกว่าอะไรผิด
Q: ต้องเขียนโค้ดเป็นไหม?
A: ไม่ต้อง แค่บอกผลลัพธ์ที่อยากได้ ที่เหลือ Base44 จัดการให้
ถ้าคุณสนใจข่าวสารนี้ ให้ Add Line OA เพิ่ม: https://lin.ee/ulsmCKk
