事橙营销

我用 ChatGPT 重做了公司官网：110 多个版本后，留下这份完整操作手册

作者：赵岩

从调研问卷、信息架构和110多个版本，到Pages CMS、Markdown、GitHub、OSS、CDN及搜索迁移，这是一份可直接照着执行的AI企业官网操作手册。

事橙办公室桌面上的日历、绿植与粉色水杯

今年 7 月的一个周日，杭州下着小雨。

午饭以后，我去了办公室，打开 ChatGPT Work，开始重新做事橙营销的官网。

第一版出来得非常快，页面也不难看。如果只是做一个临时展示页，到这里差不多已经够用了。但事橙官网不是临时页面，它要放在我们自己的域名下面，要让客户访问，要被百度收录，还要承接未来几年的内容更新。

这些要求一加进来，事情很快就从“生成一个网页”，变成了一次完整的官网重构。

首页前后改了30多遍，全站做了110多个版本。后来又把源代码放进 GitHub，接入Pages CMS，用Markdown 管理 Blog和事橙动态，部署到阿里云OSS，再通过CDN 分发。上线以后，我们继续处理HTTPS、301、404、Sitemap和百度提交。

这篇文章把整个过程完整写下来。

如果你是B2B企业负责人、市场负责人，或者正准备拿AI做一个真实官网，可以先收藏。真开始做的时候，按照这份清单逐项完成，会少走很多弯路。

先说适用范围：什么网站适合抄这套作业

事橙官网是一套以品牌展示、服务介绍和内容发布为主的B2B网站。它没有会员系统，没有交易，没有大量实时数据，现阶段的内容总量也不到1000篇。

这类网站很适合使用ChatGPT Sites完成页面构建，再把源码、内容管理和正式部署接到企业自己的技术环境里。

如果你的网站也符合下面几个条件，可以参考这套方法：

  1. 主要任务是品牌展示、服务介绍、案例、内容和线索承接；
  2. 页面和文章数量没有大到必须依赖复杂数据库；
  3. 企业希望自己掌握域名、代码、内容和历史版本；
  4. 团队愿意参与定位、内容和审美判断，不准备把全部工作扔给 AI；
  5. 网站需要长期做SEO、GEO和内容积累。

如果要做电商、复杂会员体系、支付、实时库存或者大型业务后台，这套架构就不应该直接照搬，还是需要专业研发团队做系统设计。

第一步：不要让AI先画网页，让它先调研你

我和ChatGPT的第一次正式对话，不是“帮我做一个官网”。我先让它给我设计了一份调研问卷。

问卷里有一些问题，看起来跟网页没有直接关系：

  • 未来三到五年，事橙想成为一家什么样的公司？
  • 我们最希望被哪类客户选择？
  • 客户看完官网以后，应该记住哪几件事？
  • 我欣赏什么样的人和企业？
  • 我喜欢哪些网站？喜欢它们的什么地方？
  • 哪些表达和设计，是事橙坚决不要的？

我在回答里写到了巴菲特、特斯拉、OpenAI，也列了 5 个在全球范围内我喜欢的网站。

这里有一个很重要的细节：不要只把名字扔给 AI。

你说“我喜欢 OpenAI”，这句话的信息量很低。你还要继续解释，你喜欢它的大留白，还是字体、页面节奏、图片使用，或者它不急于成交的状态。你说喜欢特斯拉，也要告诉 AI，你喜欢的是产品自信、极简，还是它把复杂技术讲得很直接。

巴菲特不是一个网站参考，但他能帮助 AI 理解我对长期主义、复利和企业经营的看法。这些东西最后会进入网站的内容取舍里。

如果一家企业连自己欣赏什么、拒绝什么都没有讲清楚，AI 只能回到行业平均水平。行业平均水平往往就是模板。

可以直接使用的第一轮 Prompt

我要重做一家 B2B 企业的官网。请先不要设计页面，也不要写首页文案。

