用 TRAE Work 半小时搭出一个电影级恐龙科普网站：从调研到部署的完整复盘

最终成品： t-dinosaur-world-jam-tech-d2g4b3r4o1b75df4c.webapps.tcloudbase.com/

痛点：做一个"好看又准确"的科普网站，到底有多磨人

要做一个恐龙主题科普展的宣传网站。需求听起来简单：页面要好看，内容要准确，图片要配得上文字，还得适配手机端。但真动手做，才发现处处是坑。

传统流程是这样的：先让文案去翻百科全书查恐龙数据，再找设计师出视觉稿，然后前端切图写代码，最后配图要么买图库（贵且难找对的），要么请插画师画（更贵更慢）。整个链条走下来，少则一周，多则半个月。

更头疼的是"准确性"这一条。网上恐龙资料鱼龙混杂，体长有的写 12 米有的写 15 米，体重从 7 吨到 20 吨都有人写。科普网站一旦数据出错，专业读者一眼看穿，品牌信任直接归零。

还有配图的吻合度。霸王龙的前肢只有两指、棘龙的背帆是脊椎骨棘撑起的、伶盗龙其实只有火鸡大小------这些细节如果配图搞错（比如把迅猛龙画成两米高无羽毛的怪兽），科普的公信力就崩了。

一个网站，四个环节（调研、设计、开发、配图），每个环节都有专业门槛，串联起来的沟通成本和返工成本极高。

---

用 TRAE Work 一次性跑通全流程

我把整个任务拆成四个阶段喂给 TRAE Work：调研 → 生成配图 → 搭建网站 → 部署排错。每个阶段的操作记录如下。

第一步：让 AI 替我查资料，而非替我编资料

我的第一条指令很关键------不是"帮我写恐龙介绍"，而是"请通过网络搜索，研究并整理恐龙百科知识，所有内容必须准确、有据可查"。

我列出了需要调研的 8 种恐龙（霸王龙、三角龙、剑龙、腕龙、伶盗龙、棘龙、甲龙、副栉龙）和 3 个中生代纪元，要求每种恐龙给出学名、生存年代、体长、体重、食性、栖息地和标志性特征，并附上来源 URL。

TRAE Work 启动了搜索代理，逐条查阅了 USGS（美国地质调查局）和大英百科全书的原始页面，最终返回了一份结构化报告，每个数据点都标注了出处。比如：

• 三叠纪 252--201 百万年前（来源：USGS 官网）
• 霸王龙体长 12--13 米，体重 7--9 吨（来源：Britannica 词条）
• 棘龙体长 14--18 米，体重存在学术争议（来源同时收录了 7.4 吨和 20 吨两个估计值）

这步最核心的经验是：不要让 AI 凭记忆写事实，要让它带搜索地查事实。恐龙数据有大量争议值（棘龙体重、腕龙体重、伶盗龙译名），只有通过实时搜索才能取到当前学术共识，并且识别出哪些数字存在争议需要标注。

第二步：逐张生成配图，用 prompt 锁定解剖特征

这一步是整个流程中最花心思的。10 张配图（1 张英雄全景图 + 8 张恐龙特征图 + 1 张灭绝场景图），每张都单独写 prompt，不能图省事批量生成。

关键技巧是：prompt 里写死这个恐龙的标志性解剖特征，而不是笼统地说"一只霸王龙"。比如棘龙的 prompt：

Cinematic photorealistic Spinosaurus in a late Cretaceous North African swamp river. Accurate anatomy: the longest theropod, elongated crocodile-like narrow snout with conical teeth, a tall sail on the back formed by elongated neural spines, nostrils positioned far back near the eyes, semi-aquatic posture wading in water.

这段 prompt 锁定了四个不可妥协的特征：鳄鱼状长吻、圆锥形牙齿（区别于其他兽脚类的刀刃状齿）、背部高帆、鼻孔靠后（适应水中潜伏呼吸）。任何一个特征缺失，配图就和文字描述对不上。

