01ต่างจากตัวเลือกเทมเพลตอย่างไร
แกลเลอรีเทมเพลตให้คุณดูงานออกแบบที่เสร็จแล้ว แล้วถามว่าชอบหรือไม่ เครื่องมือนี้ลึกลงไปอีกชั้น แต่ละทิศทางทั้งหกด้านล่างอิงจากพอร์ตโฟลิโอช่างภาพจริงที่ใช้งานอยู่และถูกตรวจดูจริง (สกรีนช็อต เลย์เอาต์จริง สีและฟอนต์ที่คำนวณได้) ไม่ใช่จานสีที่ใครสักคนแต่งขึ้นให้ดูสวยบนแถบสี ทิศทาง Editorial เช่น ใช้ EB Garamond เพราะนั่นคือตัวอักษรที่เว็บไซต์ของช่างภาพแฟชั่นจริงคนหนึ่งใช้อยู่ ซึ่งจับคู่ได้จากการตรวจหน้าเว็บโดยตรง
มีสองรูปแบบที่ปรากฏเกือบทุกที่ในเว็บไซต์จริงที่ใช้สร้างเครื่องมือนี้ และถูกฝังอยู่ในทุกทิศทางที่นี่: เมนูซ่อนอยู่หลังไอคอนแฮมเบอร์เกอร์อันเดียวโดยไม่มีรายการลิงก์ให้เห็น แม้บนเดสก์ท็อป และแสดงภาพใหญ่ทีละภาพแทนที่จะเป็นกริด สีของ UI เกือบเป็นศูนย์ตลอดทั้งงาน: ภาพถ่ายให้สี ไม่ใช่ตัวอินเทอร์เฟซ
02สิ่งที่คุณจะได้ในตอนท้าย
พรอมต์เดียวที่มีโครงสร้างครบ ครอบคลุมทิศทางโดยรวม สีเฮกซ์ที่ตรงเป๊ะ ชื่อฟอนต์และคู่ฟอนต์ รายการหน้า พฤติกรรมของการนำทาง เลย์เอาต์แกลเลอรีและกรอบภาพ ฟีเจอร์ที่ควรมี คำแนะนำเรื่องโฮสติ้งพร้อมข้อแลกเปลี่ยนด้านต้นทุนจริง และชุดข้อกำหนดคุณภาพการสร้างที่ตายตัว (alt text ที่เข้าถึงได้ จุดเปลี่ยนความกว้างแบบตอบสนอง ไม่ฝังความลับไว้ในโค้ด ภาพโหลดแบบ lazy) วางลงในแอปเขียนโค้ด AI ที่คุณเลือก แล้วมันมีทุกอย่างที่ต้องใช้เพื่อเริ่มงาน
03จากพรอมต์สู่เว็บไซต์จริง: ขั้นตอนทั้งหมด
พรอมต์คือบรีฟการออกแบบ ไม่ใช่เส้นชัย นี่คือทุกขั้นตอนตั้งแต่คัดลอกพรอมต์ไปจนถึงมี URL จริงที่ใส่นามบัตรได้ ฟรีหรือเกือบฟรี
คัดลอกพรอมต์แล้วเปิดแอปเขียนโค้ด AI
Claude, Cursor, Claude Code, Windsurf หรือเอเจนต์ AI ของ Replit ใช้ได้ทั้งหมด ขอแค่เป็นตัวที่เขียนและบันทึกไฟล์ให้คุณได้ ไม่ใช่แค่แชต ถ้าไม่เคยใช้เลย ตัวเลือกบนเบราว์เซอร์อย่าง claude.ai หรือ Replit ไม่ต้องติดตั้ง แค่วางพรอมต์เป็นข้อความแรก
ให้มันสร้างเสร็จ แล้วดูสิ่งที่มันทำให้จริง ๆ
สั่งให้สร้างเว็บไซต์เป็น HTML/CSS/JS แบบสแตติก (หรืออะไรก็ตามที่ส่วนโฮสติ้งของพรอมต์ระบุ) แล้วให้แสดงตัวอย่าง ตรวจสิ่งที่พรอมต์ขอหกอย่าง (สี ฟอนต์ พฤติกรรมแกลเลอรี เมนู กรอบภาพ หน้าต่าง ๆ) ก่อนไปต่อ แก้สีเน้นที่ผิดตอนนี้ถูกกว่าตอนที่ใส่ภาพเข้าไปแล้วมาก
ใส่ภาพ ประวัติ และข้อมูลติดต่อจริงของคุณ
แทนที่ภาพตัวอย่างและข้อความเติมทุกบรรทัด ให้แอป AI ของคุณเขียน alt attribute ที่เฉพาะเจาะจงจริงให้ทุกภาพไปพร้อมกัน ไม่ใช่ “image1.jpg” แต่เป็นคำอธิบายจริง เพราะนั่นเป็นทั้งข้อกำหนดด้านการเข้าถึงและช่วยเรื่อง SEO อีกเล็กน้อย ช่วงนี้ยังเป็นเวลาที่ควรเช็กซ้ำด้วยว่าแบบฟอร์มติดต่อชี้ไปที่อีเมลที่คุณเปิดอ่านจริง
นำขึ้นโฮสต์ฟรี
ถ้าคุณเลือกระดับ “สแตติก & ฟรี” ให้แอป AI ของคุณพาเชื่อมโฟลเดอร์ของโปรเจกต์หรือที่เก็บ GitHub เข้ากับหนึ่งในโฮสต์ในหน้าโฮสติ้งของเมนูด้านบน ทั้งสี่เจ้าสร้างและเผยแพร่อัตโนมัติทุกครั้งที่คุณพุชการเปลี่ยนแปลง ไม่ต้องอัปโหลดเองอีกเมื่อเชื่อมต่อแล้ว
เชื่อมโดเมนของคุณเอง (ไม่บังคับ แต่คุ้ม)
ซับโดเมนฟรี (เช่น yourname.netlify.app) ใช้เริ่มต้นได้สบาย เมื่อพร้อมใช้ yourname.com ก็คือซื้อโดเมนกับเปลี่ยน DNS หนึ่งจุด ซึ่งอธิบายละเอียดอยู่ด้านล่าง
04ควรใช้โฮสต์ฟรีเจ้าไหน
เจ้าไหนก็ได้ที่นี่จะทำให้เว็บไซต์สแตติกออนไลน์ได้โดยไม่เสียเงิน มี HTTPS ฟรี และระดับฟรีที่รองรับทราฟฟิกของพอร์ตโฟลิโอส่วนตัวได้สบาย ขีดจำกัดของระดับฟรีเปลี่ยนค่อนข้างบ่อย ให้ถือว่าตัวเลขในหน้าโฮสติ้งเป็นภาพรวมคร่าว ๆ ไม่ใช่ตัวเลขปัจจุบันที่แน่นอน และตรวจหน้าราคาของแต่ละเจ้าเองก่อนตัดสินใจ
ให้แอปเขียนโค้ด AI ของคุณทำขั้นตอนการนำขึ้นโฮสต์ไปพร้อมกับคุณ: “เชื่อมโปรเจกต์นี้กับ Netlify” เป็นคำสั่งที่ธรรมดามาก และมันมักพาคุณสมัครบัญชีและนำขึ้นโฮสต์ครั้งแรกได้ในไม่กี่นาที
05การเชื่อมโดเมนของคุณเอง
โดเมนมีค่าธรรมเนียมรายปีเล็กน้อย (ปกติ $10 ถึง 20 ต่อปี ขึ้นกับนามสกุล) แยกจากโฮสติ้งที่ยังฟรีอยู่ มีสามส่วน:
- ซื้อโดเมน Namecheap, Cloudflare Registrar หรือผู้สืบทอดของ Google Domains (Squarespace Domains)
- เพิ่มเรกคอร์ด DNS CNAME (หรือเรกคอร์ด A) ที่ชี้โดเมนของคุณไปที่โฮสต์ เพิ่มในแดชบอร์ดของผู้รับจดทะเบียน มีสองบรรทัดในตารางของผู้รับจดทะเบียน:
CNAMEสำหรับwwwชี้ไปที่ที่อยู่ที่โฮสต์ให้คุณ เช่นyour-portfolio.netlify.appและเรกคอร์ดAสำหรับโดเมนเปล่าชี้ไปที่ IP ของโฮสต์ - เพิ่มในโฮสต์ของคุณ วางโดเมนเดียวกันลงในการตั้งค่า “โดเมนที่กำหนดเอง” ของโฮสต์ HTTPS จะตั้งค่าให้เอง
ทุกโฮสต์ในหน้าโฮสติ้งมีแท็บ “โดเมนที่กำหนดเอง” หรือ “โดเมน” ที่ให้เรกคอร์ดที่ต้องเพิ่มแบบตรงตัว คัดลอกมา เพิ่มที่ผู้รับจดทะเบียนของคุณ แล้วรอ การเปลี่ยน DNS ปกติใช้เวลาตั้งแต่ไม่กี่นาทีถึงไม่กี่ชั่วโมงจึงมีผล บางครั้งนานถึง 24 ถึง 48 ชั่วโมง ถ้าติดขัด แอปเขียนโค้ด AI ของคุณช่วยแนะนำแดชบอร์ดของผู้รับจดทะเบียนเจ้าที่คุณใช้ได้ ถ่ายสกรีนช็อตหน้าตั้งค่าแล้วถามว่าต้องคลิกตรงไหน เห็นรูปกุญแจ ไม่มีคำเตือน “ไม่ปลอดภัย”: นั่นคือเส้นชัย
06เช็กลิสต์ก่อนเปิดตัว
ห้านาทีกับรายการนี้จับสิ่งที่ทำให้พอร์ตโฟลิโอดูไม่เสร็จได้เกือบทั้งหมด การตรวจเหล่านี้อยู่ในหน้าก่อนเปิดตัวของเมนูด้านบน ติ๊กไปทีละข้อ
07คำถามที่พบบ่อย
ไม่ คุณเลือกด้านภาพ เครื่องมือเขียนพรอมต์โดยละเอียดเป็นภาษาธรรมดา และแอปเขียนโค้ด AI ของคุณเปลี่ยนมันเป็นเว็บไซต์จริง
แต่ละทิศทางอิงจากพอร์ตโฟลิโอช่างภาพจริงที่ใช้งานอยู่และถูกตรวจดูโดยตรง ไม่ได้คิดขึ้นมาเองจากศูนย์ ถึงขั้นจับคู่ฟอนต์ให้ตรงกับเว็บไซต์จริง
ไม่ต้องมีบัญชี ไม่ต้องสมัคร ไม่ต้องจ่ายอะไร ภาพที่คุณวางลงบนดัชนีการเล่นจะถูกวาดบนแคนวาสในเบราว์เซอร์ของคุณ และไม่เคยออกจากที่นั่น
ภาพที่ดีที่สุดของคุณ 8 ถึง 20 ภาพที่ส่งออกเป็น JPG หรือ WEBP แบบปรับให้เหมาะสม ประวัติสั้น ๆ และโลโก้ถ้ามี บันทึกใต้ผนังมีรายการนี้อยู่