Build Your Card App Start free

Step 6 of 9 · about 45 minutes

Sketch your screens on paper

By the endYou have a paper sketch of every must-have screen, photographed, and Claude has described them back correctly.

Before Claude builds a screen, you need to know what's on it. Paper is the fastest way to find out. You don't need to draw well. Boxes, lines and words are all a sketch is.

What you need

A few sheets of paper and a pen. A pencil with an eraser is even better.

How to sketch a screen

  1. Draw a tall rectangle. That's the phone.
  2. Write the screen's name at the top, and a number in the corner: 1, 2, 3.
  3. Draw a box for each button and write its label inside.
  4. Draw a short line for each piece of text, and write what it says.
  5. Draw an arrow from a button to the number of the screen it opens: "tap + goes to 2".

One screen per must-have is a good start. Then add two screens people forget: what the first screen shows when there is nothing in it yet, and how a user deletes something.

Binder's sketches

  • Screen 1, My cards: a title, the collection total in big letters under it, and a list where each row shows the card's name, its set and number, its condition and its value. A big round + at the bottom right. When there are no cards: the words "Add your first card" and the same +.
  • Screen 2, Add card: a search box at the top that finds the card in your card data, with a list of matching printings under it, and an Add your own card link for cards it can't find. Tapping a result shows its details, a condition picker (Near Mint, Lightly Played, Moderately Played, Heavily Played, Damaged), how many copies, and what you paid; a Save button and a Cancel button. Saving goes back to screen 1.
  • Screen 3, Card: every detail written out in full, the value in big letters, a small line showing how the value has changed, "Added on" with the date, an Edit button, Add to wishlist, and a small Delete at the bottom.
  • Screen 4, Wishlist: a list of wanted cards with set and number, a + to add one, a tick on each row that moves the card into the collection when you get it, and a Sets button that shows which cards of a set you still need.

If you picked the seller's app, your first screens are Stock (with your asking prices), Add card, Card (with what you paid, kept private), and Buying list. Deal, Customer view and Show come later, after the server. For the shop app: Stock, Add item, Item, and Want lists; Storefront and Customers come later. Sketch them the same way: one screen per must-have, plus the empty screen and the delete.

Photograph and send

  1. Put each sheet flat, near a window, with no shadow across it.
  2. Take a photo straight down with your phone.
  3. Send the photos to Claude. The easiest way is the Claude app on your phone: tap +, then Photos, pick them all, and type the message below. Or move them to your computer the way Part 1 showed, and attach them there (the step "Show Claude a picture" in Part 2).

Correct anything Claude misread: "Screen 2: the picker says Lightly Played, not Light Play." Add any missing piece it found to the right sketch.

Keep the photos

Part 6 uses them, one screen at a time. Leave them in Photos on your phone. Also copy them to your computer the way Part 1 showed, into a folder named sketches inside Documents. Part 1 showed how to make a folder. In Part 4 you copy that folder into your project, next to your plan file.

Last checked October 28, 2026