AI đang mở ra cách tiếp cận mới trong thiết kế và phát triển Web, khi ý tưởng có thể được chuyển thành giao diện thông qua ngôn ngữ tự nhiên, sau đó kết nối với môi trường lập trình để tiếp tục hoàn thiện mã nguồn. Thông qua Google Stitch, Model Context Protocol (MCP) và Google Antigravity, sinh viên có cơ hội trải nghiệm quy trình phát triển sản phẩm theo hướng AI Agent, từ thiết kế đến lập trình.
Trong quy trình phát triển Web truyền thống, một sản phẩm thường đi qua nhiều công đoạn từ phác thảo giao diện, thiết kế UI, xây dựng frontend, chỉnh sửa mã nguồn đến kiểm thử. Mỗi bước đòi hỏi người học vừa có tư duy thiết kế, vừa nắm được kỹ thuật lập trình. Với sự hỗ trợ của AI, khoảng cách giữa các công đoạn này đang dần được rút ngắn. Một quy trình có thể hình dung theo hướng: Ý tưởng → Google Stitch → UI Design → MCP → Google Antigravity → Source Code.
Từ ý tưởng đến giao diện với Google Stitch
Google Stitch là công cụ AI hỗ trợ thiết kế giao diện cho Web và Mobile. Thay vì bắt đầu hoàn toàn bằng việc tự dựng wireframe, sinh viên có thể mô tả sản phẩm bằng ngôn ngữ tự nhiên để AI tạo phương án giao diện ban đầu. Ví dụ, với bài toán xây dựng hệ thống quản lý cửa hàng, sinh viên có thể yêu cầu thiết kế giao diện gồm Dashboard, sản phẩm, đơn hàng, khách hàng và thống kê doanh thu theo phong cách hiện đại, tối giản, dễ sử dụng.
Sau khi có phương án ban đầu, sinh viên tiếp tục sử dụng prompt để yêu cầu thay đổi màu sắc, bố cục, thành phần hoặc phong cách. Theo thông tin được cung cấp, Stitch cũng hỗ trợ chuyển thiết kế sang Figma và xuất frontend code, tạo thêm điểm kết nối giữa thiết kế và phát triển sản phẩm. Tuy nhiên, AI không thay thế hoàn toàn tư duy thiết kế. Sinh viên vẫn cần đánh giá bố cục, khả năng sử dụng, hệ thống phân cấp thông tin và mức độ phù hợp với yêu cầu thực tế.
Từng bước tạo giao diện Web bằng Google Stitch
Bước 1: Truy cập Google Stitch
Sinh viên truy cập Google Stitch, đăng nhập bằng tài khoản Google và bắt đầu một project thiết kế.
Bước 2: Xác định loại giao diện
Với bài thực hành phát triển Website, sinh viên lựa chọn giao diện Web và xác định trước các màn hình, chức năng cần xây dựng. Chẳng hạn, một hệ thống quản lý cửa hàng có thể gồm Dashboard tổng quan, quản lý sản phẩm và quản lý đơn hàng.
Bước 3: Nhập prompt mô tả giao diện
Sinh viên có thể sử dụng prompt tham khảo: Create a modern dashboard for a store management system including products, orders, customers and revenue statistics. Use a clean, minimal and user-friendly interface.
Prompt càng cụ thể về mục đích, thành phần và phong cách mong muốn, AI càng có thêm ngữ cảnh để tạo phương án phù hợp.
Bước 4: Generate giao diện
Sau khi gửi prompt, Stitch tạo phương án UI. Sinh viên cần quan sát cách AI tổ chức menu điều hướng, bảng dữ liệu, thẻ thống kê, khoảng trắng và phân cấp thông tin. Theo thông tin được cung cấp, Stitch có thể tạo giao diện từ ngôn ngữ tự nhiên, hình ảnh hoặc wireframe và hỗ trợ tạo nhiều biến thể để thử nghiệm.
Bước 5: Tiếp tục tinh chỉnh bằng prompt
Bản thiết kế đầu tiên chưa nhất thiết là kết quả cuối cùng. Sinh viên có thể yêu cầu AI thay đổi màu sắc, điều chỉnh bố cục, bổ sung hoặc loại bỏ thành phần và thay đổi phong cách. Đây cũng là bước giúp người học rèn khả năng đánh giá thiết kế thay vì chỉ tiếp nhận kết quả do AI tạo ra.
Từ thiết kế đến lập trình với MCP và Antigravity
Sau khi hoàn thiện giao diện, bước tiếp theo là kết nối dữ liệu và công cụ thiết kế với môi trường phát triển. Đây là lúc Model Context Protocol (MCP) phát huy vai trò. Theo đặc tả chính thức, MCP là giao thức mở cung cấp phương thức tiêu chuẩn để các ứng dụng sử dụng mô hình ngôn ngữ kết nối với nguồn dữ liệu và công cụ bên ngoài. Có thể hình dung đơn giản: Google Antigravity → MCP → Công cụ/Dịch vụ bên ngoài.
Trong quy trình này, MCP đóng vai trò cầu nối để AI Agent trong môi trường lập trình có thể tiếp cận những dữ liệu và khả năng liên quan đến công cụ thiết kế, thay vì sinh viên phải mô tả lại toàn bộ giao diện bằng tay. Google Antigravity là nền tảng phát triển theo hướng Agentic, cho phép người dùng làm việc với AI Agent trong quá trình xây dựng phần mềm. Với Antigravity IDE, AI có thể hỗ trợ hiểu codebase, lập kế hoạch, tạo hoặc chỉnh sửa mã nguồn và sử dụng các công cụ bổ sung thông qua MCP.
Từng bước kết nối Google Stitch với Antigravity qua MCP
Bước 1: Chuẩn bị thông tin xác thực cho Stitch MCP
Tùy phiên bản và phương thức xác thực được Stitch hỗ trợ tại thời điểm thực hành, sinh viên chuẩn bị thông tin xác thực theo hướng dẫn trong phần Stitch Settings/MCP Setup. Nếu sử dụng API Key, cần lưu trữ khóa ở vị trí an toàn và tuyệt đối không đưa API Key vào ảnh chụp màn hình, source code hoặc repository công khai.
Bước 2: Mở khu vực quản lý MCP trong Antigravity
Trong Antigravity, MCP Server có thể được quản lý thông qua phần Settings. Với Antigravity IDE, sinh viên có thể mở menu của Agent Panel và lựa chọn MCP Servers. Google cũng cung cấp MCP Store để duyệt và cài đặt những server được hỗ trợ.
Bước 3: Thêm Stitch MCP Server
Tại MCP Store, sinh viên tìm kiếm từ khóa Stitch. Nếu Stitch MCP Server xuất hiện trong danh sách của phiên bản Antigravity đang sử dụng, tiến hành cài đặt và thực hiện theo hướng dẫn trên màn hình.
Bước 4: Cấu hình xác thực
Sau khi thêm Stitch MCP Server, sinh viên cấu hình phương thức xác thực tương ứng và lưu lại. Thông tin xác thực cần được bảo vệ, không đưa vào repository công khai hoặc chia sẻ trong source code.
Bước 5: Kiểm tra kết nối
Sau khi MCP Server hoạt động, sinh viên có thể yêu cầu Agent kiểm tra khả năng truy cập Stitch bằng câu lệnh: “List my Stitch projects.” Nếu Agent có thể gọi đúng công cụ Stitch và trả về danh sách project mà tài khoản được phép truy cập, quá trình kết nối đã hoạt động.
Từ học công cụ đến tư duy phát triển sản phẩm
Google Stitch, MCP và Google Antigravity cho thấy AI đang tạo ra một quy trình mới trong phát triển giao diện Web. Stitch hỗ trợ biến mô tả thành phương án UI; MCP tạo kết nối giữa AI với công cụ và dữ liệu bên ngoài; còn Antigravity đưa những nguồn ngữ cảnh đó vào môi trường phát triển phần mềm.
Với sinh viên, giá trị của quy trình này không chỉ nằm ở việc biết thêm một công cụ AI. Quan trọng hơn, các bạn có cơ hội thực hành cách chuyển một ý tưởng thành giao diện, kết nối giao diện với môi trường lập trình và tiếp tục phát triển sản phẩm bằng AI Agent. AI có thể hỗ trợ tạo ra nhiều phương án trong thời gian ngắn, nhưng người học vẫn cần hiểu bài toán, đánh giá kết quả, kiểm soát mã nguồn và đưa ra quyết định cuối cùng. Đây cũng là tinh thần “Thực học – Thực nghiệp” trong bối cảnh công nghệ liên tục thay đổi: học công nghệ để hiểu, thực hành để làm và biết cách ứng dụng công nghệ vào những bài toán phát triển sản phẩm cụ thể.
Giảng viên Trần Minh Hiển
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nam
