Image to Story

StoryCraft AI

Overview

Image to Story lets you upload a UI screenshot, wireframe, architecture diagram, or whiteboard photo. Monty analyses the visual content and generates user stories, acceptance criteria, and test cases from what it sees.

Accepted formats: PNG, JPG, JPEG, GIF — up to 20 MB.

Uploading an image

1Click the Image tab in the Input panel
2Drag and drop your image onto the upload area, or click to browse
3After upload, the panel shows ✓ Image Ready with a thumbnail preview

Analysis options

After uploading you have two ways to analyse the image:

  • Analyze Full Image — sends the entire image to Monty. Use this when the whole image is relevant.
  • Crop & Analyze — draw a rectangle over the area you want to focus on, then click ✂️ Crop & Analyze. Before drawing: "Draw a rectangle to crop, or analyze the full image". After drawing: "Crop selected — click 'Crop & Analyze' or redraw to adjust". Use ✕ Clear Crop to redraw.

Detected Components

After analysis, the 🔍 Detected Components {count} panel lists every UI component Monty identified — panels, charts, buttons, tabs, inputs, tables — each with a type icon and confidence score.

  • Use Select All to include every component, or Clear to deselect all
  • Click individual components to toggle them on or off
  • The Selected for Generation section confirms your selection and shows 🎯 Generate from {count} Component(s)
  • Only selected components feed into the story generation

AI Configuration

Below the image panel, the AI Configuration panel lets you shape what Monty generates:

SettingOptions
Focus AreaUser Stories, Acceptance Criteria, Test Cases, Technical Tasks
FrameworkReact, Angular, Backend API, Mobile
Test FrameworkPlaywright, Cypress, Selenium, JUnit
ComplexityBasic, Standard, Detailed

Use Guide Monty (optional) to add extra direction — e.g. "Focus on the login flow shown in the top-left panel".

Generating stories

1Select components in the Detected Components panel (or use Analyze Full Image to skip component selection)
2Set Focus Area, Framework, Complexity, and optionally Guide Monty
3Select a Branch * (required) and Priority *
4Click ✨ Generate with Monty
5Review the generated stories in the Review & Export panel

Story cards in Review & Export

Each generated story appears as a card:

ElementDescription
Confidence badgePercentage score — how confident Monty is about this story
Source mode badge🖼 image icon showing the input mode used
Points"📊 {points} pts" — estimated story points
Priority selectorEditable dropdown to change the story priority
Acceptance Criteria"✅ Acceptance Criteria" — generated AC items, each editable
Tasks"📋 Tasks" — generated implementation tasks
Test Cases"🧪 Test Cases" — generated test cases
TagsDisplayed as chips below the story body

Click ✏️ to edit title or description inline. Use + Add, + Add Task, + Add Test Case to append items, and × to remove them. Click 🔍 Details to open the Artifact Details drawer with metadata, backlog linkage, and generation history.

Saving to the backlog

1On the story card, click the backlog icon or open 🔍 Details → 📋 Add to Backlog
2The modal opens pre-filled with title, description, and acceptance criteria — all editable
3Add or remove AC using + Add criterion and ×. Add tags if needed
4Click Create Backlog Item — on success: "✓ Added to Backlog" with the Item ID

Token usage

After every generation the Review & Export panel shows a Token Usagesection with Prompt, Completion, and Totaltokens consumed. Selecting more components increases the prompt token count. See the AI Usage & Tokens guide to monitor your organisation's balance.

Session restore

StoryCraft AI saves your configuration and last generated output automatically. If you leave and return, a banner reads: "↻ Previous session restored · saved {time ago}". Uploaded images cannot be saved — the banner will add: "Your screenshot could not be restored — please re-upload it." Re-upload and click Generate again. Dismiss the banner with ×, or click ↻ Start Fresh to clear everything.

Troubleshooting

Generate button shows "Upload an image to analyse"

No image has been uploaded. Drag and drop a supported image file or use the browse button.

Detected components are wrong or incomplete

Manually deselect incorrect items in the Detected Components panel. Try Crop & Analyze to focus on a smaller, relevant area. Use Guide Monty to give Monty more context about what to focus on.

The image upload fails

Check the file is PNG, JPG, JPEG, or GIF and is under 20 MB. Compress or convert the image and re-upload.

Session restored but image is missing

Images cannot be stored locally. Re-upload the image after the session is restored and click Generate.