StyleSeed – mã nguồn mở đưa cảm quan thiết kế vào công cụ lập trình AI (2.200 dòng quy tắc thiết kế)

Khi tạo UI bằng vibe coding, thường phát sinh vấn đề "chạy được về mặt chức năng nhưng thiết kế thì xấu".

StyleSeed là một dự án mã nguồn mở giúp đưa các quy tắc thiết kế vào công cụ lập trình AI (như Claude Code). Chỉ cần sao chép các tệp vào dự án, AI có thể tạo ra UI ở mức độ như ứng dụng Toss.

Nội dung bao gồm:

• 60 quy tắc thiết kế thị giác trong 2.200 dòng (triết lý màu sắc, hệ phân cấp typography, cấu trúc thẻ, các mẫu bị cấm, v.v.)
• 47 component React (31 cái dựa trên shadcn/ui + 16 mẫu dashboard)
• 10 kỹ năng Claude Code (tạo UI, kiểm toán UX, tạo microcopy, v.v.)
• Tailwind CSS v4 theme (chế độ sáng/tối)

Nếu DESIGN.md của awesome-design-md (23K sao) cung cấp brand token, thì StyleSeed là một "bộ não thiết kế" bao gồm cả quy tắc bố cục, hướng dẫn UX và component.

Hạt giống đầu tiên là phong cách Toss. Dự kiến sẽ bổ sung seed cho Apple, Linear và Stripe. Giấy phép MIT.

[bitjaru0402]

▎ Đây là bản cập nhật — mình đã đăng demo live có thể nhấp thử rồi.
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ Đây là màn hình morph cùng một chat UI sang ba brand Toss → Raycast → Arc cùng lúc. Màu sắc, bo góc, chuyển động, bóng đổ và gradient đều thay đổi chỉ với một thuộc tính data-skin. Chỉ bằng token, không cần rẽ nhánh code.
▎
▎ Mình cũng đã ghim GIF xem trước ở đầu README: https://github.com/bitjaru/styleseed
▎
▎ Cảm ơn mọi người đã để lại ý kiến ở bài đăng đầu tiên 🙏

[kurthong]

Có vẻ như việc mở rộng tri thức chuyên ngành thông qua mã nguồn mở, một cách đầy mỉa mai, lại càng tỏa sáng trong thời đại AI. Cảm ơn bạn rất nhiều vì đã chia sẻ kiến thức tuyệt vời như vậy!

[aldlfkahs]

Cảm ơn bạn đã chia sẻ. Có vẻ sẽ rất hữu ích khi dùng cho các dự án cá nhân.

[kaydash]

Tuyệt quá!