How to use Unknown to build an image hotspot editor
The author obtained a working hotspot editor for scrollable images, with movable and deletable boxes, and demonstrated JSON-backed hotspots in the game; resizing remained missing.
dev.toPrompt to try
Editorial adaptation, not the source author’s exact prompt. Replace bracketed inputs and review tool permissions first.
Build a single-file HTML/CSS/JavaScript editor for [game image]. Let me scroll larger images, draw rectangular hotspots, inspect image-relative coordinates, move or delete regions, and maintain JSON hotspot data for [city]. Keep the interface lightweight and ask me to review the result.
Reach people exploring AI agents
See placements →What happened
The author obtained a working hotspot editor for scrollable images, with movable and deletable boxes, and demonstrated JSON-backed hotspots in the game; resizing remained missing.
Reported by tomokat on dev.toHow the agent did it
- Discuss image hotspots and Phaser 3 with ChatGPT.
- Generate game images with Gemini and Nano Banana.
- Try to measure image regions in Mac Preview.
Where a person stepped in
Antigravity asked the author to review the result; the author assessed its limitations and demonstrated hotspots within the game.
A person approved each step before the agent continued.
The author wanted a town image with clickable regions and hover highlighting for a game. ChatGPT explained the hotspot concept and its implementation with Phaser 3, including accurate coordinates and transparent images for object-specific highlighting.
The author generated pictures with Gemini and Nano Banana, then tried to obtain image-relative coordinates in the Mac Preview app. Rectangular selections showed dimensions, but locating the desired coordinates proved awkward. After considering an alternative, the author returned to ChatGPT and described a lightweight custom editor.
ChatGPT produced a long prompt for Antigravity, specifying a single file containing HTML, CSS, and JavaScript. Antigravity built the editor and asked the author to review it. The result supported moving and deleting rectangular boxes, although resizing was missing. The author judged those limitations acceptable for the immediate purpose.
The reported outcome was a quick way to define hotspots on a scrollable image and use them in the game. The author notes that hotspot data sits behind JSON, allowing entries to be added, removed, or modified for each city. Who it's for: game developers who need a small image-region authoring tool and can work with limited editing features.
Prompt
Suggested prompt (written by Agents In Use, not the author's)
Source: dev.to · tomokat
Frequently asked questions
What limitation did the author report?
The author could move or delete boxes but could not resize them, and considered the editor sufficient for the immediate task.
How was the tool built?
ChatGPT wrote a long prompt specifying one HTML/CSS/JavaScript file, and Antigravity generated the editor from that prompt and asked for review.
More details
Remaining steps
- Ask ChatGPT for a single-file editor prompt.
- Give the prompt to Antigravity and review the editor.
About this account
Antigravity generated the single-file HTML, CSS, and JavaScript editor from a prompt prepared through ChatGPT.
Platform: dev.to. Attribution: https://dev.to/tomokat/i-solved-one-of-my-major-pain-point-during-my-game-development-with-ai-chat-gpt-antigravity-kkd. Prompt: Suggested (written by Agents In Use, not the author's). Sourced by the Agents In Use pipeline.
Credit: tomokat on dev.to
Source published 5 Jan 2026
Source checked 14 Oct 2026
Tools and topics
ChatGPT · Antigravity · Phaser 3 · Gemini · Nano Banana
Hotspots · Game tools · Image editor
Editorial completeness: 100/100. Measures documented fields, not agent performance or verified outcomes.