企业官网建设流程全解析

Opus 5.5发布那天我朋友圈里有人刷“鹈鹕骑车”测试，我当时没太当回事，直到自己把它拉到项目里跑了一轮，才发现这版在“一次性交付完整成果”这件事上确实跟以前不太一样。我三天里做了三组实测：用一句提示词批量生成网页、让一只鹈鹕骑着自行车做纯SVG动画、再让它谱一首曲子并转成能播放的MIDI。三件事分别对应网页、动画、谱曲三个方向，基本覆盖了提示词应用里最常被问到的三类场景。

如果你平时也在用AI写代码、做前端页面、搞短视频素材，或者正在研究提示词工程，这篇文章就是我的完整实测记录。我不会只讲“效果很惊艳”这种废话，而是会把每一轮测试用了什么提示词、得到什么结果、在哪里翻车、补救方案是什么都摊开写清楚。

1. 先别急着喊“一句提示词”，说说这代到底强在哪

1.1 什么才算“一句提示词”

网上说的“一句提示词造出100个网页”，并不是真的只敲一句话就交出100个完整页面。实测下来，这句话更像是“一句主指令加上结构化约束”的合称。比如我这次批量生成网页时，主干指令就一句话：“为一个流浪动物救助站生成一个静态站点，共30个页面，使用纯HTML和CSS。”剩下的都是约束条件，像每页的标题规则、导航栏一致性、链接路径规范、图片如何用CSS渐变替代。真正让模型稳定输出的，不是那句主指令，而是后半段约束。

把提示词理解成“给一位很聪明但没见过世面的实习生写任务说明书”，很多问题就通了。你写了背景、交付物、验收标准，它一次就能交话；你只丢一句“给我做个网站”，它大概率会给你一个看起来还行但根本没法直接用的单页Demo。

1.2 我这边的测试环境与评分标准

我测试时用的是网页端对话窗口，输出内容以HTML、SVG和ABC乐谱文本为主。判断标准只有三条：能不能直接运行、东西是不是真的“动”起来了、产出是否可被后续工具链处理。比如批量生成网页时，我要求每个页面是独立HTML文件，双击就能打开，不依赖本地服务器；做动画时，我要求它输出完整的SVG代码，粘贴进HTML就能看到自行车轮子滚起来；谱曲时，我要求它用ABC记谱法输出，因为这种格式可以直接转MIDI，能验证它写的东西到底是不是乐谱。

1.3 能力速览与适用人群

这套测试结果告诉我，Opus 5.5不是那种“样样100分”的万金油，但它非常适合做“从0到1”的产出。它可以把一个空文件夹变成30个页面、把一行需求变成一段会动的鹈鹕、把一句话变成一段能播放的旋律。接下来我按三个方向展开实测过程。

2. 一句话批量生成网页：完整实测记录

2.1 我实际使用的提示词模板

先上提示词，我直接把我试下来效果最好的一版贴出来，你复制改改就能用：

为一个流浪动物救助站生成一个静态网站，共30个页面。 整体要求： 1. 使用纯HTML和CSS，不使用任何外部框架、CDN、图片文件。 2. 每个页面是独立的.html文件，文件名用英文小写加连字符命名，例如 index.html、adopt.html。 3. 所有页面共享一套视觉风格：浅米色背景、圆角卡片、橙色主按钮。 4. 顶部导航栏固定为5个链接：首页、领养中心、捐赠、志愿者、关于我们。 5. 页面内容不能是纯Lorem占位，要写出符合救助站语气的真实文案，每页至少300字。 6. 图片位置用CSS渐变和简单图形代替，不允许使用<img>标签。 7. 页面之间需要互相链接，路径统一用相对链接，不得使用绝对路径。 交付产物：先输出所有文件的目录结构，再依次输出每个文件的完整代码。

这个模板里的每个字段都有来历。第1条是为了让它不要擅自引入Bootstrap或者图片外链，否则你双击页面时样式全丢；第5条是为了防止它生成一堆“Lorem ipsum”占位文本糊弄人；第7条是批量生成站点最容易翻车的重灾区，路径写错就会导致页面之间点不动。

我实测时没有一上来就让它生成100个页面。第一轮先用5个页面验证流程，第二轮扩到15页，最后才让它一次生成30页。为什么这样干？因为输出页面越多，上下文越容易乱，如果一个文件里的导航链接写错，错误会像传染病一样扩散到所有页面。小批量试错，发现问题早，修复成本低。

2.2 输出结果验证：文件结构、链接、样式

模型生成完之后，它的输出里直接给出了文件目录，我整理下来大概是这样的结构：

adopt.html about.html donate.html gallery.html index.html join.html medical.html volunteer.html ...

