用途
build-site 用于从一套固定的高级设计系统出发，构建高保真、电影感的「1:1 像素级」React 落地页。其定位是让产出的每个站点都像一件数字仪器：每次滚动都有意图，每个动画都有分量与专业感，并消除通用的 AI 套路化模式。
主要能力
- 4 种美学预设：每种预设定义调色板、字体、整体气质与图片氛围（用于 Unsplash 搜索关键词）。
- Preset A「Organic Tech」（临床精品）：调色板为 Moss #2E4036、Clay #CC5833、Cream #F2F0E9、Charcoal #1A1A1A；标题字体 Plus Jakarta Sans + Outfit，戏剧字体 Cormorant Garamond Italic，数据字体 IBM Plex Mono；图片氛围为暗色森林、有机纹理、苔藓、蕨类、实验室玻璃器皿。
- Preset B「Midnight Luxe」（暗色编辑风）：调色板为 Obsidian #0D0D12、Champagne #C9A84C、Ivory #FAF8F5、Slate #2A2A35；标题字体 Inter，戏剧字体 Playfair Display Italic，数据字体 JetBrains Mono；图片氛围为暗色大理石、金色点缀、建筑阴影、奢华室内。
- Preset C「Brutalist Signal」（原始精确）：调色板为 Paper #E8E4DD、Signal Red #E63B2E、Off-white #F5F3EE、Black #111111；标题字体 Space Grotesk，戏剧字体 DM Serif Display Italic，数据字体 Space Mono；图片氛围为混凝土、粗野主义建筑、原材料、工业感。
- Preset D「Vapor Clinic」（霓虹生物科技）：调色板为 Deep Void #0A0A14、Plasma #7B61FF、Ghost #F0EFF4、Graphite #18181B；标题字体 Sora，戏剧字体 Instrument Serif Italic，数据字体 Fira Code；图片氛围为生物发光、暗色水体、霓虹反射、显微影像。
- 固定设计系统：全局 CSS 噪点叠加（内联 SVG feTurbulence 滤镜，0.05 不透明度）；所有容器使用 rounded-[2rem] 至 rounded-[3rem] 圆角；按钮具备「磁吸」手感（hover 时 scale(1.03)，cubic-bezier(0.25, 0.46, 0.45, 0.94)），并使用 overflow-hidden 与滑动背景 span 层实现颜色过渡；链接与交互元素 hover 时 translateY(-1px)；所有动画在 useEffect 中使用 gsap.context()，清理函数返回 ctx.revert()；默认缓动 power3.out（入场）与 power2.inOut（变形）；错开值文本 0.08、卡片/容器 0.15。
- 固定组件架构：导航栏「浮动岛」（固定胶囊容器，滚动后变形为半透明模糊背景）、Hero「开场镜头」（100dvh、全幅背景图、主色到黑渐变遮罩、左下三分之一布局、大字号对比排版、GSAP 错开淡入上移）、Features「交互式功能产物」（三张卡片分别采用 Diagnostic Shuffler 循环卡片、Telemetry Typewriter 打字机实时文本流、Cursor Protocol Scheduler 动画光标周计划网格）、Philosophy「宣言」（暗色背景、低透明度视差纹理图、对比陈述、ScrollTrigger 触发的逐词/逐行揭示）、Protocol「粘性堆叠档案」（3 张全屏卡片滚动堆叠，下层卡片缩放至 0.9、模糊 20px、淡出至 0.5，各配旋转几何图形、扫描激光线或脉冲波形动画）、Membership/Pricing（三档定价，中间卡片突出）、Footer（深色背景、rounded-t-[4rem]、品牌与导航列、带脉冲绿点的「System Operational」状态指示）。
- 技术栈：React 19、Tailwind CSS v3.4.17、GSAP 3（含 ScrollTrigger 插件）、Lucide React 图标；字体通过 index.html 中的 Google Fonts link 加载；图片使用匹配预设氛围的真实 Unsplash URL；文件结构为单个 App.jsx（超过 600 行可拆分到 components/）与单个 index.css；移动优先响应式。
使用方式
当用户要求建站时，不运行问卷式提问。模型自行决定各参数：品牌名（若用户未提供则选取 2-3 音节、契合行业的名称）、一句话目的、美学预设（按行业与语气映射，模糊时默认 Midnight Luxe）、3 条价值主张、主 CTA（按行业默认映射）。随后发送 4-5 行公告说明所选品牌、美学、价值主张与 CTA，并立即开始搭建，公告是「可退出」而非「请求许可」。仅当错误会导致昂贵返工（如技术栈选择、需接入数据源）时才提一个真正的问题。
构建过程中使用 TaskCreate/TodoWrite 拆分并跟踪步骤（脚手架 → 字体 → hero → features → philosophy → protocol → pricing → footer → 打磨）；使用 Bash 执行 npm create vite@latest、安装依赖与开发服务器；使用 Write 一次性创建所有源文件，再用 Edit 精修；编辑前始终先 Read。不将创意工作委派给子代理，仅可派子代理做孤立的素材研究（如挑选匹配预设 imageMood 的 Unsplash URL）。
构建顺序：映射预设设计令牌 → 生成 hero 文案 → 将 3 条价值主张映射到 3 种功能卡片模式 → 生成 Philosophy 对比陈述 → 生成 Protocol 步骤 → 用 npm create vite@latest 在 websiteN 文件夹中搭建项目并安装依赖 → 一次性写入所有文件 → 确保动画、交互、图片均正常 → 后台运行 npm run dev，验证启动后自动用 open http://localhost:5173/ 在默认浏览器打开（若端口不同则从日志解析实际 URL），浏览器启动后才宣告构建完成。
适用场景
适用于需要快速产出高质感、电影感落地页的场景，覆盖招聘、金融、奢侈品、咨询、法律、珠宝腕表、生物科技、健康、可持续、开发者工具、B2B SaaS、数据平台、加密、AI、夜生活、游戏等行业。
限制
- 品牌名是模型唯一无法真正凭空发明的参数，若用户未提供则由模型选取一个合理名称。
- 美学与文案的调整成本低（换预设或改三条价值主张约 2 分钟），因此不作为提问理由。
- 具体收费、价格、平台支持范围等事实资料中暂未提供。