Video summary

Build a $10K Website With GPT Astra (No Code, Full Tutorial)

Main summary

Key takeaways

Technology

Tech concept: GPT Astra + “visual story” websites (desktop → mobile)

The tutorial focuses on using GPT Astra to generate an entire website from prompts, centered on a “visual story” approach. The hero/scroll experience is designed to visually communicate the product journey—such as ingredients blending into a smoothie, a watch expanding into components, or pizza being cooked and boxed.

The output is shown in two formats:

  • Desktop: horizontal/scroll layout with scene transitions
  • Mobile: vertical layout optimized for smaller screens, often with different/adjusted elements to preserve usability and composition

Example visual-story site types (from the intro)

  • Smoothie store: fruit/berries animate into a healthy smoothie; the visual style remains consistent while adapting layout for mobile.
  • Luxury watch store: the watch expands into components; a camera zoom reveals the watch on a hand, presented as a product storytelling/retail experience.
  • Pizza store: dough toss → pizza cooking → pizza drops into a takeaway box; mobile mirrors the same story beats.

Tutorial structure (6 steps)

  1. Tools setup Use the ChatGPT desktop app with an Astra model configured in a code-related mode.

  2. Brand learning Prompt Astra to understand brand details, logo, and the site URL.

  3. Create your visual story Define the cinematic scenes that represent the product journey.

  4. GPT Astra builds the full site Combine brand info + visual story into a working website.

  5. Refine the site Fix copy/look, add inspiration, and iterate on assets.

  6. Export/convert to mobile Create a dedicated mobile experience optimized for the viewport constraints.

Key products/tools mentioned

  • ChatGPT Desktop App using Codex mode
  • GPT-6 Astra (referred to as “Astra light” / “light vs high” setting)
  • GitHub repo of prompts tailored for GPT Astra
  • Higgsfield (via “Higgs field MCP”)
    • Generates visual assets, including starting imagery used for video creation.
  • Seedance 2.5
    • Generates video and enables a scroll-linked effect (video frames embedded so the hero animates as the user scrolls).
  • Hexcode MCP
    • Generates product imagery consistent with the site’s design/style.
    • Can also accept uploaded user product photos as reference frames to improve lighting and clarity.

Prompt workflow details (what the prompts do)

The main prompt is described as structured like an autonomous “skill” that:

  • Learns brand details
  • Collects inspiration (shapes/colors/elements, competitor URLs)
  • Produces the visual story
  • Uses Higgsfield MCP to generate assets
  • Creates the website and iterates until the creator is satisfied

A second prompt focuses specifically on mobile refinement, converting/optimizing the desktop concept for small screens.

Demonstration: fictional outdoor clothing brand (full pipeline)

1) Visual story creation: rain jacket hero animation

The prompt generates:

  • Starting scene: an orange rain jacket suspended in a dark, misty background.
  • Zoom sequence: the camera moves toward zipper/seams/fibers → rain/droplets appear → it zooms out to reveal a hiker on a mountain, ending in a final frame.

Note: generating longer clips can take a few minutes.

2) Iteration: revise the motion for a more active sequence

The creator requests changes such as:

  • Jacket unzips and shifts
  • More active camera motion
  • Extreme close-up showing thick woven cross-stitch strands
  • Hiker takes the last steps, then stands to admire the view

The revised film is generated. The tutorial emphasizes an advanced capability: the system can use the previous video as a motion reference to improve the targeted revision.

3) Website content growth: product sections + interactive UI

Additional product imagery is generated with Hexcode MCP, for example:

  • Hiking shoes
  • Weatherproof pants
  • Hat
  • T-shirt

Inspiration is gathered from Pinterest using screenshots to guide:

  • Hero section layout
  • Feature sections
  • Product selection sections

The resulting site includes:

  • A product listing/navigation with clickable items (shirts/pants)
  • A filter/category UI (e.g., apparel/accessories)
  • Hero/tagline text focused on outdoor messaging

4) Mobile refinement

The creator inspects the desktop site using a device toolbar (e.g., iPhone 15 Pro).

Observed mobile issues:

  • Missing/awkward hamburger menu behavior (buttons navigate to sections, but menu usability is limited)
  • Some elements are too small for comfortable interaction

The mobile refinement prompt produces:

  • A custom vertical hero clip refit for mobile framing (zoomed toward the focal center)
  • UI adjustments:
    • Buttons become larger across the width
    • Interactions are re-validated (buttons clickable; product sections accessible)

The tutorial emphasizes consistency across the brand, including matching brand color/style in the logo and buttons (orange accents noted).

Main sources / speakers (end)

  • Speaker/host: the creator of the tutorial (no name provided in the subtitles)
  • Referenced tools/platform sources:
    • GPT Astra / Astra (ChatGPT)
    • Higgsfield (Higgs field MCP)
    • Seedance 2.5
    • Hexcode (Hexcode MCP)
    • GitHub repo of GPT Astra prompts
    • Pinterest (for inspiration)

Original video