AI Coding (UI)XIndependently retested#web #human-reviewed #web-ui #motion-3d Claude Fable 5 · Three.js · Blender · GSAP

3D Supermarket-Packaging-Style Creative Agency Website

Source 53

Prompt

Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵

Here Is How I built with Claude 👇

Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D"

Use Three.js with WebGL to render all products in real time in the browser

Use Blender to model the packaging then export as GLTF to load in Three.js

Use GSAP for the smooth product rotation and hover interactions

Save this if you want a portfolio that makes clients feel they are buying something premium 🛒

Provenance · verifiedPublished prompts are human-checked against the original post; platform-reconstructed prompts are not accepted.Compare with source ↗

Models & stability

Recommended models

Claude Fable 5 · Three.js · Blender · GSAP

Stability: 84 / 100
Cost: Medium

Independent retest evidence

See what the same prompt generated in our test.

Retest output · not the creator's original

UIGenerated evidenceAI judged

gpt-5.6-sol

Aug 9, 2026

Retest score60.5

Desktop capture

Mobile capture

Download generated HTML ↓

claude-sonnet-5 · 53.4gpt-5.6-sol · 67.5gap · 14.1

Keep exploring

Explore related cases.

View all AI Coding (UI) Case →

AI Coding (UI)Aceternity UI

3D Animated Pin

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D and motion hero

Prompt

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

Source heat · Aceternity UI

—

Stability

View case →

AI Coding (UI)X09/06/2026

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D and motion hero Skill · Product and commerce conversion page

Prompt

First search for the "/unlazy" skill, read it fully, and use it throughout the entire task. Treat this as a major visual build lasting at least {argument name="minimum duration" d

Source heat · X

Stability

View case →

AI Coding (UI)Aceternity UI

3D Globe

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Globe」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D and motion hero

Prompt

// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…

Source heat · Aceternity UI

—

Stability

View case →

Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