คำสั่งอย่าง “ทำหน้าให้คล้ายแบรนด์นี้” อาจชัดในหัวคน แต่ยังทิ้งช่องว่างใหญ่มากสำหรับ AI coding agent: ต้องใช้สีไหน ตัวอักษรมีลำดับอย่างไร ปุ่มกับการ์ดควรหน้าตาแบบไหน และเมื่อจอแคบลง layout ต้องเปลี่ยนอย่างไร

awesome-design-md มีสิ่งที่จับต้องได้กว่าชื่อแบรนด์ นั่นคือไฟล์ข้อความชื่อ DESIGN.md ซึ่งแจกแจงว่า agent ควรใช้สี ตัวอักษร component และ layout แบบใด คุณจึงเปิดอ่าน ดูตัวอย่าง และเลือกใช้เป็นกรอบตั้งต้นได้ก่อนให้ agent ลงมือ แต่ต้องขีดเส้นไว้ตั้งแต่ต้นว่าไฟล์เหล่านี้เกิดจากการวิเคราะห์เว็บไซต์สาธารณะโดยผู้จัดทำคลัง ไม่ใช่ design guideline ที่เจ้าของแต่ละแบรนด์ยืนยัน

DESIGN.md ทำงานคนละหน้าที่กับ AGENTS.md

คำอธิบายในโครงการแยกบทบาทของสองไฟล์ไว้ตรงไปตรงมา: AGENTS.md บอก coding agent ว่าควรสร้างโครงการอย่างไร ส่วน DESIGN.md บอก design agent ว่าโครงการควรมีรูปลักษณ์และบรรยากาศแบบไหน

ในงานจริง ไฟล์แรกบอกวิธีทำงาน ส่วนไฟล์หลังบอกว่า UI ควรออกมาแบบไหน ซึ่งเป็นรายละเอียดที่มักหายไปจาก prompt สั้น ๆ ทั้งสองไฟล์ไม่ได้แทนกัน และ DESIGN.md ก็ไม่ได้สร้าง UI ให้เอง มันเพียงรวบรวมกติกาให้ agent ใช้ระหว่างสร้างงาน

ผู้ดูแลโครงการระบุว่าแนวคิด DESIGN.md มาจาก Google Stitch และอธิบายว่า Markdown ช่วยให้ LLM อ่านเนื้อหาได้โดยไม่ต้องส่งออกจาก Figma ใช้ JSON schema หรือตั้งค่าเครื่องมือเฉพาะ นี่เป็นคำอธิบายจากผู้ดูแล ไม่ใช่ผลทดสอบอิสระว่า agent ทุกตัวจะตีความไฟล์ได้ดีเท่ากัน

อย่าเริ่มจากชื่อแบรนด์ ให้เริ่มจากสิ่งที่งานต้องการ

คลังแบ่งตัวอย่างเป็นหลายกลุ่ม ตั้งแต่ AI & LLM Platforms, Developer Tools & IDEs, Backend, Database & DevOps ไปจนถึง Productivity & SaaS, Design & Creative Tools, Fintech & Crypto, E-commerce & Retail, Media & Consumer Tech และ Automotive นอกจากนี้ยังมีหมวด Retro Web ซึ่งรวม Dell ปี 1996 และ Nintendo.com ปี 2001

ความหลากหลายนี้มีประโยชน์เมื่อใช้หาแบบที่เหมาะกับงาน ไม่ใช่ถามว่าแบรนด์ใดดังที่สุด ก่อนคัดลอกไฟล์ ลองตอบให้ได้ว่างานของคุณควรให้อารมณ์แบบไหน เนื้อหาควรแน่นหรือมีพื้นที่ว่างมาก ใช้ component ประเภทใดบ่อย และต้องรองรับหน้าจอขนาดใด แล้วค่อยหาไฟล์ที่มีกติกาใกล้กับโจทย์นั้น

คำบรรยายสไตล์ของ Claude, Vercel, Stripe หรือแบรนด์อื่นในคลังเป็นผลวิเคราะห์ของผู้จัดทำเพียงแหล่งเดียว ไม่ใช่ข้อกำหนดจากเจ้าของแบรนด์ และแหล่งข้อมูลชุดนี้ไม่ได้ตรวจคำบรรยายเหล่านั้นเทียบกับ guideline หรือ CSS ปัจจุบันของแต่ละเว็บไซต์ การเลือกไฟล์จึงควรอิงสิ่งที่อ่านได้ในเอกสารและสิ่งที่เห็นใน preview มากกว่าการเชื่อชื่อกำกับ

แต่ละไซต์มี preview.html สำหรับดูสี ลำดับชั้นตัวอักษร ปุ่ม และการ์ด บางรายการมี preview-dark.html ให้ดูตัวอย่างชุดเดียวกันบนพื้นหลังโทนมืด เปิด preview เพื่อเช็กว่าสิ่งที่เห็นเข้ากับงานหรือไม่ก่อนเลือกไฟล์ แต่อย่าสับสนกับผลที่ agent จะสร้างจริง เพราะโครงการไม่ได้เผยแพร่ผลทดสอบเปรียบเทียบ agent หรือเงื่อนไขที่รับรองว่าผลงานจะตรงกับต้นฉบับ

ใช้ 9 หมวดเป็นรายการตรวจงาน

DESIGN.md แต่ละไฟล์จัดเนื้อหาเป็น 9 ส่วน ชื่อหมวดเหล่านี้ไม่ได้มีไว้ให้ agent อ่านเท่านั้น คุณใช้หัวข้อเหล่านี้ช่วยเลือกไฟล์และตรวจผลงานรอบแรกได้ด้วย

