Feature Request: Cải tiến khả năng generate Frontend với ShadCN MCP + chuẩn hóa DESIGN.md

[hapo-minhlh]

💡 Đề xuất cải tiến

1. Tích hợp ShadCN UI MCP

• Thêm option tích hợp ShadCN UI thông qua MCP (Model Context Protocol).

• Giúp AI:

  • Generate UI dựa trên component chuẩn (button, form, modal, table...)
  • Tái sử dụng design pattern phổ biến
  • Đảm bảo consistency giữa các màn hình

---

2. Hỗ trợ Sub-agent chuyên biệt cho Frontend

• Tách các agent nhỏ chuyên xử lý:

  • UI layout (bố cục)
  • Component structure (chia component)
  • Styling / theme

• Các sub-agent phối hợp sẽ cho output tốt hơn so với 1 agent tổng.

---

3. Generate theme từ màu sắc chủ đạo

• Cho phép input:

  • Màu primary (brand color)

• AI tự động generate:

  • Color palette (primary / secondary / neutral)
  • Tailwind config hoặc CSS variables
  • Token cho ShadCN

→ Giúp UI đồng bộ với branding hệ thống ngay từ đầu.

---

4. Chuẩn hóa file DESIGN.md

• Đề xuất thêm file DESIGN.md trong project để mô tả:

  • Typography
  • Color system
  • Spacing
  • Component guideline
  • UX pattern

• Tham khảo:
  https://github.com/VoltAgent/awesome-design-md

• Lợi ích:

  • Dev code UI nhất quán hơn
  • AI có context rõ ràng khi generate FE
  • Giảm ambiguity trong thiết kế

---

5. Tái sử dụng design system giữa các dự án

• Cho phép:

  • Export UI hệ thống hiện tại → DESIGN.md
  • Import reuse cho project mới

→ Tăng tốc phát triển và giữ consistency giữa các sản phẩm.

---

🎯 Kỳ vọng

• FE generate ra gần production hơn
• Giảm effort chỉnh sửa UI
• Tăng tốc độ phát triển
• Đồng bộ UI/UX toàn hệ thống

---

🧩 Gợi ý triển khai

• Thêm flag:

  • --design-context (đọc từ DESIGN.md)
  • --use-shadcn

• Cho phép plugin/sub-agent architecture

• Provide template sẵn cho DESIGN.md