Cursor คืออะไร สำหรับนักออกแบบ
Cursor คือโค้ดอีดิเตอร์ที่มี AI agent ในตัว อธิบายสิ่งที่ต้องการในแชท แล้วมันจะเขียนและแก้ไขไฟล์ให้ทันที สำหรับนักออกแบบ นั่นหมายถึงพรอโทไทป์ที่ใช้งานได้จริงแทนที่จะเป็นม็อกอัปนิ่ง ๆ — HTML และ CSS จริงที่เปิดในเบราว์เซอร์ ปรับขนาด และส่งต่อได้ แพ็กเกจ Hobby ฟรี ส่วน Pro $20 ต่อเดือน
ติดตั้งและเปิดโปรเจกต์
- ดาวน์โหลด Cursor จาก cursor.com แล้วติดตั้ง — มีให้ทั้ง macOS, Windows และ Linux
- ลงชื่อเข้าใช้หรือสร้างบัญชี แพ็กเกจ Hobby ฟรีไม่ต้องใช้บัตรเครดิต
- เปิดโฟลเดอร์ — โปรเจกต์ที่มีอยู่แล้วหรือโฟลเดอร์ว่างสำหรับพรอโทไทป์
- เปิดแผงแชทแล้วลองถามอะไรเล็ก ๆ เพื่อยืนยันว่า agent ตอบสนอง
เพิ่มตัวช่วยออกแบบฟรีสองตัว
ทั้งสองตัวดาวน์โหลดฟรีจากร้านนี้ และใช้เวลาเพิ่มแค่ตัวละหนึ่งนาที
- คำสั่ง Responsive Preview — slash command /responsive-preview ที่ถ่ายภาพหน้าเว็บของคุณที่ความกว้างระดับมือถือ แท็บเล็ต และเดสก์ท็อป แล้วส่งผลตรวจผ่าน/เตือน/ไม่ผ่านของเลย์เอาต์กลับมาในแชท
- Skill Ghost Wireframe — สร้าง wireframe แบบ skeleton-UI ด้วย ghost role ที่สม่ำเสมอ ช่วยให้คุณวางโครงเลย์เอาต์ได้ก่อนจัดสไตล์
รันการตรวจออกแบบครั้งแรก
- เปิดหน้าใดหน้าหนึ่งของโปรเจกต์คุณ — หรือให้ agent สร้างหน้าง่าย ๆ ขึ้นมา
- รันคำสั่ง /responsive-preview กับหน้านั้น
- อ่านผลตรวจ: ปัญหา overflow, tap target ที่แคบเกินไป และปัญหา breakpoint จะแสดงเป็นเตือนหรือไม่ผ่าน
- ให้ agent แก้ไขจุดที่ไม่ผ่าน แล้วรันคำสั่งอีกครั้ง
ค่าใช้จ่าย
แพ็กเกจ Hobby ฟรีพร้อมจำนวนคำขอ agent ที่จำกัด — เพียงพอสำหรับเรียนรู้ตัว editor ส่วน Pro ที่ $20 ต่อเดือน เพิ่มขีดจำกัด agent และเปิดสิทธิ์เข้าถึงโมเดลระดับแนวหน้าและ cloud agent ซึ่งเป็นจุดที่งานพรอโทไทป์ประจำวันตกอยู่ หากตัดสินใจใช้ Pro คุณสามารถใช้ ลิงก์แนะนำ Cursor นี้เพื่อรับส่วนลด 50 เปอร์เซ็นต์ในเดือนแรก รายละเอียดเพิ่มเติมใน Is Cursor worth it for designers?
เมื่อ Cursor ไม่ใช่เครื่องมือที่เหมาะ
หากคุณไม่อยากเห็นโค้ดเลย — โมดบอร์ด การสำรวจภาพ ม็อกอัปสำหรับลูกค้า — เครื่องมือออกแบบจะตอบโจทย์ได้ดีกว่าอีดิเตอร์ใด ๆ และหากเป้าหมายคือเว็บไซต์หน้าเดียวที่ใช้งานได้จริงมากกว่าพรอโทไทป์ เทมเพลต Carrd ก็ไปถึงจุดนั้นได้โดยไม่ต้องเปิดอีดิเตอร์เลย