ตามคำอธิบายของผู้ดูแล ไฟล์ในชุดลงรายละเอียดถึง pattern, token, rule, state ของ component, breakpoint, touch target และวิธี collapse อย่างไรก็ตาม การมีหัวข้อเหล่านี้อยู่ในเอกสารไม่ได้แปลว่าหน้าจอที่สร้างแล้วจะ responsive หรือผ่าน accessibility โดยอัตโนมัติ มันเพียงทำให้คุณเห็นว่ามีกติกาอะไรให้ตรวจต่อ

ลองใช้โดยไม่คาดหวังเกินที่ต้นทางบอกไว้

ขั้นตอนที่โครงการระบุมีเพียงสองอย่าง: คัดลอก DESIGN.md ของไซต์ที่เลือกไปไว้ที่รากโครงการ แล้วสั่ง AI coding agent ให้ใช้ไฟล์นั้น ต้นทางไม่ได้บอกว่าต้องตั้งค่าอะไรเพิ่มหรือรับประกันผลลัพธ์

เมื่อลองใช้ครั้งแรก คุณทำตามลำดับนี้ได้:

1. เลือกจากโจทย์ของ UI เปิดหมวดที่ใกล้กับงาน แล้วอ่านคำอธิบายโดยถือว่าเป็นการวิเคราะห์ของผู้จัดทำ
2. ดู preview.html ก่อน ตรวจสี ลำดับชั้นตัวอักษร ปุ่ม และการ์ด ถ้ามี preview-dark.html และงานใช้พื้นหลังโทนมืด ค่อยเปิดดูประกอบ
3. อ่านทั้ง 9 หมวด มองหากติกาของ component ที่งานใช้จริง และดูว่าต้องปรับอะไรเมื่อแสดงบนหน้าจอขนาดต่าง ๆ อย่าเลือกจากภาพรวมเพียงอย่างเดียว
4. คัดลอกไฟล์ไปที่รากโครงการ ใช้ตำแหน่งตามที่โครงการแนะนำ แล้วบอก AI coding agent ให้ใช้ DESIGN.md
5. เทียบผลงานกับกติกาและ preview อย่าสรุปว่า agent ทำถูกเพียงเพราะมันอ่านไฟล์ได้

ถ้าไม่มีเว็บไซต์ที่ต้องการ คลังมีช่องทาง Request a DESIGN.md และระบุว่ารับคำขอส่วนตัวซึ่งจะส่งไฟล์ให้เฉพาะผู้ขอด้วย ส่วนผู้ที่ต้องการปรับปรุงคลังควรเปิด issue เพื่อหารือก่อนเปิด pull request โดยงานที่โครงการเชิญชวนรวมถึงการแก้สี เติม token ปรับคำอธิบาย และรายงานจุดผิดปกติ

หลัง agent สร้าง UI คุณยังต้องตรวจอะไรเอง

คลังนี้เผยแพร่ภายใต้ MIT License และระบุว่าไฟล์ให้ใช้แบบ “as is” โดยไม่มีการรับประกัน ผู้ดูแลบอกด้วยว่าไม่ได้อ้างความเป็นเจ้าของ visual identity ของเว็บไซต์ที่นำมาวิเคราะห์ ดังนั้นคุณยังต้องตัดสินเองว่า UI ที่สร้างมีคุณภาพพอและเหมาะจะนำไปเผยแพร่หรือไม่

หลัง agent สร้างงานแล้ว ควรตรวจอย่างน้อยสี่เรื่อง:

• ความถูกต้องด้านภาพ: ผลงานทำตามกติกาที่เลือกไว้และตรงกับ preview แค่ไหน มีส่วนใดที่ agent ตีความเพิ่มเอง
• Responsive behavior: เปิด UI บนหน้าจอทุกขนาดที่ต้องรองรับ แล้วดูว่ายังจัดวางและ collapse ตามที่ตั้งใจหรือไม่
• Accessibility: ประเมินตามเกณฑ์ของผลิตภัณฑ์อีกครั้ง เพราะต้นทางไม่ได้ให้วิธีตรวจหรือหลักฐานรับรองด้านนี้
• Visual identity: พิจารณาว่าเหมาะหรือไม่ที่จะนำเอกลักษณ์ซึ่งบุคคลที่สามวิเคราะห์ไปใช้ในผลิตภัณฑ์ของคุณ คลังไม่ได้รับรองเรื่องเครื่องหมายการค้า และบทความนี้ไม่ได้ให้คำแนะนำทางกฎหมาย

คุณค่าของ awesome-design-md จึงไม่ใช่คำสัญญาว่าคัดลอกไฟล์เดียวแล้วจะได้หน้าตาเหมือนแบรนด์หรือพร้อมปล่อยทันที สิ่งที่ได้คือไฟล์กติกาที่คุณอ่านและตรวจย้อนกลับได้: เลือกไฟล์ ดู preview ให้ agent ใช้กติกา แล้วนำทั้ง 9 หมวดมาเทียบกับผลงานอีกครั้ง เมื่อใช้ DESIGN.md เป็นไฟล์ตั้งต้น ไม่ใช่คำรับรอง มันจะช่วยให้คำสั่งชัดขึ้นโดยไม่ทำให้เราลืมว่าคุณภาพสุดท้ายยังต้องตัดสินจาก UI ที่สร้างขึ้นจริง

ที่มา: VoltAgent/awesome-design-md บน GitHub