伶盗龙的 prompt 更要注意------电影《侏罗纪公园》把它塑造成了无羽毛的两米高怪兽，但真实的伶盗龙只有火鸡大小、身披羽毛。所以 prompt 里必须写 "accurate small size, turkey-sized" 和 "covered in feather plumage"，否则 AI 会按电影印象生成一个错误的形象。

每张图生成后我都要求无水印、保存到本地 assets/ 目录，文件名带尺寸标注（如 spinosaurus_4x3.jpg），方便 HTML 直接引用。

第三步：搭骨架 → 写 CSS → 填内容，一条龙输出

网站搭建我没有分多次对话，而是在一个指令里把设计系统、页面结构、内容数据全部给齐。TRAE Work 先用脚手架创建了项目目录（dinosaur-world.html + assets/ + _shared/fonts/ + _shared/js/），然后一次性写完了整个 HTML。

设计系统我选了"火山琥珀橙 × 丛林绿 × 河流青"的暗色调，搭配 Boldonse 和 Big Shoulders 两种粗壮的展示字体，营造纪录片质感。CSS 变量统一管理颜色，全场没有一处硬编码 hex 值。

页面结构六段式：

0. Hero 首屏：全屏恐龙全景图 + 主标题"恐龙纪元"
1. 数据概览：四个统计卡片，带数字滚动动画（统治时长 1.6 亿年、1000+ 物种等）
2. 中生代三纪：三叠纪/侏罗纪/白垩纪三列卡片，含准确年代
3. 八种恐龙图鉴：图文左右交替布局，每份档案含学名、年代、体长、体重、食性、栖息地、三条特征
4. 体型对比图：ECharts 水平柱状图，按食性着色
5. 白垩纪末大灭绝：K-Pg 事件详解，附四张数据卡片

移动端适配在 CSS 里写了 900px 和 560px 两个断点：导航折叠为汉堡菜单、图文变单列、统计卡片自适应。这部分不是事后补救，而是在写 CSS 时就一并处理了。

第四步：浏览器实测，发现并修复图表渲染问题

写完代码后，TRAE Work 启动了浏览器代理做视觉验证。桌面端 Hero、恐龙图鉴、大灭绝区域都通过了，但 ECharts 体型对比图没有渲染出来。

原因找到了：图表容器的父元素有 opacity:0 的滚动揭示动画，ECharts 在容器不可见时初始化，拿到的是 0 尺寸，柱状图画了但看不见。

修复方案是改 charts.js 的初始化逻辑：用 IntersectionObserver 监听图表容器，等它滚动进入视口、动画触发后再初始化 ECharts。改完后重新验证，8 条柱状条全部正常渲染，颜色按食性区分（橙=肉食、绿=草食、青=鱼食），右侧标注数值。

第五步：部署到腾讯 CloudBase，踩了 404 的坑

网站写完打包，准备部署到腾讯 CloudBase 静态托管。上线后访问，直接 404：

404 Not Found
Code: NoSuchKey
Key: t-dinosaur-world%2F%2Findex.html

解码 Key 路径后是 t-dinosaur-world//index.html，双斜杠。两个问题叠加：

一是项目主文件叫 dinosaur-world.html，但 CloudBase 默认入口是 index.html，找不到就 404。二是部署配置的"本地目录"填了带尾斜杠的 dinosaur-world/，系统拼接时又加了一个 /，路径出现双斜杠。

修复：把 dinosaur-world.html 复制一份为 index.html 放到项目根目录，部署配置里目录路径去掉末尾斜杠。重新部署后正常访问。

这个坑值得所有用 CloudBase 的人记住：项目根目录必须有 index.html，目录配置不要带尾斜杠。

---

落地成果

最终交付物是一个完全自包含的静态网站，无任何外部依赖：

