科技品牌展示官网

科技品牌展示官网 是做什麼的？

将品牌定位转化为具有 Awwwards 级完成度追求、可直接打开的科技官网。交付完整 index.html，包括全部样式、交互与响应式逻辑，不留伪代码或省略关键部分。质量目标不等于获奖或品牌背书。

使用与输出

• 读取用户给出的品牌名称、产品、受众、语言、素材、CTA 目标和既有代码。用户的新要求优先于本 skill 的默认值。
• 信息不足时使用清晰的演示品牌和自洽文案完成页面；不要编造真实客户、认证、性能成绩或获奖信息。示例数据应能辨识为演示值。
• 默认中文文案。先确定一个核心品牌叙事和视觉主轴，再融合下列设计特征，避免把多个品牌的标志和版式机械拼贴。
• 生成网站时，在任务可写输出目录保存 index.html。用户要求直接输出代码时，回复完整 HTML 代码块；用户要求文件时交付文件链接。不要把生成 skill 本身误作生成示例网站的请求。
• 这是本地 HTML 创作流程。仅在用户要求部署、托管或发布时执行相应外部操作。

视觉系统

以 8px 为基础间距网格，使用 CSS 变量集中管理背景、文字、边框、强调色、间距、圆角和动效参数。通过 prefers-color-scheme 自动适配明暗模式，两种模式都要有完整的层级和可读性。

融合以下四种设计基因，并根据内容分配主次：

• Apple： 大量留白与居中焦点；白 #FFFFFF、黑 #000000、正文 #1D1D1F、蓝 #0066CC。Inter 或系统无衬线字体，优先 300–600 字重，大标题与纤细正文形成层级。毛玻璃导航、轻投影、按压 scale(0.98)；渐进揭示用 cubic-bezier(0.25, 0.1, 0.25, 1)，400–600ms。
• Google： 模块化 Bento 网格与清晰的信息分组。蓝 #4285F4 为辅助强调；红 #EA4335、黄 #FBBC05、绿 #34A853 只用于少量图表或状态细节。自然的视差与视口触发动画，保留充足呼吸感。
• Microsoft： 深色技术章节、低透明度数字矩阵或网格、蓝紫光源。卡片圆角 6–12px、锐利边框、微妙渐变边缘和 hover 外辉；通过层次与定向光影表达纵深。
• 影视飓风： 全屏影像叙事 Hero、大标题叠加、字幕式逐行浮现与长滚动章节转场。冷色与蓝青光晕、粒子、扫描线和数据图形服务叙事；视觉锐利、通透，避免过度装饰。

明亮内容区与深色技术区可以交替，但保持字体、间距与组件一致。色彩点缀克制，避免让所有卡片同时使用不同的高饱和色。

默认页面架构

1. 导航： 固定顶部，毛玻璃背景，滚动后略微收紧并增加背景实度；hover 下划线追踪或平滑展开。移动端汉堡菜单完整可用。
2. Hero： 至少一个视口的电影式视觉，导航不遮挡标题和 CTA。桌面标题约 64px，移动端约 48px，使用 clamp() 适配窄屏；副标题约 1.5rem。主次两个 CTA，低饱和渐变、粒子或网格背景；内容按顺序延迟进入。没有合适视频时使用精心制作的 CSS/SVG 产品视觉，不强依赖外链视频。
3. 亮点： 桌面采用 12 栏 Bento，使用 7:5、6:6 等组合形成非对称节奏，不把所有卡片做成固定等分。卡片 hover 抬升、轻微放大与边框辉光，支持轻量指针倾斜。
4. 内容叙事： 图文左、右、左交替，章节有明确递进关系。移动端统一自然阅读顺序。进入视口时柔和渐入，内部元素可轻微上浮 12px，背景轻量分层视差。
5. 数据与技术： 网格、数值递增、进度条与技术图形；数据进入视口后启动一次，结束时准确显示最终值和单位。
6. 页脚： 桌面简约四列，移动端自然堆叠，链接 hover 微偏，底部版权与品牌信息完整。

