Kéo thả giao diện mobile xong, copy prompt đưa AI code tiếp
Một công cụ miễn phí khá vui cho Android và web: ráp giao diện trực quan bằng component có sẵn, chỉnh chuyển động, thử luồng màn hình rồi xuất thành prompt để AI coding tool làm phần còn lại.
Vì sao đáng xem
- Kéo thả sẵn button, card, app bar, navigation, chip, input và nhiều component Material 3 Expressive
- Nối nhiều màn hình, đặt thao tác tap hoặc swipe và xem thử chuyển cảnh ngay trên canvas
- Chỉnh màu, shape, typography và motion mà không cần ngồi mô tả từng chi tiết bằng chữ
- Xong thiết kế có thể copy prompt để đưa thẳng cho AI coding tool triển khai Android hoặc web
Nếu trước giờ bạn thường vẽ sơ giao diện trên giấy, chụp lại rồi gửi AI code, cách này nhìn vui hơn khá nhiều.
Bạn có một canvas để kéo thả các component mobile, ráp thành nhiều màn hình, chỉnh theme, animation và cách chuyển cảnh. Sau khi thấy luồng đã ổn, công cụ biến phần thiết kế đó thành một prompt tương đối gọn để đưa tiếp cho AI coding tool.
Vẽ ít bằng chữ hơn
Thay vì ngồi mô tả kiểu “nút này bo góc, thanh điều hướng nằm dưới, bấm vào thì trượt sang màn hình khác”, bạn có thể dựng trực tiếp những thứ đó trên canvas.
Điểm đáng giá là thiết kế không dừng ở mockup tĩnh. Các màn hình có thể liên kết bằng tap hoặc swipe, có preview chuyển cảnh và phần motion riêng để thử cảm giác tương tác.
Hợp với kiểu làm app cùng AI
Workflow hợp nhất là: kéo thả ý tưởng -> thử luồng -> copy prompt -> giao AI code.
Nếu bạn đang dùng Codex, Claude Code, Cursor hoặc một coding agent nhận prompt, phần canvas này giống như lớp trung gian giúp bạn diễn đạt giao diện trực quan hơn trước khi bước vào code.
Có thể dùng cho Android và web
Phần xuất prompt cho phép chọn đích triển khai Android hoặc web. Công cụ tập trung khá mạnh vào phong cách Material 3 Expressive, nên đặc biệt hợp khi bạn muốn dựng nhanh một giao diện mobile hiện đại mà không bắt đầu từ trang trắng.
Bản chạy online có thể thử ngay trên trình duyệt. Nếu dùng thấy hợp, phần mã nguồn có thể tải về để tự chạy và tùy biến thêm.
Vì sao đáng thử
Không cần học một công cụ thiết kế nặng chỉ để diễn đạt ý tưởng giao diện cho AI.
Kéo thả component
Có sẵn nhiều thành phần Material 3 Expressive như button, card, chip, app bar, navigation, dialog, input và FAB.
Nối luồng màn hình
Gán tap, swipe, back và các kiểu chuyển cảnh để xem thử cách màn hình phản hồi trước khi code.
Chỉnh cả motion
Có thể thay màu, shape, font, độ tương phản và kiểu chuyển động thay vì chỉ dựng một mockup tĩnh.
Xuất prompt cho AI
Chọn target Android hoặc web, copy prompt rồi đưa cho coding tool như Codex, Claude Code, Cursor hoặc công cụ nhận prompt tương tự.
Muốn lấy source về nghịch tiếp?
Thử bản chạy trực tiếp trước. Nếu thấy hợp workflow, mở mã nguồn để tải về và tùy biến theo cách của bạn.
Điểm cần lưu ý
- • Trình chỉnh sửa nhiều màn hình đầy đủ phù hợp nhất khi dùng trên trình duyệt desktop
- • Prompt giúp AI hiểu bố cục và hành vi tốt hơn, nhưng code sinh ra vẫn nên được kiểm tra lại trước khi dùng thực tế
Liên kết & tài nguyên
Nguồn tham khảo
Mở nguồn gốc hoặc tài liệu liên quan để kiểm tra thêm thông tin trong bài.