---
title: "มารู้จักกับ DESIGN.md กัน"
source_url: https://youtu.be/YXljvRV6bak
captured_at: 2026-05-15
author: "mikelopster"
contributor: "ชิดชนก"
platform: youtube
---
# มารู้จักกับ DESIGN.md กัน

youtube video by **mikelopster**, 38m19s, uploaded 2026-05-14. URL: https://youtu.be/YXljvRV6bak
Tags: design.md, design system, design tokens, ui design, frontend development, ai coding agent, google stitch, ai web design, design linter, markdown for design, ui consistency, design guidelines, web development, ai developer tools, generative ai, ui ux, website design, coding with ai, design system tutorial, frontend ai tools, ai ui generator, prompt for ui, mikelobster

## Shared in LINE Note+
- 2026-05-15 21:47 by ชิดชนก

## Description
ลองไมค์ สัปดาห์นี้ขอพาทุกคนมารู้จักกับ "DESIGN.md" อีกหนึ่งความพยายามสร้าง Standard ใหม่ที่จะมาช่วยเชื่อมรอยต่อระหว่างงาน UI Design และ Front-end Development กันครับ ด้วยปัญหาที่เวลาเราใช้ AI สร้างหน้าเว็บแล้ว งานมักจะหลุด Theme  ไม่สม่ำเสมอ และดูรู้เลยว่าเป็น Pattern สำเร็จรูปจาก AI (AI Slop) คลิปนี้เราจะมาเจาะลึกกันว่า DESIGN.md คืออะไร ทำไมการรวม Design Tokens เข้ากับกฎการออกแบบถึงช่วยตีกรอบให้ AI ทำงานได้ตรงตาม Design System ของแบรนด์เรามากขึ้น มาร่วมทำความรู้จักและลองใช้งานมาตรฐานใหม่นี้ไปด้วยกันในลองไมค์กันครับ

โดยในหัวข้อนี้เราจะมาพูดถึงประเด็นเหล่านี้กัน
- ทำความรู้จักกับ "DESIGN.md" มาตรฐานที่ใช้ Markdown เพื่อคุม Design System ให้ AI อ่านเข้าใจ
- ลองใช้งาน DESIGN.md รูปแบบต่างๆ ร่วมกับ Google Stitch
- ทดสอบการใช้ DESIGN.md คู่กับ AI Coding Agent
- แนะนำการสร้าง DESIGN.md และการใช้ DESIGN.md Linter

หัวข้อ
00:00 แนะนำหัวข้อ
01:54 DESIGN.md คืออะไร ? มีองค์ประกอบอะไรบ้าง ?
11:37 ลองใช้ DESIGN.md ที่มีอยู่แล้วกับ Google Stitch
17:30 ลองใช้ DESIGN.md ที่มีอยู่แล้วกับ AI Coding Agent และ Screenshot
24:41 ลองสร้าง DESIGN.md กับ Design ที่มีอยู่ และใช้ร่วมกับ Linter

หวังว่าคลิปนี้จะทำให้ทุกคนได้เห็นประโยชน์และไอเดียของการใช้ DESIGN.md ในการนำมาตีกรอบการทำงานร่วมกับ AI Coding A