Ở góc độ Front-end, không thể phủ nhận các AI như GPT hay Claude giúp chúng ta dựng UI cho MVP nhanh thần tốc, rút ngắn giai đoạn thiết kế và cho phép thử nghiệm ý tưởng nhanh hơn ở giai đoạn đầu. Nhưng cái giá phải trả thường là sự lộn xộn trong source code: khó sửa layout, tốn kém chi phí tinh chỉnh và thiếu tính nhất quán khi dự án mở rộng. Một hệ thống UI không được chuẩn hóa ngay từ đầu sẽ biến việc bảo trì trở thành cực hình.

Vậy làm thế nào để tận dụng AI hiệu quả cho cả bước thiết kế lẫn triển khai UI, đảm bảo được các nguyên tắc nhất quán, dễ tinh chỉnh và tiết kiệm chi phí?

Bài viết này sẽ giới thiệu một workflow chuẩn chỉnh giúp bạn giải quyết vấn đề trên bằng cách kết hợp 3 mảnh ghép:

• Stitch: Thiết kế và thử nghiệm nhanh.
• shadcn Registry: Chuẩn hoá component dùng chung.
• MCP: Đưa bộ UI chuẩn vào quy trình code với AI.

Workflow dùng AI để thiết kế và triển khai UI

1. Thiết kế giao diện với Stitch

Trong workflow, Stitch được sử dụng ở giai đoạn đầu để thiết kế và thử nghiệm giao diện cho MVP. Mục tiêu của bước này là nhanh chóng hiện thực hóa ý tưởng thành các màn hình cụ thể, đủ rõ ràng để team có thể đánh giá, so sánh và chốt hướng thiết kế trước khi bước sang giai đoạn triển khai code.

Stitch có khả năng tạo ra nhiều màn hình hoặc thậm chí là một luồng giao diện hoàn chỉnh dựa trên các ý tưởng mô tả bằng ngôn ngữ tự nhiên. Trong quá trình thiết kế, Stitch cho phép tương tác và chỉnh sửa UI một cách linh hoạt. Các màn hình có thể được chỉnh sửa độc lập, hoặc thay đổi đồng thời theo nhiều hướng khác nhau như theme, màu sắc, hay layout để so sánh. Các phiên bản trước đó vẫn được giữ lại, giúp việc thử nghiệm và lựa chọn hướng thiết kế phù hợp trở nên dễ dàng hơn.

Về trải nghiệm sử dụng, Stitch hiển thị các màn hình tương tự các công cụ thiết kế quen thuộc như Figma, giúp việc đánh và trao đổi trong team thuận tiện hơn. Ngoài phần thiết kế trực quan, Stitch còn cho phép trích xuất cả hình ảnh và code, trong đó phần styling được sinh theo Tailwind CSS. Điều này cho phép các màn hình không chỉ dừng lại ở mức tham khảo, mà còn có thể được dùng làm nền tảng ban đầu để tinh chỉnh và đưa dần vào codebase.

Thiết kế UI ban đầu chỉ với prompt cơ bản

Ví dụ trên đây là một ý tưởng thiết kế trang web theo dõi hiệu suất blog. Chỉ với mô tả ở mức tổng thể như dashboard tổng quan, quản lý bài viết, thống kê tác giả và các trang chi tiết, Stitch có thể nhanh chóng sinh ra toàn bộ các màn hình cần thiết.

Màn hình UI tiếp tục được tinh chỉnh

Giao diện có thể được tiếp tục cải thiện, tinh chỉnh thêm như là chuyển sang theme xanh lá và làm cho các component sinh động hơn bằng cách thêm icon, badge. Những thay đổi này có thể được áp dụng tương đối nhanh trên toàn bộ các màn hình, trong khi các phiên bản trước đó vẫn được giữ lại để so sánh và đánh giá hướng thiết kế phù hợp hơn cho MVP.

2. Bóc tách UI thành component

Sau khi đã chốt được giao diện với Stitch, workflow chuyển sang giai đoạn triển khai code. Các màn hình tạo ra từ Stitch sẽ được bóc tách thành các UI component như button, card, chart hoặc các block có thể tái sử dụng. Quá trình này có thể tận dụng AI để hỗ trợ, giúp phân tích giao diện và bóc tách component phù hợp theo phong cách, các quy tắc và convention của team như cách đặt tên component, tổ chức thư mục, CSS class hay tiêu chí nhận diện component có thể tái sử dụng,...

Sau khi đã có tập component được chuẩn hoá, dự án cần một nơi để quản lý các component này và đảm bảo team có thể sử dụng đồng nhất khi code với AI. Đây là lúc shadcn Registry, kết hợp với MCP, phát huy vai trò trong workflow.

Registry đóng vai trò là nguồn UI dùng chung, nơi tập trung và quản lý các component chung, trong khi MCP là cầu nối giúp các công cụ AI sử dụng hoặc tham khảo những component có sẵn này khi sinh code, đảm bảo giao diện nhất quán và dễ bảo trì.

