Tìm hiểu về Subframe: Công cụ vibe coding thay thế Claude Design, Figma Make và Replit

Nếu dành thời gian tìm hiểu về thiết kế hiện nay, bạn khó lòng tránh khỏi AI. Vibe designing đã trở thành một lĩnh vực riêng biệt với các công cụ chuyên dụng mới liên tục xuất hiện, và nhiều người luôn sẵn sàng thử chúng nếu đam mê thiết kế nhưng không thực sự có nền tảng về lập trình. Vì vậy, khi một công cụ mới xuất hiện hứa hẹn sẽ thay thế vai trò của nhà phát triển, họ rất hào hứng.

Subframe là công cụ mới nhất lọt vào tầm ngắm khi mọi người tìm kiếm một lựa chọn thay thế cho những công cụ quen thuộc. Ban đầu, nhiều người định dùng thử Tempo Labs nhưng bảng chỉnh sửa thủ công của nó cứ gặp lỗi không load được. Thế là họ chuyển sang thử Subframe và nhận thấy Subframe hóa ra làm được khá nhiều việc. Nó không chỉ là một công cụ chuyển đổi văn bản thành giao diện người dùng thông thường.

Subframe là công cụ 2 trong 1

Thiết kế giao diện ở trên, lập trình giao diện ở dưới

Subframe không chỉ là một công cụ thiết kế giao diện như Claude Design hay Stitch, nơi bạn nhập một prompt và nhận được một bản mô phỏng, và nó cũng không thực sự là một công cụ lập trình giao diện như Replit hay Bolt, nơi mục đích chính là phát hành một ứng dụng. Nó nằm ở đâu đó giữa hai loại này. Bạn thiết kế trực quan, nhưng kết quả đầu ra là code React và Tailwind thực tế được sử dụng trong môi trường sản xuất, nằm trong codebase nếu bạn chọn đồng bộ.

Tuy nhiên, triết lý đằng sau nó rất hợp lý. Code đầu ra của Subframe mang tính xác định, vì vậy LLM sẽ không hiểu sai thiết kế của bạn khi xuất file, và các thành phần nằm trong codebase của riêng bạn thay vì bị khóa vào một định dạng độc quyền. Công cụ này được xây dựng với sự am hiểu sâu sắc về công cụ dành cho nhà phát triển, được thiết kế rõ ràng để tránh cách tiếp cận "máy móc AI cẩu thả" thường thấy.

Công cụ này phù hợp nhất với những ai làm việc ở vị trí giao thoa giữa thiết kế và lập trình, hoặc thậm chí là người chỉ muốn dựng nhanh một bản thiết kế trực quan mà không cần phải mở Figma. Bạn cũng có thể làm được khá nhiều việc với gói miễn phí. Gói này cung cấp 1 dự án, 5 trang và các tính năng AI cơ bản; như vậy là đủ để bạn thực sự trải nghiệm và đánh giá công cụ thay vì chỉ xem qua mấy hình ảnh quảng cáo. Còn với gói trả phí, bạn sẽ có quyền tạo dự án không giới hạn, sử dụng AI không giới hạn, xem lịch sử phiên bản chi tiết hơn và sử dụng phông chữ tùy chỉnh.

Có nhiều cách để tạo ra một thiết kế

Khi mới mở Subframe, phải thừa nhận là mọi thứ hơi rối rắm. Có một vài nơi khác nhau để nhập các prompt và tất cả đều hoạt động, nhưng chúng liên quan đến phần còn lại của ứng dụng theo những cách khác nhau và phải mất một lúc bạn mới hiểu ra. Có nút Ask AI ở đầu canvas, đó là nút chính. Có chế độ Prompt tồn tại riêng biệt với chế độ Design ở phía trên. Ngoài ra còn có một prompt nội tuyến hiển thị ở phía dưới khi bạn chọn một phần tử, cho phép bạn chỉnh sửa chỉ riêng phần đó. Và các dự án mới bắt đầu với một loại trang chủ có hộp nhập liệu riêng.

