สิ่งที่ต้องเตรียม
Cursor ที่ติดตั้งพร้อมตัวช่วยออกแบบฟรีจากคู่มือตั้งค่า โฟลเดอร์ว่าง และแนวคิดที่ชัดเจนว่าหน้านี้ทำเพื่อใคร แพ็กเกจ Hobby ฟรีก็เพียงพอสำหรับพรอโทไทป์แรก
เขียนบรีฟก่อนเขียนพรอมต์
หนึ่งย่อหน้าที่เขียนครั้งเดียว ดีกว่าการแก้ยี่สิบครั้งในภายหลัง ระบุกลุ่มเป้าหมาย call to action เดียว และลำดับของแต่ละส่วน — ตัวอย่างเช่น hero พร้อมหัวเรื่องและ CTA, feature block สามบล็อก, testimonial หนึ่งอัน, footer กำหนดขอบเขตผลลัพธ์ด้วย: ไฟล์ HTML เดียว สไตล์แบบ inline ไม่ใช้เฟรมเวิร์ก ใช้ system font
สร้างใน 6 ขั้นตอน
- เปิดโฟลเดอร์ว่างใน Cursor แล้ววางบรีฟของคุณลงในแชท
- ขอไฟล์ index.html เดียวพร้อม CSS แบบ inline — ไฟล์เดียวช่วยให้ทำซ้ำได้เร็ว
- เปิดไฟล์ในเบราว์เซอร์แล้วอ่านแบบผู้เข้าชม ไม่ใช่แบบผู้สร้าง
- บอก agent ว่าจะเปลี่ยนอะไรในเชิงดีไซน์ — ระยะห่าง ลำดับความสำคัญ คอนทราสต์ — ครั้งละหนึ่งหรือสองจุดต่อข้อความ
- รันคำสั่ง /responsive-preview เพื่อตรวจสอบความกว้างระดับมือถือ แท็บเล็ต และเดสก์ท็อป
- แก้ไขจุดที่การตรวจสอบพบ แล้วหยุด — หน้าที่ของพรอโทไทป์คือถูกประเมิน ไม่ใช่ถูกขัดเกลาจนสมบูรณ์
ตรวจสอบแบบนักออกแบบ
เครื่องมือ Responsive Preview ในเบราว์เซอร์แบบฟรี แสดงหน้าเว็บที่สามความกว้างเรียงข้างกันพร้อมสกรอลล์ที่ซิงก์กัน — เร็วกว่าการปรับขนาดหน้าต่างเอง สังเกต overflow แนวนอนบนมือถือ ความยาวบรรทัดที่เกินราว 80 ตัวอักษร และ tap target ที่เล็กกว่า 44 พิกเซล
จากพรอโทไทป์สู่หน้าเว็บจริง
หากพรอโทไทป์ผ่านการตรวจสอบแล้ว คุณสามารถเผยแพร่ HTML บนโฮสต์แบบ static ฟรีที่ไหนก็ได้ หรือข้ามการดูแลโค้ดแล้วสร้างใหม่บนเทมเพลต Carrd พร้อมโดเมนของตัวเองในราคา $19 ต่อปี ก่อนเลือกเส้นทางไหน ให้รันการตรวจสอบ Launch Checklist Prompt ก่อน
ค่าใช้จ่ายทั้งหมด
ตัวพรอโทไทป์เอง: ไม่มีค่าใช้จ่ายเลย บนแพ็กเกจ Hobby ฟรีของ Cursor หากคุณสร้างพรอโทไทป์เป็นประจำ Pro ที่ $20 ต่อเดือนช่วยปลดขีดจำกัดของ agent — คุณสามารถใช้ ลิงก์แนะนำ Cursor นี้เพื่อรับส่วนลด 50 เปอร์เซ็นต์ในเดือนแรก