Back/Design/Figma
BeginnerDesignFigma

How to Rapidly Prototype Mobile UIs with Index Cards and GPT-4 Vision

Transform rough, physical sketches on index cards into high-fidelity digital mockups in minutes. This creative workflow uses your phone's camera, GPT-4 Vision to upscale the design, and Figma to finalize the UI components for a polished, shareable prototype.

From How I AI

How I AI: Terry Lin's Vibe Coding Workflow for Building an Apple Watch Fitness App

with Claire Vo

How to Rapidly Prototype Mobile UIs with Index Cards and GPT-4 Vision

Tools Used

Figma

Collaborative design tool

Step-by-Step Guide

1

Sketch UI on Index Cards

When you have an idea for a new screen or user flow, sketch it out on a physical index card using a pen. The cards provide a good aspect ratio for a mobile screen and allow for quick, low-fidelity ideation without needing an internet connection or digital tools.

2

Upscale the Sketch with GPT-4 Vision

Take a clear photo of your index card sketch and upload it to the GPT-4 mobile app. Use a simple prompt to ask the AI to convert your rough drawing into a clean, high-fidelity digital mockup that incorporates standard iOS design elements.

Prompt:
Hey, this is a mock up. Can you help me upscale this?
Pro Tip: This works best in a well-lit area to ensure the photo is clear. You can also add more detail to your prompt, like asking it to use a specific color palette or style.
3

Convert Image to Figma Components

Take the AI-generated image and import it into a tool like UX Pilot, which can help convert the image into reusable design components. Then, bring these components into Figma and use an official UI Kit (like Apple's) to finalize the design, ensuring it is pixel-perfect and ready to share or build.

Become a 10x PM.
For just $5 / month.

We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.