ZSZainSpireLibrary
AI tools · updated 13 Nov 2026

Paper sketch → working app with Gemini Canvas

Google showed it on 5 November 2026: photograph a hand-drawn app, give it to Gemini with Canvas turned on, and you get code plus a live preview you can click. Here is how to do it well.

01Steps

  1. Draw your app on paper: title, boxes, buttons, labels. Write what each button should do next to it.
  2. Take a clear photo (good light, straight from the top).
  3. Open Gemini, upload the photo and choose the Canvas tool.
  4. Paste prompt 1 below. Gemini reads the drawing, writes the code and shows a preview.
  5. Click around in the preview. Ask for changes in the chat, one at a time.
  6. When you like it, copy the code or use Gemini's share/export options if your account has them.
Sketch tipsUse thick, clear lines. Label things ("Add habit button", "list of tasks"). One screen per sketch. Arrows with notes like "opens settings" help a lot.

025 ready prompts

1. Build it

Build this app from my sketch. Make it a single-page web app that works on mobile. Keep the layout like my drawing.

2. Make it work

Make every button work. Save the data in the browser so it's still there after I refresh.

3. Restyle

Change the colours to black, white and orange, use a clean modern font, and add a dark mode toggle.

4. Add a feature

Add a weekly streak chart under the list, and a button to reset all habits.

5. Explain the code

Explain this code to me like a beginner, section by section, and tell me what to change if I want a new field.

035 sketch ideas to try

  1. Habit tracker
  2. Expense / budget tracker
  3. Quiz for your class
  4. Pomodoro timer
  5. Simple landing page for a small shop
Honest limits