M3E Canvas: Phác thảo giao diện Material 3 ngay trên trình duyệt, copy prompt cho AI

Repo này là gì

M3E Canvas (7.755★) là công cụ thiết kế chạy hoàn toàn trên trình duyệt: “Sketch Material 3 Expressive screens in the browser, link them, tap through them, and copy a prompt for your AI coding tool.” — phác thảo màn hình Material 3 Expressive, nối chúng thành luồng, bấm thử trực tiếp, rồi copy prompt chuẩn bị sẵn cho công cụ AI viết code. Repo: https://github.com/lnkiai/m3e-canvas · demo live: https://lnkiai.github.io/m3e-canvas/ · license MIT.

Vì sao nó đột phá

Vẽ UI mà không cần backend: app chạy 100% trên trình duyệt (Next.js 16 + React 19), deploy trực tiếp qua GitHub Actions, dữ liệu không phải lên server nào.
Material 3 Expressive — thế hệ thiết kế mới của Google với màu sắc động và hình dạng táo bạo — được hỗ trợ chuẩn từng component.
“Tap through” luồng trước khi code: bạn không chỉ phác thảo tĩnh mà còn nối các màn hình thành flow bấm thử được.
Output là prompt cho AI coding tool: “copy a prompt for your AI coding tool” — cầu nối trực tiếp giữa nhà thiết kế và github copilot/Cursor/agents, giúp nhóm không mất công miêu tả design bằng chữ.

Bắt đầu nhanh

Không cần cài đặt — mở demo tại https://lnkiai.github.io/m3e-canvas/. Nếu muốn chạy bản của riêng bạn (deploy qua GitHub Actions), trỏ về repo lnkiai/m3e-canvas, fork và push là workflow deploy.yml tự build + đưa lên GitHub Pages.

Luồng làm việc cơ bản:

Phác màn hình (sketch) bằng các khối Material 3 Expressive.
Nối các màn hình thành luồng (link + tap through).
Nhấn nút copy để lấy prompt đã đóng gói cho công cụ AI coding.

Ứng dụng thực tế

Designer + AI developer phối hợp: designer vẽ xong, dev dán prompt vào AI, AI sinh component đúng chuẩn Material 3.
Prototype nhanh cho sprint: thay vì Figma + mô tả, có luồng click được ngay trong ngày.
Học Material 3 Expressive: chính repo là catalog mẫu trực quan để học bảng màu, shape, component của Material 3 mới.

Kết luận và takeaways

M3E Canvas giải quyết gap thú vị: từ sketch → prompt → code, không backend, không đăng ký.
Bắt đầu chỉ với 1 tab trình duyệt; nếu có workflow CI vẫn deploy trực tiếp từ repo.
Với 7.700+ sao ở tuần đầu ra mắt, đây là công cụ đáng để các team design-driven để mắt.

Nếu bạn đang đau đầu với việc “AI không code đúng Material 3 như thiết kế”, M3E Canvas chính là chiếc cầu bạn đang thiếu.