我逐个检查了三个关键指标。第一，页面能不能打开。我把所有HTML文件存到一个文件夹里，双击index.html，看每页是否正常渲染。第二，导航链接通不通。这一步最耗时间，我用视觉方式逐个点击顶部导航，确认每个链接都会跳到对应页面。第三，页面标题有没有重复。批量生成时模型很喜欢复制前一页的标题再稍作修改，我这次抽查了10个文件，发现有两处标题写成了同一个名字，后来加了一句“每页title必须与文件名内容对应”，第二轮就没有再出现。

另外我还顺手测了一个加码需求，让它生成一个中秋主题页面，要求“打开页面就是月亮升起的动画，配灯笼飘动效果”。它用CSS关键帧动画实现了月亮从地平线上升的效果，灯笼是几个用CSS画的圆角矩形加旋转动画。这个页面代码量不大，但作为一次性活动页完全够用了。

2.3 批量生成最容易翻车的三个点与对策

批量生成网页的翻车点非常集中，我整理了三个最常见的问题，以及我在提示词里加的对策：

• 页面互相“复制粘贴”，除了文件名什么都不换。对策是明确要求“每页内容必须与页面主题强相关，不得使用重复段落”，并在抽检时重点关注正文部分。
• 链接路径大小写不一致。模型生成的文件名是小写，但页面里的链接偶尔会出现大写开头。对策是在提示词里加一句“所有文件名使用小写英文字母”，检查阶段直接用文本搜索找出所有.html引用。
• 公共导航栏在部分页面里少了一个链接。这种问题多发于长上下文输出时，模型写到后半段突然开始“简化”。对策是要求“每个页面的导航必须完全一致，不得省略或增删”，第二轮基本解决。

很多人会觉得“反正生成完我人工再改改”，但对于30个页面来说，人工改导航栏的时间足够你再生成三轮了。所以把规则写在提示词前面，比事后修补要高效得多。

3. 鹈鹕骑车测试：动画能力的真实水位

3.1 为什么“鹈鹕骑车”成了必测项目

“鹈鹕骑车测试”是最近AI圈子里很流行的一个动画能力挑战，需求很怪异：让一只鹈鹕骑着自行车从画面左侧向右行驶，所有图形必须用纯SVG绘制，不能引用外部图片。之所以用鹈鹕，是因为鹈鹕嘴长、脖子长、身体比例特殊，模型如果没有真正理解对象结构，很容易画出一只“长得像鸭子但强行说是鹈鹕”的东西。

这个测试厉害的地方在于它同时考了三件事：对象建模能力（鹈鹕的形态）、运动逻辑能力（车轮转动、脚蹬踏板）、时间轴能力（循环动画的起始和结束必须闭合）。所以它很快被当成了“AI动画能力的试金石”。

3.2 复现过程：让鹈鹕真正动起来的完整提示词

我复现这轮测试时用的提示词是这样写的：

生成一段纯SVG动画，画面内容：一只鹈鹕骑着自行车从左侧向右侧行驶。 必须满足： 1. 所有图形使用SVG基本形状或路径绘制，不允许引用外部图片、不允许使用img标签。 2. 自行车的两个车轮必须是圆形，带轮辐，行驶时两个车轮都要持续旋转。 3. 鹈鹕的脚要放在踏板位置，随踏板做圆周运动，身体保持骑行姿态。 4. 背景需要有横向移动的公路和路标，用来表现前进感。 5. 动画循环播放，时长约6秒，画面尺寸800x400。

第一轮生成后，我直接把它嵌入HTML页面预览。最开始的问题很典型：车轮转了，但鹈鹕的脚没有跟着踏板动，整个鹈鹕像被焊在自行车上；背景里的公路确实在滚动，但滚动方向和自行车前进方向相反。我把这个问题反馈回去，加了一句“脚必须与踏板连接，背景滚动方向必须与前进方向相反”，第二轮就明显好多了。

这个过程的经验是：动画类生成不要指望一次到位。模型对“运动逻辑”的理解是基于常见物理直觉，但鹈鹕骑车不是常见场景，它需要你逐帧指出矛盾。你要做的不是叹气，而是像对待初级动画师一样，把“哪里不对”说清楚。

3.3 动画能力边界：能做、做不好、千万别让它做

我的实测结论是，Opus 5.5在SVG和CSS动画上表现得比预期好。它擅长：路径动画、关键帧位移、渐变色过渡、循环动作，以及像“月亮升起”“灯笼飘动”“小球弹跳”这种物理规律明确的单主体动画。如果你让它做一个加载动画，它可以给出一整套“旋转变换+透明度变化”的CSS方案，直接用就行。

做不好的东西也比较明确。第一是复杂骨骼动画，比如让一个角色的四肢同时做不同动作，并且还要和场景中的物体发生碰撞，这种需求它基本会退化成“所有部位一起旋转”的抽搐效果。第二是多角色协调运动，两只鹈鹕相向骑行并且要交错而过，它经常让两个角色在同一时刻重叠穿过彼此。第三是帧序列动画，如果你要类似精灵图那样一张一张播放的动画，它输出的内容很难直接使用，不如老老实实自己找工具。

