ChatGPT-6 Astra Is the Undisputed KING of Website Design
Explore a workflow for using ChatGPT-6 Astra to create visually distinctive websites with AI-generated assets, advanced animations, design references, and iterative QA.
This video explores an AI-assisted website design workflow centered on what the creator calls ChatGPT-6 Astra. Rather than focusing only on generating website code, the video emphasizes visual taste, interaction design, animation, references, and iterative refinement.
The workflow combines an AI coding/design model with Higgsfield for generating visual assets such as images, videos, textures, and product visuals. The creator also demonstrates using a design-principles skill file to guide decisions involving spacing, layering, composition, and other visual design considerations.
Website Animation Techniques
The video introduces several animation and interaction patterns that can be explicitly requested in prompts:
- Layered parallax: Background, midground, and foreground elements move at different speeds during scrolling.
- Scroll-triggered text reveal: Text appears progressively as the user reaches a section.
- Scroll-driven animation: An object's animation responds directly to the user's scroll position.
- Cursor tracking: A character or visual element responds to the user's mouse movement.
- Stacking cards: Sections or cards visually stack over previous sections during scrolling.
Build 1: Pulp Cocktail Brand
The first demonstration creates a fictional cocktail brand called Pulp. The page uses a white background, product cans, multiple flavors, and several interactive animations.
The creator demonstrates scroll-driven product rotation, animated headline reveals, cursor-following mascot eyes, hover-based product cutaways, and flavor transitions. The example illustrates how multiple interactions can be organized across different sections without making the overall page feel overly busy.
Build 2: Drone Product Website
The second website focuses on a drone product and uses a different visual direction. The creator recommends presenting the product in a specific sequence: footage first, product information second, and technical specifications last.
The example uses full-bleed aerial footage, restrained typography, scrolling specifications, and visual hierarchy to present the product without overwhelming the user with technical information immediately.
The creator also demonstrates a mobile QA workflow: identifying a section that does not display correctly on a smaller screen, providing the issue back to the AI system, and having the design revised.
Build 3: Fathom SaaS Website
The third example is a SaaS website for Fathom. The design uses a cleaner, more restrained visual style, with typography and stacked cards forming much of the interaction.
The video emphasizes that the same underlying workflow can produce significantly different results when the brand, references, content hierarchy, and visual direction change.
Using References Instead of Generic Adjectives
One of the video's main recommendations is to provide concrete design references rather than relying on vague descriptions such as "premium" or "beautiful."
The creator discusses several sources of website inspiration, including award-winning website galleries, component libraries, and motion-focused design resources. The recommended approach is to give the AI a real website or component and ask it to understand the underlying layout, interaction, spacing, and motion principles rather than simply copying the design.
Four Prompting Rules
The video concludes with four major recommendations:
- Use references instead of generic adjectives.
- Avoid unnecessary animation and movement.
- Name the specific interaction or animation technique you want.
- Give targeted revision notes instead of repeatedly regenerating the entire design.
The overall workflow is presented as a combination of AI-assisted design, generated visual assets, explicit interaction instructions, reference-driven prompting, deployment, and iterative visual QA.
Editorial Note: The video contains creator-reported demonstrations and claims about ChatGPT-6 Astra, Higgsfield, AI website design capabilities, deployment workflows, and model performance. Product names, model availability, integrations, capabilities, and performance claims should be independently verified against current official documentation before publication.
