Prompt template and pitfalls to avoid for making a Bento Grid motion web page with ChatGPT, Claude, and Gemini

Want to build a “scroll and it comes alive” webpage like Apple’s site, but don’t want to chew through front-end from scratch? I recommend a combo punch of “three chat models to write code + Midjourney for images”—the efficiency is absurdly high.

One workflow to nail the page structure, motion, and assets

ChatGPT handles the skeleton

It’s fastest at writing HTML5 + Tailwind, perfect for laying down all the “hard requirements” in one go: Bento Grid, a black background + highlight color #2657FD, extra-large numeric titles, and so on.

Copy-ready prompt: Output a single HTML file. Use the TailwindCSS CDN and necessary JS. Use a Bento Grid layout, black background, #2657FD highlights, a large Chinese title with small English text as accents, include placeholder mini data graphics, and do not omit key content points.

Claude makes the motion feel smooth

Using Framer Motion via CDN can easily end up “it runs but it jitters.” Claude is better at making scroll triggers, entrance animations, and timing curves feel right (and it also likes to help you patch edge cases).

Gemini checks for gaps and fixes issues

If you hit browser errors, overridden styles, or misaligned components, have Gemini fix it by “explaining section by section + locating the problem + providing replacement code,” so you don’t have to stare at the console.

Midjourney handles the key visuals

Key visuals like “reactor core / galactic burst / energy release” (the ultra-saturated glow + dark background mentioned in the assets) are best left to it, then toss the images back to ChatGPT for responsive adaptation.

Two common little complaints of mine

• The CDN links generated by models occasionally expire. If it won’t run, don’t doubt your life—just swap in the latest official ones.
• Don’t stack too many effects. The more restrained the Bento Grid, the more premium it feels; otherwise it looks like a PPT annual-meeting vibe.

If you’re still stuck on “how to choose models / how to craft prompts / how to set up accounts and tools in one go,” you can browse Titikey—I use it often myself to avoid detours.