Bài kiểm tra thực tế đã chọn thiết kế màn hình giới thiệu (onboarding) cho một ứng dụng giám sát máy chủ tự host có tên là Homelab. Người thử nghiệm yêu cầu tạo một khu vực hình ảnh minh họa chính nằm giữa, tiêu đề "Watch your server breathe", một dòng mô tả phụ, ba thẻ tính năng nhỏ, nút chính "Get started" và liên kết đăng nhập ở cuối trang; tất cả đều được thiết kế ở chế độ dark mode. Ý tưởng này được chọn vì nó đủ nhỏ gọn để thử nghiệm trong gói miễn phí nhưng vẫn có cấu trúc đủ để đánh giá xem AI có nắm bắt được hệ thống phân cấp và phong cách thiết kế hay không; đồng thời, người thử nghiệm muốn xem liệu nó sẽ tạo ra kết quả chung chung hay một thiết kế thực sự phù hợp với chủ đề.

Kết quả thực sự rất tốt. Nó trả về hai biến thể, một phiên bản Bottom Sheet và một phiên bản Centered Stack, và cả hai đều diễn giải yêu cầu một cách hợp lý. Các pill được hiển thị dưới dạng những thành phần thực sự, chứ không phải là văn bản được ngụy trang thành pill, và nó đã thêm một chỉ báo trạng thái nhỏ "ALL SYSTEMS NOMINAL" không được yêu cầu nhưng thực sự rất phù hợp với không gian làm việc tại nhà. Việc có hai biến thể là một phần trong cách Subframe hoạt động nói chung. Mỗi prompt đều tạo ra các lựa chọn thay thế mà bạn có thể so sánh cạnh nhau. Bạn có thể kết hợp các yếu tố giữa chúng, điều mà chỉ Subframe làm được ở quy mô này. Với gói miễn phí, bạn nhận được hai biến thể mỗi lần tạo, người dùng trả phí nhận được 4 cái.

Tuy nhiên, có một điều không thể tìm thấy thông tin dù đã cố gắng tìm hiểu kỹ, đó là mô hình AI nào đang vận hành hệ thống này. Subframe không công khai công nghệ nền tảng mà họ sử dụng, và cũng không có tùy chọn để người dùng tự cung cấp API key hay kết nối với một mô hình ngôn ngữ lớn (LLM) chạy cục bộ. Vì vậy, đây là giải pháp hoàn toàn dựa trên đám mây và sử dụng công nghệ độc quyền; đây là điều đáng lưu ý.

AI chỉ là một phần nhỏ trong những gì Subframe làm được

Toàn bộ quy trình thiết kế và phát triển đều có sẵn

Sau khi AI hoàn thành công việc của nó, bạn thực sự có thể nhấp vào thiết kế và chỉnh sửa thủ công, điều này nghe có vẻ hiển nhiên nhưng thực tế không phải vậy đối với hầu hết các công cụ tương tự. Nhấp vào bất kỳ phần tử nào và bảng điều khiển bên phải sẽ hiển thị đầy đủ các tùy chọn thiết kế, kích thước với Hug/Fill/Exact cho cả hai trục, khoảng cách lề được chia theo cạnh, hướng bố cục, khoảng cách giữa các phần tử, nền, đường viền, bán kính góc, bóng, kiểu chữ, v.v. Đây là một trình chỉnh sửa thực sự. Bạn cũng có một bảng Insert với khung, hình dạng, văn bản, biểu tượng, ô nhập liệu, đường phân cách, tất cả các phần tử cơ bản thông thường, và một bảng Layers ở bên trái hiển thị cấu trúc lồng nhau đầy đủ.

Tuy nhiên, vẫn có vài chi tiết nhỏ khiến chưa thực sự ổn, chẳng hạn như không tìm ra cách phóng to hay thu nhỏ canvas, và bảng điều khiển layer không có nút bật/tắt hiển thị trực tiếp; thay vào đó, bạn phải nhấp vào layer rồi tìm tùy chọn hiển thị trong phần công cụ chỉnh sửa. Dù vậy, đây chỉ là những điểm trừ rất nhỏ chứ không phải vấn đề nghiêm trọng gây cản trở trải nghiệm.