动效与交互实现

• 标准交互缓动为 cubic-bezier(0.4, 0, 0.2, 1)，约 400ms。原提示词中的全局 all 过渡应实现为明确列举 transform、opacity、box-shadow、border-color 等属性，避免宽高和布局产生无意动画。
• 常规滚动出场为 opacity: 0 → 1、translateY(24px) → 0，同组 stagger 150ms。用 IntersectionObserver 按需触发；用户无法运行 JS 或 CDN 失败时，内容仍应可见。
• 按钮 hover 上移 2px、阴影加深，active 缩至 0.98；卡片可放大至 1.02，确保不会裁切或覆盖邻近内容。链接下划线从中心展开。
• Hero 背景有轻微指针跟随；卡片提供近光标高亮和有限角度倾斜；按钮可有点击涟漪。使用独立变换层或 CSS 变量，防止入场、hover、倾斜、视差互相覆盖 transform。
• 通过 requestAnimationFrame 合并指针与滚动更新，指针离开时复位。粒子用低密度 Canvas 或 CSS 实现；页面不可见和画布离屏时暂停。避免持续读取布局和循环创建 DOM。
• 只在 hover: hover 且 pointer: fine 时开启指针倾斜、追光和背景跟随。移动端减少粒子、视差与模糊成本，保留核心内容和 CTA。
• prefers-reduced-motion: reduce 时关闭粒子、视差、追踪、倾斜、涟漪与位移动画，立即显示完整内容、最终数值和进度。JS 初始化及偏好变化都要处理。

技术约束

• 单文件 HTML5，使用语义化 header、nav、main、section、footer。Tailwind CSS v3 通过经核实可用且版本明确的 CDN 引入，不混用 v4 配置。
• 样式和逻辑内联，按文档结构、主题样式、组件、响应式、无障碍、交互逻辑分区注释；对动效状态、观察器和降级逻辑写清楚用途，不逐行重复代码含义。
• 优先原生 JS；确有需要再引入一个轻量 Anime.js 依赖，并核实所选版本的官方 API 与加载方式。不要把 v3 的 anime() 调用混入 v4 的 animate() API。不得为可选动效增加 GSAP、jQuery 或其他框架。
• 移动优先：默认覆盖小于 640px，640px 起按内容调整，768px 平板，1024px 及以上桌面。验证 320px 窄屏、横向内容和长标题，避免水平滚动。
• 使用 100svh 等适应移动浏览器的视口单位；固定导航配合内容顶部空间、锚点 scroll-margin-top 与跳过导航链接。
• 首屏资源优先，Hero 主图不懒加载；下方图片懒加载并明确尺寸或宽高比。图片有 alt，装饰图形使用 aria-hidden。CDN 方案需要联网，不宣称完全离线可用；保留基础内联 CSS，降低外部资源故障影响。
• 交互使用真实按钮与链接。菜单按钮有名称、aria-expanded 与 aria-controls；支持 Escape、打开后的合理焦点、关闭后焦点归还。提供清晰的 :focus-visible，隐藏菜单不能被键盘聚焦。
• 正文及关键 UI 文字对比度至少 4.5:1。不要用浅色科技蓝承担低对比正文。所有 CTA 都有有效目的地或完整本地交互，不使用空 href="#"、无效下载或仅弹出占位提示。

交付检查

在可用浏览器中打开实际生成文件，检查窄屏、平板、桌面，以及明暗模式、减少动态效果、菜单键盘操作、锚点、CTA、数值结束状态和控制台错误。不能运行浏览器时进行静态检查并如实说明验证范围，不宣称已完成实机验证。

检查首屏内容无需等待动画或 CDN 才能阅读，卡片无溢出，标题无遮挡，图片资源可用，动画不争抢变换属性，关闭动态效果后无隐藏内容。修复发现的问题后交付完整文件，不以“其余类似”或待办注释省略实现。