Argon 灰度实测提示词

以下保留原始提示词，可直接复制。

# Immersive Product Website: NOCTURNE ONE Spatial Audio Headphones

## Your Task

Design and implement a working premium consumer electronics website directly in the current project. The product is **NOCTURNE ONE**, a flagship pair of over-ear headphones featuring spatial audio, transparent acoustic chambers, and 42-hour battery life.

This is not a standard SaaS landing page. The result should feel like a carefully choreographed digital product launch: visually striking at first glance, then revealing the product layer by layer as the user scrolls. Do not ask for design preferences. Make distinctive, cohesive, high-end design decisions and implement them.

## Visual Direction

- Use a palette of **deep graphite, ice silver, and a single muted amber accent**. Avoid pure black, purple-blue neon, and rainbow gradients.
- Aim for the feel of “a precision acoustic instrument in a dark room”: restrained, sharp, and expensive, without a gaming aesthetic.
- Use **Liquid Glass** with convincing material depth: translucent layers, a sense of background refraction, highlights within 1 px, subtle inner shadows, variable edge brightness, and depth of field. A white translucent layer with `backdrop-blur` alone is insufficient.
- Make the first screen an asymmetric split layout: concise, forceful Chinese copy and CTAs on the left; a visually dominant headphone installation on the right. Build the product with CSS, SVG, or Canvas if needed, without relying on fragile external images.
- Use Geist, Satoshi, Outfit, or another modern industrial sans-serif font, with sensible Chinese fallbacks. Do not use Inter or emoji.
- Subtle dark-area grain, soft volumetric light, and slight chromatic dispersion are welcome. Avoid cheap outer glows and a screen full of glass cards.
  
## Page Content

Implement all of the following without falling into a generic “hero + three feature cards + CTA” structure:

1. **Floating glass navigation:** Brand, Sound, Structure, Specifications, and Purchase. Its material and size should change subtly after scrolling.
2. **Launch scene above the fold:**
	- Heading: `听见空间，而不只是声音。`
	- Supporting copy: `NOCTURNE ONE 以透明双腔体、个性化 HRTF 与 42 小时续航，重新定义私人声场。`
	- Primary button: `预约试听`
	- Secondary button: `观看 90 秒设计故事`
	- The product installation on the right should feature slow levitation, a passing light sweep, foreground/background depth, and glass HUD elements displaying `42h`, `Spatial Engine`, and `38 mm`.
3. **Soundstage section:** Create an interactive circular soundstage or waveform visualization. Sound waves and spatial direction should respond subtly to pointer movement.
4. **Structure section:** Use an offset layout or sticky scrolling to progressively separate the earcups, acoustic chambers, and headband, accompanied by concise copy.
5. **Color selector:** Offer `Obsidian`, `Mist Silver`, and `Burnt Amber`. Switching options should smoothly transition the product color and ambient lighting without reloading the page.
6. **Specifications and purchase:** Present the details in a refined technical layout: weight `312 g`, Bluetooth `5.4`, battery life `42 h`, fast charging `10 min / 6 h`, and launch price `¥3,499`.
7. **Footer:** Make it feel like the back cover of a brand publication, rather than a conventional four-column link footer.
  
Keep the specified Chinese UI copy in Chinese.

## Interaction and Motion

- On first visit, play a complete choreographed entrance: navigation, copy, product, and HUD should appear in sequence.
- Give the primary CTA a restrained magnetic-follow or directional hover effect. Do not use React state to drive pointer animation on every frame.
- Limit scroll animation to `transform` and `opacity`. Avoid high-frequency calculations in native scroll listeners.
- Implement hover, active, focus-visible, and disabled states for every button. Clicking `预约试听` should open a glass reservation panel that appears to expand naturally from the button. Include a minimal form flow that users can close and submit.
- The form must support default, submitting, success, and validation-error states. Do not make it a static success screen.
- Support `prefers-reduced-motion` and full keyboard operation.
  
