M3E Canvas tutorial: visual prompts for Claude Code

In this Portuguese tutorial, m3E Canvas is presented as a free, open source browser editor for planning app screens and exporting a prompt for a coding assistant. The speaker explains that prompt generation is programmatic and does not require AI, although the editor also has an AI drafting feature. The installation overview points to the repository instructions and a localhost address for opening the editor.

The demonstration builds a daily-task app with login and registration screens. It covers layers, color palettes, typography, corner styles and motion settings, then shows navigation between screens. The speaker adds a search field manually and rearranges components with the grid. Annotations and platform selection supply further details for the exported prompt. In the demonstrated drafting workflow, generating a new draft clears the existing design; undo is available.

The prompt goes into Claude Code in an empty project folder. M3E plans screens rather than a complete application: database configuration requires further instructions. The speaker chooses web output because previewing Android needs additional setup on the PC.

The reported generation takes 35 minutes. Account creation and task search work in the demo, but borders need correction and the result retains a mobile layout rather than adapting to desktop. The speaker also believes prompt output is limited to English and Japanese. The example shows why generated screens still need review and follow-up prompts.