ดึง DESIGN.md
จากเว็บไซต์ใดก็ได้

DESIGN.md คือเอกสารระบบดีไซน์แบบข้อความล้วนที่เอเจนต์เขียนโค้ด AI อ่านเพื่อสร้าง UI ที่สอดคล้องกัน เป็นคู่หูฝั่งดีไซน์ของ AGENTS.md ทั้งคนและเอเจนต์อ่าน แก้ไข และบังคับใช้ได้ ภายในมีสองชั้น ส่วน YAML front matter เก็บดีไซน์โทเค็นที่เครื่องอ่านได้ เช่น สี ตัวอักษร และระยะห่าง ส่วนเนื้อหา Markdown อธิบายเหตุผลด้านดีไซน์

โดยทั่วไป DESIGN.md มีแปดส่วนมาตรฐานตามลำดับ ได้แก่ Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components และ Do's and Don'ts ส่วน YAML front matter เก็บค่าโทเค็นที่แน่นอน ส่วนเนื้อหา Markdown อธิบายว่าควรใช้ค่าเหล่านั้นอย่างไรและเพราะอะไร ส่วนที่ไม่เกี่ยวข้องตัดออกได้ และเพิ่มส่วนเฉพาะทางอื่น ๆ ได้

วาง URL ของเว็บไซต์สาธารณะใดก็ได้ลงใน Design Extractor แล้วคลิกดึงดีไซน์ สมัครสมาชิก ซื้อแพ็กเครดิต แล้วการดึงดีไซน์แต่ละครั้งจะใช้เครดิตไม่กี่เครดิต ผลลัพธ์คือ DESIGN.md ที่คุณคัดลอกได้ วาง DESIGN.md ไว้ใน repo แล้วเอเจนต์ AI ของคุณจะอ่านเป็นแนวทางด้านสไตล์สำหรับ Claude, Cursor, Copilot หรือ Stitch

เครื่องมือเขียนโค้ด AI ทุกตัวที่อ่านไฟล์ Markdown จากโฟลเดอร์โปรเจกต์ได้ก็ใช้ DESIGN.md ได้ รวมถึง Claude Code, Cursor, GitHub Copilot และผู้ช่วยเขียนโค้ดอื่น ๆ ที่เข้าถึงไฟล์ได้ วาง DESIGN.md ไว้ที่ root ของโปรเจกต์หรือในโฟลเดอร์ docs แล้วอ้างถึงไฟล์นี้ในพรอมต์

เว็บไซต์ใดก็ได้ที่เข้าถึงได้แบบสาธารณะ Design Extractor วิเคราะห์หน้าเว็บจริงตามที่แสดงผลในเบราว์เซอร์ ใช้ได้กับเว็บไซต์แบบ static, SPAs และหน้าที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ เว็บไซต์ต้องเข้าถึงได้ผ่าน URL แบบ HTTP/HTTPS มาตรฐาน

บางเว็บไซต์ เช่น พอร์ทัลของภาครัฐและร้านค้าท้องถิ่น เปิดให้เข้าชมได้เฉพาะผู้เข้าชมจากบางประเทศ หากการดึงดีไซน์ล้มเหลวเพราะเว็บไซต์ปฏิเสธการเข้าชม หน้าผลลัพธ์จะแจ้งเหตุผลและแนะนำประเทศที่เว็บไซต์นั้นโหลดได้ เลือกหนึ่งประเทศ แล้วหน้าเว็บจะถูกโหลดโดยเบราว์เซอร์ในประเทศนั้น จากนั้นจึงดึงดีไซน์ตามปกติ การดึงดีไซน์จากประเทศอื่นมีค่าใช้จ่ายเท่ากับราคาของระดับนั้นบวกค่าธรรมเนียมเพิ่มเล็กน้อย ซึ่งจะแสดงก่อนเริ่ม และหากยังล้มเหลวจะได้รับเครดิตคืน ตัวเลือกเดียวกันนี้มีในส่วนขยาย Chrome และผ่านเซิร์ฟเวอร์ MCP ด้วย

มี ส่วนขยาย Design Extractor สำหรับ Chrome ใช้เซสชันเดียวกับที่คุณเข้าสู่ระบบไว้บนเว็บไซต์ ไม่ต้องล็อกอินแยก ป๊อปอัปจะแสดงยอดเครดิตของคุณ และคลิกเดียวก็ส่งหน้าเว็บในแท็บปัจจุบันไปดึงดีไซน์แบบเดียวกับฟอร์มในหน้าแรก ในระดับ Lite หรือ Pro ด้วยเครดิตเท่ากัน DESIGN.md ที่เสร็จแล้วจะเปิดบนเว็บไซต์และแสดงในหน้าการดึงดีไซน์ของฉัน ในเวอร์ชันแรกนี้หน้าเว็บต้องเป็นหน้าสาธารณะ เพราะเซิร์ฟเวอร์เป็นผู้บันทึกหน้าเว็บ หน้าที่ต้องล็อกอิน หน้าบน localhost หรือบนเครือข่ายส่วนตัวจึงยังไม่รองรับ การแก้ไขและดาวน์โหลดยังทำบนเว็บไซต์

ได้ Design Extractor เป็นเซิร์ฟเวอร์ MCP ด้วย ใน claude.ai, Claude Desktop หรือ ChatGPT ให้เพิ่ม URL ของเซิร์ฟเวอร์เป็น connector แล้วเข้าสู่ระบบด้วยบัญชีของคุณ ส่วนใน Claude Code, Codex, Cursor หรือ Agent SDK ให้เชื่อมต่อด้วยคำสั่งเดียว (หน้าเอกสารมีคำสั่งสำหรับแต่ละตัว พร้อม API key จากหน้าบัญชีของคุณในกรณีที่ไคลเอนต์ต้องใช้) แล้วสั่งให้ดึงดีไซน์ของเว็บไซต์ เอเจนต์จะเริ่มการดึงดีไซน์ กลับมาตรวจสอบหลังจากประมาณหนึ่งนาที แล้วรับข้อความ DESIGN.md ไปบันทึกใน repo ของคุณ โดยใช้เครดิตเท่ากับบนเว็บไซต์ นอกจากนี้ Claude Code และ Codex ยังติดตั้งเป็นปลั๊กอินได้ ซึ่งจะเพิ่ม skill สำหรับนำ DESIGN.md ไปใช้กับโค้ดเบส