AURIX ONE AI Website Creation Setup Guide | Fajal Ansari | Fajal Ansari
prompt collection
3D AURIX ONE: AI Website Creation Setup Guide
Recreate the 3D-like AURIX ONE premium website workflow using UI/UX Pro Max, 21st.dev MCP, ChatGPT image generation, Google Flow, EZGIF, and Google Antigravity.
A step-by-step guide to the AI website creation workflow shown in the Reel. Set up the AI coding environment, create AURIX ONE product visuals, turn the product image into an exploded-view animation, convert the animation into JPG frames, add the assets to your project, and give Google Antigravity a complete website-generation prompt. Interfaces and free or paid limits can change over time.
Keep exploring.
AURIX ONE — AI Website Creation
This guide recreates the workflow shown in the Reel: UI/UX Pro Max + 21st.dev MCP + ChatGPT image generation + Google Flow + EZGIF + Google Antigravity.
The Workflow
Install UI/UX Pro Max in Google Antigravity.
Connect 21st.dev MCP.
Generate a premium product image with ChatGPT.
Use Google Flow to turn the product image into an exploded-view video.
Convert the video into JPG frames with EZGIF and download the ZIP.
Put the product asset and frame sequence into your project.
Give Antigravity the website-generation prompt.
Let the agent build the website.
1. Set Up the AI Coding Environment
Install UI/UX Pro Max
Open the official GitHub repository and install the UI/UX Pro Max skill for Antigravity. The project describes it as design intelligence covering styles, palettes, typography, UX guidance and stack-specific recommendations. The repository lists Antigravity among its supported platforms and provides the CLI installation flow.
Connect 21st.dev MCP
Open 21st.dev's MCP setup page, sign in, create or use your API key, and connect the MCP to Antigravity using the configuration shown for a generic MCP client. The 21st MCP gives the coding agent access to a component catalogue so it can search and use real UI components rather than inventing every component from scratch.
2. Create the Product Assets
Generate the Main Product Image
Use ChatGPT image generation to create a premium product render. For this workflow, the product is a fictional premium headphone called AURIX ONE. Keep the product design consistent and use the same product image as the visual reference for later image and video generation.
public/
assets/
aurix/
aurix-product-showcase.png
Create the Exploded-View Animation in Google Flow
Upload the product image to Google Flow. Ask Flow to create an exploded top-to-bottom product animation in which the headphone separates into its internal components while preserving the same product design.
Google Flow Exploded-View Prompt
Use this exact product as the reference.
Create a premium industrial-design exploded-view animation.
The headphone should remain recognizable as the same product.
Gradually separate the outer shell, ear cushion, acoustic mesh, driver, ANC electronics, battery and structural frame from top to bottom. Keep the components aligned and reveal the internal engineering in a clean, cinematic product-commercial style.
Dark studio background, subtle red accent lighting, realistic materials, smooth controlled motion, no random component movement.
3. Convert the Exploded Video into JPG Frames
Download the finished exploded animation from Google Flow. Open EZGIF's Video to JPG tool, upload the video, choose a suitable frame rate or resolution, and export the frames as a ZIP. EZGIF supports extracting a video into a JPG image sequence and downloading the frames as a ZIP archive.
4. Prepare the Antigravity Project
Keep the main product image in the AURIX asset folder. Keep the extracted JPG frames together in a clearly named folder so Antigravity can inspect them. The exact frame filenames do not matter; the important part is that the complete sequence is available to the agent.
Paste the following prompt after the assets are in the project.
AURIX ONE Website Generation Prompt
I want you to build a premium, production-quality landing page for a fictional headphone brand called AURIX.
Use the installed UI/UX Pro Max skill and the connected 21st.dev MCP.
IMPORTANT:
Do not create a generic AI landing page.
First use UI/UX Pro Max to establish:
- visual style
- typography
- color palette
- spacing
- hierarchy
- UX patterns
- responsive behavior
- motion principles
Then use 21st.dev MCP to search for relevant premium components before implementing the UI.
PRODUCT:
AURIX ONE — Premium wireless noise-cancelling headphones.
Tagline: "Silence the noise. Feel everything."
Use the existing product asset:
public/assets/aurix/aurix-product-showcase.png
Also inspect:
public/assets/aurix/exploded-frames/
These frames represent an exploded-view animation of the product.
DESIGN:
Create a dark, cinematic, premium consumer-electronics website.
Use black/charcoal surfaces, white typography and deep red accents.
The visual identity must be original and must not copy any existing headphone company's branding.
PAGE:
1. Hero — cinematic product presentation.
2. Product reveal — dramatic product movement.
3. Sound & ANC — adaptive ANC, spatial audio, battery and drivers.
4. Engineering — showcase the physical construction.
5. Craftsmanship — materials and details.
6. Specifications — premium specification presentation.
7. Final CTA — strong product-focused ending.
IMPORTANT INTERACTION:
In the engineering/product section, show the normal AURIX ONE headphone first.
When the user hovers over the product, create a smooth exploded-view effect.
Normal:
AURIX ONE headphone.
Hover:
The product smoothly separates into its internal components, revealing:
- outer shell
- ear cushion
- acoustic mesh
- 40mm driver
- ANC electronics
- battery
- aluminium frame
Use the exploded JPG frames where appropriate to create the smoothest possible transition.
If a frame-sequence approach is better than a simple image swap, implement it.
The interaction should feel like a premium product commercial:
normal → components separate → exploded view.
When the cursor leaves:
exploded view → components return → normal product.
Do not use an abrupt image swap.
Add subtle technical labels such as:
"40mm Graphene Driver"
"Adaptive ANC"
"Acoustic Mesh"
"Aluminium Frame"
"Memory Foam Cushion"
Keep labels minimal.
Use subtle hover, parallax and motion effects throughout the page, but do not over-animate.
Avoid:
- generic SaaS layouts
- random gradients
- excessive glassmorphism
- repetitive 3-column cards
- excessive rounded cards
- random animations
- template-like UI
The final website should feel like a high-end digital agency designed it for a premium consumer-electronics launch.
Build it as a real responsive website with clean components, accessible interactions and a polished desktop/mobile experience.
What to Expect
After you paste the prompt, let Antigravity inspect the assets and build the page. The important idea is that the agent gets both design intelligence and a real UI component catalogue, while the product visuals are supplied as references.
The Workflow in One Line
UI/UX Pro Max + 21st.dev MCP + ChatGPT product image + Google Flow exploded animation + EZGIF frame sequence → Google Antigravity → Premium interactive website
Quick Checklist
UI/UX Pro Max installed in Antigravity.
21st.dev MCP connected.
Product image saved in public/assets/aurix/.
Exploded animation created in Google Flow.
Video converted to JPG frames in EZGIF.
Frame ZIP extracted and available in the project.
Website prompt pasted into Antigravity.
A note about 21st.dev: its current MCP documentation says its agent can search the component catalogue, retrieve or install components and generate UI through an MCP client. Availability, limits and pricing can change, so check the current MCP page when setting it up.
A note about UI/UX Pro Max: the official repository describes UI/UX Pro Max as an AI design-intelligence skill for coding assistants, with searchable design guidance across styles, palettes, typography, UX and technology stacks.