AI 8 กรกฎาคม 2569 • อ่าน 1 นาที

เจอของดีสำหรับสาย AI Coding Agent อีกตัวครับ

ปกติเวลาให้ AI สร้างหน้าเว็บ ปัญหาที่เจอบ่อยมากคือ…

ระบบทำงานได้ โค้ดพอใช้ได้ แต่ UI หน้าตาเหมือนเว็บ template ทั่วไปมาก

เพราะ AI มันไม่ได้มี “รสนิยมดีไซน์ของโปรเจกต์” ติดตัวมาเอง

ตัวนี้เลยน่าสนใจ

VoltAgent เปิด repo ชื่อ awesome-design-md

ไอเดียคือเขารวบรวมไฟล์ DESIGN.md เอาไว้ให้ AI Agent อ่านก่อนสร้าง UI

พูดง่าย ๆ คือ DESIGN.md = ไฟล์คุมภาษาดีไซน์ของโปรเจกต์

ในไฟล์จะบอกแนวพวก

สีหลัก ฟอนต์ ปุ่ม การ์ด spacing layout mood ของหน้าเว็บ และกติกาว่า UI ควรออกมาแนวไหน

จากเดิมที่เราสั่ง AI ว่า “ทำหน้าเว็บให้สวย ๆ”

ก็เปลี่ยนเป็น

“อ่าน DESIGN.md ก่อน แล้วสร้าง UI ตาม design language นี้”

อันนี้เหมาะมากกับคนที่ใช้ Codex, Claude Code, Cursor, OpenClaw หรือ Coding Agent ตัวอื่น ๆ

เพราะทุกวันนี้ Agent เขียนโค้ดได้ไวขึ้นมาก แต่ถ้าไม่มีไฟล์คุมแนว หน้าเว็บแต่ละรอบก็อาจหลุดคนละสไตล์ได้ง่าย

ส่วนตัวมองว่าโครงสร้างที่น่าใช้จริงคือ

AGENTS.md = คุมวิธีทำงานของ Agent
DESIGN.md = คุมหน้าตา UI / UX ของโปรเจกต์

อันแรกบอกว่า Agent ต้องแก้โค้ดยังไง อันหลังบอกว่า Agent ต้องออกแบบหน้าตายังไง

แต่ข้อควรระวังคือ อย่าเอาไปลอกแบรนด์คนอื่นตรง ๆ

ให้ใช้เป็น reference / direction แล้วปรับเป็น design system ของโปรเจกต์เราเองจะปลอดภัยกว่า

ใครทำเว็บ SaaS, dashboard, landing page หรือ internal tool ตัวนี้ควรเก็บไว้ลองครับ

ลิงก์ repo เดี๋ยวแปะไว้ในคอมเมนต์แรก

#AI #AIAgent #CodingAgent #WebDesign #SynapTechAI

แชร์:

อยากรับข่าวก่อนใคร?

รับข่าว AI และบทความใหม่ก่อนผู้อื่น ส่งตรงถึง inbox

ถ้าชอบเนื้อหาแบบนี้