借助 AI 工具设计公司官网：优秀路径与方法
本文整理自 AI 辅助官网设计的实践对话与产物分析，提炼可复用的工作流、决策框架与工程实践。
摘要
用 AI 做企业官网，最高效的路径不是「让模型直接写整站」，而是把 AI 当作能完成调研 → 方向探索 → 工程落地全链路的协作 Agent，并在关键节点保留人类决策权：
- 结构化需求（品牌色、受众、内容、技术约束）作为对话上下文
- 逆向分析获奖/标杆站点，输出可执行的
steal/reject清单 - 生成多套静态视觉方向，让人在终端或页面上做明确选择
- 选定主参考 + 组合借鉴动效模式，一次性交付可部署的静态站
- 内容与视觉分离，企业自有文案不进「抄竞品」陷阱
典型实践表明：视觉主骨架可借鉴一家创意站（如 Monolog），动效与工程模式则从 Vast Space、darkroom.engineering、Evervault、Linear 等多站组合取材。
一、整体工作流（可复用模板）
各阶段要点
| 阶段 | AI 做什么 | 人做什么 | 典型产物 |
|---|---|---|---|
| 需求输入 | 理解受众、信息架构、品牌约束 | 提供 logo 色板、业务文案、产品图 | 需求文档（信息架构、禁用项） |
| 设计调研 | 爬取/分析标杆站 HTML/CSS/JS，归类技巧 | 指定调研范围（Awwwards/SOTD 级） | 结构化设计调研文档（约 10 站） |
| 方向探索 | 生成多套完整静态 mockup + 动效说明 | 在终端描述偏好或点击 Select | 多方向对比 Mockup 页面 |
| 工程实现 | 按选定方向写组件、动效注册表、部署配置 | 验收视觉、校对文案 | 整站源码 |
| 内容维护 | 协助翻译、结构化 | 审定企业事实与合规表述 | 多语言内容数据文件 |
核心原则：AI 负责「宽度」（调研广度、代码体量、模式拼装）；人负责「深度」（方向选择、品牌真实性、上线决策）。
二、优秀路径 1：先做「设计调研」，再写一行 UI 代码
为什么有效
直接说「做一个高级感官网」会产出同质化模板。更稳妥的做法是：在实现前，让 Agent 对约 10 个获奖级站点做逆向分析，每条记录包含：
libs：技术栈（GSAP、Lenis、Three.js、自定义 scroll 引擎等）layouts：信息架构与区块节奏steal：值得借鉴的具体技巧（含复杂度c与适配说明f）reject：明确不采纳的重型方案standout：该站最值得学的一件事
调研对象示例：Lusion、Locomotive、Obys Agency、Evervault、Linear、Unseen Studio、Igloo Inc、Vast Space、Exo Ape、darkroom.engineering、Active Theory。
优秀前端参考站（调研素材库）
不必从零搜「高级官网」——优先从下面几类策展站点挑标杆，再交给 Agent 做逆向分析：
| 站点 | 适合挖什么 | 用法建议 |
|---|---|---|
| Motion Sites | 以动效与滚动叙事见长的创意站合集 | 定「气质 / 动效预算」时先刷一轮，挑 3～5 个进调研清单 |
| GSAP Showcase | 真实落地的 GSAP 案例（ScrollTrigger、SplitText 等） | 技术栈已定 GSAP 时，从这里抄「可实现」的动效模式，而非只抄视觉截图 |
| Awwwards | SOTD / 获奖级整站审美与信息架构 | 指定调研范围时写明「Awwwards/SOTD 级」，避免 Agent 只找通用模板站 |
经验：Motion Sites / Awwwards 负责「看见什么值得学」；GSAP Showcase 负责「确认怎么做成本可控」。三者组合，比只丢一句「参考获奖站」更稳。
可复制的 Prompt 结构
请逆向分析以下 N 个网站（附 URL），对每个站点输出 JSON：
- steal：可移植技巧，标注复杂度 low/medium/high，并说明如何适配 [客户行业/品牌色]
- reject：过重或不适用的方案及原因
- standout：一句话总结该站最值得学的设计决策
优先关注：滚动节奏、字体层级、动效成本、无障碍与 SSR 友好度。如何把调研结果落地
调研结论应写进设计 token 与代码注释，而非留在文档里吃灰。例如：
- 视口比例缩放 → CSS 变量
--vw-unit（darkroom 模式） - 统一缓动曲线 →
--site-ease（Vast 模式） - Lenis + GSAP 单 RAF 循环 → 单一
motion模块（Vast / darkroom 模式）
经验：调研文档的价值 = 能否映射到 3～5 个可命名的设计 token + 1 个动效模块。
三、优秀路径 2：多方向 Mockup，强制人类做「方向决策」
为什么有效
AI 容易在单一审美里过度优化。更稳妥的流程是生成 2～3 套互斥视觉方向，每套包含：
- 基于客户 logo 色板的独立 CSS 变量体系
- 静态页面 + 轻微 CSS 动效暗示
- 「真实构建时的动效计划」（Lenis、ScrollTrigger、SplitText 等）
- 可选的 Select 按钮，并提示「或在终端描述混合方案」
定稿后，在设计决策记录文档中写明所选方向及理由，避免后续迭代漂移。
Mockup 中对主参考的表述应极其具体（便于 Agent 执行），例如：
- 「超大 display 字标溢出画框，与 Monolog 参考一致」
- 「胶片颗粒为固定 feTurbulence 叠加层，不随滚动移动」
可复制的决策清单
在选定方向前，让人类回答：
- 气质：仪器/文档感 vs 电影感作品集 vs SaaS 极简？
- 信息密度：编辑型 mono 索引 vs 大卡片区 vs 工程图纸？
- 动效预算：纯 CSS / GSAP 声明式 / WebGL 英雄区？
- 受众信任机制：资质证书、数据指标、产品规格表 — 哪类元素必须首屏可见？
经验：Mockup 阶段用 HTML 单文件 即可，不必上框架；选定后再迁移到 Astro/React。
四、优秀路径 3：「主参考 + 动效拼盘」，而非整站克隆
视觉主参考（一个就够）
视觉骨架可明确借鉴一家创意站（如 bymonolog.com），即使客户是传统 B2B 企业：
| 常见借鉴特征 | 典型落地方式 |
|---|---|
| 超大 display 字标溢出画框 | 专用 display 字体 + hero 巨型字标 |
| 深色底 + 固定胶片颗粒 | 固定 .grain 层 + 深色背景 token |
| 暗/亮区块交替滚动节奏 | data-section-theme 切换语义色 |
| 编辑型 mono 索引标签 | 01 — 区块名、← 01/04 式导航 |
经验：B2B 企业站可以借 作品集站点 的电影感，只要内容层保持「规格、资质、产品」的可信度。
动效与工程（多家组合）
| 参考站点 | 借鉴内容 | 典型落点 |
|---|---|---|
| Vast Space | 统一缓动、Lenis+GSAP 单 RAF、data-* 注册表 | 动效模块、CustomEase |
| darkroom.engineering | 1440px 视口比例缩放、粘性叠卡 | --vw-unit、sticky 卡片组 |
| Evervault | 光标追踪渐变标题 | [data-glow-text] |
| Obys / Exo Ape | 遮罩行上升文字揭示 | [data-reveal] + SplitText |
| Linear | 固定颗粒层、短微交互、blur-up | --hover-transition、图片渐显 |
| Lusion | 滚动驱动全页色带（部分） | 分区主题切换 |
明确「不做什么」
调研中的 reject 列表同样重要，例如：
- Lusion 的自定义 virtual-scroll 引擎、WebGL tunnel
- 过重 Barba 页面过渡
- 为动效而动效的 odometer preloader（若无大资源加载需求）
经验：让 Agent 在注释里 点名参考来源，后续维护者才知道该删哪一层「炫技」而不伤骨架。
五、优秀路径 4：内容与设计解耦
结构
- 内容层：主语言文案由企业提供，其他语言与之结构镜像
- 呈现层：页面区块组件只负责布局与样式，不写死文案
主语言作为源文本，各语言版本保持字段结构一致。这样：
- AI 不会把竞品官网文案洗进站点
- 法务/市场只需改 JSON，不必碰组件
- 双语站维护成本可控
经验：「像不像某获奖站」应体现在 版式与动效；「是不是这家公司」必须体现在 自有数据、产品名、资质材料 等内容资产上。
六、优秀路径 5：声明式动效注册表，控制复杂度
模式
单一动效模块 + HTML data-* 属性，而非每个 section 写一段 GSAP：
| 属性 | 行为 |
|---|---|
data-reveal | 遮罩行上升（SplitText） |
data-fade | 淡入上移 |
data-counter | 数字滚动 |
data-decode | scramble 解码 |
data-parallax | 媒体视差 |
data-glow-text | 光标追踪填充 |
data-corners | 注册角标 |
并统一：
- 一条 signature ease
- 一个 RAF 循环驱动 Lenis + ScrollTrigger
prefers-reduced-motion下全部 no-op，SSR HTML 始终完整可读
经验：Agent 一次性生成整站时，注册表模式比散落动效脚本更易审查、更易降本。
七、优秀路径 6：技术栈选择服务于「AI 可交付 + 人类可维护」
推荐选型思路：
| 层 | 选择 | 理由 |
|---|---|---|
| 框架 | Astro 等静态站点生成器 | SEO 友好、组件化适合 Agent 分文件生成 |
| 动效 | GSAP + Lenis | 与调研站点一致，文档与范例丰富 |
| 3D | Three.js（按需） | 仅用于 1～2 个叙事型 section，控制范围 |
| 样式 | 设计 token + 组件级样式 | 色板约束严格，防止 Agent 漂移配色 |
| 部署 | Cloudflare Pages / Vercel 等 | 静态构建、安全头、零后端 |
经验：给 Agent 的约束越具体（「只允许 N 个品牌色变量」），产出越像品牌站而非通用模板。
八、优秀路径 7：把需求文档放进仓库，而非只留在对话里
Agent 会话结束后，需求往往只存在于对话上下文，仓库里未必有对应文件。
推荐做法
即使用 AI 生成，也应把需求沉淀到仓库，例如：
docs/requirements.md # 信息架构、受众、禁用项
docs/brand.md # 色板、字体、语气
docs/design-decisions.md # 选了哪套方向、为什么这样二次迭代不必重跑完整 Agent 会话。
九、人机协作检查清单
在首次上线前，人类应核对：
- [ ] 事实：数据指标、产品名、资质是否与官方材料一致
- [ ] 合规：行业表述、地图、合作伙伴 logo 是否获授权
- [ ] 性能：WebGL、颗粒层、smooth scroll 在低端机与
prefers-reduced-motion下的表现 - [ ] 无障碍：开屏动画是否可跳过、焦点顺序、对比度
- [ ] 溯源：是否误用竞品文案或未经授权的素材
- [ ] 部署：构建命令、环境变量、安全头 / CSP 是否就绪
十、可复用的 Prompt 序列（端到端）
以下顺序在实践中被验证有效：
1. 立项
客户：[公司名]，行业：[行业]，受众：[目标客群]。
品牌色：[色板]。
交付：静态官网（如需双语请说明），部署 [平台]。
内容附件：[主语言内容草案]。
请先输出信息架构（单页锚点结构），不要写代码。2. 调研
请分析以下 N 个 Awwwards 级站点……输出 animation-research.json 格式。
对每个技巧标注 steal/reject、复杂度、如何适配客户品牌色与行业气质。3. 方向
基于调研，做 3 套互斥视觉方向 HTML mockup（同内容不同气质）。
每套写明：字体、网格、hero 构图、动效计划。
不要实现生产框架代码。4. 定稿实现
选定 Direction [X]，主视觉参考 [站点]。
动效：[列出从调研中采纳的模式]。
用 [框架] 实现，内容从 content 文件读取，动效用 data-* 注册表。5. 硬化
补充：开屏动画可跳过、reduced-motion、安全头 / CSP、README 部署说明。十一、局限与诚实边界
| 问题 | 结论 |
|---|---|
| AI 能否替代设计评审？ | 不能；方向选择、事实核对、合规仍需人 |
| 能否照搬某一家获奖站？ | 不建议；应主参考一家、动效组合多家、内容用客户自有 |
| 调研文档是否一劳永逸？ | 否；需同步写入 token 与注释，否则易与实现脱节 |
十二、一句话方法论
用 AI 做官网 = 让 Agent 完成「广谱调研 + 多方向探索 + 模式化工程」，人类完成「方向决策 + 内容真实性 + 上线责任」；视觉学一家主参考，动效抄多家精华，内容永远用客户自己的。
文档版本：2026-07