你先作为企业官网策划师，设计一份深度调研问卷，帮助你理解：
1. 公司的业务、客户和发展阶段；
2. 官网需要完成的核心任务；
3. 我们希望客户形成的认知；
4. 创始人的经营理念和审美偏好；
5. 喜欢与不喜欢的网站及原因；
6. 必须保留和坚决不要的内容；
7. 未来 3—5 年网站需要支持的变化。

每轮最多问 5 个问题。我的回答不够具体时继续追问，不要替我补充结论。

第二步：把回答整理成战略 Brief，先解决“为什么做”

问卷完成以后，ChatGPT 帮我整理了一份《事橙官网升级战略 Brief》。

第一版Brief写得很完整，里面有品牌定位、目标客户、核心竞争力、品牌气质、网站结构和未来三年的方向。当时有一句话叫“AI\-Driven Global B2B Growth”，中文是“AI 驱动的全球B2B增长公司”。

后来，这句话被我删掉了。

这恰好说明Brief的作用。它不是圣旨，也不是填完问卷以后就不能改。它先把脑子里的东西变成文字，后面的页面才能不断检验这些文字到底对不对。

随着首页一版一版推进，我发现把AI放在最前面，并不准确。AI是我们现在重要的工作方式，但客户长期选择事橙，主要还是因为我们理解复杂的B2B业务，认真交付，愿意长期合作。

最后，官网主标题变成了：

为复杂决策，构建可复利的增长系统。

副标题则把SEO、GEO、SEM 和 B2B内容营销讲清楚。

这次变化很有代表性。AI很容易帮企业写出一句听起来先进的话，负责人要判断这句话能不能代表公司，三年以后还愿不愿意继续使用。

一份能用的官网 Brief，至少要写清楚下面 7 件事：

  1. 为什么要重做官网；
  2. 官网最重要的业务任务；
  3. 核心客户是谁；
  4. 客户看完以后要记住什么；
  5. 公司重视什么，拒绝什么；
  6. 网站应该呈现什么气质；
  7. 未来三到五年，内容和业务会如何生长。

我们的核心目标后来一直没有变：建立品牌信任，不把官网做成一张不停催客户留电话的销售页。

第三步：先做信息架构，不要把全部希望压在首页上

传统建站经常从首页设计稿开始。首页通过以后，其他页面套模板。

我们这次先讨论了全站结构：

  • 服务：SEO、GEO、SEM、B2B 内容营销；
  • 客户：谁选择了事橙，合作关系和案例如何证明能力；
  • 洞察：Blog、AI 实践、白皮书、常见问题；
  • 关于事橙：公司、团队和事橙动态。

每个频道都要有任务。

首页负责建立第一印象和整体理解；服务页回答“你们到底怎么做”；客户和案例负责提供证据；洞察让客户看到我们的研究、方法和判断；事橙动态让一家公司的真实状态被看见；关于我们回答“这些事是谁在做”。导航里原来还有“联系我们”，后来也删了。首页右上角的按钮、首屏的强转化按钮，同样被拿掉。

这不是说官网不需要转化。事橙服务的是复杂B2B决策，客户不会因为一个更大的按钮就马上成交。我们的优先级是让客户先理解、再信任，需要联系时，他自然能在关于我们里找到我。

信息架构阶段要交付的东西

不要只交付一张网站结构图，最好同时完成四份清单：

  1. 全站页面清单；
  2. 每个页面的业务任务；
  3. 访客进入页面后要依次理解的问题；
  4. 页面对应的核心搜索意图和关键词。

SEO不能等网站上线后再补。页面代表什么、URL怎么组织、哪些内容负责承接搜索，在这个阶段就应该进入设计。

第四步：把审美翻译成可执行要求，参考网站不能只发链接

做到中间，我一直在找自己喜欢的风格。

看到一个舒服的首页、一种图片比例、一个合适的动效，我会直接截图发给 ChatGPT。我不会只说“参考一下这个”，而会具体指出：

  • 我喜欢它的内容宽度；
  • 喜欢 Logo、导航和正文处在同一条纵线上；
  • 喜欢一屏只讲一件事；
  • 喜欢图片铺满以后带来的视觉张力；
  • 喜欢动效很轻，不影响阅读；
  • 不喜欢它的按钮太多，或者页面太像销售落地页。

