📋 Table of Contents
As a bonus, this AI tool helps you improve your docs and product writing instantly
One editor for writers, developers, and agents
Most doc tools make you choose: accessible for writers, or git-native for developers. Mintlify's editor does both. Writers get WYSIWYG editing, developers keep their git workflow, and AI agents contribute via MCP. Every change syncs both ways. Your whole team, in one place.
🧩 Why This Exists
The standard way to build an interactive science app:
Hire a designer → wait 2 weeks
Brief a developer → wait 4 weeks
Source 3D assets → wait or pay $500+
Test and iterate → another 2 weeks
Dilum's way:
Prompt GPT Images 2 for a UI mockup → 5 minutes
Drop the image into Gemini 3.1 Pro with a coding prompt → 10 minutes
Generate 3D models in Tripo → 15 minutes
Working interactive app → same day
The gap isn't skill. It's knowing the pipeline exists.
🔬 What the App Can Do
This is what Dilum built — use it as your spec or adapt it to any topic.
You Say / Do | What Happens |
|---|---|
Select a cell type from the sidebar | 3D model loads and auto-rotates in the viewport |
Click "Rotate" | Full 360° interactive rotation mode activates |
Click "Isolate" | Every organelle except the selected one fades out |
Click "Hide Others" | Same as isolate — clean single-structure view |
Click "Read View" | Biological notes panel expands with facts |
Open "Microscope View" | Electron microscope simulation overlay activates |
Open "Compare Cells" | Side-by-side comparison panel loads two cell types |
Select an organelle from the detail panel | Zoom highlights that structure with a callout |
Click "3D Export" | Downloads the model as a file |
Click "Screenshot" | Saves current viewport as PNG |
✅ What You Need Before You Start
ChatGPT account (Plus or Pro for GPT Images 2 access)
Gemini account — aistudio.google.com (free tier works; Pro/Ultra for longer context)
Tripo account — tripo3d.ai (free credits on signup)
A browser. That's it.
Optional: Hunyuan3D account for comparison — 3d.hunyuan.tencent.com
⚠️ Gemini 3.1 Pro is currently in public preview (as of May 2026). Access via Google AI Studio is free in preview. Select model gemini-3.1-pro-preview in the model dropdown.
🛠️ The 3-Tool Stack Explained
Tool | Role | Why This One |
|---|---|---|
GPT Images 2 | UI design mockup | Generates pixel-accurate UI screenshots from text — acts as your Figma |
Gemini 3.1 Pro | Code generation | 1M token context window, 77.1% ARC-AGI-2 score, reads your image and writes the full app |
Tripo | 3D model generation | Outperformed Hunyuan3D in Dilum's direct comparison for biological structures |
The key insight: GPT Images 2 doesn't generate art here. It generates a UI screenshot. That screenshot becomes the coding brief for Gemini. You skip wireframing, spec writing, and design tools entirely.
🎨 Phase 1 — Design the UI with GPT Images 2
Goal
Get a high-fidelity screenshot of your app's interface. This image is literally what you'll hand to Gemini and say "build this."
Steps
Go to chat.openai.com and make sure you're on a Plus or Pro plan
Select GPT-4o with image generation enabled (GPT Images 2 is integrated)
Open a new chat
Use the UI Design Prompt below — paste it and hit send
Wait 30–60 seconds for the image to generate
Review the output — check: is there a sidebar? A main 3D viewport? Control buttons? Info panels?
If anything is missing, follow up: "Add a microscope view tab at the bottom" or "Make the sidebar show thumbnail previews of each cell type"
Once you're happy — right-click → Save image as → save it as
app-ui-mockup.png
⚠️ GPT Images 2 sometimes generates landscape layouts. If your mockup looks like a wide dashboard, add: "Make this a desktop app layout, wider than tall, with a left sidebar." For a web app, ask for a browser window frame around it.
🧊 Phase 2 — Generate 3D Models with Tripo
Goal
Get GLB or OBJ files of each biological structure you want in the app.
Steps
Go to tripo3d.ai and sign in
Click Text to 3D
Use the prompts from the 3D Model Prompts section below — one structure at a time
Set style to Realistic or Scientific
Hit Generate — takes 60–120 seconds per model
Preview the result — rotate it, check structure accuracy
If it looks wrong: regenerate once or add detail to the prompt ("with visible nucleus membrane")
Click Download → choose GLB format (works best with web apps)
Name each file clearly:
plant-cell.glb,animal-cell.glb,nucleus.glb, etc.Repeat for each structure you need
⚠️ Dilum tested both Tripo and Hunyuan3D. His direct assessment: "Tripo seemed to give better results overall" for biological structures. Start with Tripo. Only use Hunyuan3D if Tripo's output is failing for a specific model.
💻 Phase 3 — Build the App with Gemini 3.1 Pro
Steps
Go to aistudio.google.com
Click New Prompt (top left)
In the model dropdown — select Gemini 3.1 Pro Preview
Click the image upload icon (paperclip) and upload your
app-ui-mockup.pngPaste the App Build Prompt from the Prompts section below
Hit Run
Wait 30–90 seconds — Gemini will output a full HTML/JS/CSS file
Copy the entire code block
Open a new file on your desktop, paste the code, save as
index.htmlOpen
index.htmlin Chrome — you should see your app skeleton runningPlace your
.glbfiles in the same folder asindex.htmlIf 3D models aren't loading, see Troubleshooting below
Go back to Gemini and use the Iteration Prompts to add features one at a time
⚠️ Don't try to build everything in one prompt. Build the layout first, confirm it matches your mockup, then add 3D interaction, then add the panels. One feature per follow-up.
📝 Prompts to Use
UI Design Prompt (GPT Images 2)
Generate a high-fidelity UI screenshot of a desktop web application called "Cell Architecture Studio".
Layout:
- Left sidebar (dark background, ~20% width): vertical list of cell types with small thumbnail previews. Cell types: Plant Cell, Animal Cell, Neuron, Epithelial Cell, Stem Cell, Muscle Cell. Show the first item as selected/highlighted in teal.
- Main center viewport (~55% width, dark background): large 3D view of a plant cell model, rotating. Show a subtle radial glow behind it. At the bottom of the viewport: small icon buttons labeled Rotate, Isolate, Hide Others, Read View, Screenshot, 3D Export.
- Right panel (~25% width, slightly lighter dark background): two sections. Top section titled "ORGANELLE DETAILS" with a selected organelle name (Nucleus), properties listed (size, function, visible: yes, label on/off toggle), and a fun fact. Bottom section titled "WHERE IT OCCURS" showing a small tree/location visual.
- Bottom strip below the main viewport: three thumbnails labeled "Microscope View", "Standalone Viewer", "Electron Microscope".
- A second row of thumbnails for Compare Cells: "Plant Cell vs Animal Cell" side-by-side thumbnails with an Add button.
Color scheme: very dark grey background (#0f0f0f), teal accent (#00d4aa), white text, subtle card borders in dark grey.
App header: top bar with app name left-aligned, tabs: Gallery | Library | Recents | Settings. User avatar top right.
Make it look like a real, production-quality desktop app screenshot.3D Model Prompts (Tripo)
3D model of a eukaryotic plant cell, cross-section view, showing all major organelles: nucleus with visible double membrane, large central vacuole, chloroplasts with thylakoid stacks, mitochondria, endoplasmic reticulum, golgi apparatus, cell wall, cell membrane. Scientific illustration style. Color-coded organelles. No background.3D model of an animal cell, cut-away view showing internal organelles: nucleus, mitochondria, ribosomes, smooth and rough endoplasmic reticulum, golgi apparatus, lysosomes, centrosome. Scientific style, color-coded, transparent outer membrane. No background.3D model of a neuron, showing cell body (soma), dendrites extending outward, single long axon with myelin sheath segments and nodes of Ranvier, axon terminal. Scientific illustration style, blue and white color scheme. No background.App Build Prompt (Gemini 3.1 Pro)
I've attached a UI mockup image of an app called "Cell Architecture Studio". Build this as a complete, working single-file HTML application.
Requirements:
1. Match the layout in the image exactly: left sidebar with cell type list, main 3D viewport center, right organelle detail panel
2. Use Three.js (load from CDN) for the 3D viewport
3. Load GLB model files from the same directory. File names: plant-cell.glb, animal-cell.glb, neuron.glb, epithelial-cell.glb, stem-cell.glb, muscle-cell.glb
4. Sidebar: clicking a cell type loads that GLB model into the viewport and highlights the selected item in teal
5. Bottom controls: Rotate (toggles auto-rotation), Isolate (hides all but selected organelle mesh), Read View (expands info panel)
6. Right panel: show static organelle data for the currently selected cell (nucleus: size, function, visible toggle)
7. Color scheme: background #0f0f0f, accent teal #00d4aa, white text, card borders #2a2a2a
8. Make it responsive to window resize
9. No external dependencies except Three.js and GLTFLoader from CDN
Output the complete HTML file. No placeholders. Working code only.Iteration Prompts (Gemini 3.1 Pro follow-ups)
Add a "Compare Cells" panel that shows two viewport windows side by side. Left loads the currently selected cell, right lets the user select a second cell from a dropdown. Keep both models rotating in sync.Add a microscope view mode. When activated, overlay a circular vignette mask on the main viewport to simulate looking through a microscope eyepiece. Add a simulated scan-line texture. Add a brightness slider in the bottom strip.Add a screenshot button that captures the current viewport as a PNG and triggers a browser download. Filename should be the cell name + timestamp.Customizable Master Prompt
I'm building a [TOPIC] explorer app. Here's my UI mockup (attached).
Build this as a complete single-file HTML app using Three.js for 3D rendering.
The app should:
- Show a sidebar list of [ITEMS — e.g. cell types / planets / organs / historical artifacts]
- Load a corresponding 3D GLB model when each item is selected: [LIST YOUR .glb FILENAMES]
- Display detail information for the selected item in a right panel: [YOUR DATA FIELDS]
- Include these controls at the bottom: [YOUR CONTROLS]
- Use this color scheme: background [HEX], accent [HEX], text white
Match the layout in the attached image exactly. Output complete working HTML. No placeholders.📅 Daily Workflow
How to use this pipeline day-to-day for new science app ideas:
Morning — pick your topic (5 min)
Choose a science subject: chemistry, astronomy, anatomy, geology, ecology
Define 5–8 items for your sidebar (elements, planets, organs, etc.)
Write down 3–4 data fields you want in the detail panel
Design phase (15 min)
Open GPT Images 2
Adapt the UI Design Prompt for your new topic — swap "Cell Architecture Studio" for your app name, swap the sidebar items
Generate → save mockup
3D phase (30 min)
Open Tripo
Generate one 3D model per sidebar item using specific prompts
Download all as GLB
Put them in a folder named after your app
Build phase (20 min)
Open Google AI Studio → Gemini 3.1 Pro Preview
Upload your mockup
Paste the App Build Prompt adapted for your topic
Copy output code → save as
index.htmlin your folderOpen in Chrome → test
Polish phase (20 min)
One follow-up prompt per feature you want to add
Test each feature before moving to the next
Screenshot the working app
💡 Tips
Tripo beats Hunyuan3D for organic/biological shapes — Dilum's direct comparison. For mechanical or architectural structures, test both.
GPT Images 2 is your Figma — don't use it for decoration. Use it to produce a pixel-accurate layout spec that Gemini can read. The more real it looks, the better Gemini codes it.
One GLB per organelle, not one GLB for the whole cell — if you want Gemini to show/hide individual parts, each part needs to be a separate file. Ask Tripo to generate individual organelles, not full cells with everything in one model.
Gemini 3.1 Pro's 1M token context window is the unlock — paste your entire codebase back into the chat when iterating. Say: "Here is the full current code: [paste]. Now add [feature]." It won't lose context.
Test in Chrome first — Three.js GLB loading has cross-origin issues in some browsers. If models aren't loading, open Chrome's DevTools (F12) → Console to see the exact error.
The ARC-AGI-2 score matters for you — Gemini 3.1 Pro's 77.1% score means it handles complex, multi-step reasoning. When your app logic gets complicated (sync two viewports, calculate organelle positions, handle state), trust it with hard prompts. Don't pre-simplify.
Science apps hit differently on social — Dilum's post hit 1.7M views. The niche is underserved. Biology, chemistry, astronomy, geology, human anatomy — all valid. Pick the one you'd personally find useful.
🔧 Troubleshooting
Problem | Exact Cause | Fix |
|---|---|---|
3D model doesn't load, blank viewport | GLB file not in same directory as index.html | Move all |
Console error: | Running index.html directly from disk (file://) | Open terminal in that folder → run |
Console error: | Three.js CDN link failed to load | Check your internet connection. Or download Three.js locally and reference |
Console error: | GLTFLoader import path is wrong | Replace the CDN import with: |
Model loads but looks black | No lighting in the scene | Add to your Gemini follow-up: "The model loads but appears black. Add an AmbientLight at intensity 0.8 and a DirectionalLight at position (5, 5, 5) intensity 1.2" |
GPT Images 2 generates art, not a UI | Prompt too vague | Add: "Generate a realistic screenshot of a desktop app, not an illustration. It should look like a real software product" |
Gemini outputs incomplete code | Output hit token limit | Ask: "Continue from where you stopped. Start from the [last function name] function." |
Tripo model looks nothing like target | Prompt too general | Add anatomical specifics: membrane names, count of structures, size ratios. More detail = better output |
App layout doesn't match mockup | Gemini misread the image | Re-describe the layout in text alongside the image: "The left sidebar is exactly 220px wide, the right panel is 280px, the center fills remaining space" |
⚡ Quick Reference
TOOL URLS
GPT Images 2: chat.openai.com (Plus/Pro)
Gemini 3.1 Pro: aistudio.google.com → model: gemini-3.1-pro-preview
Tripo 3D: tripo3d.ai
Hunyuan3D: 3d.hunyuan.tencent.com (backup)
GEMINI 3.1 PRO SPECS
Model ID: gemini-3.1-pro-preview
Context window: 1,048,576 tokens (1M)
ARC-AGI-2 score: 77.1% (2x+ over Gemini 3 Pro)
Released: February 19, 2026
Access: Free in preview via AI Studio
TRIPO OUTPUT FORMAT
Best for web: GLB
Backup: OBJ + MTL
LOCAL DEV SERVER (run in your app folder)
Mac/Linux: python3 -m http.server 8000
Windows: python -m http.server 8000
Then open: http://localhost:8000
THREE.JS CDN (put in <head>)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>@bestapps.ai — we find tools before everyone else