Use AI to code to become an AI Web Creator.
Our own approach to not having to code is to make a web or app, just know to use AI + No-Code on the right track.
It can be called Vibe Coding, which makes it much easier to see the Prototype idea.
In this post, we included a Step-by-Step roadmap that we learned ourselves, from basic to database welding and Deploy.
Anyone Interested Prompt Library 3 Level Sample Easy-Medium-Pro
And various sources of learning in the issue of people just started. Comment or greet!!
# aiwebsitebuilder # aiwebapp # Create a website # Write code with AI # Give out prompt
ถ้าเสิร์ชคำว่า WeWeb แล้วงงว่า “เริ่มตรงไหน” อันนี้คือวิธีที่เราใช้ทำเว็บแอปแบบเร็วๆ ด้วยแนว Vibe Coding (ให้ AI ช่วยคิด/ช่วยโค้ด) แต่ยังได้เว็บที่เอาไปใช้งานจริงได้ 1) WeWeb เหมาะกับใคร และควรใช้คู่กับอะไร WeWeb จะเด่นตรงการทำเว็บแอปแบบมี logic + หน้า UI ที่ปรับได้ละเอียดกว่าหลายๆ no-code tool (เช่นจัด layout, ทำหน้า list/detail, ทำฟอร์ม, ตั้งค่าการเรียก API) เรามักใช้คู่กับ - AI: ChatGPT / Claude / Gemini ช่วยแตก requirement, เขียนข้อความ/validation, ช่วยดีบัก - Database/Backend: Supabase (ใช้ง่ายและนิยมมาก), หรือ Airtable/Firebase ตามสไตล์งาน - Deploy: Vercel/Netlify (ถ้ามีส่วนที่ต้องโฮสต์เพิ่ม เช่น landing หรือบริการเสริม) 2) วิธีเริ่มโปรเจกต์ WeWeb ให้ไปไว (ไม่หลงทาง) ทริคของเราคือเริ่มจาก “หน้าจอหลัก 3 หน้า” ก่อน - Home/Explore: หน้ารวมรายการ - Detail: หน้ารายละเอียด 1 รายการ - Admin/Form: หน้าเพิ่ม/แก้ไขข้อมูล จากนั้นค่อยแตกเป็นฟีเจอร์ย่อย เช่น login, search, filter, favorite 3) Prompt ที่ใช้กับ AI แล้วเวิร์ก (เอาไปปรับได้) เวลาคุยกับ AI ให้บอก 5 อย่างนี้เสมอ: เป้าหมาย, ผู้ใช้, หน้าจอ, ข้อมูล, กติกา ตัวอย่าง (แนวสั้นแต่ครบ): “ฉันทำเว็บแอปด้วย WeWeb สำหรับร้านกาแฟ มีหน้า Home แสดงเมนู, หน้า Detail, และหน้า Admin เพิ่มเมนู ใช้ Supabase เก็บตาราง menu(id,name,price,image_url,category,created_at) ช่วยบอกขั้นตอนตั้งค่า collection/CRUD ใน WeWeb และ validation ของฟอร์ม (ราคาต้องเป็นตัวเลขมากกว่า 0) พร้อมเช็กลิสต์ทดสอบ” 4) เชื่อม Supabase กับ WeWeb แบบไม่พังบ่อย สิ่งที่ทำแล้วช่วยลดเวลางม: - ตั้งชื่อคอลัมน์เป็น snake_case และล็อกชนิดข้อมูลให้ชัด (text/number/timestamp) - ทำ Row Level Security (RLS) ให้ตรงกับสิทธิ์: ผู้ชมอ่านได้แค่บางตาราง, แอดมินเขียนได้ - ทดลอง query ใน Supabase ก่อน แล้วค่อยไปผูกใน WeWeb (จะรู้เร็วว่าพังเพราะ data หรือเพราะ UI) 5) Debug/ทดสอบที่ควรทำก่อน Deploy - Responsive: ลองบนมือถือจริง (ผู้ใช้มือถือเยอะมาก) ตรวจปุ่มเล็กไป/กดไม่ติด - Error state: ถ้าโหลดข้อมูลไม่สำเร็จให้มีข้อความ/ปุ่ม retry - SEO พื้นฐาน: ตั้ง Title/Description ของแต่ละหน้า, ใช้ H1 ให้ชัด, รูปใส่ alt - Performance: รูปบีบอัด, ไม่โหลดข้อมูลเกินจำเป็นในหน้าแรก 6) วิธีทำให้โปรเจกต์ WeWeb เป็น “พอร์ต” ได้ ทำหน้า “About/Case Study” สั้นๆ ในเว็บเลย: ปัญหาคืออะไร, แก้ยังไง, ใช้ WeWeb + AI + Supabase ตรงไหน, ลิงก์เดโม/ภาพหน้าจอ ก่อน-หลัง เท่านี้ก็กลายเป็นผลงานที่เล่าได้เวลาสมัครงาน/รับงานฟรีแลนซ์ ถ้าคุณบอกได้ว่าอยากทำเว็บแนวไหน (เช่น marketplace, booking, community) เราจะช่วยแตก roadmap + prompt ให้เข้ากับ WeWeb แบบพร้อมทำตามได้เลย
![The image features a laptop screen displaying four smartphones with various app interfaces, set against an outdoor background with trees and sunlight. The overlay text reads: "Vibecode anything with AI even if you can't code! [5 tips w/ prompts]".](https://p19-lemon8-cross-sign.tiktokcdn-eu.com/tos-useast5-v-3931-tx/o8ERW2B0NqR9piJVwyBBOwA6JnBfByqAjIAKiP~tplv-pyavlv3z7u-shrink:640:0:q50.webp?lk3s=66c60501&source=seo_middle_feed_list&x-expires=1816387200&x-signature=Dugb3MzzkMh4H11vll7crm9ogdU%3D)