-

后来我们参考过 OpenAI、Amplitude、Stripe、Mixpanel等网站。它们不是一套风格，也不能拼在一起照抄。参考的意义是把抽象审美拆开：这个网站的对齐方式可以学，另一个网站的内容节奏可以学，某一个交互动效可以学。

事橙最后保留了黑白和深蓝，大量留白，真实办公室照片，少量缓慢动效。最早 Brief 里写过“AI感、极客、效率感”，真正落到页面时，我反而觉得克制和真实更重要。

这也是用 AI 做设计时很容易踩的坑：给它5个参考网站，它会尝试把5个网站的明显特征都加进来，结果看起来很丰富，却没有一个统一主张。

解决方法是一次只说明一个参考对当前页面的作用，并同时写清楚不借鉴什么。

参考网站的正确提交格式

参考页面：［链接或截图］

我想借鉴：
1. 首屏标题与右侧图片的比例；
2. 导航、Logo、正文的纵向对齐；
3. 模块之间的留白和阅读节奏。

我不想借鉴：
1. 颜色体系；
2. 强转化按钮；
3. 大量悬浮和炫技动效。

请只修改当前页面的布局规则，不要改变已经确认的品牌文案、导航结构和全站字体。

第五步：首页做了 30 多版，要靠约束管理，不要靠聊天记忆

ChatGPT生成第一版首页很快，改起来也很快。

快会带来一个新问题：你会很容易继续加要求。今天觉得图片不对，明天看到一个更好的动效，后天又想重新调整服务模块。对话越来越长以后，前面已经确认的要求也可能在某一次修改中被带坏。

我们首页做了30多版，字号、留白、图片、动效、模块顺序几乎都改过。过程中删掉的东西也很多：过度强调AI的口号、急着让客户联系的按钮、过于通用的“B2B 企业普遍面临的问题”，以及看起来完整但不属于事橙的模块。

版本多本身没有价值。每一版都要解决一个明确问题。

我后来会把要求说得越来越局部：只修改Section 2；保留已经确认的首屏；不要改全局导航；桌面端和移动端一起检查；不要添加新的CTA；动效不能影响阅读；真实照片不能替换成通用素材。

更稳妥的做法，是单独维护一份《已确认约束》，不要指望 AI 从上百轮对话里自动找回全部规则。

这份约束至少包括：

  • 已确认的主标题、副标题和导航；
  • 颜色、字体、页面宽度、圆角、间距规则；
  • 图片类型和比例；
  • CTA 的使用边界；
  • 动效速度和范围；
  • 桌面端与移动端要求；
  • 明确禁止出现的表达和组件。

每次修改都可以加上的一句话

本次只处理我明确指出的问题。保留已经确认的文案、页面结构、视觉规则和响应式逻辑；如果新要求与既有约束冲突，先指出冲突，不要自行覆盖。

第六步：一个首页好看不够，要把全站当成同一个产品

首页确定以后，我们继续做 SEO、GEO、SEM、B2B内容营销服务页，客户页、洞察、案例、公司动态和关于事橙。

全站最后做了110多个版本。

大量时间没有花在“设计一个新东西”上，而是统一：字号、间距、图片比例、模块宽度、按钮、标签、动画和移动端表现。

AI 很容易把每个页面都做得有点新意。首页一个语言，服务页一个语言，案例页再换一个语言，单独看都过得去，放在一起会显得很散。

我的处理方法是先把首页沉淀成一套全局规则，再允许不同页面保留少量必要差异。服务页可以有自己的交互，但内容宽度、标题层级、留白、颜色和图片逻辑不能重新发明。

