类型：Site模板 · 收录：2026-11-05 01:13:02 · 源码：会员可见
# SENSO YU7 GT Final Website Replication Prompt
Use this file as a high-fidelity prompt package. The asset manifest below already uses public Cloudinary delivery URLs, so it can be copied directly into an external AI website builder.
---
## 1. Asset Manifest
Use these exact public asset URLs. Do not replace them with stock assets.
### Core Stage Videos
- Opening film: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890942/intro_mxrisk.mp4`
- Dashboard / arrival film: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890940/arrival_z03qqo.mp4`
- Vehicle switch next 0 to 1: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890942/select-next-0-1_meakqh.mp4`
- Vehicle switch next 1 to 2: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890936/select-next-1-2_ekxe9b.mp4`
- Vehicle switch next 2 to 3: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890937/select-next-2-3_a3h9sj.mp4`
- Vehicle switch next 3 to 0: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890941/select-next-3-0_w95pn4.mp4`
- Vehicle switch previous 0 to 3: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890935/select-prev-0-3_v1ea9o.mp4`
- Vehicle switch previous 3 to 2: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890937/select-prev-3-2_jzypva.mp4`
- Vehicle switch previous 2 to 1: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890952/select-prev-2-1_tcxg6j.mp4`
- Vehicle switch previous 1 to 0: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890939/select-prev-1-0_s9lrqf.mp4`
- Continuous line motion video: `https://res.cloudinary.com/deujvu5kq/video/upload/v1780890950/yu7-continuous-line_a1jqqz.mp4`
### Images
- SENSO logo: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890932/senso-logo_jxsqw8.png`
- Dashboard still frame: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890933/arrival-still_rqegbt.jpg`
- Stage red hero image: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890942/stage-red_kpb4jv.jpg`
- Cabin driving image: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890944/cabin-drive_bhm7ta.jpg`
- Floating top-view car cutout: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890946/top-car-cut_xmd4t9.png`
- Power Core card: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890943/power-core-current_zmapxq.jpg`
- Signal Face card: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890942/signal-face-current_ut6oc5.jpg`
- Aero Wheel card: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890946/aero-wheel-current_qfemtg.jpg`
- Carbon Detail card: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890941/carbon-detail-current_ppv5pi.jpg`
- GT seat detail: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890945/gt-seat_waj9mp.jpg`
- Tail line detail: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890944/tail-line_xuril1.jpg`
- Control grain detail: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890944/carbon-detail_nat6p4.jpg`
- Red cabin detail: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890945/red-cabin_l1jrah.jpg`
- Final poster image: `https://res.cloudinary.com/deujvu5kq/image/upload/v1780890945/final-frame_lwyfxg.jpg`
---
## 2. Copy-Ready English Prompt
Build a cinematic single-page automotive portfolio website called **SENSO YU7 GT**. The site must feel like a premium motion-design case study, not a normal marketing landing page. The emotional direction is dark, glossy, high-performance, red-black automotive cinema, with restrained typography, deep black negative space, controlled red glow, and very little copy.
Use the supplied assets exactly. Do not use placeholder images, random stock images, decorative gradient blobs, cartoon visuals, or unrelated automotive footage. If any asset is missing, create a clearly named placeholder block with the same aspect ratio and mark it as needing replacement.
### Technical Direction
Create a single-page responsive website. Use React + CSS/Tailwind + GSAP or Framer Motion if available. If the builder is vanilla-only, use semantic HTML, CSS, and JavaScript. The result must run as a real interactive webpage, not a static mockup.
Use these fonts:
- Primary UI and headings: Inter, fallback sans-serif.
- Technical labels and small uppercase UI: JetBrains Mono, fallback monospace.
The page should be desktop-first but must adapt cleanly to tablet and mobile. Preserve the cinematic framing and avoid text overlap at all viewport widths.
### Global Visual System
- Background: near-black with very subtle red undertones, faint grid lines, and low-opacity radial darkness.
- Main accent: performance red.
- Secondary accents: soft white, muted gray, very restrained green/pink only for vehicle color indicators.
- Surfaces: dark translucent glass only where needed, thin borders, no heavy cards.
- Corners: refined rounded corners, usually moderate radius, never childish pill-heavy layouts except the top navigation capsule.
- Text: mostly uppercase for automotive labels, wide tracking for small labels, bold white display headings.
- Mood: premium, quiet, cinematic, fast, controlled.
### Section 1: Opening Cinematic Stage
The first viewport is a full cinematic stage with no text at the very beginning.
Layout:
- Fullscreen black stage with a subtle inset frame and rounded border.
- Opening video fills the stage.
- No logo, no navigation, no buttons, and no title at the very beginning.
- The intro film must play first. Around the dashboard reveal moment, fade in the top interface.
Stage behavior:
1. Play the opening video automatically, muted, playsinline.
2. After the dashboard / reveal moment, show the SENSO logo, center navigation, and auth buttons with a slow refined fade and slight upward motion.
3. After the opening phase, show the vehicle selector UI.
4. Keep all videos preloaded enough to avoid delayed switching.
Top interface:
- Left: SENSO logo image.
- Center: long dark rounded capsule navigation with items: Film, Stage, Colors, Cabin, Gallery.
- Active item: Stage, white pill highlight.
- Right: Log in outline button and Sign up white filled button.
- The top bar should be horizontally balanced and responsive.
Vehicle selector:
- Left and right arrow buttons should be minimal, small, translucent, and premium.
- Bottom metadata group:
- Eyebrow: Current stage
- Main title: CHERRY RED GT
- Color dots: red, pearl pink, emerald green, onyx black.
- Do not show a "scroll to configure" cue.
- Vehicle switching must play the full supplied transition video, not instantly jump to a still image.
Vehicle names:
- CHERRY RED GT
- PEARL MIST GT
- EMERALD TRACK GT
- ONYX BLACK GT
### Section 2: Cabin Energy Composition
This section replaces the hidden journey hero. Do not show a separate "A Great Journey" hero block before it.
Create a cinematic editorial composition:
- Background: dark red-black field with oversized low-opacity text "YU7 GT" behind the media.
- Left: large cabin driving image.
- Right: floating top-view car cutout.
- The floating car should feel layered above the background, slightly rotated and scaled, not flat.
- Bottom-left text group:
- Eyebrow: 02 / Cabin Energy
- Heading: DESIGNED FOR THE GRAND TOUR.
Motion:
- On scroll entry, the cabin image fades in with blur removal and a soft upward move.
- The floating top-view car enters with depth: opacity rise, slight rotation, scale, and vertical motion.
- The headline should reveal with a masked vertical wipe, not a simple fade.
### Section 3: One Motion Video
Create a full-width cinematic motion video section.
Content:
- Huge background word: ONE1, very dark and low opacity.
- Center: continuous line motion video.
- Caption below: Power stance and road rhythm in one continuous line
Important:
- The caption must not include punctuation.
- The video should enter with scroll-linked scale, blur removal, and brightness increase.
- Keep generous negative space.
### Section 4: Technology Carousel
Create a horizontal premium carousel with four technology cards.
Cards:
1. Power Core - use Power Core asset.
2. Signal Face - use Signal Face asset.
3. Aero Wheel - use Aero Wheel asset.
4. Carbon Detail - use Carbon Detail asset.
Interaction:
- The selected card sits centered, larger, fully opaque, and sharp.
- Side cards are partially visible, darker, and slightly scaled down.
- Clicking a side card moves it into the center.
- Add a small segmented progress indicator below the carousel.
- Below the progress indicator, show the active title in bold uppercase.
- Use smooth spring-like transitions, not abrupt jumps.
Current final baseline:
- Signal Face should use the current wheel image.
- Aero Wheel should use the current red brake / caliper system image.
- No temporary blob URLs are allowed. All assets must use permanent URLs.
### Section 5: Detail Mosaic
Create a dark detail mosaic below the carousel.
Use these images:
- GT Seat
- Tail Line
- Control Grain
- Red Cabin
- Signal Face
Layout:
- Asymmetric editorial grid.
- One large vertical image and several smaller image tiles.
- Captions are small uppercase monospace labels.
- Images should have subtle hover zoom and a passing light sweep.
- Keep the section dark and quiet, not a busy gallery dump.
### Section 6: Process Panel
Create a refined process panel with four rows:
1. Opening Film - Dark reveal, dashboard ignition, no text before the stage.
2. Stage Selector - Instant color switching with short preloaded motion clips.
3. Cabin Energy - Red-black interior details keep the emotional thread alive.
4. Detail Rhythm - Close-ups are spaced like a visual system, not a gallery dump.
Design:
- Dark translucent rows.
- Thin separators.
- Number at left, title and short copy to the right.
- Rows reveal with staggered motion on scroll.
### Section 7: Final Poster
End with a quiet final poster section.
- Use the final poster image.
- Add a small eyebrow: 04 / Final Frame
- Add the title: YU7 GT
- The image should feel like a closing cinematic frame.
- Keep the ending spacious and minimal.
### Hidden / Excluded Sections
Do not display the earlier standalone Journey Hero block.
Do not display the track information map section by default.
Do not add extra marketing sections, pricing, testimonials, FAQ, or product specs.
### Scroll Animation System
The lower half must feel scroll-directed and premium:
- Each major section uses a reveal progress value based on viewport position.
- Reveal should combine opacity, vertical movement, blur removal, and tiny scale changes.
- Text should use masked vertical reveal or clip-path reveal.
- Media should reveal with depth, brightness, and slight parallax.
- Stagger child items inside carousels, mosaic grids, and process rows.
- Avoid sudden static-image insertion.
- Avoid layout jumps.
### Responsive Rules
- Desktop: cinematic wide layout with generous negative space.
- Tablet: keep the stage and carousel centered; reduce oversized background text.
- Mobile: stack content vertically, preserve image aspect ratios, reduce heading size, keep buttons tappable.
- Text must never overflow or cover the main vehicle.
- The top navigation can compress but should remain balanced.
### Acceptance Checklist
The final site is correct only if:
- Opening starts with video and no text.
- Top chrome appears after the cinematic reveal.
- Vehicle selector has full transition-video switching.
- The lower content uses scroll-linked premium reveal animation.
- Signal Face and Aero Wheel use the final current assets.
- No blob URLs, local-only URLs, or missing assets remain.
- The hidden Journey Hero and Track Panel do not appear by default.
- All visible copy is in English.
- The page feels like a visual portfolio case study, not a normal sales page.
---
## 3. Reusable Method For Any Future Website
Use this workflow whenever you want to turn a finished website into a professional copy-ready prompt.
### Step 1: Lock The Final Version
Record the exact URL, viewport, and final state. Decide what is visible and what is hidden. Do not write the prompt from memory.
### Step 2: Make An Asset Manifest
List every required asset:
- Logo
- Hero videos
- Transition videos
- Background images
- Product images
- Detail images
- Icons
- Posters / fallbacks
Then upload them to a public CDN and replace local paths with cloud URLs.
### Step 3: Extract The Visual System
Describe:
- Mood
- Color palette
- Typography
- Spacing density
- Layout rhythm
- Surface style
- Image treatment
- Motion personality
Avoid generic words like "modern" unless you define what modern means visually.
### Step 4: Extract The Page Structure
Write each section as a buildable block:
- Section name
- Purpose
- Layout
- Assets used
- Text content
- Interaction
- Scroll behavior
- Responsive behavior
### Step 5: Extract Motion Rules
For every important animation, describe:
- Trigger
- Timing
- Direction
- Easing personality
- What changes: opacity, transform, scale, blur, clip, brightness, parallax
- What must not happen
### Step 6: Add Negative Instructions
Professional prompts must say what to avoid:
- No placeholder assets
- No extra sections
- No stock photos
- No unrelated colors
- No abrupt jumps
- No text overflow
- No visible local-only asset paths
### Step 7: Add Acceptance Criteria
End with a checklist. This makes the AI self-check before delivering.
---
## 4. Universal Prompt Skeleton
Use this skeleton for future projects:
```text
Build a high-fidelity single-page website for [PROJECT NAME].
North Star:
[Describe the emotional and visual goal in one paragraph.]
Use these exact assets:
[Asset URL manifest.]
Visual system:
- Mood:
- Color:
- Typography:
- Layout:
- Surfaces:
- Image treatment:
- Motion personality:
Page structure:
1. [Section name]
- Layout:
- Content:
- Assets:
- Interaction:
- Animation:
2. [Section name]
- Layout:
- Content:
- Assets:
- Interaction:
- Animation:
Responsive behavior:
[Desktop/tablet/mobile rules.]
Do not:
[Negative instructions.]
Acceptance checklist:
[Concrete checks that prove the website matches the reference.]
```
---
## 5. Cloud Upload Notes
This prompt is already copy-ready because the current SENSO YU7 GT assets are on Cloudinary.
For future projects:
1. Upload every asset in the manifest to Cloudinary or another CDN.
2. Use direct file URLs, not dashboard preview URLs or temporary collection pages.
3. Test each URL in a private browser tab.
4. Replace every local path in the prompt with its public URL.
5. Keep one JSON or Markdown manifest with all final URLs.
If a platform asks for transformation settings:
- Images: keep original quality or use automatic quality with no heavy compression.
- Videos: use MP4/H.264 where possible, autoplay-safe, muted, playsinline.
- Avoid signed/private URLs unless the receiving AI can access them.