企业官网建设流程全解析

万象棋玩法这一波关注度起来之后，我是真觉得玩家缺一个能"随时查资料"的地方。王者荣耀的节奏快，新版本一出，棋子改动、羁绊调整、阵容换代，全靠在各个平台翻帖子太累人，而且信息真假掺杂。正巧我最近在折腾 Trae 和豆包工作这两个 AI 工具，就想着干脆自己动手把资料站做出来。今天项目上线第 5 天，整体感受是：AI 编程工具把"做网站"的门槛拉到了历史最低，但距离"做一个好站"还有很长一段路要走。这篇文章就把我这 5 天的完整过程，包括工具选型、开发思路、上线数据、踩过的坑，全部摊开讲清楚。

1. 这个资料站到底是什么，为什么值得做

1.1 玩家到底缺什么

先说清楚我做的这个站本身。王者荣耀万象棋是自走棋类型的玩法，核心体验就是收集棋子、凑阵容羁绊、跟对手在棋盘上博弈。这类玩法的玩家需求其实特别固定：第一，想知道当前版本一共有哪些棋子，每个棋子的费用、属性、技能是什么；第二，想知道羁绊怎么触发、不同棋子之间怎么搭配才强；第三，想要能直接抄作业的阵容推荐，最好连克制关系和装备优先级都写清楚。

我之前翻过市面上的内容，要么散落在游戏社区的长帖里，要么藏在短视频里，搜一个词条要来回跳好几个平台。所以第一天上线，我做的基础模块就是四个：棋子图鉴、羁绊速查、阵容攻略、版本更新记录。棋子和羁绊全部做成卡片形式，点开棋子能看到技能描述和属性详情，点阵容能看到推荐棋子组合、核心装备思路和站位参考。整个站没有任何登录、评论、社区功能，定位就是一个纯粹的查询工具。这个决定上线后被证明是对的，后面细说。

1.2 为什么要自己做而不是抄现成的

可能有人会问，游戏社区里攻略那么多，为什么还要费劲自建一个网站？我的判断依据有三点。第一，帖子形态的内容会被新帖冲掉，时间一长就沉底，而独立站点能稳定沉淀，链接不会失效；第二，帖子里的数据经常各说各话，版本一更新，旧图还在首页挂着，很容易误导人，自己可控的站点能做到强制更新；第三，也是更实际的原因——我骨子里是个喜欢"造东西"的人，与其天天被动搜攻略，不如把分散的信息整理成自己的数据资产。

还有一个现实因素：市面上并没有特别像样的万象棋专属资料站。玩家搜一个词条，跳出来的基本都是 App 内的短内容，或者几个月前的旧攻略，信息时效性很差。这个空档对个人开发者来说就是机会。我没有团队，没有设计师，预算也就几十块，但 AI 工具让这个项目在时间和金钱上都跑得通。加上我自己也玩这个玩法，对内容有体感，知道玩家真正需要什么，这比做一个完全不了解的领域要靠谱得多。

2. 工具选型：Trae 写代码，豆包工作跑杂活

2.1 我比过的 AI 编程助手

决定动手之后，最现实的问题是选工具。Cursor、Windsurf、GitHub Copilot、Trae 这几个我最近都摸过一遍，说说真实体感。GitHub Copilot 适合"人写代码、AI 补全"的传统流程，它不会主动帮你从零搭一个完整项目，更多是给已有代码加速；Cursor 和 Windsurf 能力确实强，但在国内网络环境下，配置和模型访问多少要折腾一下，免费额度消耗也快，频繁切换模型很烦。

Trae 是字节出的 AI IDE，界面布局和 VS Code 几乎一致，国内版默认内置豆包大模型，不用自己配 Key，打开就能用。我最看重的是它的 Builder 模式：你可以用自然语言描述整个站点，它会自动创建文件结构并生成初始代码，注意这不是补全几行代码，而是真的把项目骨架一次性搭出来。它对中文需求的理解也比较细，我说"棋子图鉴要用卡片展示，卡片正面放头像和名称，背面放技能描述"，它能准确拆解成数据字段和样式逻辑，生成出来基本不用大改。