每完成一个页面，我们至少检查这些项目：

  • 页面第一屏是否能说明任务；
  • 同级标题的字号和间距是否一致；
  • 桌面端、平板和手机是否都能读；
  • 图片裁切后有没有丢掉主体；
  • 动画关闭时，内容是否仍然完整；
  • 链接、按钮、邮箱和导航是否正确；
  • 页面有没有为了“看起来丰富”重复表达；
  • TDK、图片 ALT、结构化数据是否完整。

做完这一轮，我觉得，官网的质感不由最好看的页面决定，往往被最不协调的那一页拉低。

第七步：解决企业最容易忽略的问题——网站以后由谁更新

页面快做完时，我开始考虑一个很现实的问题：网站上线以后，团队怎么发 Blog？已经发布的文章怎么修改？每次都回来找 ChatGPT 改代码，肯定不行。

最初我的想法比较简单：ChatGPT负责生成源码，再把源码放到我们现有的服务器上。域名、备案和服务器都已经有了，这样迁移成本最低。

我请教了那位半夜给我打电话聊网站技术的美女CMO好友她是怎么做的，我又站在巨人肩膀上，加工了一下，继续讨论以后，技术链路逐渐变成现在这套：

Pages CMS 编辑 → Markdown 存储 → GitHub 管理 → 自动构建 → 阿里云 OSS 部署 → CDN 分发

用不太技术的话解释：

  • **Pages CMS**：团队看到的内容后台，可以新建、修改文章，上传封面，控制发布状态；
  • **Markdown**：每篇 Blog 和事橙动态都是一份独立文档，标题、摘要、作者、时间和正文写在里面；
  • **GitHub**：保存代码和内容，同时记录每一次修改，哪个版本出了问题可以往回找；
  • **自动构建**：GitHub 里的内容变化后，系统自动生成新的静态网页；
  • **OSS**：保存生成后的网页、图片和其他静态文件；
  • **CDN**：把这些文件分发到离访客更近的节点，提高访问速度。

为什么没有继续使用传统数据库？

因为事橙现阶段的内容不到1000 篇，准确的说20几篇，没有会员和交易，Blog、案例、动态本质上都是文档。用 Markdown已经足够，静态网站也更快、更稳定，迁移起来比较自由。

这套方案最重要的地方，是代码、内容和历史版本都掌握在企业自己手里。将来换托管平台、换 CMS，内容仍然可以继续使用。

如果你准备照着做，先回答三个问题：

  1. 网站内容是不是以文章和展示页为主；
  2. 团队是否需要一个可视化内容后台；
  3. 谁负责审核并发布到正式环境。

技术架构不是越新越好，要和内容规模、团队能力、维护成本匹配。

第八步：上线是一场迁移，页面传上去只完成了一半

网站做好以后，我们开始处理域名、HTTPS、OSS、CDN和新旧网址。

这一段比设计枯燥，用户也看不到，却最容易让企业过去积累的搜索资产受损。

我们遇到过几类具体问题。

页面上传以后出现 403

遇到 403，不要反复上传文件碰运气。按顺序检查：OSS文件权限、默认首页、回源设置、CDN 缓存和实际请求路径。修完以后，对首页、服务页、文章页和静态资源逐个测试，确认返回 200。

旧网址需要准确跳转到新网址

旧站已经被百度收录的页面，不能全部粗暴跳回首页。我们整理了旧 URL 与新 URL 的映射，逐条配置 301，再用调试工具确认返回码确实是 301，目标地址也正确。

301 是永久跳转。200 代表当前页正常，302 是临时跳转，三者不能混用。

不存在的页面没有进入 404

上线检查时，我们发现打开一个不存在的地址，并不会正确进入 404 页面。后来单独补了 404 文件和静态托管的错误页规则，再用多个随机地址测试。

404 页做得再漂亮，如果服务器没有把错误请求交给它，也没有作用。

预览环境正常，正式环境仍然可能有小问题

正式上线以后，我们又发现并修了几项：

  • 首页首屏图片出现访客可替换的编辑入口，需要关闭；
  • 全站联系邮箱还残留 `hello@shichengup.com`，统一改成 `zhaoyan@shichengup.com`；
  • 网站底部还有微信公众号入口，按最终信息架构删除；
  • 不存在的URL没有正确返回 404；
  • CDN 修改后有缓存，需要刷新并在不同网络环境复查。

