This Is More Than Just One Guide
11 courses and 23 free guides on AI automation for business — and beyond.
Why does a warehouse app look like a strategy game while yours is still a spreadsheet?
A developer showed software for a network of warehouses where trucks drive across a map like units and stock sits on top like gold in a game. We break down the tricks behind the effect and hand you six prompts to make AI do the same with your spreadsheet, CRM or task tracker. Plus how to install Claude Code, and an honest look at where a game UI gets in the way.
What's inside
free, in fullOne post, one line on how it was built
views on the post in under a day
per X on the morning of October 4of silent video: a screen recording of the app
no voice-over, no editingon how it was built: Built with Opus 5.5
the author names no stack and no timelineFour strategy-game tricks that work in a work app too
Dilum Sanjaya, a developer who posts demos built with AI, showed software for a network of warehouses. It is an isometric map, like a city-building game: warehouses, roads, trucks, yellow forklifts and pallets. The caption is short: industrial software doesn't have to feel like industrial software, manage warehouses like you're playing a strategy game. The effect rests on four tricks.
Resources on top
Gold, wood and population are always in view.
Stock in pallets, trucks on site, on-time delivery rate. Each number has an arrow: up or down.
Units on a map
Squads move across the map and you see who is doing what.
Trucks back into docks, forklifts carry pallets, a truck's route is highlighted with a line.
A card on click
Click a unit and see its health, cargo and task.
Clicking a pallet, forklift or truck opens a card: quantity, battery charge, arrival time, load.
Log and progress
A build queue and an event feed.
At the bottom, shipment tracking step by step from confirmation to delivery, plus tabs for docks, forklifts and trucks with their statuses.
Apply it to your own app
The trick isn't about warehouses. Any app with stock, people doing the work and statuses breaks down the same way.
Warehouse
Resources: stock, free slots, today's shipments
Units: trucks, forklifts, pallets
CRM
Resources: open deals, revenue this month, conversion
Units: deals move across a pipeline map, managers lead them like squads
Task tracker
Resources: sprint tasks, deadlines, team load
Units: tasks travel across the field from "to do" to "done"
What you need
Any one of three options will do. A regular chat is enough for a first prototype; for an app you'll keep growing, Claude Code is more convenient.
Claude chat
claude.ai or the app. One prompt, and a minute later there is a live prototype in the chat window (an artifact). Good for testing the idea on mock data.
Claude Code
An agent in the terminal: it creates project files, installs libraries, runs and checks the result. You need it when the prototype is ready to become an app with real data.
Other AI editors
Cursor, Codex, Windsurf and the like. The prompts below work there too: they describe the task, not a specific tool.
Model: the larger Opus for a complex scene and architecture, Sonnet is faster for edits. Dilum's post names Opus 5.5.
Installing Claude Code
macOS and Linux
- Open Terminal: Cmd + Space, type "Terminal".
- Paste the install command below and press Enter.
- Go to your project folder, for example cd ~/Projects/my-app.
- Type claude and sign in with your Claude account in the browser.
curl -fsSL https://claude.ai/install.sh | bashWindows
- Install Git for Windows from git-scm.com: Claude Code uses its shell.
- Open PowerShell and paste the install command below.
- Restart PowerShell and go to your project folder, for example cd C:\Projects\my-app.
- Type claude and sign in with your Claude account in the browser.
irm https://claude.ai/install.ps1 | iexInstall commands change from time to time; the current instructions are at docs.claude.com under Claude Code. If you prefer npm, npm install -g @anthropic-ai/claude-code works too (needs Node.js 18 or newer).
What it costs
- Free: chat with small limits, Claude Code not included
- Pro ≈ $20/mo: chat and Claude Code
- Max from ≈ $100/mo: many times the limits
- other AI editors from ≈ $20/mo, many have a trial
Prices are approximate, as of October 2026. Plans, limits and model versions change regularly: check the current terms on the vendor's site.
Five prompts from a grey spreadsheet to a strategy game
Go in order and don't merge steps: each one builds on the result of the previous one. Replace whatever is in square brackets.
01.Concept: describe your app and ask for a redesign
The model can't see your spreadsheet. The more precisely you describe who uses it and what happens there, the closer the concept gets to real work.
Here is my work app: [what it is: warehouse / CRM / task tracker]. [Who] use it every day to [main job].
Right now it is a [spreadsheet / list / dashboard] with columns: [list them].
What people do most often: [3-5 actions, e.g. "find an order", "change a status"].
Propose a redesign in the style of an isometric strategy game:
1. A resource bar on top: 3-5 key numbers, each with a change arrow.
2. A map: what becomes terrain and what becomes units.
3. A unit card on click: which fields and which 1-2 actions.
4. An event feed: which events go into it.
First give me a description of the screen and a list of entities. Don't write code yet.The last line saves time: a mistake in the concept is cheaper to fix in words than in code.
02.Data model and mock data
A game screen stands on its data. Types and believable mocks first, the picture second.
Take the concept we agreed on.
1. Describe the data types in TypeScript: resources, units (each with a type, status and map coordinates), events.
2. Generate mock data: [20-40] units, [3-5] locations, [30] events for a day. Names and numbers should be believable. Don't invent people, use roles: "driver 1", "manager 2".
3. Write a function that moves the data every 2-3 seconds: a unit changes status, a resource goes up or down, an event lands in the feed.
Put the data in a separate module so it can later be swapped for real data without rewriting the screen.The last paragraph is the key one: it keeps step four from turning into a rewrite.
03.Isometric map and animation
This is where it's easy to drown. Ask for a simple version: flat diamond tiles and icons instead of 3D models. Add the beauty later.
Build the screen in React + TypeScript.
- Map: an isometric grid on [canvas or PixiJS]. Diamond tiles, units as simple shapes or icons, colored by status. No 3D models.
- Camera: drag with the mouse, zoom with the wheel, a "reset view" button.
- Units glide between cells when their status changes.
- Clicking a unit opens a card on the right, clicking elsewhere closes it.
- Resource bar on top, event feed at the bottom.
- A light, calm palette; a status reads both by color and by label.
Run it and check that the screen doesn't lag with 40 units. If it does, explain why and suggest a simplification.Want depth like Dilum's? Ask for a Three.js version as the next step. But get the flat version working first.
Where the prompts lead: the unit card and route in Dilum's app
A card on click: charging station and forklift
Video: @DilumSanjaya on XA truck drives to its dock along a highlighted route
Video: @DilumSanjaya on X04.Real data: CSV, Google Sheets or an API
Connect the source you already have. Start with reading; add writing later.
Replace the mock data with real data. Source: [CSV file / Google Sheet at this link / API at ...]. Here are sample rows: [paste 5 rows without personal data].
1. Write an adapter that turns these rows into our resource, unit and event types. List the columns that don't fit the types.
2. Data refreshes every [30] seconds without a page reload.
3. If the source is unavailable, the screen shows the last data and a "no connection" badge instead of crashing.
4. Read only for now: don't write anything to the source.
Read keys and credentials from .env, never paste them into the code.Don't put customer names, phone numbers or addresses in the sample rows. The structure is enough for the model.
05.Polish and accessibility
A game screen looks great until someone in a hurry uses it on a 13-inch laptop. This prompt brings usability back.
Get the screen into working shape:
1. Add a "Map / Table" toggle. The table shows the same data with sorting, filters and search.
2. Every action in the card works from the keyboard, with visible focus.
3. Statuses are distinguishable without color: a label or icon next to them.
4. If reduced motion is on in the system, animations switch off.
5. Text contrast is at least AA. Check it and list what you fixed.
6. Nothing overlaps on a 1280 px wide screen.Item 1 is not optional. Why is covered below in the section on limits.
From Chat to App: 3 Ways to Put AI to Work
The prompts above work if you already know where to run AI and what to do with project files. The course starts from zero: chat, browser, terminal, and in the finale you build and publish your own app with your own hands. No coding experience needed.
What to check before you show it to the team
A beautiful screen is easy to mistake for a finished one. Go through both lists, then let the model review the code with the last prompt.
Data and safety
- The numbers in the resource bar match the source spreadsheet.
- No keys or passwords in the code or the repo, only in .env.
- Personal data doesn't end up in logs and isn't shown to people who don't need it.
- The app only reads the source until you explicitly decide otherwise.
- When the connection drops, the screen honestly says "no connection".
- There is a copy of the source spreadsheet in case something goes wrong.
Usability
- A newcomer finds a given order in under 10 seconds.
- The table view is there and does everything the old spreadsheet did.
- The screen works on a colleague's laptop, not just yours.
- Animation doesn't get in the way of reading and switches off with reduced motion.
- The unit card closes with Esc and with a click outside.
- Two or three colleagues tried it without hints, and you noted where they got stuck.
06.Review before the demo
Review the project before I show it to the team. Check:
1. Keys, passwords and tokens in the code and in the git history.
2. What happens with empty data, with 10,000 rows and when the connection drops.
3. Whether the totals in the resource bar match the source data: work through an example.
4. Accessibility: keyboard, contrast, reduced motion.
Give me a list of problems by severity. Don't fix anything until I pick what to fix.The no-fixes rule at the end lets you see the whole picture before the model starts changing code.
Where a game UI gets in the way
- 01
Dense data entry. Typing 50 invoice lines is faster in a table than clicking through units.
- 02
Bulk edits. Changing the status of a hundred orders is easier with a filter and one button.
- 03
Reports and reconciliation. Accountants and auditors need rows, totals and exports, not a map.
- 04
Weak computers and big volumes. Thousands of animated units load a laptop, so you need a cap and a simplified mode.
That's why the table stays. The map answers "what is happening right now", the table answers "what exactly and how much". Two views over the same data with a toggle between them work best.
Your AI Agents Now Have a Pixel Office
The same idea from another angle: Claude Code agents walk around an office like units, and you can see who is doing what.
Three Ways to Work With AI: Chat, Browser, Terminal
Where to start if Claude Code isn't installed yet: how chat differs from the terminal and when to use which.
Six steps from spreadsheet to map
The order in which you're least likely to get stuck. One step per evening is a fine pace.
01.Pick one app
One that people use every day and that has people doing the work and statuses: warehouse, requests, deliveries, tasks.
This is a map, not a manual. Building your own app with AI from scratch, step by step, is covered in the From Chat to App course.
An honest note on the source
We don't know exactly how Dilum built his app: the post gives no stack, no timeline and doesn't say whether it is a real product or a concept. There is one line: Built with Opus 5.5. The prompts in this guide are our way to get a similar result, not a retelling of his process. The frames and video excerpts belong to the author and are shown with a link to the post.
The author's post on XLearn to build apps like this yourself
The guide gives you a direction. The courses take you the whole way: from the first prompt to a published app, plus agents, automation and working in Claude Code.
Comments