2.2 Trae 和豆包工作的具体分工

很多人分不清 Trae 和豆包工作的定位，我一开始也没完全搞明白，用了一周后有了比较清晰的判断。Trae 的核心场景是写代码、改代码、跑项目，它是你的开发环境；豆包工作的核心场景是执行工作流，你下达一个任务，它会自己拆步骤、找资料、生成结果，更像一个自动干活的助理。比如你让它整理资料，它不是给你一段概念解释，而是真的去搜索、汇总、输出成结构化内容。

这次项目里，我的分工非常明确。Trae 负责所有代码相关的事情：页面结构、组件样式、交互逻辑、部署配置。豆包工作负责代码之外的脏活：把英雄名单整理成结构化清单、给每个棋子生成技能描述初稿、按版本整理羁绊效果变化，甚至帮我生成阵容攻略的第一版文字，我再人工筛一遍。用表格看更清楚：

这套分工跑下来，我最大的体会是：别期待一个 AI 工具干完所有事。让 Trae 去满网抓游戏资料，等于拿挖掘机绣花；让豆包工作去改前端 bug，也是难为它。工具干自己擅长的事，效率才能最大化。

3. 从 0 到上线的开发实录

3.1 第一次给 AI 下指令就翻车了

必须先说第一个翻车现场。当时我兴冲冲在 Trae 的 Builder 模式里输入："做一个王者荣耀万象棋资料站。"结果它确实生成了首页，有导航、有卡片、有配色，看起来像模像样。但点开棋子详情我就傻了——它编了一个根本不存在的英雄，技能描述也是凭空写的，属于典型的 AI 幻觉。这件事给我上了一课：AI 生成的东西，结构可以很强，但事实性内容绝对不能直接信任。

复盘之后，我调整成"先给结构、再给数据、最后谈样式"的策略。第一轮指令只定义页面有哪些模块，不涉及具体内容；第二轮把数据源准备好，让页面按数据结构来渲染；第三轮才让 AI 调样式和交互。顺序一变，翻车率立刻降下来。现在我在任何 AI 编程工具里都不急于改样式，先把功能和数据链路跑通，样式后面补完全来得及。

3.2 让 Builder 直接生成站点骨架

正式开工后，我把需求重新描述成一段结构化指令，大意是：做一个 Vue 加 Vite 的单页应用，包含首页、棋子图鉴、羁绊页面、阵容推荐四个路由；棋子和羁绊数据统一放在 src/data 下的 JSON 文件里；图鉴页按费用分组，用卡片展示棋子头像、名称、费用和技能；点击卡片后弹出详情抽屉。这次 Trae 生成的初始项目靠谱多了，目录结构清晰，数据 JSON 独立出来，页面也按组件拆分得比较合理。

这里有个关键设计值得多说一句：数据驱动。我特意在指令里强调"所有棋子和羁绊数据必须从 JSON 读取，页面不能写死"。这样版本更新时，我只替换 JSON 文件，页面代码完全不用动。这个决策在后续 5 天里救了我很多次，因为数据每天都在小范围变动，而页面代码一次都没改过。如果你用 AI 做类似的信息站，强烈建议一开始就把数据和展示层分离，不然后面更新一次改一次页面，非常痛苦。

3.3 数据整理交给豆包工作

代码骨架有了，接下来最枯燥的部分就是数据。这一步我是这样做的：先梳理站点需要的字段结构，然后让豆包工作执行一个完整的信息整理任务。我下的第一个任务是这样写的："请整理当前版本万象棋所有棋子的名单，按费用分组输出为 JSON，字段包括 id、name、cost、阵营、职业、技能描述、初始属性。"它会自动去搜索版本更新公告和玩家整理的信息，再汇总成结构化数据返回给我。

实际使用过程中有个小插曲：豆包工作第一次执行任务时，我这里弹了一个"本地运行环境初始化失败"的提示，任务直接中断。我试了重启客户端、更新到最新版本，再跑就正常了。这类工具现在的成熟度就这么高，偶尔要手动重试，不算大问题，但建议任务拆小一点分批执行，别一次性输入太长，否则中途失败的几率更高。

