Có một trang landing page nằm yên trên bảng thiết kế Figma của tôi mà tôi gần như đã quên mất. Mới đây, khi vô tình xem lại, tôi tự hỏi: “Sẽ ra sao nếu mình thực sự đưa bản thiết kế này ra đời thực?” Kiến thức về lập trình giao diện (frontend) của tôi đã tốt hơn trước, và các công cụ AI hỗ trợ lập trình cũng đã thay đổi cuộc chơi cho những designer muốn chạm tay vào code. Vậy là tôi bắt đầu thử.
Quá trình này không đơn thuần là bấm nút chuyển từ Figma sang code. Đó là cả một hành trình lập kế hoạch, viết câu lệnh (prompt), tinh chỉnh, soi code, sửa lỗi, chuyển đổi công cụ, giải quyết bài toán hiển thị trên di động và cuối cùng là đưa trang web lên môi trường thực tế. Dưới đây là cách tôi đã thực hiện.
1. Bắt đầu với hướng dẫn, không phải code
Ý nghĩ đầu tiên của tôi không phải là quăng bản thiết kế cho một công cụ AI rồi bảo: “Làm trang này đi.” Tôi muốn định hướng cho quá trình thực thi trước. Vì vậy, tôi tìm đến ChatGPT. Tôi giải thích mục tiêu của mình và nhờ ChatGPT dựng một câu lệnh thực thi (implementation prompt) dưới góc nhìn của một Senior Product Designer kết hợp với Frontend Engineer. Prompt này bao gồm đầy đủ các khía cạnh:
– Độ chuẩn xác so với bản thiết kế
– Mức độ phản hồi linh hoạt trên các màn hình (responsive)
– Chất lượng mã nguồn frontend
– Hiệu ứng tương tác
– Xử lý biểu mẫu (forms)
– Khả năng truy cập (accessibility)
– Hiệu năng tải trang
– Quản lý hình ảnh và biểu tượng
– Trải nghiệm người dùng (UX)
– Kết quả đầu ra mong muốn
Sau đó, tôi chuyển prompt này thành một tệp Markdown. Mục tiêu rất đơn giản: cho AI đủ ngữ cảnh để không chỉ hiểu tôi muốn dựng cái gì, mà còn hiểu tôi muốn hệ thống vận hành như thế nào.
Tôi không muốn AI thiết kế lại sản phẩm của mình. Tôi muốn nó hiểu đúng bản thiết kế đó.
2. Cung cấp thêm một Design System thu nhỏ
Bước tiếp theo là chuẩn bị quy chuẩn thiết kế. Vì xuất phát từ bản Figma có sẵn, tôi đã có các quyết định rõ ràng về phông chữ, màu sắc, khoảng cách, thành phần giao diện (components) và các quy tắc thị giác khác. Tôi tổng hợp lại các quy định đó và lưu thành một tệp Markdown thứ hai. Như vậy, khi đưa dự án vào Lovable, công cụ này có trong tay 3 điểm tham chiếu quan trọng:
– Bản thiết kế Figma
– Tệp hướng dẫn thực thi
– Tệp Design System
Sự chuẩn bị này rất quan trọng vì tôi không muốn công cụ AI tự ý chế ra một phong cách giao diện hoàn toàn xa lạ. Định hướng hình ảnh đã có sẵn, nhiệm vụ của AI chỉ là chuyển thể nó sang code.
3. Từ Figma sang Lovable
Khi chuẩn bị xong, tôi tải bản thiết kế Figma cùng 2 tệp Markdown lên Lovable. Tôi yêu cầu nó lấy Figma làm chuẩn và tuân thủ các hướng dẫn đính kèm. Lovable đã làm một điều khá thông minh trước khi dựng toàn bộ trang: nó tạo ra các thành phần tái sử dụng (reusable components) như hình ảnh, thẻ bài viết (cards)… rồi mới lắp ráp thành trang hoàn chỉnh. Đó là một khởi đầu tốt. Trang web được khởi tạo từ phần đầu (hero section) xuống tận chân trang (footer). Liệu nó có chính xác từng pixel (pixel-perfect) không? Chưa.
Có những đoạn nhìn khá giống bản gốc, nhưng nhiều phần cần phải làm lại. Một số ảnh bị thay bằng ảnh khác tương tự, một số bố cục bị lệch, và đặc biệt là phần đếm ngược (countdown) khác xa so với ý đồ ban đầu. Dù vậy, nó cho tôi một điểm tựa vô cùng giá trị: Một bộ khung đang hoạt động được. Và quá trình tinh chỉnh thực sự bắt đầu từ đây.
4. Phiên bản đầu tiên chỉ là điểm khởi đầu
Tôi rà soát lại trang web theo từng phần. Thay vì đưa ra một câu lệnh chung chung rồi mong AI sửa hết mọi thứ cùng lúc, tôi chia nhỏ công việc ra. Tôi chỉ vào từng đoạn cụ thể, giải thích điểm chưa đúng, mô tả lại thiết kế gốc trên Figma và yêu cầu sửa chính xác điểm đó. Ví dụ, phần Event Highlight bị thiếu một số thẻ nội dung so với bản gốc. Tôi chỉ cần chỉ rõ chính xác những thẻ cần thêm vào.
Phương pháp này hoạt động khá tốt cho hầu hết các phần. Tuy nhiên, có một bài toán tôi không thể giải quyết xong: Phần đồng hồ đếm ngược. Dù thử nhiều cách, kết quả vẫn đi quá xa so với ý tưởng ban đầu. Đúng lúc đó, tài khoản Lovable của tôi hết dung lượng thử nghiệm (credits). Tôi buộc phải thay đổi quy trình làm việc.
5. Từ Lovable sang VS Code
Tôi chuyển dự án về môi trường lập trình cục bộ trên máy tính. Tôi kết nối dự án với GitHub, tạo repository, mở mã nguồn trong VS Code, cài đặt các thư viện cần thiết, chạy server chạy thử và tiếp tục công việc. Tôi bắt đầu dùng các AI agent tích hợp ngay trong VS Code để tinh chỉnh tiếp. Chính lúc này, dự án bắt đầu dạy tôi nhiều điều hơn mong đợi. Ban đầu tôi chỉ định dùng AI để biến thiết kế thành web một cách nhanh chóng. Nhưng thực tế, tôi lại phải tự tay mở các tệp nguồn, tìm từng component, soi từng dòng code, đổi lại đường dẫn tệp và sửa lỗi.
Và rồi tôi gặp sự cố debug thực sự đầu tiên.
6. Sự cố từ một lỗi chính tả
Lỗi lớn đầu tiên xuất hiện ở phần Hỏi & Đáp (FAQ). Tôi muốn thay ảnh do AI tự tạo bằng ảnh gốc từ bản thiết kế, đồng thời điều chỉnh lại cách hoạt động của các danh mục FAQ. Tôi đưa yêu cầu cho AI agent trong VS Code. AI báo đã sửa xong, nhưng giao diện trên màn hình vẫn không hề thay đổi. Thay vì tiếp tục tin vào câu lệnh cấp cao, tôi quyết định chui vào code. Tôi tìm đến component FAQ và mở tệp faq.tsx. Tôi sao chép đoạn code đó và đưa cho ChatGPT kiểm tra cùng.
Sau vài lượt trao đổi, chúng tôi đã phát hiện ra nguyên nhân: Đường dẫn hình ảnh trong code bị sai một chữ cái so với tên tệp thực tế. Chỉ một lỗi gõ sai tên tệp nho nhỏ đã tạo ra một sự cố tốn rất nhiều thời gian. Tôi sửa lại đường dẫn, import đúng tệp ảnh, cập nhật code và ngay lập tức bức ảnh xuất hiện.
Một sai sót nhỏ trong lúc cài đặt có thể ngốn của bạn lượng thời gian vô cùng lớn nếu bạn không chịu dừng lại để kiểm tra những gì thực sự diễn ra bên dưới giao diện.
Đó cũng là khoảnh khắc tôi cảm thấy tự tin hơn khi mở code ra kiểm tra thay vì coi những gì AI tạo ra như một “hộp đen” bí ẩn.
7. Đồng hồ đếm ngược: Bài toán hóc húa nhất
Phần đếm ngược là thử thách khó nhất toàn bộ dự án. Trong thiết kế gốc trên Figma, phần này có hiệu ứng thị giác rất riêng: một hình nền, số đếm ngược, và một dải màu xanh lá cây góc cạnh xoay tròn xung quanh như kim đồng hồ. Tôi từng tự tay làm component này trên Figma với nhiều biến thể xoay khác nhau. Tôi muốn trang web tái hiện lại đúng hiệu ứng đó. Lovable đã thất bại. ChatGPT cũng không giải quyết trọn vẹn. Cuối cùng, tôi chuyển bài toán này sang cho Claude. Tôi gửi cho Claude:
– Bản thiết kế đếm ngược gốc trên Figma
– Giao diện hiện tại trên web
– Đoạn code đếm ngược đang có
– Ảnh chụp màn hình sự cố
– Giải thích chi tiết về chuyển động (animation) tôi mong muốn
Claude bắt đầu đề xuất các thay đổi cho đoạn code React. Nhưng tôi không còn copy-paste một cách mù quáng nữa. Tôi kiểm tra từng đoạn code, tìm vị trí cần thay đổi, cập nhật, chạy thử và so sánh trực tiếp với bản Figma. Có lúc thay đổi hoạt động tốt, có lúc được phần này lại hỏng phần khác. Chúng tôi tiếp tục tinh chỉnh từng bước:
– Sửa ảnh nền
– Sửa dải màu xanh
– Sửa chuyển động xoay
– Sửa logic đếm ngược (đảm bảo số giây nhảy liên tục chứ không đứng yên)
Cuối cùng, mọi thứ đã khớp hoàn toàn. Ý tưởng thiết kế trên Figma đã thực sự sống dậy và chuyển động mượt mà trên trình duyệt.
8. Thử thách hiển thị trên điện thoại (Mobile Responsiveness)
Khi bản desktop đã ổn, tôi chuyển sang tối ưu cho giao diện di động. Hầu hết các phần đều tự động co giãn khá tốt, ngoại trừ phần FAQ. Theo thiết kế, các danh mục FAQ trên điện thoại sẽ cuộn theo chiều ngang, nhưng nội dung câu hỏi/trả lời bên dưới phải nằm gọn trong chiều rộng màn hình. Tuy nhiên, bản code lại gộp chung cả hai phần vào một cấu trúc cuộn ngang, làm nội dung bị tràn và chồng chéo lên nhau. Thử vài điều chỉnh với Claude vẫn không xong, tôi quyết định tư duy theo góc độ bố cục thiết kế:
– Thanh danh mục là thanh điều hướng $\rightarrow$ Cho phép cuộn ngang.
– Phần nội dung câu hỏi/trả lời $\rightarrow$ Phải nằm trong một khung chứa cố định (constrained container), không được thừa hưởng đặc tính cuộn ngang của thanh điều hướng.
Tôi giải thích hướng tư duy này cho Claude. Khi tái cấu trúc lại đúng theo logic đó, sự cố lập tức được giải quyết.
Hiểu rõ giao diện nên vận hành như thế nào cũng quan trọng không kém việc biết viết code.
9. Quản lý mã nguồn với GitHub và Đưa lên Vercel
Trong suốt quá trình, tôi liên tục đẩy các thay đổi lên GitHub. Khi chuyển đổi qua lại giữa nhiều công cụ AI, làm việc ở máy cục bộ rồi kiểm thử, GitHub giúp tôi giữ mọi thứ luôn trong tầm kiểm soát. Khi cả hai phiên bản desktop và mobile đã hoàn thiện, bước cuối cùng là xuất bản trang web.
– Tôi kết nối repository GitHub với Vercel.
– Cấu hình dự án và bấm xuất bản (deploy).
– Mở đường dẫn mới tạo.
Trang web đã chính thức online! Mọi thứ hoạt động hoàn hảo trên cả máy tính lẫn điện thoại: hiệu ứng mượt mà, đồng hồ đếm ngược nhảy đều, bố cục co giãn chuẩn xác. Thiết kế từng nằm im lúp xúp trong Figma giờ đã trở thành một sản phẩm thực tế mà ai cũng có thể truy cập và tương tác.
Bài học rút ra
Bài học đầu tiên rất rõ ràng: AI giúp chúng ta đi từ thiết kế đến sản phẩm nhanh hơn rất nhiều. Nhưng điều đọng lại lớn nhất với tôi chính là những gì diễn ra ở khoảng giữa sản phẩm do AI tạo ra và kết quả cuối cùng.
