พอให้ AI ออกแบบ UI แต่ละคอมโพเนนต์อาจดูปกติดี แต่พอเอามารวมกันแล้วจะมีกลิ่นของงานที่ “ถูกสร้างขึ้น” อยู่
สาเหตุไม่ใช่เพราะชิ้นส่วนหน้าตาไม่ดี แต่เป็นเพราะชิ้นส่วนต่าง ๆ ไม่เข้ากัน — ขาดความสอดคล้องกัน
วิธีแก้กลับง่ายอย่างคาดไม่ถึง — กำหนดค่าเดียวให้แต่ละแกน (มุม·สีเน้น·ระยะห่าง·เงา) แล้วปรับทุกอย่างให้ตรงตามนั้น
สรุปไว้พร้อมอ้างอิงจาก Refactoring UI·Material 3·Apple HIG·WCAG และมี CSS ให้คัดลอกไปใช้ได้
เดโมให้ดูโดยตรง: https://styleseed-demo.vercel.app/how-it-thinks
โอเพนซอร์ส (MIT): https://github.com/bitjaru/styleseed
7 ความคิดเห็น
คงจะดีถ้า
toss ux writingถูกจัดทำเป็นเอกสารด้วยเหมือนกันจะเตรียมไว้ให้ครับ
มันก็เหมือนเป็นเรื่องที่ควรจะชัดเจนอยู่แล้ว แต่เป็นจุดที่ไม่เคยนึกถึงมาก่อน เลยคาดว่าถ้าเอาไปใช้ก็น่าจะช่วยให้ดีขึ้นได้มาก
ลองใช้ดู แล้วฝากฟีดแบ็กไว้บน GitHub ได้ตามสบายเลย!
ในกรณีที่มี design system จัดเตรียมไว้อยู่แล้ว ไม่สามารถใช้เพียงกฎของ agent ได้หรือ?
ได้ครับ แยกใช้เฉพาะกฎได้
กฎของ StyleSeed ไม่ได้บังคับสีหรือคอมโพเนนต์เฉพาะเจาะจง แต่มีเพียงเกณฑ์การตัดสินใจแบบ "กรณีนี้ให้ทำแบบนี้" เท่านั้น จึงวางทับบนระบบเดิมได้ตรง ๆ
ไม่ต้องติดตั้ง แค่ประโยคเดียวก็พอ:
"https://styleseed-demo.vercel.app/llms.txt อ่านแล้วช่วยใช้กฎการออกแบบนี้ให้หน่อย"
ถ้าอยากทำให้ดีไซน์ที่มีอยู่กลายเป็นระบบ ให้เขียนสิ่งที่ตัดสินใจไว้แล้ว (เช่น ระยะห่าง·ความโค้งมน·สีเน้น ฯลฯ) ลงในไฟล์นั้นทีละบรรทัด เอเจนต์จะนำกลับมาใช้ซ้ำในทุกหน้าจอใหม่ จนค่อย ๆ ตกผลึกเป็นระบบที่สอดคล้องกัน กฎพื้นฐานเป็นจุดเริ่มต้น และถ้าอะไรไม่เข้าก็แก้ใช้ได้เลย
ช่วยได้มากเลย ขอบคุณครับ