DESIGN.md คือไฟล์อะไร สำคัญอย่างไรกับการออกแบบด้วย AI
การใช้ AI สร้างเว็บไซต์ แอปพลิเคชัน Dashboard หรือหน้า Landing Page ช่วยลดเวลาในการออกแบบและเขียนโค้ดได้อย่างมาก แต่ปัญหาที่พบได้บ่อยคือ AI สร้างผลงานแต่ละครั้งไม่เหมือนกัน
DESIGN.md จึงถูกนำมาใช้เป็นไฟล์ที่รวบรวมกฎการออกแบบไว้ในรูปแบบ Markdown เพื่อให้ทั้งมนุษย์และ AI สามารถอ่านและทำความเข้าใจได้ ภายในไฟล์สามารถกำหนดสี ฟอนต์ ขนาดตัวอักษร ระยะห่าง รูปแบบปุ่ม การจัดวาง Layout ตลอดจนสิ่งที่ควรทำและไม่ควรทำ เมื่อ AI Coding Agent อ่านไฟล์นี้ก่อนเริ่มงาน ผลลัพธ์ที่สร้างขึ้นจะมีความสอดคล้องกับแบรนด์และ Design System มากขึ้น ลดการแก้ไขซ้ำ และช่วยให้ทีมออกแบบกับทีมพัฒนาทำงานร่วมกันได้ง่ายกว่าเดิม
DESIGN.md คืออะไร
DESIGN.md คือไฟล์ข้อความธรรมดาที่เขียนด้วยภาษา Markdown โดยมีหน้าที่อธิบายอัตลักษณ์ทางภาพหรือ Visual Identity ของเว็บไซต์ แอปพลิเคชัน และผลิตภัณฑ์ดิจิทัลให้ AI เข้าใจ ไฟล์นี้ทำหน้าที่คล้ายคู่มือ Design System ที่จัดทำขึ้นในรูปแบบที่มนุษย์อ่านง่ายและ AI ประมวลผลได้โดยตรง
ชื่อไฟล์มาจากคำว่า DESIGN และนามสกุล .md ซึ่งหมายถึง Markdown โดยทั่วไปไฟล์จะถูกเก็บไว้ในโฟลเดอร์หลักของโครงการ เพื่อให้ AI Coding Agent สามารถค้นพบและอ่านกฎการออกแบบก่อนสร้างหรือแก้ไขส่วนติดต่อผู้ใช้
Google อธิบาย DESIGN.md ว่าเป็นรูปแบบสำหรับอธิบายอัตลักษณ์ทางภาพให้กับ Coding Agent โดยช่วยให้ AI มีความเข้าใจ Design System อย่างต่อเนื่องและเป็นโครงสร้าง ไฟล์นี้จึงเปรียบเสมือนแหล่งข้อมูลกลางหรือ Source of Truth ที่นักออกแบบ นักพัฒนา และ AI ใช้อ้างอิงร่วมกัน
อย่างไรก็ตาม DESIGN.md ไม่ใช่ไฟล์รูปภาพ ไม่ใช่ไฟล์จาก Figma และไม่ใช่โปรแกรมสำหรับออกแบบโดยตรง แต่เป็นเอกสารที่บอก AI ว่าเมื่อสร้างหน้าจอหรือเขียนโค้ด Frontend แล้ว ผลงานควรมีหน้าตาและพฤติกรรมอย่างไร
DESIGN.md แตกต่างจาก README.md อย่างไร
ผู้ที่ทำงานด้านพัฒนาซอฟต์แวร์อาจคุ้นเคยกับไฟล์ README.md ซึ่งใช้บอกข้อมูลภาพรวมของโครงการ เช่น วัตถุประสงค์ วิธีติดตั้ง วิธีใช้งาน เทคโนโลยีที่ใช้ และขั้นตอนการพัฒนา ส่วน DESIGN.md จะเน้นเรื่องรูปลักษณ์ ประสบการณ์ใช้งาน และกฎการออกแบบโดยเฉพาะ
- README.md อธิบายว่าโครงการคืออะไร ติดตั้งและใช้งานอย่างไร
- DESIGN.md อธิบายว่าผลิตภัณฑ์ควรมีหน้าตาและรูปแบบการใช้งานอย่างไร
- AGENTS.md หรือ CLAUDE.md อาจใช้กำหนดแนวทางการทำงานหรือคำสั่งสำหรับ AI Agent
- DESIGN.md เน้นสี ฟอนต์ Layout Component และหลักการออกแบบ
ในโครงการหนึ่งสามารถใช้ไฟล์เหล่านี้ร่วมกันได้ เช่น README.md ให้ข้อมูลภาพรวม AGENTS.md ระบุแนวทางการเขียนโค้ด และ DESIGN.md กำหนดมาตรฐานด้านภาพและประสบการณ์ผู้ใช้
ภายในไฟล์ DESIGN.md ควรมีข้อมูลอะไรบ้าง
เนื้อหาของ DESIGN.md สามารถปรับให้เหมาะกับแต่ละโครงการได้ แต่เพื่อให้ AI นำไปใช้งานได้อย่างมีประสิทธิภาพ ควรกำหนดข้อมูลอย่างชัดเจนและสามารถตรวจสอบได้ ไม่ควรใช้เพียงคำกว้าง ๆ เช่น “ออกแบบให้ทันสมัย” หรือ “ทำให้ดูสวยงาม” เพราะ AI แต่ละรุ่นอาจตีความแตกต่างกัน
1. ภาพรวมของแบรนด์
ควรอธิบายบุคลิกของแบรนด์ กลุ่มผู้ใช้งาน และความรู้สึกที่ต้องการสื่อ เช่น เป็นมืออาชีพ เป็นมิตร เรียบง่าย หรูหรา หรือเน้นเทคโนโลยี ข้อมูลนี้ช่วยให้ AI เลือกทิศทางการออกแบบได้เหมาะสม
2. ชุดสีของเว็บไซต์
ระบุสีหลัก สีรอง สีพื้นหลัง สีข้อความ สีสำหรับเส้นขอบ รวมถึงสีแจ้งเตือนต่าง ๆ ด้วยรหัสสีที่ชัดเจน เช่น HEX, RGB หรือ CSS Variable
## Colors
* Primary: #2563EB
* Secondary: #0F172A
* Background: #F8FAFC
* Surface: #FFFFFF
* Text Primary: #1E293B
* Text Secondary: #64748B
* Success: #16A34A
* Warning: #F59E0B
* Error: #DC26263. Typography หรือรูปแบบตัวอักษร
ควรกำหนดชื่อฟอนต์ ขนาดตัวอักษร น้ำหนัก ระยะห่างบรรทัด และลำดับความสำคัญของหัวข้อ เช่น H1, H2, H3 และข้อความทั่วไป หากเว็บไซต์ใช้ฟอนต์จาก Template อยู่แล้ว สามารถสั่งให้ AI ใช้ font-family: inherit; และหลีกเลี่ยงการนำเข้าฟอนต์ภายนอก
4. Spacing และขนาด
กำหนดระบบระยะห่างเพื่อให้ Margin และ Padding ขององค์ประกอบมีความสม่ำเสมอ เช่น ใช้ระยะ 4, 8, 12, 16, 24 และ 32 พิกเซล แทนการปล่อยให้ AI เลือกตัวเลขแบบสุ่มในแต่ละส่วน
5. Layout และ Responsive Design
ระบุความกว้างสูงสุดของ Content จำนวนคอลัมน์ ตำแหน่ง Sidebar ขนาดหน้าจอที่ใช้เปลี่ยน Layout และพฤติกรรมบนโทรศัพท์มือถือ เช่น กำหนดให้ Card สามคอลัมน์บน Desktop เปลี่ยนเป็นหนึ่งคอลัมน์เมื่อหน้าจอมีความกว้างต่ำกว่า 768 พิกเซล
6. รูปแบบ Component
Component คือองค์ประกอบที่นำกลับมาใช้ซ้ำได้ เช่น ปุ่ม Card เมนู ตาราง Form กล่องข้อความ และหน้าต่าง Modal โดยควรกำหนดลักษณะสำคัญ เช่น สี ความโค้งมน เงา เส้นขอบ และสถานะเมื่อผู้ใช้เลื่อนเมาส์ไปบนองค์ประกอบ
7. Accessibility
DESIGN.md ควรระบุแนวทางการออกแบบที่ทุกคนสามารถใช้งานได้ เช่น ข้อความต้องอ่านง่าย สีข้อความกับพื้นหลังต้องมี Contrast เพียงพอ รูปภาพต้องมี Alt Text ปุ่มต้องใช้งานด้วย Keyboard ได้ และไม่ควรสื่อความหมายด้วยสีเพียงอย่างเดียว
8. สิ่งที่ควรทำและไม่ควรทำ
การระบุข้อห้ามช่วยลดพฤติกรรมที่ AI มักสร้างขึ้นโดยอัตโนมัติ เช่น ใช้ Gradient มากเกินไป สร้างเงาหนัก ใช้มุมโค้งทุกองค์ประกอบ หรือเพิ่ม Animation โดยไม่จำเป็น
## Do
* Use clear visual hierarchy.
* Keep layouts simple and responsive.
* Reuse existing components.
* Use the template's existing font.
## Do Not
* Do not import external fonts.
* Do not use excessive gradients.
* Do not create unnecessary animations.
* Do not place text directly over busy images.
* Do not use more than one primary button per section.ทำไม DESIGN.md จึงสำคัญกับการออกแบบด้วย AI
ช่วยลดการคาดเดาของ AI
หากสั่ง AI เพียงว่า “สร้างหน้าเว็บไซต์ให้ดูทันสมัย” AI จะต้องคาดเดาเองว่าสี ฟอนต์ ปุ่ม และ Layout แบบใดถือว่าทันสมัย ผลลัพธ์จึงอาจไม่ตรงกับภาพลักษณ์ขององค์กร แต่เมื่อมี DESIGN.md คำว่า “ทันสมัย” จะถูกแปลงเป็นกฎที่ชัดเจน เช่น ใช้พื้นหลังสีอ่อน ใช้พื้นที่ว่างมาก ใช้เส้นขอบบาง และหลีกเลี่ยงเงาที่เข้มเกินไป
ทำให้ทุกหน้ามีรูปแบบสม่ำเสมอ
ในการสร้างเว็บไซต์หลายหน้า AI อาจสร้างปุ่มหน้าแรกเป็นสีน้ำเงิน แต่สร้างปุ่มหน้าติดต่อเป็นสีม่วง หรือใช้ความโค้งมนแตกต่างกัน DESIGN.md จะช่วยให้ AI อ้างอิงกฎชุดเดียวกัน ทำให้หน้า Home, About, Services และ Contact มีภาษาการออกแบบที่ต่อเนื่องกัน
ลดเวลาแก้ไข Prompt ซ้ำ
หากไม่มีไฟล์กลาง ผู้ใช้อาจต้องเขียนรายละเอียดเรื่องสี ฟอนต์ และ Layout ซ้ำในทุก Prompt นอกจากเสียเวลาแล้ว ยังมีโอกาสลืมหรือระบุข้อมูลไม่ตรงกัน การเก็บกฎไว้ใน DESIGN.md ทำให้สามารถสั่ง AI สั้นลง เช่น “สร้างหน้า Dashboard ใหม่โดยปฏิบัติตาม DESIGN.md”
ช่วยส่งต่องานระหว่าง AI หลายเครื่องมือ
DESIGN.md เป็นไฟล์ข้อความที่ไม่ผูกติดกับโปรแกรมใดโปรแกรมหนึ่ง จึงสามารถเก็บไว้ใน Repository และนำไปใช้เป็นบริบทกับ AI Coding Agent หลายประเภทได้ ตราบใดที่เครื่องมือนั้นสามารถอ่านไฟล์ภายในโครงการ
แนวทางนี้ช่วยลดปัญหา Vendor Lock-in เพราะกฎการออกแบบไม่ได้ถูกเก็บอยู่ในระบบเฉพาะเพียงแห่งเดียว Google ระบุว่า DESIGN.md สามารถใช้ส่งออกและนำเข้ากฎการออกแบบระหว่างโครงการ ทำให้ไม่ต้องสร้าง Design System ใหม่ทุกครั้ง
ทำให้ทีมออกแบบและทีมพัฒนาเข้าใจตรงกัน
DESIGN.md ไม่ได้มีประโยชน์เฉพาะกับ AI แต่ยังเป็นเอกสารอ้างอิงสำหรับนักออกแบบ นักพัฒนา เจ้าของโครงการ และทีมการตลาด ทุกฝ่ายสามารถตรวจสอบได้ว่าเว็บไซต์ควรใช้สีอะไร ปุ่มควรมีรูปแบบใด และองค์ประกอบใดไม่ควรถูกนำมาใช้
ช่วยรักษาอัตลักษณ์ของแบรนด์
สำหรับองค์กรที่มีหลายเว็บไซต์ หลายสาขา หรือหลายระบบ การควบคุม Brand Consistency เป็นเรื่องสำคัญ DESIGN.md สามารถเก็บกฎที่จำเป็นไว้ในรูปแบบเดียวกัน ทำให้ AI สร้างหน้าจอใหม่โดยยังคงภาพลักษณ์ขององค์กร
ตัวอย่างโครงสร้างไฟล์ DESIGN.md
ตัวอย่างต่อไปนี้เป็นโครงสร้างพื้นฐานสำหรับเว็บไซต์องค์กร สามารถนำไปปรับใช้กับเว็บไซต์ Blogger เว็บบริษัท Dashboard หรือ Web Application ได้
# DESIGN.md
## Product
This project is a professional technology information website.
The design should feel reliable, modern, clean, and easy to read.
## Audience
* General technology users
* Corporate employees
* IT professionals
* Mobile and desktop visitors
## Design Principles
1. Prioritize readability.
2. Keep the interface simple.
3. Use consistent spacing.
4. Design mobile-first.
5. Avoid unnecessary decorative elements.
## Typography
* Use the existing template font.
* Do not import external fonts.
* Body line-height: 1.7
* H1: 32px, bold
* H2: 26px, bold
* H3: 21px, semibold
* Body: 16px
## Colors
* Primary: #2563EB
* Primary Hover: #1D4ED8
* Background: #F8FAFC
* Surface: #FFFFFF
* Text: #1E293B
* Muted Text: #64748B
* Border: #E2E8F0
## Spacing
Use an 8px spacing system:
* XS: 4px
* SM: 8px
* MD: 16px
* LG: 24px
* XL: 32px
* XXL: 48px
## Buttons
* Minimum height: 44px
* Border radius: 8px
* Use clear action labels
* Primary buttons use the primary color
* Do not use more than one primary action in the same group
## Cards
* White background
* 1px solid border
* Border radius: 12px
* Padding: 20px
* Use subtle shadows only when necessary
## Responsive Design
* Mobile: below 768px
* Tablet: 768px to 1023px
* Desktop: 1024px and above
* Multi-column sections must become one column on mobile
* Images must use max-width: 100%
## Accessibility
* Use semantic HTML
* Add alt text to meaningful images
* Maintain readable color contrast
* Support keyboard navigation
* Use visible focus states
## Avoid
* Excessive animations
* Heavy shadows
* Low-contrast text
* More than three font sizes in one component
* Decorative icons without meaning
* Horizontal scrolling on mobileวิธีใช้ DESIGN.md ร่วมกับ AI
ขั้นตอนที่ 1 สร้างไฟล์ในโครงการ
สร้างไฟล์ข้อความชื่อ DESIGN.md แล้วเก็บไว้ในโฟลเดอร์หลักของเว็บไซต์หรือ Repository ควรใช้ตัวพิมพ์ใหญ่ตามชื่อมาตรฐานเพื่อให้ผู้ใช้งานและ AI Agent ค้นหาได้ง่าย
ขั้นตอนที่ 2 บันทึกกฎการออกแบบที่ใช้งานจริง
ตรวจสอบเว็บไซต์เดิม Brand Guideline ไฟล์ CSS หรือ Design System ขององค์กร แล้วนำข้อมูลที่จำเป็นมาเขียนเป็นกฎ หลีกเลี่ยงการกำหนดสิ่งที่ไม่มีอยู่จริง เพราะอาจทำให้ AI สร้าง Component ที่ไม่เข้ากับระบบเดิม
ขั้นตอนที่ 3 สั่งให้ AI อ่านไฟล์ก่อนทำงาน
แม้ AI บางเครื่องมืออาจค้นพบไฟล์โดยอัตโนมัติ แต่ควรระบุใน Prompt อย่างชัดเจนเพื่อป้องกันความผิดพลาด
Read DESIGN.md before making any UI changes.
Create a responsive services page that follows all colors,
typography, spacing, component, and accessibility rules
defined in DESIGN.md.
Reuse existing components and do not introduce a new
visual style unless necessary.ขั้นตอนที่ 4 ตรวจสอบผลลัพธ์
หลังจาก AI สร้างหน้าเว็บแล้ว ควรตรวจสอบว่าสี ฟอนต์ ระยะห่าง ปุ่ม และ Responsive Layout ตรงกับ DESIGN.md หรือไม่ ไม่ควรเชื่อว่าการมีไฟล์เพียงอย่างเดียวจะทำให้ผลลัพธ์ถูกต้องทั้งหมด เพราะความสามารถในการอ่านและปฏิบัติตามคำสั่งของ AI แต่ละเครื่องมืออาจแตกต่างกัน
ขั้นตอนที่ 5 ปรับปรุงไฟล์อย่างต่อเนื่อง
DESIGN.md ควรเป็น Living Document หรือเอกสารที่ปรับปรุงได้ เมื่อมีการเปลี่ยนสีแบรนด์ เพิ่ม Component หรือแก้ไขมาตรฐานการออกแบบ ควรอัปเดตไฟล์ให้ตรงกับระบบจริงเสมอ
DESIGN.md เหมาะกับงานประเภทใด
ไฟล์นี้มีประโยชน์กับงานออกแบบที่ต้องสร้างและปรับปรุงอย่างต่อเนื่อง โดยเฉพาะโครงการที่ใช้ AI ช่วยเขียน HTML, CSS, JavaScript หรือ Framework สำหรับพัฒนาเว็บไซต์และแอปพลิเคชัน
- เว็บไซต์บริษัทและเว็บไซต์องค์กร
- Landing Page สำหรับแคมเปญการตลาด
- Dashboard สำหรับผู้บริหารและพนักงาน
- Web Application และระบบหลังบ้าน
- เว็บไซต์โรงแรมและระบบบริการลูกค้า
- ระบบจองห้องพักหรือบริการออนไลน์
- Mobile Application
- Prototype สำหรับนำเสนอแนวคิด
- เว็บไซต์ที่มีหลายแบรนด์หรือหลายสาขา
- โครงการที่ใช้ AI Coding Agent หลายเครื่องมือ
ตัวอย่างเช่น กลุ่มโรงแรมสามารถสร้าง DESIGN.md กลางที่กำหนดสี ฟอนต์ รูปแบบปุ่มจองห้องพัก Card แสดงประเภทห้อง และมาตรฐานการแสดงผลบนโทรศัพท์ จากนั้นนำไปใช้กับเว็บไซต์ของแต่ละโรงแรม โดยปรับเฉพาะข้อมูลหรือสีรองของแต่ละแบรนด์
ข้อจำกัดของ DESIGN.md ที่ควรรู้
แม้ DESIGN.md จะช่วยเพิ่มความสม่ำเสมอ แต่ไม่สามารถทดแทนความรู้ของนักออกแบบหรือการตรวจสอบโดยมนุษย์ได้ทั้งหมด
- AI อาจปฏิบัติตามกฎได้ไม่ครบทุกข้อ
- คำอธิบายที่คลุมเครืออาจทำให้ AI ตีความผิด
- ไฟล์อาจล้าสมัยหากไม่มีผู้ดูแล
- การระบุกฎมากเกินไปอาจสร้างความขัดแย้ง
- AI อาจสร้างโค้ดที่ดูถูกต้องแต่มีปัญหาด้าน Accessibility
- ข้อมูลในไฟล์ต้องตรงกับ Component และ CSS ที่มีอยู่จริง
นอกจากนี้ DESIGN.md ยังเป็นแนวคิดที่ค่อนข้างใหม่ รูปแบบและการรองรับจากเครื่องมือต่าง ๆ อาจมีการเปลี่ยนแปลง จึงควรตรวจสอบเอกสารของ AI Coding Agent ที่ใช้งานว่ารองรับการอ่านไฟล์โดยอัตโนมัติหรือจำเป็นต้องระบุชื่อไฟล์ใน Prompt
แนวทางเขียน DESIGN.md ให้ AI เข้าใจง่าย
- ใช้ข้อความที่ชัดเจน: ระบุตัวเลข รหัสสี และเงื่อนไขที่ตรวจสอบได้
- จัดโครงสร้างด้วยหัวข้อ: แยก Colors, Typography, Layout และ Components ออกจากกัน
- ใช้รายการสั้น: ช่วยให้ AI ค้นหากฎที่เกี่ยวข้องได้ง่าย
- ระบุเหตุผล: อธิบายว่าทำไมจึงเลือกแนวทางนั้นเมื่อจำเป็น
- เพิ่มตัวอย่าง: แสดงตัวอย่างที่ถูกต้องและตัวอย่างที่ควรหลีกเลี่ยง
- หลีกเลี่ยงกฎที่ขัดกัน: เช่น ระบุให้ปุ่มมีมุม 8 พิกเซลในส่วนหนึ่ง แต่กำหนด 12 พิกเซลในอีกส่วน
- ใช้ Design Token: ตั้งชื่อสีและระยะห่างแทนการใช้ค่ากระจัดกระจาย
- อัปเดตตามระบบจริง: ทุกครั้งที่มีการปรับ Brand Guideline หรือ Component
DESIGN.md จะมาแทน Figma หรือไม่
DESIGN.md ไม่ได้ถูกออกแบบมาเพื่อแทนที่ Figma หรือเครื่องมือออกแบบกราฟิก เนื่องจาก Figma เหมาะสำหรับการสร้างหน้าจอ ตรวจสอบ Layout จัดทำ Prototype และทำงานร่วมกันในรูปแบบภาพ ส่วน DESIGN.md เหมาะสำหรับถ่ายทอดกฎและเหตุผลด้านการออกแบบให้ AI และนักพัฒนาเข้าใจ
แนวทางที่เหมาะสมคือใช้ทั้งสองระบบร่วมกัน โดย Figma เป็นแหล่งอ้างอิงด้านภาพ Component และ Prototype ขณะที่ DESIGN.md เป็นแหล่งอ้างอิงในรูปแบบข้อความสำหรับ AI Coding Agent หากข้อมูลในทั้งสองส่วนตรงกัน กระบวนการเปลี่ยนงานออกแบบเป็นโค้ดจะมีความแม่นยำมากขึ้น
สรุป DESIGN.md สำคัญอย่างไร
DESIGN.md คือไฟล์ Markdown ที่รวบรวมอัตลักษณ์ของแบรนด์และกฎของ Design System เพื่อให้ AI เข้าใจว่าควรสร้างเว็บไซต์หรือแอปพลิเคชันออกมาในรูปแบบใด ไฟล์นี้ช่วยลดการคาดเดา ทำให้สี ฟอนต์ Layout และ Component มีความสม่ำเสมอ รวมถึงช่วยลดการเขียน Prompt และการแก้ไขงานซ้ำ
สำหรับองค์กรหรือผู้พัฒนาที่เริ่มใช้ AI Coding Agent การสร้าง DESIGN.md ไว้ในโครงการถือเป็นแนวทางที่มีประโยชน์ แต่ควรมองว่าเป็นเครื่องมือสนับสนุน ไม่ใช่สิ่งทดแทนนักออกแบบ การทดสอบกับผู้ใช้งาน และการตรวจสอบคุณภาพโดยมนุษย์ หากจัดทำอย่างชัดเจนและอัปเดตสม่ำเสมอ DESIGN.md จะกลายเป็นเอกสารกลางที่ช่วยเชื่อมโยงแบรนด์ นักออกแบบ นักพัฒนา และ AI ให้ทำงานไปในทิศทางเดียวกัน
FAQ คำถามที่พบบ่อยเกี่ยวกับ DESIGN.md
DESIGN.md จำเป็นต้องใช้กับทุกโครงการหรือไม่
ไม่จำเป็นสำหรับทุกโครงการ เว็บไซต์ขนาดเล็กหรือหน้าเว็บที่สร้างเพียงครั้งเดียวอาจใช้ Prompt ปกติได้ แต่ DESIGN.md จะมีประโยชน์มากเมื่อโครงการมีหลายหน้า มีหลายคนทำงานร่วมกัน ต้องรักษาภาพลักษณ์ของแบรนด์ หรือใช้ AI สร้างและแก้ไขหน้าจออย่างต่อเนื่อง
DESIGN.md สามารถใช้กับ AI ตัวใดได้บ้าง
สามารถใช้เป็นเอกสารบริบทกับ AI Coding Agent ที่อ่านไฟล์ภายในโครงการได้ อย่างไรก็ตาม การค้นพบไฟล์และการปฏิบัติตามกฎโดยอัตโนมัติอาจแตกต่างกันในแต่ละเครื่องมือ วิธีที่ปลอดภัยคือระบุใน Prompt ให้ AI อ่าน DESIGN.md ก่อนเริ่มงานทุกครั้ง
สามารถสร้าง DESIGN.md จากเว็บไซต์เดิมได้หรือไม่
สามารถทำได้โดยวิเคราะห์ไฟล์ CSS, CSS Variables, ฟอนต์ สี ระยะห่าง รูปแบบปุ่ม Card และ Layout ของเว็บไซต์เดิม แล้วสรุปเป็นกฎใน DESIGN.md แต่ควรตรวจสอบผลลัพธ์ด้วยตนเอง เพื่อให้ข้อมูลตรงกับ Brand Guideline และระบบที่ใช้งานจริง
ความคิดเห็น
แสดงความคิดเห็น