xuetong932-hub/Tech-website-skill

Tech-Brand-Website

Die Markenpositionierung in eine Tech-Website mit Awwwards-Niveau verwandeln, die direkt geöffnet werden kann. Liefern Sie eine vollständige index.html, einschließlich aller Stile, Interaktionen und responsiven Logiken – ohne Pseudocode oder ausgelassene Schlüsselteile. Das Qualitätsziel bedeutet nicht unbedingt eine Auszeichnung oder Markenunterstützung.

Verwendung und Ausgabe

• Lesen Sie den vom Benutzer angegebenen Markennamen, das Produkt, die Zielgruppe, die Sprache, die Materialien, das CTA-Ziel und den vorhandenen Code. Neue Anforderungen des Benutzers haben Vorrang vor den Standardwerten dieses Skills.
• Bei unzureichenden Informationen verwenden Sie klare Demo-Marken und konsistente Texte, um die Seite zu vervollständigen; erfinden Sie keine echten Kunden, Zertifizierungen, Leistungsergebnisse oder Auszeichnungen. Beispieldaten sollten als Demo-Werte erkennbar sein.
• Standardmäßig chinesische Texte. Bestimmen Sie zuerst eine Kern-Markenerzählung und eine visuelle Hauptachse, bevor Sie die folgenden Designmerkmale integrieren; vermeiden Sie es, Logos und Typografien mehrerer Marken mechanisch zusammenzukleben.
• Speichern Sie beim Generieren der Website die index.html im beschreibbaren Ausgabeverzeichnis der Aufgabe. Wenn der Benutzer direkte Code-Ausgabe wünscht, antworten Sie mit einem vollständigen HTML-Codeblock; bei Dateianfrage liefern Sie den Dateilink. Verwechseln Sie die Erstellung dieses Skills nicht mit der Erstellung einer Beispiel-Website.
• Dies ist ein lokaler HTML-Erstellungsprozess. Führen Sie externe Aktionen nur aus, wenn der Benutzer Bereitstellung, Hosting oder Veröffentlichung wünscht.

Visuelles System

Verwenden Sie ein 8px-Basisabstands-Raster und verwalten Sie Hintergrund-, Text-, Rahmen-, Akzent-, Abstands-, Rundungs- und Animationsparameter zentral mit CSS-Variablen. Passen Sie das helle/dunkle Modus automatisch über prefers-color-scheme an, beide Modi müssen vollständige Hierarchie und Lesbarkeit aufweisen.

Integrieren Sie die folgenden vier Design-Gene und weisen Sie ihnen Basierend auf dem Inhalt Haupt- und Nebenrollen zu:

• Apple: Viel Weißraum und zentraler Fokus; Weiß #FFFFFF, Schwarz #000000, Text #1D1D1F, Blau #0066CC. Inter oder System-sans-serif Schriftart, bevorzugt Schriftstärke 300–600, große Überschriften mit zarter Text-Hierarchie. Milchglas-Navigation, leichte Schatten, scale(0.98) beim Drücken; progressives Enthüllen mit cubic-bezier(0.25, 0.1, 0.25, 1), 400–600ms.
• Google: Modulares Bento-Raster mit klarer Informationsgruppierung. Blau #4285F4 als sekundäre Betonung; Rot #EA4335, Gelb #FBBC05, Grün #34A853 nur für wenige Diagramme oder Statusdetails. Natürliche Parallax- und Viewport-ausgelöste Animationen mit ausreichender Atmung.
• Microsoft: Dunkle Tech-Abschnitte, digitales Matrix- oder Gittermuster mit geringer Transparenz, blau-violette Lichtquellen. Kartenradius 6–12px, scharfe Ränder, subtile Verlaufsränder und Hover-Glow; Tiefe durch Hierarchie und gerichtete Licht- und Schatteneffekte.
• Film-Ästhetik: Vollbild-Video-Storytelling-Hero, große Überschriftenüberlagerung, Untertitel-artige Zeilenanimation und lang scrollende Abschnittsübergänge. Kalte Farben mit blau-zyanem Glühen, Partikel, Scanlines und datagraphische Elemente dienen der Erzählung; visuell scharf und durchsichtig, vermeiden Sie übermäßige Dekoration.

