xuetong932-hub/Tech-website-skill

Tech Brand Showcase Website

Transform brand positioning into a ready-to-open tech website with Awwwards-level polish. Deliver a complete index.html containing all styles, interactions, and responsive logic — no pseudocode or omitted critical parts. Quality targets are not an endorsement of awards or brands.

Usage and Output

• Read the user-provided brand name, product, audience, language, assets, CTA goals, and existing code. User requirements take priority over this skill's defaults.
• When information is insufficient, use a clear demo brand and self-consistent copy to complete the page; do not fabricate real clients, certifications, performance scores, or awards. Sample data should be identifiable as demo values.
• Default to Chinese copy. First establish a core brand narrative and visual axis, then blend the following design traits — avoid mechanically pasting logos and layouts from multiple brands.
• When generating the site, save index.html to the writable output directory. If the user requests direct code output, respond with the full HTML code block; if they request a file, deliver a file link. Do not mistake generating this skill itself for a sample website request.
• This is a local HTML authoring workflow. Only perform external actions (deployment, hosting, publishing) when the user explicitly requests them.

Visual System

Use an 8px base spacing grid, manage backgrounds, text, borders, accent colors, spacing, border radius, and animation parameters with CSS custom properties. Automatically adapt to light/dark mode via prefers-color-scheme — both modes must have full hierarchy and readability.

Blend the following four design DNA, assigning primary and secondary roles based on content:

• Apple: Generous whitespace and centered focal points; white #FFFFFF, black #000000, body text #1D1D1F, blue #0066CC. Inter or system sans-serif font, prefer 300–600 weight, hierarchy with large headings and thin body text. Frosted glass navigation, subtle shadows, press scale(0.98); progressive reveals with cubic-bezier(0.25, 0.1, 0.25, 1), 400–600ms.
• Google: Modular Bento grid with clear information grouping. Blue #4285F4 for secondary accents; red #EA4335, yellow #FBBC05, green #34A853 only for small charts or status details. Subtle parallax and viewport-triggered animations with ample breathing room.
• Microsoft: Dark technical sections, low-opacity digital matrix or grids, blue-purple light sources. Card border-radius 6–12px, sharp borders, subtle gradient edges and hover outer glow; express depth through layering and directional lighting.
• FilmStorm: Full-screen cinematic narrative Hero, large headline overlays, subtitle-style line-by-line reveals and long-scroll chapter transitions. Cool colors with blue-teal glow, particles, scan lines, and data graphics serving the narrative; visually sharp and transparent, avoid over-decoration.

Light content areas and dark technical areas may alternate, but keep fonts, spacing, and components consistent. Use color accents sparingly — avoid all cards using different high-saturation colors simultaneously.

Default Page Architecture

1. Navigation: Fixed top, frosted glass background, slight tightening and increased background solidity on scroll; hover underline tracking or smooth expansion. Full mobile hamburger menu.
2. Hero: At least one viewport of cinematic visuals, with navigation not overlapping headings and CTAs. Desktop heading ~64px, mobile ~48px, use clamp() for narrow screens; subtitle ~1.5rem. Two CTAs (primary and secondary), low-saturation gradient, particle or grid background; content enters sequentially with delays. If no suitable video, use carefully crafted CSS/SVG product visuals — do not strongly depend on external videos.
3. Highlights: Desktop 12-column Bento layout using combinations like 7:5, 6:6 for asymmetrical rhythm — do not make all cards equal. Cards lift, slightly enlarge, and glow on hover; support light pointer tilt.
4. Content Narrative: Image and text alternate left, right, left — chapters with clear progressive relationship. Mobile maintains natural reading order. Soft fade-in on viewport entry, internal elements may float up 12px, background has subtle layered parallax.
5. Data & Technology: Grids, number incrementations, progress bars, and tech graphics; trigger when data enters viewport, display final value and unit accurately at end.
6. Footer: Desktop simple four-column layout, mobile natural stacking, links slightly shift on hover; complete copyright and brand information at bottom.

Animation and Interaction Implementation

• Standard interaction easing: cubic-bezier(0.4, 0, 0.2, 1), ~400ms. Global all transitions from original prompts should be implemented as explicitly listed properties like transform, opacity, box-shadow, border-color — avoid accidental animations of width, height, or layout.
• Standard scroll reveal: opacity: 0 → 1, translateY(24px) → 0, group stagger 150ms. Use IntersectionObserver to trigger on demand; if JS fails or CDN is unavailable, content must still be visible.
• Button hover: move up 2px, deepen shadow; active: scale to 0.98; cards may scale up to 1.02 — ensure no clipping or overlap of adjacent content. Links underline expands from center.
• Hero background has subtle pointer following; cards offer near-cursor highlight and limited angle tilt; buttons may have click ripple. Use independent transform layers or CSS custom properties to prevent entry, hover, tilt, and parallax from overwriting each other's transform.
• Merge pointer and scroll updates via requestAnimationFrame, reset on pointer leave. Particles use low-density Canvas or CSS; pause when page is hidden or canvas off-screen. Avoid continuous layout reads and repeated DOM creation.
• Enable pointer tilt, light tracking, and background following only on hover: hover and pointer: fine. On mobile, reduce particles, parallax, and blur cost — preserve core content and CTAs.
• When prefers-reduced-motion: reduce is active, disable particles, parallax, tracking, tilt, ripple, and translate animations; immediately display full content, final values, and progress. Handle both JS initialization and preference changes.

Technical Constraints

• Single file HTML5, use semantic header, nav, main, section, footer. Tailwind CSS v3 via a verified, version-specific CDN — do not mix v4 configuration.
• Inline styles and scripts, comment sections by: document structure, theme styles, components, responsive, accessibility, interaction logic; document animation states, observers, and fallback logic — do not repeat code meaning line by line.
• Prefer vanilla JS; only add a lightweight Anime.js dependency when truly necessary, and verify the official API and loading method for the chosen version. Do not mix v3's anime() call with v4's animate() API. Do not add GSAP, jQuery, or other frameworks for optional animations.
• Mobile-first: default covers <640px, adjust at 640px, 768px tablet, 1024px and up desktop. Test 320px narrow screens, wide content, and long headings to avoid horizontal scroll.
• Use viewport units like 100svh for mobile browsers; fixed navigation with content top margin, anchor scroll-margin-top, and skip navigation link.
• Prioritize above-the-fold resources: Hero main image must not be lazy-loaded; below-fold images use lazy loading with explicit dimensions or aspect ratio. Images have alt text, decorative graphics use aria-hidden. CDN solutions require internet — do not claim full offline availability; keep basic inline CSS to reduce impact of external resource failure.
• Use real buttons and links for interactions. Menu buttons must have accessible names, aria-expanded, and aria-controls; support Escape, reasonable focus after opening, focus return after closing. Provide clear :focus-visible; hidden menus must not be keyboard-focusable.
• Body text and key UI text contrast ratio at least 4.5:1. Do not use light tech blue for low-contrast body text. All CTAs must have valid destinations or full local interaction — no empty href="#", invalid downloads, or placeholder pop-ups.

Delivery Check

Open the generated file in an available browser to test narrow, tablet, and desktop screens, plus light/dark mode, reduced motion, keyboard menu operation, anchors, CTAs, final values, and console errors. If browser testing is not possible, perform a static check and honestly describe the verification scope — do not claim live testing.

Verify that above-the-fold content is readable without waiting for animations or CDN, cards have no overflow, headings are unobstructed, image resources are available, animations do not conflict with transform properties, and no hidden content exists when motion is reduced. Fix discovered issues before delivering the complete file — do not leave "rest similar" or TODO comments as placeholders.