Điều thực sự tuyệt vời là những gì xảy ra khi AI và thiết kế thủ công kết hợp với nhau. Sau khi thiết kế được tạo ra, bạn có thể nhấp vào một phần tử riêng lẻ và yêu cầu thay đổi chỉ trên phần đó, thay vì tạo lại toàn bộ màn hình. Vì vậy, nếu màu nút bị sai, bạn chỉ cần yêu cầu AI sửa nút đó, không cần tốn toàn bộ quá trình tạo lại. Đó là ý tưởng tương tự mà Stitch xử lý với công cụ chỉnh sửa trực tiếp (Direct Edit), và đây là hướng đi mà tất cả các công cụ này đang hướng tới.

Ngoài ra còn có một tính năng thực sự bất ngờ: Hệ thống thiết kế. Khi nhấp vào một số phần tử nhất định (ví dụ như nút bấm), bạn có thể chuyển đến trình chỉnh sửa thành phần để xem tất cả các biến thể. Từ màu chủ đạo, màu phụ, màu bổ trợ, màu trung tính, màu cảnh báo (cho hành động xóa/hủy), cho đến các trạng thái như mặc định, di chuột và đang kích hoạt, cùng các biến thể về kích thước... tất cả đều được trình bày dưới dạng ma trận bài bản để bạn dễ dàng chỉnh sửa. Về cơ bản, nó giống như các thành phần rong Figma nhưng được tạo tự động và liên kết trực tiếp với code React thực tế. Thực sự rất tuyệt vời.

Tích hợp quy trình làm việc của nhà phát triển là một phần quan trọng khác. Subframe có một giao diện dòng lệnh (CLI) mà bạn có thể chạy với lệnh `npx @subframe/cli sync` để kéo các thành phần trực tiếp vào hệ thống file của dự án. Nó cũng có một MCP server, nghĩa là bạn có thể kết nối các công cụ lập trình AI như Cursor và Claude Code thông qua MCP và Skills, đồng bộ các thành phần, xuất code cho các trang và tạo đề xuất thiết kế mới trực tiếp từ IDE của bạn với ngữ cảnh codebase. Có các agent skill với tên như `/subframe:design` và `/subframe:develop` cho phép agent lập trình của bạn lấy thiết kế và triển khai nó trong codebase. Nếu bạn là người kết hợp giữa thiết kế và phát triển, đây có lẽ là tính năng nổi bật nhất dành cho bạn.

Kết luận

So với Claude Design, Subframe mang đến trình chỉnh sửa thủ công toàn diện hơn nhiều, với hệ thống quản lý layer bài bản, các thành phần thuộc hệ thống thiết kế và khả năng kiểm soát chi tiết – những thứ bạn mong đợi ở một công cụ thiết kế chuyên nghiệp. Dù bảng điều khiển "Tweaks" của Claude Design vẫn rất tuyệt vời, nhưng Subframe lại là một bộ công cụ mạnh mẽ và đa năng hơn.

Khi đặt cạnh Figma Make, điểm khác biệt nằm ở khả năng tích hợp cho lập trình viên; các công cụ CLI và máy chủ MCP thực sự tạo ra sự kết nối liền mạch với codebase của bạn – điều mà Figma Make chưa thực sự chú trọng. Còn với Replit, thực chất đó là nền tảng "vibe-coding" được bổ sung thêm chế độ thiết kế, trong khi các tính năng của Subframe vượt trội hơn hẳn ở cả hai khía cạnh: bạn có quyền kiểm soát thiết kế thủ công tốt hơn và quy trình phát triển chuyên nghiệp hơn nếu muốn.

Nhìn chung, đây là một công cụ rất tốt. Tuy nhiên, vì dịch vụ này yêu cầu trả phí cho các dự án lớn hơn quy mô nhỏ, nên đừng vội quá gắn bó với nó.