Helle Inhaltsbereiche und dunkle Tech-Abschnitte können abwechseln, aber Schriftart, Abstände und Komponenten konsistent halten. Sparsam mit Farbakzenten; vermeiden Sie, dass alle Karten gleichzeitig unterschiedliche hohe Sättigungsfarben verwenden.

Standard-Seitenarchitektur

1. Navigation: Fixiert oben, Milchglas-Hintergrund, nach dem Scrollen leicht verkleinert und deckender; Hover-Unterstrich oder sanftes Ausklappen. Mobilen Hamburger-Menü voll funktionsfähig.
2. Hero: Mindestens eine Viewport-Höhe filmische visuelle, Navigation verdeckt keine Titel oder CTAs. Desktop-Titel ca. 64px, Mobil ca. 48px, mit clamp() für schmale Bildschirme; Untertitel ca. 1.5rem. Zwei CTAs (primär und sekundär), niedrig gesättigter Verlauf, Partikel- oder Gitter-Hintergrund; Inhalte treten verzögert in Reihenfolge ein. Wenn kein geeignetes Video vorhanden ist, verwenden Sie sorgfältig erstellte CSS/SVG-Produktvisualisierungen, ohne stark auf externe Videos angewiesen zu sein.
3. Highlights: Desktop 12-spaltiges Bento, mit 7:5, 6:6 etc. für asymmetrischen Rhythmus, nicht alle Karten fest gleich gemacht. Karten heben sich beim Hover an, leicht vergrößern und Rand-Glow, leichter Mausneigungseffekt.
4. Inhaltserzählung: Text-Bild links, rechts, links im Wechsel, Abschnitte mit klarer Progression. Mobil einheitliche natürliche Lesereihenfolge. Sanftes Einblenden beim Eintritt in den Viewport, interne Elemente können um 12px nach oben schweben, leichte Parallax-Ebenen im Hintergrund.
5. Daten & Technik: Gitter, Zahleninkremente, Fortschrittsbalken und technische Grafiken; starten einmalig beim Eintritt in den Viewport, zeigen am Ende genaue Endwerte und Einheiten.
6. Footer: Desktop schlankes 4-Spalten-Layout, Mobil natürliches Stapeln, Links minimal nach rechts versetzt beim Hover, unten vollständige Copyright- und Markeninformationen.

Animationen und Interaktionsimplementierung

• Standard-Interaktionseasing: cubic-bezier(0.4, 0, 0.2, 1), ca. 400ms. Globale all-Übergänge aus den ursprünglichen Anweisungen sollten explizit auf Eigenschaften wie transform, opacity, box-shadow, border-color beschränkt werden, um ungewollte Animationen von Höhe, Breite und Layout zu vermeiden.
• Reguläre Scroll-Animationen: opacity: 0 → 1, translateY(24px) → 0, Stagger 150ms innerhalb derselben Gruppe. Mit IntersectionObserver bedarfsgesteuert auslösen; wenn JS nicht läuft oder CDN fehlschlägt, sollte der Inhalt dennoch sichtbar sein.
• Button-Hover: 2px nach oben, Schatten vertiefen, Active auf 0.98 skalieren; Karten können auf 1.02 vergrößern, ohne benachbarte Inhalte zu überlappen. Link-Unterstreichung von der Mitte ausbreitend.
• Hero-Hintergrund: leichte Mausverfolgung; Karten mit Nah-Cursor-Highlight und begrenztem Neigungswinkel; Button-Klickwelle. Verwenden Sie separate Transform-Ebenen oder CSS-Variablen, um Überschreibungen von transform durch Entrance-, Hover-, Tilt- und Parallax-Effekte zu vermeiden.
• Zusammenführen von Maus- und Scroll-Updates über requestAnimationFrame, zurücksetzen bei Mausverlassen. Partikel mit Canvas mit geringer Dichte oder CSS implementieren; anhalten, wenn Seite nicht sichtbar oder Canvas außerhalb des Bildschirms. Vermeiden Sie kontinuierliches Layout-Lesen und zyklische DOM-Erstellung.
• Nur bei hover: hover und pointer: fine Mausneigungs-, Lichtverfolgungs- und Hintergrundverfolgung einschalten. Mobil: Partikel, Parallaxe und Unschärfe reduzieren, Kerninhalte und CTAs beibehalten.
• Bei prefers-reduced-motion: reduce Partikel, Parallaxe, Verfolgung, Neigung, Welle und Translationsanimationen ausschalten, sofort vollständige Inhalte, Endwerte und Fortschritt anzeigen. Sowohl bei JS-Initialisierung als auch bei Präferenzänderungen behandeln.