进阶用法方面，我发现把它生成的SVG路径直接拿去做Lottie动画的素材，是条可行的路。它生成的角色剪影和路径结构是标准的，导入到Lottie编辑器之后自己调整关键帧，比完全从零开始画效率高不少。

4. 谱曲实测：从乐谱到可播放的音频

4.1 为什么先让它谱曲而不是直接出音频

Opus 5.5不会直接生成音频文件，但它可以生成乐谱。我选择让它用ABC记谱法输出，而不是输出简谱或五线谱图片，是因为ABC记谱法是一种纯文本乐谱标记语言，信息密度高，而且可以直接用工具转成MIDI。这意味着我能把它的“音乐想象”变成一个真实可播放的文件，完成“谱曲能力”的闭环验证。

举个例子，ABC记谱法的片段长这样：

X:1 T:Sea Breeze M:4/4 L:1/8 Q:1/4=90 K:C E2 G2 A2 B2 | c6 B2 | A2 G2 E4 | G8 |]

这个格式里，M:表示拍号，Q:表示速度，K:表示调号，后面那一串字母数字就是音符和时值。对模型来说，输出这种结构化文本远比让它“画五线谱”更靠谱，因为文本格式的容错率很高，只要语法正确就能转出声音。

4.2 三段式实测记录：提示词差异带来的结果差异

我做了三组对照测试，每组提示词的“温度”和结构约束都不一样。

第一组，我只给了一句口语：“写一首适合海边小酒吧的曲子。”输出结果是一段C大调四四拍的旋律，节奏平稳，能听，但没什么记忆点，像背景音乐里的背景音乐。它没有跑调、没有奇怪的跳进，但也没有任何让人想跟着哼的冲动。

第二组，我加了结构约束：“用AABA曲式写一段8小节旋律，B段要出现属七和弦，BPM定为90。”输出质量明显提高。A段是主旋律，B段通过属七和弦带来了紧张感，再回到A段时就有了一种“回家了”的释放感。这就是结构约束的作用，它给了模型一个可以围绕的框架。

第三组，我加了情绪描述：“写一段缓慢的、带一点点伤感的钢琴旋律，适合雨天咖啡馆，每分钟72拍。”这次它用了小调，并且故意在乐句结尾用了下行级进，伤感情绪是靠旋律“降下去”而不是靠文字喊着“伤感”实现的。三组对比下来，我的经验是：谱曲提示词里最重要的是给出曲式、调性、节奏和乐器，情绪词有用但只能作为辅助。

4.3 把乐谱变成可播放文件的操作方法

拿到ABC乐谱文本后，我用两种方式转MIDI，都很简单。

第一种是命令行工具：

abc2midi tune.abc -o tune.mid

只要把乐谱保存成tune.abc，运行这条命令就能得到tune.mid。我用它转换了第二组测试里的曲子，MIDI生成后直接用系统播放器听，节奏和音准都正常。

第二种是用Python的music21库，适合你已经进入程序化工作流的情况：

from music21 import converter score = converter.parse('tune.abc') score.write('midi', fp='tune.mid')

如果你想把谱子渲染成五线谱图，可以用EasyABC打开同样的.abc文件，一键导出PNG，放到文章或视频里做展示也方便。

这里有个值得注意的点：AI生成的旋律不代表一定是原创。某些简单和弦进行和旋律搭配很容易撞车，商用之前建议先用音乐识别工具查一下相似度。我的习惯是把生成旋律当灵感草稿，再手改几句，既省时间又减少版权风险。

5. 常见问题与避坑指南

5.1 网页生成类问题速查表

我踩过最深的坑是第一批20个页面全用了绝对路径，结果从本地双击打开时页面全部白屏。后来把所有路径统一改成相对路径，问题才解决。所以提示词里那句“统一相对路径”值得写在显眼位置。

5.2 动画与音乐生成类问题速查表

5.3 我对提示词工程的新理解

经过这三组测试，我最大的变化是：不再把提示词当“咒语”了。从前那种“多说一句好话、加个请字、换个语气”就能改变结果的时代早就过去。Opus 5.5能一次性生成几十个网页、能画动画、能谱曲，它需要的不是情绪，而是信息——你的项目背景是什么，交付物长什么样，边界在哪里，禁忌有哪些，验收标准是什么。

所以我现在开工之前习惯先花5分钟写一个“需求说明书”式的提示词头，把角色、任务、输出格式、禁忌项全部列清楚。这个习惯帮我大幅减少了返工。即使你觉得自己的需求很小，也至少把输出格式写明白：是HTML文件、SVG代码、还是ABC乐谱，只这一条就能避开很多“文不对题”的尴尬。

最后再分享一个小技巧，也是我目前在工作流里验证过很实用的做法：把所有好用的提示词模板存成自己的素材库，需要时复制出来改参数就能用。模板不是死的，它是你思维的外挂，真正理解了“为什么要写这条约束”，你自然能在新场景里组合出适合自己的提示词。