数据回来后必须做一件事：人工抽查。AI 整理的数据表面整齐，细节上经常有偏差，比如某个棋子技能的回蓝数值抄错，或者两个名字相似的棋子头像搞混。我的抽查方法是：从每个费用段里随机抽 2 到 3 个棋子，去游戏里实际对比一遍；同时重点检查版本更新后有没有新增或删除的棋子。第一批数据我核查了差不多两个小时，之后每次批量更新大概花 20 分钟左右。这事不能省，省了就是在给站点的可信度埋雷。

3.4 上线前我补的几个基础能力

代码和数据都就绪后，我花了一天时间补了四个容易被忽略的东西，都是实际发布后才意识到重要的。

第一是移动端适配。访问用户几乎都在手机上看攻略，PC 端做得再漂亮也没用。我重新调整了卡片网格在窄屏下的列数，把字号也放大到 16px 以上，不然手机上看着费劲。第二是页面缓存策略。资料站是静态内容，我直接托管到对象存储加 CDN，顺手在资源链接上加了版本号后缀，避免内容更新后用户还看到旧缓存。第三是 SEO 基础设置，每个页面都要有独立的标题、描述和关键词，让搜索引擎能正确收录图鉴和阵容页面。第四是空状态处理，数据没加载出来时显示加载提示，不然手机白屏会让人以为站挂了。

这些能力听起来基础，但 AI 一次性生成的项目里往往没有，你得主动提出来。我当时是上线前一天通读所有页面时发现这些细节的，所以也一直提醒自己：AI 能搭骨架，但"专业"部分永远需要人来盯。

4. 上线 5 天：数据、问题和意外发现

4.1 流量从哪来

先摆数据。上线前 2 天，流量基本靠我在玩家社区发的一个链接撑着，每天大概一两百访问。第 3 天开始被搜索引擎收录了一部分页面，流量结构开始变化，自然搜索占比慢慢上来，到第 5 天的时候，搜索流量已经超过社区直达流量。总量不算大，但对一个刚上线 5 天的个人站点来说，趋势是健康的。

访问设备方面，手机占了将近 9 成，这个数据进一步验证了当初做移动端适配的决策。来源渠道里，直接输入域名和书签的比例也在上升，说明有用户把站点当固定工具收藏了，这种流量比一次性点进来的更有价值。我做这个站的初衷本来就不是搞一波流，而是想做一个能持续被使用的查询工具，所以现在看到复访数据在涨，比单纯峰值流量更让我安心。

4.2 用户真正在搜什么

我看了下上线后的访问行为和搜索统计，最受欢迎的几个搜索词很有意思。排在前面的几乎都是"阵容"和"克制"相关，比如某个热门阵容怎么搭配、某个羁绊怎么触发、某个棋子配什么装备，反而是单纯的"棋子图鉴"搜索量没那么高。这说明玩家来资料站，核心目的是解决问题，不是看收集图鉴。

于是第 4 天晚上我临时加了一个热门搜索入口，把搜索量最高的几个问题直接挂到首页，同时把阵容推荐页从"只列阵容"升级成"阵容加克制关系加装备选择"。第二天这些页面的平均停留时间明显变长。我给所有做同类站的朋友一个建议：数据是实时的，别怕改，你所想象的"用户需求"和真实搜索数据之间，往往差着一整个迭代。

4.3 这 5 天修掉的 4 个问题

上线才 5 天，我陆续修了 4 个问题，列出来供参考：

前两个属于数据侧问题，后两个属于代码侧问题。通过这次集中修复，我把"AI 生成内容必须配套人工质检流程"这件事彻底刻在了脑子里。工具再强，也只是把你的作品从"不可能"变成"可能"，从"可能"到"靠谱"的那一步，只能自己走。

4.4 一个让我意外的观察

最让我意外的，是有个阵容推荐页面被某个用户反复访问，停留时间非常长。我点开那个页面看内容，其实是我让豆包工作生成的一份阵容搭配攻略，文字算不上精彩，但结构很清晰：阵容组成、核心装备、站位思路、优缺点分析。我一下子意识到，玩家要的不是文采，是"能直接照着抄的方案"，这是纯资料型页面给不了的。