Technische Einschränkungen

• Single-File HTML5 mit semantischen Elementen header, nav, main, section, footer. Tailwind CSS v3 über ein verifiziert verfügbares CDN mit genauer Version einbinden, nicht mit v4-Konfiguration mischen.
• Stile und Logik inline, nach Dokumentstruktur, Theme-Stilen, Komponenten, Responsivität, Barrierefreiheit und interaktiver Logik mit Kommentaren getrennt; Zweck von Animationszuständen, Observers und Fallback-Logik klar beschreiben, nicht jede Codezeile wiederholen.
• Bevorzugung nativen JS; nur bei Bedarf eine leichte Anime.js-Abhängigkeit hinzufügen und die offizielle API und Lademethode der gewählten Version prüfen. Keine anime()-Aufrufe von v3 mit animate()-API von v4 mischen. Keine GSAP-, jQuery- oder anderen Frameworks für optionale Animationen.
• Mobile-First: Standardmäßig unter 640px abdecken, ab 640px Inhalt anpassen, 768px Tablet, 1024px und größer Desktop. Überprüfen Sie schmale Bildschirme (320px), horizontale Inhalte und lange Titel, vermeiden Sie horizontales Scrollen.
• Viewport-Einheiten wie 100svh für mobile Browser verwenden; feste Navigation mit Platz oben für Inhalte, Anchors mit scroll-margin-top und Skip-Navigation-Link.
• Ressourcen für den ersten Bildschirm priorisieren, Hero-Hauptbild nicht lazy loaded; Bilder darunter lazy loaded mit expliziter Größe oder Seitenverhältnis. Bilder haben alt, dekorative Grafiken mit aria-hidden. CDN-Lösung erfordert Internet, nicht als vollständig offline verfügbar bewerben; grundlegende Inline-CSS beibehalten, um Auswirkungen externer Ressourcenfehler zu reduzieren.
• Interaktionen mit echten Buttons und Links. Menü-Buttons haben Namen, aria-expanded und aria-controls; Escape, sinnvoller Fokus nach Öffnen, Fokusrückgabe nach Schließen unterstützen. Klare : focus-visible, verstecktes Menü nicht per Tastatur fokussierbar.
• Text und wichtige UI-Textkontrast mindestens 4.5:1. Kein helles Tech-Blau für niedrigen Kontrasttext. Alle CTAs haben gültige Ziele oder vollständige lokale Interaktionen, kein leeres href="#", ungültige Downloads oder nur Popup-Platzhalter.

Lieferprüfung

Öffnen Sie die generierte Datei in einem verfügbaren Browser, überprüfen Sie schmale Bildschirme, Tablets, Desktop sowie helle/dunkle Modi, reduzierte Bewegungspräferenz, Menü-Tastaturbedienung, Anchors, CTAs, Endzustände der Werte und Konsolenfehler. Wenn kein Browser ausgeführt werden kann, führen Sie eine statische Prüfung durch und geben Sie ehrlich den Umfang der Überprüfung an, ohne eine tatsächliche Maschinenprüfung zu behaupten.

Stellen Sie sicher, dass der erste Bildschirm keine Animationen oder CDN zum Lesen benötigt, Karten nicht überlaufen, Titel nicht verdeckt werden, Bildressourcen verfügbar sind, Animationen keine Transform-Eigenschaften überschreiben und keine versteckten Inhalte bei deaktivierten Animationen vorhanden sind. Korrigieren Sie gefundene Probleme und liefern Sie die vollständige Datei, ohne "Rest ähnlich" oder TODO-Kommentare zur Implementierungsauslassung.