## Engineering Constraints

- Use React and TypeScript. Reuse the project’s existing stack where possible. Inspect `package.json` before installing missing dependencies; do not assume Framer Motion or an icon library is already available.
- Use icons only from `@phosphor-icons/react`, `@radix-ui/react-icons`, or simple custom SVGs, and keep their style consistent.
- Split the implementation into clear components. Isolate continuously animated components so they do not cause the entire page to rerender.
- Complete the design for desktop, tablet, and mobile. Use `min-h-[100dvh]` for the first screen. Below 768px, use a stable single-column layout with no horizontal scrolling.
- Do not use Unsplash. Leave no placeholders, TODOs, pseudocode, or primary buttons that cannot be clicked.
  
## Definition of Done

Deliver a page that runs directly, rather than a design description or screenshot. It must be visually impressive, have convincing glass materials, use motion with a clear hierarchy, contain meaningful content, provide complete interaction flows, work reliably on mobile, and avoid the look of a default component-library template.

# 3D Digital Twin Console: PELAGOS Offshore Wind Farm

## Your Task

Design and build a working **PELAGOS offshore wind farm digital twin console** from scratch in the current project. The user is an offshore wind farm operations engineer who needs to inspect turbines in a genuinely interactive 3D scene, monitor power output and alerts, replay weather conditions, and plan maintenance tasks.

This is the highest-difficulty case. The final result should feel like both a real command-center display and a cinematic product demo. It must include full-screen real-time 3D, a clearly layered Liquid Glass interface, cinematic camera direction, coordinated complex state, and a reliable performance strategy. Do not stop at a concept description. Do not ask me questions; complete the implementation directly.

## Core Visual Concept

- Set the scene in the North Sea 18 minutes after sunset: a dark slate-blue sea, fading daylight, low clouds, distant mist, and red aviation lights on the turbines. Use graphite gray and mist silver for the interface, with muted safety orange as the only accent color.
- No purple or blue-purple AI gradients, pure black, esports neon, cheap outer glows, gradient headlines, emoji, or Inter font.
- The 3D scene is the visual focus. Do not cover its edges with panels; float a small number of high-value instruments over it. Panels must have a convincing Liquid Glass appearance: layered transparency, background refraction, a 1px inner highlight, shifting light and shade along the edges, subtle inner shadows, and credible depth of field where panels overlap.
- Pair `Geist / Satoshi` with `Geist Mono / JetBrains Mono`. Use monospaced type consistently for numbers, coordinates, power readings, and time.
- Visual variation: 9/10. Motion intensity: 9/10. Information density: 7/10. Be bold, fluid, and sophisticated without sacrificing readability.
  
## Required Real 3D Scene

- Build a genuine WebGL scene with Three.js or React Three Fiber. Do not use 2D images, video, or CSS to fake 3D.
- Procedurally generate at least 24 offshore wind turbines, each with a tower, nacelle, and three rotor blades. Use `InstancedMesh` or an equivalent optimization. The scene must run without external GLB assets.
- The sea must have gentle motion and reflective or shader-based depth. Add fog, a sky gradient, a key light, and depth across the distant wind farm. Keep effects affordable; do not stack expensive post-processing.
- Give each turbine an independent state: normal, curtailed, offline, or awaiting maintenance. Rotor speed must respond to current wind speed and turbine state; instances must not all rotate in perfect sync.
- Support orbit, pan, and zoom. Hovering over a turbine should reveal a restrained outline and its ID. Clicking should smoothly fly the camera toward it. On arrival, show a floating glass data plate for that turbine. Exiting should return the camera to the wind farm overview.
- On entry, play a skippable 3–5 second camera sequence that skims the sea, passes through the first row of turbines, and settles into the operations view. Avoid abrupt cuts, and do not let the animation block interaction.
  
## Operating Interface