3. Chuẩn hoá component trong shadcn Registry

Shadcn registry là tính năng mới cho phép người dùng tự định nghĩa và quản lý tập UI component riêng cho dự án. Registry không chỉ bao gồm component, mà còn có thể giúp cài đặt cả các dependency và các tệp hooks, config hay utility liên quan. Cách tiếp cận này giúp tập trung các component vào một nơi để có khả năng tái sử dụng, đảm bảo giao diện luôn nhất quán ngay cả khi nhiều developer hoặc AI cùng tham gia phát triển.

Việc khởi tạo một registry tương đối đơn giản. Chúng ta chỉ cần tạo file registry.json trong thư mục root để khai báo các registry item đại diện cho những component dùng chung của team. Mỗi item mô tả rõ component, dependency đi kèm và cách nó được sử dụng trong hệ thống. Ví dụ dưới đây minh họa tạo registry đơn giản sử dụng shadcn-vue.

{
  // Schema để validate cấu trúc registry
  "$schema": "https://shadcn-vue.com/schema/registry.json",

  // Tên registry (dùng để định danh)
  "name": "local",

  // URL gốc nơi registry được serve
  "homepage": "http://localhost:3000",

  // Danh sách các registry item
  "items": [
    {
      // Tên component
      "name": "Avatar",

      // Loại item (component, block, ...)
      "type": "registry:component",

      // Tên hiển thị
      "title": "Avatar",

      // Mô tả ngắn cho component
      "description": "Circular avatar component displaying user initials with customizable size and background color.",

      // Các component phụ thuộc (nếu có)
      "registryDependencies": [],

      // Danh sách file sẽ được thêm khi add component
      "files": [
        {
          // Đường dẫn tới file component trong project
          "path": "app/register/app-components/Avatar.vue",
          "type": "registry:component"
        }
      ]
    }
  ]
}

Sau khi định nghĩa xong registry.json, registry có thể được build để sinh ra các file JSON tương ứng cho từng component.

{
  "scripts": {
    "registry:build": "shadcn build" // shadcn-vue build cho phiên bản cho vue
  }
}

Tiếp đó chạy lệnh build registry:

npm run registry:build

Sau khi build xong, các file JSON cho các component sẽ được tạo. Theomặc định, các file này nằm trong thư mục public/r (ví dụ: public/r/button.json) và có thể truy cập vào trang để kiểm tra.

Để tìm hiểu sâu hơn về registry và xem thêm nhiều ví dụ thực tế, có thể tham khảo các tài liệu chính thức dưới đây:

• Hướng dẫn tổng quan về registry
• Registry schema specification
• Registry item schema specification

Code với AI thông qua shadcn MCP

Nếu shadcn registry đóng vai trò là nơi quản lý tập UI dùng chung cho team, thì shadcn MCP là cầu nối giữa registry và workflow code với AI. Thông qua MCP, các công cụ AI như Claude Code hay Codex có thể “nhận biết” và sử dụng đúng các component có sẵn trong registry khi sinh code.

Điều này giải quyết một vấn đề thường gặp khi phát triển với AI: dù AI có thể sinh code rất nhanh, nhưng nếu không có mẫu của dự án để tham khảo, kết quả trả về thường thiếu nhất quán hoặc không phù hợp với tiêu chuẩn chung của team. Với MCP, AI không còn tạo component một cách ngẫu nhiên mà hoạt động dựa trên bộ UI đã được chuẩn hóa sẵn.

Việc thiết lập MCP phụ thuộc vào công cụ AI đang sử dụng. Vì vậy, phần này không đi sâu vào cấu hình chi tiết, bạn có thể tham khảo hướng dẫn chính thức tại đây.

Hình trên là ví dụ Claude Code sau khi được cấu hình MCP, được dùng để kiểm tra số lượng component đang được định nghĩa trong local registry.

So sánh với cách dùng AI thông thường

So với cách dùng Chat AI và các AI code tool một cách độc lập, workflow kết hợp Stitch cho thiết kế UI + shadcn Registry cho chuẩn hóa component + MCP cho code với AI thể hiện rõ lợi ích như sau:

Kết luận

Từ giai đoạn khám phá và chốt hướng giao diện với Stitch, đến việc chuẩn hóa component bằng shadcn Registry và đưa bộ chuẩn đó vào quá trình code với AI thông qua MCP, workflow này giúp tăng hiệu suất cho quá trình phát triển và triển khai code UI. Cách tiếp cận này cho phép đội ngũ tận dụng tốc độ của AI để phát triển MVP nhanh hơn, đồng thời vẫn giữ được sự nhất quán, khả năng mở rộng và kiểm soát giao diện về lâu dài.

Suy cho cùng, Stitch, shadcn Registry và MCP chỉ là các công cụ, còn giá trị thực sự đến từ việc đặt chúng đúng vị trí trong một workflow hợp lý để đạt được năng suất tốt nhất, đặc biệt là trong bối cảnh phát triển sản phẩm có sự hỗ trợ ngày càng sâu của AI.