AI wireframe to UI mockup: turn a hand sketch into a screen

To turn a hand-drawn wireframe into a UI mockup, upload the photo of the sketch to a public HTTPS URL, send it as an input reference to an image model that edits from references, and describe the finished screen in the prompt. On Sume that is one POST /v1/images call with openai/gpt-image-2.5 and an input_references entry. The sketch fixes the layout; the prompt supplies style, colour and the exact words.

Treat the output as a visual draft for a stakeholder, not a design file. You get a flat image back, not layers or components, so a designer still rebuilds it in a design tool. What the image buys you is speed: three directions of the same layout in a few minutes.

What to put in the request

GPT Image 2.5 accepts up to 16 image references and text-to-image on the same endpoint (Image API). Use one reference, the sketch, and tell the model what the sketch is. Say that boxes are cards, that a crossed box is an image placeholder, and which side is the navigation.

Quote every label you want rendered, in quotation marks, and say how many times each one appears. Long UI copy is where image models drift, so keep placeholder text short and swap it later.

• Prompt the role of the reference: "Image 1 is a wireframe. Keep its layout exactly."
• Name the platform: mobile app screen, desktop dashboard, landing page.
• Give a palette in plain words or hex values, and one font mood.
• Pick the ratio from the device: 9:16 for a phone screen, 16:9 for desktop.

curl -X POST https://api.sume.com/v1/images \
  -H "Authorization: Bearer $SUME_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "model": "openai/gpt-image-2.5",
  "prompt": "Image 1 is a hand-drawn wireframe of a mobile app home screen. Keep the layout exactly. Render it as a clean modern UI mockup, white background, indigo accent. Title text: 'Today'. Button text: 'Start'. Crossed boxes become photos.",
  "input_references": [
    {"type":"image_url","image_url":{"url":"https://example.com/wireframe.jpg"}}
  ],
  "aspect_ratio": "9:16",
  "quality": "medium"
}'

Ratios for screens

Which ratios you can ask for depends on the model. The GPT Image family on Sume lists auto, 1:1, 16:9, 9:16, 4:3, 3:4, 5:4, 9:8 and 4:5. For an edit, aspect_ratio: "auto" follows the reference, and omitting the field is not the same thing (Image API).

If your sketch is a landscape page and you want a phone screen, ask for the new ratio explicitly and expect the model to rearrange the layout.

Limits to expect

The reference must be a public HTTPS URL; localhost, private-network and non-HTTPS URLs are rejected before submission. A failed generation is not billed, and a completed one is billed in full (Image API).

If a label comes back wrong, do not re-roll the whole screen. Send the result back as the reference, change only that label, and say what must stay the same.