1. Top navigation: `PELAGOS / FIELD 07`, current time, wind speed, grid output, connection quality, and a dynamic island that morphs when an alert appears.
2. Left asset tree: arrays A, B, C, and D with 24 turbines. Support search, collapse, and status filters. Clicking an entry must stay synchronized with selection in the 3D scene in both directions.
3. Right context panel: show wind farm output, utilization, and today's energy production by default. When a turbine is selected, transition to its live power, nacelle temperature, vibration, yaw angle, and latest work order. Morph the panel content smoothly with a shared-layout transition instead of replacing the entire panel abruptly.
4. Bottom timeline: allow dragging to replay the last 12 hours of weather. Changes in time must simultaneously update wind speed, wave amplitude, sky brightness, rotor speed, total output, and alert history.
5. View modes: `Field`, `Power Heatmap`, and `Maintenance Risk`. In heatmap mode, turbines must form a readable spatial encoding based on actual values, with a legend.
6. Alert center: include natural data such as `T-18 gearbox vibration 8.7 mm/s`, `T-07 yaw error 11.4°`, and `T-22 SCADA signal lost 03:42`. Clicking an alert must locate the turbine, switch views, and open the context panel.
7. Maintenance workflow: clicking `Create maintenance task` in turbine details should naturally morph the button into a glass task panel. Let users choose a time, severity, and technician, then complete submitting, success, and error states.
8. Include a cinematic mode that hides most of the UI while the camera tours the wind farm on a preset path. Any user interaction must exit cinematic mode immediately and smoothly.
  
## Interaction, Motion, and Sound Design

- Use spring animations with a sense of weight for popovers, selection, filtering, and reordering. Use layout or shared-element transitions for related elements.
- A few ambient microinteractions are welcome, such as aviation lights, a pulsing connection indicator, waves, and data flow, but each persistent animation must have a clear purpose.
- Glass buttons need directional hover feedback, press-and-release motion, and a clear `focus-visible` state. The main desktop CTA may use subtle magnetic behavior, but do not drive continuous pointer animation through React state.
- Provide complete loading, empty, WebGL initialization failure, and data error states. If WebGL fails, show a fully designed fallback overview rather than a blank screen.
- Respect `prefers-reduced-motion`: disable automatic tours and strong parallax, and shorten camera movement without breaking functionality.
- Support keyboard selection, Escape to return to the overview, `F` to focus a turbine, and `M` to enter or exit cinematic mode. Hint at these shortcuts unobtrusively in the interface.
  
## Engineering and Performance Requirements

- Use React and TypeScript. Read `package.json` and verify dependencies first. Install Three.js, React Three Fiber, or an animation library only if missing, and explain any installation. Do not assume dependencies already exist.
- Do not mix GSAP and Framer Motion in the same component tree. Keep the 3D render loop, UI animation, and application state clearly separated.
- Use a single source of truth to keep the asset tree, 3D selection, alerts, timeline, detail panel, and maintenance form consistent. Avoid unnecessary global state.
- Cap device pixel ratio. Reduce sea and shadow quality on mobile devices. Pause nonessential animation when the tab is hidden. Properly clean up RAF callbacks, listeners, materials, geometry, and WebGL resources.
- Aim for a stable frame rate near 60 fps on mainstream laptops. Do not remove core 3D features or coordinated interactions just to improve performance.
- Desktop is the primary experience, but tablet and mobile must also be usable. On small screens, turn the asset tree and details into bottom glass drawers while preserving selection, timeline, and view switching. Use `min-h-[100dvh]` and prevent horizontal scrolling.
- Do not use fragile external resources, Unsplash, pseudocode, TODOs, or nonfunctional buttons.
  
## Definition of Done

Deliver a runnable, operable digital twin product with genuine 3D depth. Acceptance testing will include clicking turbines, dragging the timeline, switching to heatmap mode, locating an asset from an alert, and creating a maintenance task. It will also assess the glass treatment, camera direction, state consistency, mobile experience, and frame rate. A static dashboard appearance, an incomplete interaction loop, or images masquerading as 3D will not count as complete.