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. 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ó 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.

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.

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 đủ.

Đ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.

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.