Vẽ giao diện Material 3 trên trình duyệt rồi xuất prompt chuẩn đét cho AI

Giờ bạn có thể vẽ giao diện app Material 3 trực tiếp trên trình duyệt rồi biến thành prompt tạo code cho AI.

Lập trình viên lnkiai vừa ra mắt M3E Canvas, một web app mã nguồn mở giúp phác thảo giao diện Material 3 Expressive. Bạn chỉ cần kéo thả các component lên bản vẽ, nối các màn hình bằng hiệu ứng chạm hoặc vuốt, rồi chỉnh màu sắc và hình dáng theo ý thích. Repo này đã thu về 4.269 star trên GitHub chỉ trong tuần này.

Vì sao cần quan tâm: Prompt bằng chữ thuần túy rất khó mô tả chuẩn bố cục UI, làm AI toàn phải tự đoán khoảng cách và cách xếp component. M3E Canvas giải quyết việc này bằng cách chuyển toàn bộ bản vẽ—bao gồm thứ tự lớp (z-order), các hàng song song và luồng chuyển màn hình—thành một đoạn prompt ngắn gọn, tối ưu sẵn cho Cursor, Claude Code hay Codex.

Cần biết thêm: App chạy hoàn toàn trên trình duyệt, không cần server backend. Bạn có thể chọn xuất code cho Android hoặc web, chuyển đổi kích thước màn hình giữa điện thoại và máy tính, rồi xuất thiết kế thành file PNG hoặc link chia sẻ.

Trải nghiệm vibe coding vừa có thêm một giao diện trực quan cực tiện.