Story Lens

A Cursor plugin skill that analyses a folder of screen images using vision and generates structured user_stories.json with flows, acceptance criteria, and frame metadata.

Works with any folder of images — Figma exports, screenshots, design handoffs, or app captures. No specific source required.

Install

npx story-lens install

Restart Cursor after installation.

Usage

In Cursor, ask the agent to:

• "Analyse my screens and generate user stories"
• "Generate user stories from the images in ~/Projects/my-app/screens"
• "What does this app do?" (with a folder path)

The skill will:

1. Resolve and validate the images folder (.png, .jpg, .jpeg, .webp)
2. Read each image via vision and extract screen type, user actions, and flow hints
3. Group screens into logical flows
4. Write user_stories.json to the same folder you provided

Optional manifest

If your folder contains frames_manifest.json, the skill uses it for frame names and ordering. Otherwise it lists image files alphabetically.

CLI

npx story-lens install      # Install or update
npx story-lens status       # Check installation
npx story-lens uninstall    # Remove from ~/.cursor/plugins/
npx story-lens help         # Show commands

Installed to: ~/.cursor/plugins/local/story-lens/

Output

The skill writes user_stories.json to your images folder:

{
  "images_folder": "/abs/path/to/images",
  "analysed_at": "2026-05-12T08:21:00Z",
  "total_frames_analysed": 13,
  "total_user_stories": 5,
  "analysis_method": "vision",
  "skipped_frames": [],
  "user_stories": []
}

Each user story includes feature, actor, goal, flows (with steps and frame metadata), and testable acceptance criteria derived from visible UI.

What's Included

| Skill | Triggers When | What It Does | |-------|---------------|--------------| | story-lens | "analyse screens", "generate user stories from images", "understand screens", "what does this app do" | Vision analysis of screen images → grouped flows → structured user stories JSON |

License

MIT