维度	数据
页面数量	1 个多段式单页
配图数量	10 张高清图（1 张 2560×1440 + 8 张 2240×1680 + 1 张 2560×1440）
内置字体	8 个 TTF 字体文件
JS 库	ECharts（本地引用，非 CDN）
恐龙档案	8 种，每种含 6 项数据 + 3 条特征
数据来源	11 条可点击的权威参考链接
移动端适配	两个断点，汉堡菜单 + 单列布局
总文件大小	8.3 MB（含全部图片和资源）

所有配图无水印，每张图严格对应文字描述的恐龙特征。数据经过 USGS 和大英百科全书交叉验证，棘龙体重等争议值明确标注了"存在学术争议"。

传统流程下，这个项目至少需要：文案调研 2 天 + 设计 2 天 + 前端开发 3 天 + 配图采购或绘制 2 天 = 一周起步。用 TRAE Work 从调研到部署完成，总计约 30 分钟。

---

可以直接照搬的经验

指令模板：让 AI 做有据可查的调研

需要准确性保障的内容（科普、报告、行业分析），指令里一定要包含这三个要素：

1. 请通过网络搜索（而非凭记忆），研究并整理 [主题] 的资料
2. 所有内容必须准确、有据可查，列出具体需要覆盖的条目 [逐条列出]
3. 附上来源 URL，标注数据是否存在争议

第三条尤其重要。学术数据经常有争议值（恐龙体重、市场规模预测等），让 AI 主动标注争议，比你自己去发现靠谱得多。

指令模板：让 AI 生成的图片与文字严格对应

生成配图时，prompt 的核心结构是：

[用途标注] + [场景描述] + Accurate anatomy: [逐条列出不可妥协的解剖/外观特征] + [风格与氛围] + no text, no watermark

"Accurate anatomy" 后面跟具体特征清单，是防止 AI 按流行文化印象（而非科学事实）生成的关键。结尾的 "no text, no watermark" 确保图片干净可直接用。

避坑清单

• ECharts + 滚动动画冲突 ：如果图表容器在滚动揭示动画中（opacity 或 transform 过渡），ECharts 初始化时会读到 0 尺寸。用 IntersectionObserver 延迟初始化，等容器可见后再 echarts.init()。
• CloudBase 部署 404 ：项目根目录必须有 index.html（不是你自定义的名字）；部署配置的目录路径不要带末尾斜杠。
• AI 配图的"流行文化偏见" ：迅猛龙会被画成两米高无羽毛的怪兽（受电影影响），霸王龙会被画成直立姿态（19 世纪复原错误）。prompt 里必须写明真实体型和特征，如 "turkey-sized" "covered in feathers" "horizontal posture"。
• 中文字体在图表中 ：ECharts 默认字体不含中文，必须在 textStyle.fontFamily 里显式指定中文字体族（如 "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei"），否则中文标签显示为方块。

整体工作流模式

这次实践让我总结出一个适用于"调研型内容网站"的通用 TRAE Work 工作流：

搜索代理查事实 → 逐张生成配图（prompt 锁定特征）→ 脚手架搭建项目 → 一次性输出 HTML+CSS+JS → 浏览器代理视觉验证 → 修复问题 → 部署排错

每一步的产出是下一步的输入，全程不需要切换工具。最有价值的是"浏览器代理验证"这一步------它能替你截图检查渲染效果，发现人眼可能忽略的问题（如图表不渲染、移动端布局错位），相当于自带了一个 QA 环节。

---

写在最后

这个项目最让我感慨的不是速度，而是"准确性"这件事被重新定义了。过去用 AI 写科普内容，最大的风险就是它一本正经地编数据。但当你把搜索能力接入流程，让每条事实都有 URL 可追溯，AI 就从"编造者"变成了"整理者"------而且是一个能同时整理文字、生成配图、搭建网站的超级整理者。

恐龙已经灭绝了 6600 万年，但用 TRAE Work 把它们"复活"到一个网站上，只需要半小时。如果你也有类似的"需要调研 + 需要配图 + 需要建站"的工作场景，这套流程可以直接搬去用。