所以正式上线以后，不要只在自己电脑上打开首页看一遍。至少要用手机、无痕窗口、不同网络和随机错误地址再走一遍。

第九步：把搜索引擎迁移放进发布清单

新官网可以访问以后，我们继续完成了 Sitemap、百度搜索资源平台验证和改版后的收录提交。

这里需要准备的东西包括：

  • 正确的 `robots.txt`；
  • 完整的 `sitemap.xml`；
  • 每个重要页面的标题、描述和规范 URL；
  • 旧 URL 到新 URL 的 301 映射；
  • 百度搜索资源平台的网站验证；
  • 新页面和改版关系提交；
  • 上线后一段时间的抓取、收录、展现和排名观察。

提交完成不代表搜索引擎马上处理完。平台会有处理周期，接下来要看抓取异常、404、索引量和主要关键词变化。网站迁移后的前几周，技术检查应该比日常更频繁。

现在回头看，110 多个版本到底在改什么

很多人听到 110个版本，会觉得是不是AI做得不行。我的感受刚好相反。

过去找设计和开发团队，修改一次都会产生沟通、排期和成本。很多模糊的感觉，只能在项目开始前尽量说清楚，后面不敢大改。AI把执行速度提高以后，我们第一次可以把很多想法做出来，放在一起比较。

看到页面以后，我会很快知道：这段话太像营销公司，这个按钮太着急，这张图没有事橙的真实感，这个动效虽然漂亮但影响阅读。

首页做30多版，不是每一版都推翻重来。很多版本只解决一个问题。这样积累下来，定位、内容和审美才慢慢对齐。

AI降低了试错成本，也把企业自己的问题暴露得更清楚：你到底是谁，想被谁选择，哪些话愿意长期说，哪些设计虽然流行却不属于你。

一份可以直接抄走的官网项目交付清单

如果现在重新开始一次，我会要求项目至少留下下面 12 份成果：

  1. 企业与创始人调研问卷；
  2. 官网战略Brief；
  3. 全站页面清单和信息架构；
  4. 页面任务与用户问题清单；
  5. 页面与搜索意图/关键词对应表；
  6. 参考网站拆解与设计主张；
  7. 已确认的全局设计和内容约束；
  8. 桌面端、移动端与可访问性检查表；
  9. GitHub源码和版本管理规则；
  10. 内容后台、Markdown字段和发布流程；
  11. 旧 URL 到新 URL 的301映射表；
  12. 上线、回滚、404、Sitemap 和搜索提交清单。

如果一个官网项目只有设计稿和一包代码，没有这些东西，后面很容易再次进入失控状态。

最后：官网以后不应该从 Markdown 开始

现在，事橙官网的 Blog 和事橙动态已经用Markdown管理，这解决了内容如何保存、修改和发布的问题。

但我现在想得更远一点。

Markdown 适合做发布层，不应该成为企业知识的最上游。

公司的服务事实、方法、客户问题、案例、证据和经过验证的观点，应该先在企业知识库里被整理清楚。每条重要知识有负责人、版本、可信状态、证据来源和使用权限。

官网需要更新时，AI从知识库里调用已经确认的信息，生成或更新 Markdown，经过人工审核，再发布到网站。

到那个时候，官网会跟着公司的业务和知识一起生长，变成一个成长型官网。

这次建站让我留下的结论很朴素：

现在，把网页做出来确实比以前容易很多。

难的部分没有消失。企业仍然要把业务讲清楚，把内容组织好，做大量判断，再对正式上线后的每一个细节负责。

ChatGPT可以像一支执行速度很快的设计和开发团队。坐在它对面的人，仍然要承担产品经理、编辑和最后决策者的工作。这110 多个版本，最后上线的是一个官网。留在事橙手里的，是一套可以持续修改、持续发布、持续积累的品牌与内容基础。