حوّل أرقام مشروعك إلى عالم ثلاثي الأبعاد تضغط عليه مع Claude وThree.jsTurn Your Business Numbers into a Clickable 3D World with Claude and Three.js

Key terms

Connector

An official link between Claude and another tool like Stripe, so it can read your data with your permission.

Three.js

A free, open source library for drawing 3D objects inside the browser.

Artifact

The file Claude builds inside the chat. The dashboard itself is an artifact you open and click.

Snapshot

The numbers Claude pulled when it built the dashboard. They do not change on their own; you refresh them when you ask.

The steps

1. 1

   Step 1

   Pick your data source

   On Stripe? Stripe has an official connector in Claude. Add it from the connectors directory, sign in and grant the permissions.

   Square does not accept cards in the UAE, so if your business is here you probably will not need it.

   Neither? An Excel or CSV export from your sales system is enough. Upload it in the chat.

   docs.stripe.com

   

   Tip: Give Stripe read access only. The dashboard never needs to write anything.

2. 2

   Step 2

   Pull the numbers and check them first

   Before any design, have Claude put the numbers in one table and check it yourself.

   If the table is wrong, the dashboard will be wrong too, just prettier.

   PromptNumbers table

   Copy

   From [Stripe or the attached file], give me one table with: number of customers, top [5] selling products, sales per month from [month] to [month], and orders not delivered yet. Do not guess any number that is not in the data; write "not available" instead.

   Tip: Remove customer names and phone numbers from the file before uploading if you do not need them.

3. 3

   Step 3

   Design your business as a 3D world

   Now tell it what your business looks like: a warehouse, a shop, delivery vans, an office. You can upload a photo of the place.

   Tell it every part must be clickable and open a card with its numbers.

   

   PromptWorld design

   Copy

   Design my business as an isometric 3D world: [describe the business, e.g. an online clothing store with one warehouse and two delivery vans]. Every part is clickable and opens a small card: [customers, products, vans, sales]. Use only the numbers in the table.

4. 4

   Step 4

   Tell it to build it with Three.js

   This is the step most people skip. Name Three.js so you get a real 3D world you can rotate and click, not a flat picture.

   Three.js is free and open source, and Claude writes the code and shows it as an artifact in the chat.

   threejs.org

   

   PromptBuild

   Copy

   Build this world with Three.js on one page. Let the camera orbit with the mouse or a finger, and make every object clickable to open its numbers card. Move the vans gently along the road. Keep the colours calm and the text clear.

5. 5

   Step 5

   Click every part and fix

   Open the artifact and click every object. Compare each card with the table you checked in step two.

   Any wrong number or part that does not open, tell it exactly where the problem is.

   PromptFix

   Copy

   The [part name] card shows [wrong number] and the right one is [right number] per the table. Fix it and change nothing else in the design.

6. 6

   Step 6

   Refresh the numbers when you need

   The numbers in the dashboard are a snapshot from when it was built. They do not update on their own.

   Every week or month, go back to the same chat and ask it to pull the new numbers into the same world.

   PromptRefresh

   Copy

   Pull the numbers for [the new period] from [Stripe or the new file] and update every card in the same world. Write the date of the last update under the dashboard.

   Tip: Show the last update date inside the dashboard so you never trust an old number.

Ready prompts to copy

Design my coffee shop as a 3D world: the counter, the espresso machine, the tables and the delivery car. Every part is clickable and shows [today's sales, the most ordered drink, number of orders, delivery orders] from the attached file. Build it with Three.js.