所以我现在的内容策略开始往"可执行方案"倾斜：每个热门阵容都尽量给出一个基础站位图和装备优先级，让玩家看一眼图片就能照着摆。后面我还打算把阵容页改成"方案卡片"的形式，一个阵容一张卡，包含推荐赛季、核心棋子、可选替代、克制和被克制阵容，尽量把决策成本降到最低。上线 5 天就能从数据里看到这个方向，算是我这次做站最大的收获之一。

5. 如果你想复刻一个类似项目，我的几点建议

5.1 真实成本

直接说钱，这个项目目前的花费大概是这样：

• 域名：一年几十块，选个常见的 .com 或 .cn 就行。
• 托管：静态站点托管，我用的是对象存储加 CDN，访问量小的时候费用几乎可以忽略，一个月几块到十几块。
• Trae：基础功能免费，我靠签到积分兑换了会员额度，没有额外充值。
• 豆包工作：普通任务免费，我日常的使用量免费额度完全够用。

总预算基本控制在百元以内一年。以后访问量上来，CDN 费用会涨，但只要不搞视频、不大图轰炸，个人资料站完全扛得住。时间成本方面，从开工到上线一共用了一周左右，每天晚上的时间加一个周末，纯开发时间差不多 5 天。这里面约三成在写代码，七成在整理数据，这是这类信息站真实的时间和精力分配。

5.2 最耗时间的不是写代码

这个项目让我彻底修正了一个认知：用 AI 写代码的阶段，是全程最轻松的部分。真正费时间的是数据整理、数据核对、内容更新三个环节。游戏版本一更新，棋子数值、羁绊效果、推荐阵容全部会变，资料站的价值恰恰取决于更新速度。一次不更新，玩家搜到的就是错资料，信任就没了，后续很难再拉回来。

为了维持更新，我把流程做成了一套固定模板：版本更新后，先让豆包工作去抓公告和社区讨论，输出变更清单；我拿清单去比对站点现有数据，找出新增、删除、调整的条目；把差异更新到 JSON 文件后，替换到线上。整个流程熟练后大概需要一个半小时，能保证版本更新当天完成同步。这个"半自动更新"机制，比我最初预想的"每周手动改一遍"要省力得多，也是维持站点长期生命力的关键。

5.3 想好做这个站是为了什么

动手之前，我建议你先想清楚目的。如果是为了学习前端开发和 AI 工程化，那就多折腾交互、多研究架构；如果是为了占坑和积累流量，内容和 SEO 才是主线；如果只是想满足"我得有这么个东西"的冲动，那做一个能跑通的版本就够了，别一开始就追求完美，不然容易烂尾。

我自己的目标是做一个长期运维的小型垂直站点，所以在技术选型上刻意追求简单和可控：不碰后端、不碰数据库、不碰账号体系，纯静态站加数据文件。这样既符合喜欢折腾但不想被运维绑架的心态，也让 AI 工具更容易介入维护。风险也要提前想清楚：游戏类资料站高度依赖游戏本身的热度，玩法如果遇冷，流量会跟着掉，所以我在内容上尽量做体系化沉淀，而不只是蹭当下热点。

5.4 我接下来的三件事

第一，把版本更新提醒做成周更机制，每周固定时间检查游戏内变动，避免"更新不及时"成为站点硬伤。第二，内容上继续加码阵容攻略，每条攻略都配站位图和装备优先级，做成真正的"抄作业平台"。第三，试着让内容生成流程更自动化：豆包工作每周自动拉取版本公告、自动比对差异、产出变更草稿，我最后在手机端审核确认。如果这套机制能跑通，这个站就从"人工驱动的静态站"变成"半自动的内容系统"，后续复制到其他游戏品类也会轻松很多。

上线 5 天，数据还不够漂亮，问题也在陆续暴露，但用 Trae 加豆包工作把一个想法快速变成一个真实可访问的站点，这件事本身就是现阶段 AI 工具最好的注脚。工具的效率摆在那儿，关键看你想用它做出什么。