StyleSeed – โอเพนซอร์สที่เติมเซนส์ด้านดีไซน์ให้เครื่องมือเขียนโค้ด AI (กฎการออกแบบ 2,200 บรรทัด)

เมื่อสร้าง UI ด้วย vibe coding มักจะเจอปัญหาว่า "ฟังก์ชันใช้งานได้ แต่ดีไซน์ดูไม่ดี"

StyleSeed คือโอเพนซอร์สที่ใส่กฎการออกแบบเข้าไปในเครื่องมือเขียนโค้ด AI (เช่น Claude Code) เพียงคัดลอกไฟล์ไปไว้ในโปรเจ็กต์ AI ก็จะสร้าง UI ระดับเดียวกับแอป Toss ได้

สิ่งที่มีให้:

• กฎการออกแบบภาพ 60 ข้อ รวม 2,200 บรรทัด (แนวคิดเรื่องสี, ลำดับชั้นตัวอักษร, โครงสร้างการ์ด, แพตเทิร์นที่ห้ามใช้ ฯลฯ)
• React คอมโพเนนต์ 47 รายการ (31 รายการบนพื้นฐาน shadcn/ui + 16 แดชบอร์ดแพตเทิร์น)
• Claude Code skills 10 รายการ (การสร้าง UI, การตรวจสอบ UX, การสร้าง microcopy ฯลฯ)
• ธีม Tailwind CSS v4 (โหมดสว่าง/มืด)

หาก DESIGN.md ของ awesome-design-md (23K stars) ให้ brand tokens, StyleSeed ก็คือ "สมองด้านดีไซน์" ที่รวมทั้งกฎการจัดเลย์เอาต์, ไกด์ UX และคอมโพเนนต์ไว้ด้วย

Seed แรกคือสไตล์ Toss และมีแผนจะเพิ่ม seed ของ Apple, Linear และ Stripe ต่อไป ใช้สัญญาอนุญาต MIT.

[bitjaru0402]

▎ อัปเดต — ผมอัปโหลดไลฟ์เดโมที่คลิกได้แล้วครับ.
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ นี่คือหน้าจอที่มอร์ฟแชต UI เดียวกันให้เป็น 3 แบรนด์ Toss → Raycast → Arc ได้ในครั้งเดียว สี มุมโค้ง โมชัน เงา และกราเดียนต์ทั้งหมดเปลี่ยนได้ด้วย data-skin แอตทริบิวต์เดียว โดยใช้แค่โทเค็นโดยไม่ต้องแยกโค้ด
▎
▎ ผมปัก GIF พรีวิวไว้ด้านบนของ README แล้ว: https://github.com/bitjaru/styleseed
▎
▎ ขอบคุณทุกท่านที่ให้ความเห็นตอนโพสต์ครั้งแรกนะครับ 🙏

[kurthong]

ดูเหมือนว่าการขยายองค์ความรู้เฉพาะทางผ่านโอเพนซอร์สจะยิ่งเปล่งประกายในยุค AI อย่างน่าประหลาดใจเลยนะครับ การแบ่งปันความรู้ที่ยอดเยี่ยมแบบนี้ขอขอบคุณมากครับ!

[aldlfkahs]

ขอบคุณที่แชร์ครับ ไว้ทำโปรเจกต์ส่วนตัวคงได้ใช้ประโยชน์แน่เลย

[kaydash]

เจ๋ง!