Skip to content

Commit 63f502f

Browse files
committed
fix: add visualization quality guidance to agent system prompt
Add a "Visualization Quality Standards" section to steer the model toward using Three.js (via import map) for 3D content instead of CSS transform hacks or Canvas 2D projection. Documents available ES module libraries (three, gsap, d3, chart.js), enforces type="module" script tags, and sets a polished quality bar for generated visualizations.
1 parent df96336 commit 63f502f

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

apps/agent/main.py

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,20 @@
5353
- Pre-styled form elements (buttons, inputs, sliders look native automatically)
5454
- Pre-built SVG CSS classes for color ramps (.c-purple, .c-teal, .c-blue, etc.)
5555
56+
## Visualization Quality Standards
57+
58+
The iframe has an import map with these ES module libraries — use `<script type="module">` and bare import specifiers:
59+
- `three` — 3D graphics. `import * as THREE from "three"`. Also `three/examples/jsm/controls/OrbitControls.js` for camera controls.
60+
- `gsap` — animation. `import gsap from "gsap"`.
61+
- `d3` — data visualization and force layouts. `import * as d3 from "d3"`.
62+
- `chart.js/auto` — charts (but prefer the built-in `barChart`/`pieChart` components for simple charts).
63+
64+
**3D content**: ALWAYS use Three.js with proper WebGL rendering. Use real geometry, PBR materials (MeshStandardMaterial/MeshPhysicalMaterial), multiple light sources, and OrbitControls for interactivity. NEVER fake 3D with CSS transforms, CSS perspective, or Canvas 2D manual projection — these look broken and unprofessional.
65+
66+
**Quality bar**: Every visualization should look polished and portfolio-ready. Use smooth animations, proper lighting (ambient + directional at minimum), responsive canvas sizing (`window.addEventListener('resize', ...)`), and antialiasing (`antialias: true`). No proof-of-concept quality.
67+
68+
**Critical**: `<script type="module">` is REQUIRED when using import map libraries. Regular `<script>` tags cannot use `import` statements.
69+
5670
## UI Templates
5771
5872
Users can save generated UIs as reusable templates and apply them later.

0 commit comments

Comments
 (0)