Claude Code kết hợp với công cụ bí mật mới này chính là quy trình thiết kế mà agency của chúng tôi đang áp dụng… và đầu ra hoàn toàn ở một đẳng cấp khác so với bất cứ thứ gì tôi từng ra mắt trước đây.
Tôi đã nói điều này trong nhiều tháng. Nếu ứng dụng của bạn trông giống như "AI slop", đó không phải là vấn đề của Claude Code. Đó là vấn đề của quy trình làm việc.
Hầu hết các nhà xây dựng đều mắc kẹt trong một vòng lặp. Họ ra mắt các tính năng bằng AI. Phần backend hoạt động. Logic thì vững chắc. Nhưng giao diện lại trông giống như mọi ứng dụng "vibe coded" khác. Và người dùng chỉ mất khoảng hai giây để quyết định liệu nó có đủ "thật" để tin tưởng, chứ đừng nói đến việc trả tiền.
Cách khắc phục cũ là thuê một nhà thiết kế. Chờ hàng tuần để có file Figma. Sau đó nhìn một lập trình viên cố gắng xây dựng lại những thiết kế đó bằng code. Đến khi nó được ra mắt, bạn đã mất đà và đốt tiền một cách không cần thiết.
Toàn bộ quy trình đó giờ đây là tùy chọn.
Trong bài hướng dẫn này, tôi đã xây dựng TripGlide, một ứng dụng đặt vé du lịch ý tưởng. Một hệ thống thiết kế hoàn chỉnh và mọi màn hình trong vài phút. Code native được xuất bản qua Claude Code mà không cần viết lại một dòng nào bằng tay.
Tôi cũng đã hướng dẫn một vài khách hàng tư vấn một-một của mình qua chính quy trình này trong tuần này, và kết quả đủ mạnh mẽ để tôi muốn viết lại toàn bộ.
Đây là quy trình làm việc tôi đang chạy bây giờ. Và mọi nhà xây dựng đang ra mắt sản phẩm với AI cần hiểu cách nó hoạt động.
Đây là phân tích đầy đủ.
Một prompt, một ứng dụng đa màn hình hoàn chỉnh, sau đó một cú nhấp chuột để xuất code native.
Quy Trình Này Thực Sự Là Gì
Hai công cụ, hai nhiệm vụ.
FireVibe là sức mạnh thiết kế. Đây là phần mà hầu như không ai để ý, và nó là phần quyết định liệu ứng dụng của bạn có sống sót khi tiếp xúc với người dùng thực hay không. Từ một prompt duy nhất, nó cung cấp cho bạn:
→ Một ứng dụng đa màn hình hoàn chỉnh, không chỉ một màn hình đơn lẻ
→ Một hệ thống thiết kế gắn kết để mọi màn hình đều cảm thấy như cùng một sản phẩm
→ Hình ảnh do AI tạo ra để không có gì trông giống như chỗ chờ
→ Code native: SwiftUI, Jetpack Compose, Flutter, React Native, React
→ Code có thể đưa trực tiếp vào Xcode, hoặc vào Claude Code hoặc Cursor để tiếp tục xây dựng
→ Chỉnh sửa qua chat và giữ nhất quán trên mọi màn hình
→ Xuất Figma nếu nhóm của bạn vẫn dùng nó
Đầu ra đã sẵn sàng cho App Store. Không phải ý tưởng. Không phải bản mô phỏng mà bạn vẫn phải xây dựng lại. Các màn hình thực tế và code native thực tế, trong khoảng ba phút, trên gói miễn phí không cần thẻ tín dụng.
Claude Code là sức mạnh xây dựng. Khi bạn đã có giao diện người dùng sẵn sàng cho App Store, bạn đưa code native cho Claude Code và xây dựng sản phẩm thực tế trên đó. Logic. Dữ liệu. Xác thực. Các tính năng làm cho nó không chỉ là một vỏ bọc đẹp. Claude Code là nơi vỏ bọc đẹp trở thành một sản phẩm thực tế.
Đó là sự đột phá. Thiết kế nơi bạn bắt đầu, xây dựng nơi bạn kết thúc, ra mắt cùng một tạo phẩm bạn đã thiết kế.
Claude Code mở trong terminal bên phải, FireVibe mở trong trình duyệt bên trái.
Tại Sao Ứng Dụng AI Của Bạn Không Bán Được
Hãy để tôi nói thẳng về điều mà hầu hết các nhà xây dựng không muốn nghe.
Ứng dụng của bạn không thất bại vì code bị lỗi. Nó thất bại vì nó trông giống như được tạo ra bởi AI, và mọi người không trả tiền cho những thứ trông như vậy.
Hãy nghĩ về những gì xảy ra khi ai đó mở một ứng dụng lần đầu tiên. Họ không đọc code của bạn. Họ không ngưỡng mộ lược đồ cơ sở dữ liệu của bạn. Họ đưa ra quyết định theo bản năng trong vòng chưa đầy một giây. Cái này trông giống như một sản phẩm thực tế do những người quan tâm tạo ra, hay nó trông giống như một thí nghiệm AI cuối tuần?
Hầu hết các ứng dụng do AI xây dựng đều thất bại trong bài kiểm tra nửa giây đó. Phông chữ là mặc định. Màu sắc là gradient tím giống như mọi người khác. Khoảng cách hơi lệch. Các biểu tượng không khớp. Mọi màn hình cảm thấy như một ứng dụng hơi khác được ghép lại với nhau.
Không có điều nào trong số đó là vấn đề code. Đó là vấn đề thiết kế. Và trong năm qua, đó là phần mà AI không thể làm tốt, vì vậy nó là phần duy nhất vẫn phân biệt các ứng dụng được trả tiền với các ứng dụng bị bỏ qua.
Khoảng cách đó là những gì quy trình làm việc này thu hẹp.
Quy Trình Làm Việc
Hầu hết mọi người xây dựng ứng dụng trước và gắn thiết kế vào cuối. Điều đó bây giờ đã lỗi thời.
Thiết kế là hào nước, vì vậy thiết kế là nơi bạn bắt đầu. Tôi sẽ sử dụng một ứng dụng du lịch tên là TripGlide làm ví dụ chạy, bởi vì một ứng dụng du lịch là bài kiểm tra hoàn hảo. Đó là loại sản phẩm mà thiết kế chính là sản phẩm. Không ai đặt một chuyến đi qua một thứ trông rẻ tiền.
Bước 1 - Thiết Kế Toàn Bộ Ứng Dụng Trong FireVibe
Bắt đầu trong FireVibe. Mô tả ứng dụng như một sản phẩm tổng thể, không phải như một danh sách các tính năng.
Đối với TripGlide, tôi đã sử dụng một cái gì đó như thế này.
Thiết kế một ứng dụng đặt vé du lịch tên là TripGlide: một tạp chí du lịch kỹ thuật số cao cấp mà tình cờ cũng cho phép bạn đặt vé. Mọi màn hình nên cảm thấy được tuyển chọn và đầy khát vọng, giống như lật qua một tạp chí du lịch cao cấp, trong khi vẫn dễ dàng để đặt vé.
Đây là một sản phẩm hoàn chỉnh. Thiết kế các màn hình cốt lõi này trước, và bao gồm các màn hình hỗ trợ mà một phiên bản thực tế sẽ cần (giới thiệu, tìm kiếm và lọc kết quả, chuyến đi đã lưu, hồ sơ và đặt vé).
Trang chủ / Khám phá. Các điểm đến được nhóm theo khu vực (Địa Trung Hải, Đông Nam Á, Patagonia). Một tính năng hero lớn ở trên cùng, sau đó là các thẻ biên tập dưới tiêu đề khu vực trong các thanh cuộn ngang. Mỗi thẻ: ảnh toàn khung, tên điểm đến, một dòng tagline gợi cảm, một hàng siêu dữ liệu nhẹ nhàng ("7 tour · từ $1,200"). Tìm kiếm tinh tế và biểu tượng danh sách yêu thích tinh tế.
Chi tiết điểm đến. Một thư viện ảnh có thể vuốt ở trên cùng với chỉ báo phân trang sạch sẽ. Bên dưới: một đoạn giới thiệu biên tập ngắn, một hàng thông tin chính (mùa đẹp nhất, ngôn ngữ, tiền tệ, thời gian chuyến đi), một lưới ảnh, và đánh giá với tổng quan xếp hạng sao, thanh phân phối xếp hạng, và các thẻ đánh giá cá nhân (hình đại diện, tên, ngày, xếp hạng, văn bản). Kết thúc bằng một nút "Khám phá tour" thanh lịch.
Hành trình tour và đặt vé. Một hành trình từng ngày dưới dạng dòng thời gian dọc, mỗi ngày hiển thị tiêu đề, hoạt động, bữa ăn bao gồm và chỗ ở. Giá, thời lượng, quy mô nhóm và những gì bao gồm được hiển thị rõ ràng. Sau đó là một quy trình đặt vé nhiều bước nhẹ nhàng (ngày, du khách, tiện ích bổ sung, xem lại, xác nhận) với một thanh tóm tắt liên tục hiển thị tổng số đang chạy.
Những gì trả về không chỉ là một màn hình. Đó là toàn bộ ứng dụng như một sản phẩm mạch lạc, với một hệ thống thiết kế thực tế và hình ảnh thực tế thay vì các hộp màu xám. Nguồn cấp dữ liệu trang chủ, trang điểm đến, hành trình, tất cả đều trông giống như cùng một ứng dụng được tạo ra bởi cùng một nhóm.
Đây là lúc TripGlide không còn trông giống như một thí nghiệm AI và bắt đầu trông giống như một thứ bạn sẽ tìm thấy trên bảng xếp hạng App Store.
Toàn bộ ứng dụng TripGlide được tạo trong FireVibe. Gắn kết, đúng thương hiệu, đa màn hình.
Bước 2 - Chỉnh Sửa Qua Chat và Giữ Nó Nhất Quán Ở Mọi Nơi
Đây là phần thường bị hỏng trong mọi công cụ khác, và đó là lý do hầu hết các ứng dụng AI kết thúc trông không nhất quán.
Thông thường, bạn sửa một màn hình và những màn hình khác bị lệch. Bạn thay đổi nút trên trang chủ và bây giờ nó không khớp với quy trình đặt vé. Bạn kết thúc việc phải "trông nom" từng màn hình bằng tay.
Ở đây, bạn chỉ cần nói chuyện với nó.
Làm cho màu nhấn thành màu đất nung đậm hơn. Thắt chặt khoảng cách trên các thẻ điểm đến. Sử dụng cùng một kiểu nút đặt vé trên mọi màn hình.
Chỉnh sửa được áp dụng trên toàn bộ ứng dụng cùng một lúc. Thay đổi nó một lần, nó nhất quán ở mọi nơi. Đây là điều cho phép một nhà xây dựng solo ra mắt một thứ trông giống như một nhóm thực tế đã tạo ra nó, bởi vì thiết kế giữ vững bất kể bạn tinh chỉnh bao nhiêu.
Một chỉnh sửa qua chat đang được thực hiện và thay đổi lan truyền trên nhiều màn hình cùng một lúc.
Bước 3 - Đưa Code Native Cho Claude Code, Sau Đó Ra Mắt
Bây giờ bạn lấy giao diện người dùng sẵn sàng cho App Store và xây dựng sản phẩm thực tế trên đó.
FireVibe xuất code native. Đối với ứng dụng iOS, đó là SwiftUI sạch sẽ. Bạn đưa code đó trực tiếp vào Claude Code và xây dựng các phần mà công cụ thiết kế không bao giờ được thiết kế để xử lý. Logic đặt vé. Cơ sở dữ liệu. Tài khoản người dùng. Thanh toán. Chức năng thực tế đằng sau những màn hình đẹp đó.
Đây là sự phân công lao động hiệu quả. FireVibe chịu trách nhiệm về giao diện và cảm nhận. Claude Code chịu trách nhiệm về chức năng. Bạn không yêu cầu một công cụ phải giỏi cả hai.
Khi quá trình xây dựng hoàn tất, bạn ra mắt nó qua Xcode như bất kỳ ứng dụng iOS nào khác. Không cần xây dựng lại, không cần tạo lại thiết kế bằng code từ đầu. Thứ bạn thiết kế là thứ bạn gửi. Đó là ý nghĩa thực sự của "sẵn sàng cho App Store".
SwiftUI đã xuất được mở trong Claude Code, với logic backend đang được xây dựng trên đó.
Khi Nào Nên Sử Dụng Quy Trình Này
Đây không phải dành cho mọi dự án. Dưới đây là khi nó là lựa chọn đúng đắn.
→ Bạn là một người sáng lập solo đang ra mắt một ứng dụng thực tế lên App Store và bạn không có nhà thiết kế
→ Bạn là một agency hoặc freelancer đang lên ý tưởng cho một ứng dụng khách hàng và bạn cần một phiên bản trung thực cao, đúng thương hiệu một cách nhanh chóng
→ Bản dựng của bạn đã hoạt động nhưng thiết kế là thứ đang cản trở bạn ra mắt
→ Bạn là một người sáng lập phi kỹ thuật, người có thể mô tả sản phẩm nhưng không thể thiết kế hoặc code nó
Nếu ứng dụng của bạn hoàn toàn là nội bộ và không ai bên ngoài nhóm của bạn sẽ nhìn thấy nó, bạn có thể bỏ qua phần trau chuốt thiết kế.
Những Điều Cần Lưu Ý
Một vài cảnh báo trung thực trước khi bạn chạy quy trình này.
Gu thẩm mỹ vẫn là của bạn. Công cụ cung cấp cho bạn một thiết kế mạnh mẽ, gắn kết một cách nhanh chóng. Việc chọn đúng cảm giác cho thương hiệu của bạn và biết khi nào có gì đó không ổn vẫn là công việc của bạn. AI xử lý sản xuất. Bạn xử lý phán đoán.
Kiểm tra trên thiết bị thực. "Sẵn sàng cho App Store" có nghĩa là code có thật và có thể ra mắt, nhưng bạn vẫn mở nó trên một chiếc điện thoại thực tế và đi qua từng luồng trước khi gửi. Coi đầu ra như một bản dựng đầu tiên mạnh mẽ, không phải là một lần kiểm tra chất lượng cuối cùng.
Biết giới hạn của gói miễn phí. Bạn nhận được một gói miễn phí thực sự không cần thẻ tín dụng, đủ để chạy toàn bộ quy trình làm việc này và ra mắt một ứng dụng đầu tiên. Sản xuất nặng, liên tục cuối cùng sẽ muốn một gói trả phí. Bắt đầu miễn phí và tìm ra ranh giới của bạn.
20% vẫn quan trọng. Điều này đưa bạn đến 80% con đường để có một ứng dụng đẹp, nhất quán trong vài phút. 20% cuối cùng, những chi tiết nhỏ làm cho nó cảm thấy cao cấp, là nơi con mắt của bạn xuất hiện. Đừng bỏ qua nó. 20% đó chính xác là thứ khiến mọi người trả tiền.
Điều Này Thực Sự Có Nghĩa Là Gì
Đây là quan điểm trung thực của tôi sau khi chạy quy trình này trên các dự án thực tế.
Chúng ta vừa chứng kiến điều đó xảy ra. Mô hình xây dựng tốt nhất hành tinh đã bị chính phủ kéo xuống vài ngày sau khi ra mắt, biến mất trong nhiều tuần, sau đó lặng lẽ bật lại. Nếu toàn bộ lợi thế của bạn là mô hình bạn xây dựng, lợi thế đó chỉ cách một thay đổi chính sách để biến mất.
Xây dựng một ứng dụng không còn là hào nước nữa. Nó đã trở thành hàng hóa, và bây giờ nó thậm chí còn biến động. Khi phần khó khăn trở nên miễn phí và có thể thay thế, nó không còn là thứ kiếm tiền cho bạn nữa.
Thiết kế là hào nước bây giờ. Thứ duy nhất còn lại quyết định liệu một người lạ có tin tưởng ứng dụng của bạn đủ để tải nó xuống, giữ nó và trả tiền cho nó hay không. Trong một năm, đó là phần AI không thể làm được. Bây giờ nó có thể.
Các nhà xây dựng hiểu điều này sẽ ra mắt các ứng dụng trông giống như một startup được tài trợ đã tạo ra chúng, trong một buổi chiều, trên một gói miễn phí. Những người khác sẽ tiếp tục tự hỏi tại sao ứng dụng hoạt động của họ lại không có người dùng trả tiền.
Năm 2026 sẽ KHÔNG CÔNG BẰNG cho những nhà xây dựng hành động sớm về điều này.
TLDR
→ Xây dựng bây giờ đã trở thành hàng hóa, và ngay cả những mô hình tốt nhất cũng biến động. Nó không phải là hào nước.
→ Thiết kế là hào nước bây giờ. Hầu hết các ứng dụng AI không bán được vì chúng trông giống như do AI xây dựng.
→ Bước 1: Thiết kế toàn bộ ứng dụng trong FireVibe. Một prompt, hệ thống thiết kế gắn kết, hình ảnh thực tế, code native.
→ Bước 2: Chỉnh sửa qua chat một lần và thay đổi giữ nhất quán trên mọi màn hình.
→ Bước 3: Đưa code native cho Claude Code, xây dựng sản phẩm thực tế trên đó, sau đó ra mắt qua Xcode.
→ Đầu ra đã sẵn sàng cho App Store. Thứ bạn thiết kế là thứ bạn ra mắt.
→ Gói miễn phí, không cần thẻ tín dụng, khoảng ba phút từ prompt đến ứng dụng. Dùng thử tại đây.
Ứng dụng không còn là phần khó khăn nữa. Làm cho ai đó trả tiền cho nó mới là. Đó là một vấn đề thiết kế, và nó vừa được giải quyết.
LFG.
