Tháng 3 năm 2026, chúng tôi đã làm mới trải nghiệm moonshot.ai trên toàn nền tảng. Bản cập nhật thoạt nhìn khá đơn giản: bảng màu mới, kiểu chữ gọn hơn và hiệu ứng chuyển động được cập nhật. Nhưng khi triển khai, nó chạm tới các component dùng chung, design token, route và các lớp tương tác trên toàn bộ website.
Chúng tôi dùng Kimi Code CLI, vận hành bởi Kimi K2.5, như một AI coding agent để hỗ trợ thực hiện lần tái dựng này. Dự án trở thành một phép thử thực tế cho việc một agent chạy trong terminal hòa vào quy trình production ra sao — không phải trong môi trường demo. Bài viết này chia sẻ cách chúng tôi đã dùng nó và những điều rút ra trong quá trình đó.
Đợt làm mới này thực chất nhằm điều gì
Việc làm mới moonshot.ai không phải là thiết kế lại thương hiệu từ đầu. Phần lớn thiết kế đã có sẵn trong Figma. Thách thức thật sự nằm ở việc áp dụng các cập nhật đó một cách nhất quán trên codebase hiện có.
Điều đó đồng nghĩa với việc lần theo các token dùng chung, cập nhật component, kiểm tra hành vi tương tác và bảo đảm analytics cũng như khả năng truy cập không bị ảnh hưởng. Từng thay đổi riêng lẻ có thể nhỏ, nhưng chúng trải rộng qua nhiều tầng của website.
Kiểu công việc này khó không phải vì độ phức tạp thuật toán, mà vì phạm vi rộng và yêu cầu nhất quán. Thách thức là biết một thay đổi sẽ chạm tới những đâu và bảo đảm không bỏ sót gì. Để hỗ trợ việc này, chúng tôi dùng kết nối Model Context Protocol (MCP) với Figma nhằm khớp đặc tả thiết kế với phần triển khai tốt hơn, giúp agent hiểu cấu trúc và giảm bớt diễn giải thủ công.
Nguyên tắc nền tảng: giúp agent thật sự hữu ích
Bước đầu tiên không phải là viết prompt, mà là thiết lập ngữ cảnh. Chúng tôi dùng lệnh /init để tạo file AGENTS.md, rồi dành khoảng một giờ để tinh chỉnh. Trong đó, chúng tôi ghi rõ phạm vi của đợt làm mới, những gì không được thay đổi, cấu trúc dự án và cách quy trình build vận hành. Chúng tôi cũng thêm một file quy tắc về quy ước đặt tên, khoảng cách và yêu cầu độ tương phản.
Cách chuẩn bị này giúp về sau không phải giải thích lặp lại nhiều lần và làm cho quy trình Kimi Code CLI nhất quán hơn. Khi thiếu ngữ cảnh riêng của dự án, AI coding agent thường tạo ra kết quả hợp lý nhưng khá chung chung. Khi có ngữ cảnh, hành vi của nó gần giống một đồng đội đã hiểu sẵn codebase hơn.
Chúng tôi đã dùng nó như thế nào
Phần này phân tích cách Kimi Code CLI được dùng trong thực tế trong suốt đợt làm mới — từ lần theo phụ thuộc, căn chỉnh theo thiết kế, nghiên cứu hành vi, kiểm tra hiệu năng đến rà soát rủi ro tích hợp. Trọng tâm không phải là tự động hóa, mà là giảm bất định trong một đợt refactor quy mô lớn.
Hiểu thay đổi sẽ chạm tới đâu
Trước khi chỉnh sửa bất cứ thứ gì, chúng tôi yêu cầu agent trong Kimi Code CLI đọc khu vực mục tiêu và liệt kê những phần khác phụ thuộc vào đó. Một thay đổi đơn lẻ — như màu nút — có thể ảnh hưởng tới hero section, khu vực tải xuống, trạng thái hover và token dùng chung; trong khi component dùng chung, thời lượng chuyển động và hook analytics có thể tiếp tục mở rộng phạm vi tác động. Có danh sách phụ thuộc trước giúp giảm bất ngờ về sau và khiến việc chỉnh sửa dễ dự đoán hơn.
Khớp code với đặc tả thiết kế
Sau đó, chúng tôi đối chiếu component với đặc tả thiết kế theo từng phần: hero, navigation, các phần sản phẩm, download CTA và footer. Agent tạo danh sách thay đổi ở cấp thuộc tính bằng cách so sánh style với design token và giá trị layout. Quy trình này cho cảm giác gần với tự động hóa design system có cấu trúc hơn là kiểm tra hình ảnh thủ công. Phần lớn khác biệt đều nhỏ, như khoảng cách, bo góc hay độ đậm của chữ; nhưng đôi lúc cũng lộ ra những điểm không nhất quán lớn hơn, khi các component lẽ ra phải dùng chung variant đã dần lệch nhau theo thời gian. Kết quả là một danh sách chỉnh sửa cụ thể, thay vì phải đoán bằng mắt.
Nghiên cứu hành vi mới
Đợt làm mới đưa vào các hành vi UI mới chưa từng được triển khai trong codebase: con trỏ tùy biến, hero vận hành theo runtime, thẻ minh họa phát khi hover và hiệu ứng xuất hiện khi cuộn.
Với từng tính năng, chúng tôi dùng Kimi Code CLI như một môi trường có ngữ cảnh bằng cách nạp tài liệu và trạng thái repository cùng lúc. Đây là lúc Kimi K2.5 phát huy vai trò: ngữ cảnh dài hơn giúp suy luận qua phần triển khai và tài liệu tham chiếu ở cùng một nơi dễ hơn.
Các câu hỏi đều rất thực tế:
Animation khi hover nên chạy hết hay hủy khi con trỏ rời đi?
Trạng thái con trỏ có nên tương tác với hero canvas không?
Điều gì sẽ hỏng khi nhiều lớp chồng lên nhau?
Cửa sổ ngữ cảnh lớn cho phép một quy trình Kimi Code liền mạch hơn, nơi ý đồ thiết kế và code cùng nằm trong một phiên làm việc.
Kiểm tra dung lượng và hiệu năng
Đợt làm mới đưa vào một bộ chữ mới, nhiều chuyển động hơn và thêm asset, khiến dung lượng trang tăng lên. Chúng tôi dùng agent để điều chỉnh script subset font hiện có và xác minh đầu ra; về sau, nó còn giúp diễn giải báo cáo Lighthouse để chúng tôi phát hiện sớm các suy giảm. Mục tiêu không phải là tối ưu mọi thứ ở cuối, mà là đưa ra quyết định giữ hay cắt khi các thay đổi vẫn còn nhỏ.
Lần theo rủi ro tích hợp trước khi merge
Nhiều lớp tương tác — animation xuất hiện, con trỏ, hero canvas — cùng chia sẻ thứ tự hiển thị và hành vi pointer dù nằm trong các component riêng biệt, nên một thay đổi ở lớp này vẫn có thể ảnh hưởng tới lớp khác. Chúng tôi cũng phải tính đến khác biệt giữa trình duyệt và hệ điều hành, nơi CSS và hành vi render không phải lúc nào cũng giống nhau. Trước khi merge từng nhóm thay đổi, chúng tôi đưa diff vào Kimi Code CLI và yêu cầu nó lần theo những tương tác có thể bị ảnh hưởng, rồi kiểm tra các luồng đó trên trình duyệt và rà nhẹ qua nhiều môi trường.
Tích hợp MCP và Skills
Model Context Protocol (MCP) cho phép Kimi Code CLI kết nối trực tiếp với các hệ thống bên ngoài chứa dữ liệu dự án. Chúng tôi dùng mcp Figma để lấy design token, dữ liệu layout và typography trực tiếp từ Figma, giảm bớt việc chuyển dịch thủ công giữa thiết kế và code; đồng thời kết nối cả các công cụ nội bộ để đưa task, spec và edge case vào mà không cần đổi ngữ cảnh.
Thêm server chỉ cần một lệnh:
Mô hình này có thể mở rộng trên toàn hệ sinh thái MCP. Để tham khảo ý tưởng, bạn có thể kết nối agent với:
Figma — MCP chính thức cho ngữ cảnh thiết kế, biến và dữ liệu layout từ canvas
Atlassian Cloud — trang Confluence và hạng mục công việc Jira thông qua điểm vào MCP từ xa của Atlassian (được tài liệu hóa cùng Rovo)
Cơ sở dữ liệu, CMS API — server MCP từ nhà cung cấp hoặc cộng đồng; các registry liệt kê hàng trăm lựa chọn theo danh mục
Stack của bạn có thể khác — một docs API riêng, dịch vụ design-token nội bộ hoặc data warehouse. Ý tưởng vẫn vậy: kết nối agent với những hệ thống vốn đã chứa dữ liệu liên quan. Về file cấu hình, định nghĩa server và các cách khác để nối MCP vào Kimi Code CLI, hãy xem hướng dẫn nền tảng.
Review Skill
Chúng tôi cũng viết một Skill cho code review. Đây là một file quy tắc hướng dẫn Kimi Code CLI cách đánh giá toàn diện một merge request: đọc diff, lần theo các file và component bị ảnh hưởng, kiểm tra vi phạm design system (màu viết cứng, khoảng cách lệch grid, thiếu fallback cho khả năng truy cập), đánh giá rủi ro theo khu vực và tạo báo cáo có cấu trúc.
Báo cáo tuân theo một định dạng cố định:
Tóm tắt mục tiêu và phạm vi
Các phát hiện được nhóm theo mức độ nghiêm trọng (vấn đề nghiêm trọng chặn merge, cải tiến nên thực hiện, gợi ý nhỏ về tính nhất quán)
Với mỗi phát hiện: bằng chứng từ diff, đánh giá tác động và một việc cần làm cụ thể
Skill cũng đánh dấu các rủi ro tiềm ẩn có thể cần kiểm tra nhanh trên trình duyệt hoặc thiết bị — những trường hợp agent chưa chắc chắn nhưng chi phí xác minh thấp.
Trên thực tế, mọi PR trong đợt làm mới giao diện moonshot.ai đều đi qua bước rà soát có cấu trúc này trước khi hoàn tất review. Kết quả luôn gồm phần nhắc lại mục tiêu, các phát hiện xếp theo mức độ nghiêm trọng, bằng chứng và cách sửa.
Điều này giúp giảm xáo trộn ở giai đoạn cuối và cải thiện tính nhất quán trong quy trình Kimi Code, làm lộ ra những vấn đề như URL viết cứng nằm cạnh hằng số dùng chung, các trường analytics cần căn chỉnh và edge case tương tác trên mobile.
Những điều chúng tôi không ngờ tới
Trong quá trình refactor, một vài mô thức đã xuất hiện mà ban đầu không hề rõ ràng.
Spec-to-code nhanh hơn chúng tôi tưởng
Khi Figma MCP và Kimi Code CLI nằm trong cùng một thread, kích thước và design token đến dưới dạng đầu vào có cấu trúc thay vì phải chép tay. Kết quả là vòng lặp theo từng phần ngắn hơn — các thay đổi và chỉnh sửa ở cấp thuộc tính thường được hoàn tất trong một lượt, thay vì phải qua lại giữa nhiều công cụ.
Prompt nghiên cứu đem lại hiệu quả hơn mong đợi
Đợt làm mới phụ thuộc nhiều vào các lượt làm việc dài, dựa trên tài liệu runtime và implementation tham chiếu song song với repository. Việc giữ những tài liệu này trong cùng phiên với code thường tỏ ra có giá trị không kém chính các chỉnh sửa.
Review Skill biến các điểm thiếu nhất quán nhỏ thành một danh sách
Báo cáo có cấu trúc đã làm nổi bật đúng những nhóm vấn đề nêu ở trên — URL viết cứng nằm cạnh hằng số dùng chung, các trường analytics cần căn chỉnh và edge case tương tác trên mobile. Từng vấn đề riêng lẻ đa phần nhỏ, nhưng khi được gom vào một lượt xử lý thì dễ giải quyết hơn.
Thread dài vẫn dễ tiếp tục với chi phí thấp
Những lệnh như kimi --continue và /compact giúp công việc kéo dài nhiều ngày không phải dựng lại ngữ cảnh mỗi buổi sáng. Nhờ vậy, chúng tôi giảm việc prompt lại và giữ cho cùng một quy trình Kimi Code tiếp tục chạy ổn định.
Để tìm hiểu thêm về việc tiếp tục phiên, chuyển đổi giữa các phiên và quản lý ngữ cảnh bằng /compact cùng các lệnh liên quan, hãy xem hướng dẫn phiên của Kimi Code CLI.
Bài học từ việc tái dựng moonshot.ai
Nếu thực hiện lại một đợt làm mới giao diện moonshot.ai tương tự, có vài điều chúng tôi sẽ tiếp cận khác đi.
Bắt đầu bằng ngữ cảnh, không phải code
Dành giờ đầu tiên để ghi lại phạm vi, ràng buộc và quy ước đã tiết kiệm nhiều thời gian hơn bất kỳ prompt nào về sau. Thiết lập những điều này ngay từ đầu giúp các công cụ như Kimi Code CLI hoạt động nhất quán hơn trong toàn bộ quy trình.
Kết nối nguồn sự thật từ sớm
Trong trường hợp của chúng tôi, đó là Figma. Ở dự án khác, đó có thể là CMS, API nội bộ hoặc design system. Điều cốt lõi là bảo đảm hệ thống làm việc với dữ liệu thật thay vì các giả định suy diễn, nhất là khi dùng AI coding agent trong bối cảnh refactor frontend.
Giữ ngữ cảnh thiết kế và task trong cùng một vòng lặp
Đưa token, đặc tả và phần triển khai vào một ngữ cảnh chung giúp giảm trao đổi qua lại và làm cho các chu kỳ lặp ổn định hơn. Đây là nơi các quy trình liên quan đến Figma MCP và Kimi Code CLI tỏ ra đặc biệt hiệu quả, vì chúng giúp giữ ý đồ thiết kế và thay đổi code khớp nhau trong một vòng lặp liên tục.
Nếu bạn không muốn viết code: Kimi Websites
Toàn bộ phần trên mô tả một quy trình lấy lập trình viên làm trung tâm — terminal, diff và file ngữ cảnh. Tuy nhiên, cùng một kết quả — một website trau chuốt, responsive — cũng có thể đạt được mà không cần stack đó, khi tốc độ quan trọng hơn quyền kiểm soát ở cấp framework.
Kimi Websites chạy trên cùng model Kimi K2.5, nhưng thông qua giao diện trực quan, không cần code. Bạn mô tả điều mình muốn bằng ngôn ngữ tự nhiên, tinh chỉnh từng phần qua hội thoại và xuất bản bằng một cú nhấp. Nó cũng có thể nhận ảnh chụp màn hình hiện có làm đầu vào rồi tái dựng cấu trúc layout.
Với các founder đang dựng mẫu landing page hoặc marketer cần triển khai website chiến dịch trong thời hạn gấp, đây là con đường nhanh hơn so với làm việc trực tiếp bằng một stack frontend truyền thống.
Kết luận
Kimi Code CLI và Kimi K2.5 hữu ích nhất ở những phần của dự án mà độ bao phủ quan trọng hơn độ phức tạp. Làm mới giao diện hiếm khi xoay quanh những bài toán khó; vấn đề nằm ở rất nhiều thay đổi nhỏ phải được giữ nhất quán trên toàn hệ thống. Điều đó khiến con người tốn nhiều thời gian, nhưng lại khá phù hợp với một agent có thể lần theo và so sánh qua nhiều file.
Chúng tôi vẫn là người ra quyết định, review từng thay đổi và xác nhận kết quả cuối cùng. agent đảm nhiệm việc lần theo, so sánh lặp lại và review sơ bộ. Trên thực tế, cách phân công này trở thành một phương án thực dụng để tích hợp AI coding agent vào quy trình production. Với các refactor xuyên file, kiểm chứng design-to-code và những công việc đòi hỏi tính nhất quán ở quy mô lớn, cách tiếp cận này đã chứng minh được giá trị.