คู่มือ DESIGN.md
DESIGN.md เปลี่ยนระบบดีไซน์ของเว็บไซต์ให้เป็นไฟล์ที่เอเจนต์เขียนโค้ดของคุณอ่านได้ ทั้งสี ตัวอักษร ระยะห่าง ความโค้งมุม และคอมโพเนนต์ พร้อมกฎการใช้งาน คู่มือเหล่านี้แสดงทีละขั้นตอนว่าจะทำอะไรกับไฟล์นี้ได้บ้าง แต่ละคู่มือมีตัวอย่างจริงที่สร้างจากไฟล์จริงในแกลเลอรี DESIGN.md
เพิ่งรู้จักรูปแบบนี้ใช่ไหม เริ่มจากDESIGN.md คืออะไร พร้อมสร้างแล้วใช่ไหม ดึง DESIGN.md จากเว็บไซต์ใดก็ได้
คู่มือตามการใช้งาน
- นักพัฒนาที่สร้างงานด้วยเอเจนต์เขียนโค้ด AI
ให้ Claude Code และ Cursor สร้าง UI ที่เหมือนเว็บไซต์ต้นแบบ
ดึงดีไซน์ของเว็บไซต์ที่คุณชอบ วาง DESIGN.md ไว้ใน repo แล้วบอกเอเจนต์ให้ใช้ พร้อมพรอมต์สำหรับ Claude Code และ Cursor
- ผู้ก่อตั้งที่ทำงานคนเดียวและทีมขนาดเล็ก
ไม่มีดีไซเนอร์? ยืมระบบดีไซน์ที่พิสูจน์แล้วมาใช้กับแอปของคุณ
วิธีเลือกเว็บไซต์อ้างอิง สิ่งที่ควรเก็บไว้จาก DESIGN.md และสิ่งที่ควรเปลี่ยน เพื่อให้ผลลัพธ์เป็นของคุณ ไม่ใช่การลอกเลียน
- ทีมที่วางแผนสร้างใหม่ รีแบรนด์ หรือย้ายระบบ
กำลังสร้างเว็บไซต์ใหม่? ดึงระบบดีไซน์ออกมาก่อน
บันทึกเว็บไซต์ปัจจุบันของคุณเป็น DESIGN.md ก่อนสร้างใหม่ รีแบรนด์ หรือย้ายเฟรมเวิร์ก และรู้ว่าต้องตรวจสอบอะไรด้วยตัวเอง
- ดีไซเนอร์และเอเจนซีที่ทำต้นแบบ
ผสานเว็บไซต์อ้างอิงสองแห่งเป็นดีไซน์เดียวสำหรับต้นแบบ
เทียบไฟล์ DESIGN.md ที่ดึงมาสองไฟล์ทีละโทเค็น แล้วรวมเป็นสเปกเดียวสำหรับต้นแบบ ด้วยมือหรือด้วยเอเจนต์ของคุณ
- นักพัฒนาที่สร้างเอเจนต์และเวิร์กโฟลว์ของเอเจนต์
ให้เอเจนต์เขียนโค้ดดึงสเปกดีไซน์ได้ตามต้องการด้วย MCP
เชื่อมต่อเซิร์ฟเวอร์ MCP เพื่อให้เอเจนต์ดึง DESIGN.md ของเว็บไซต์ได้เอง รอผลลัพธ์ และสร้างงานจากไฟล์นั้น