有预约进来的网站的早晨
想象一下普拉提馆长的早晨。打开手机,夜里进来三份预约申请。那是看了网站的课程时间表、读了教练介绍、填好预约表单的客人。馆长睡觉的时候,网站在营业。
这就是观赏型网站和干活型网站的差别。这门课要做的是后者。好看是基本功,我们还要搭一个把访客一路带到预约这个动作的结构。
16 个步骤看着长,但每一步都和一个真实按钮配对。学完之后,你手里会留下一件拿得出手的完成品。


从 125 个模板出发,直到四语网站和嵌入
完成后你将拥有
以普拉提馆网站为例,从选模板到结构、文案、图片、技能、响应式、翻译、核查、嵌入,走完网站制作的全部工序。
VibeCampus 账号必需
全程在工作室里实操。注册免费。
修完提示词的技术课程可选
本课默认你已掌握具体性三要素和持续改进的要领。建议按顺序学习。
想象一下普拉提馆长的早晨。打开手机,夜里进来三份预约申请。那是看了网站的课程时间表、读了教练介绍、填好预约表单的客人。馆长睡觉的时候,网站在营业。
这就是观赏型网站和干活型网站的差别。这门课要做的是后者。好看是基本功,我们还要搭一个把访客一路带到预约这个动作的结构。
16 个步骤看着长,但每一步都和一个真实按钮配对。学完之后,你手里会留下一件拿得出手的完成品。

不必从荒地开始。打开工作室的“从模板开始”,网页、应用、游戏、视频共 125 个完成品示例以画廊形式铺开。每一个都是真正能运行的成品,光是点开看看,眼力就会长进。
现在要做的是逛街。用下方的“在工作室试试”打开工作室,把两三个和你的想法气质相近的模板收藏起来。点“使用此模板”,那件成品就会摆上你的工作台;说一句想换颜色、文字和图片,它就立刻开始变成你的。
出现这样就成功了
在画廊里选中模板,右侧会立刻出现预览。喜欢就点使用此模板,不喜欢就看下一个候选。放轻松地翻。
两个起点各有各的力量。模板起步快。结构和设计都是验证过的,只要换内容,今天就要出成果时它是最佳选择。白纸起步自由。用提示词从零画起,适合结构本身就特别的网站,比如叙事型品牌页。
判断标准是这个:如果你的网站可以沿用行业标准结构(介绍、图库、价格、预约),选模板;如果结构本身就是差异点,选白纸。第一次的话推荐模板起步。亲身经历过一次标准结构之后,白纸才是真正的自由。
注意
选完模板只换内容就收工,会得到一个似曾相识的网站。颜色、字体气质、图片,三者之中至少要把两样换成你的品牌。
网站是一座名为板块的积木塔。普拉提网站从上到下的正统顺序是:主视觉(首屏)、场馆介绍、课程时间表、教练介绍、评价、价格、预约表单、到店路线。把这套结构在提示词或持续改进里照着说出来就行。
顺序也有逻辑。访客从上往下的心理动线是“这是哪里(主视觉)”“是做什么的(介绍·时间表)”“可信吗(教练·评价)”“多少钱(价格)”“要不要试试(预约表单)”。板块顺序就是说服的顺序。
养成按板块说话的习惯,比如“把评价板块挪到价格上面”。你和 AI 的对话会明显变准。

结构是骨,文案就是声音。最值得下功夫的是主视觉那一行主标题。比起“这里是○○普拉提”这种自我介绍,“每天 50 分钟,体态开始不一样”这种说出访客能得到什么的句子更有力。
按钮文字也是声音。比起“提交”,用“预约课程”;比起“查看更多”,用“查看时间表”。告诉人按下去会发生什么的文字,才带来点击。在持续改进里拜托一句“以顾客获得的价值为中心,给主标题提三个方案”,AI 就会变成你的文案。
小贴士
把写好的文案出声读一遍。嘴里磕绊的句子,眼睛也会磕绊。像说话一样自然的句子才是好文案。
网站的第一印象大多由图片决定。在工作室里不用四处找图,当场就能生成。像“自然光明亮的普拉提馆内景,鼠尾草绿色调”这样连氛围一起指定,就会得到和网站色感相配的图片。
摆放的原则是角色。主视觉放传递氛围的宽幅图,教练介绍放人物图,课程介绍放动作图。图片给文字帮腔时,网站才开始像专业的。要是你有自己门店的照片,用它永远是最好的。真实这件事,生成图赢不了。

注意
把网上扒来的照片放上去可能产生版权问题。请以只用自己拍的照片和工作室生成的图片为原则。心里不踏实的话,安全与权利检查会帮你过滤。
让平凡网站变特别的捷径,就是技能库。3D 演出、视差滚动、图表、滚动动画这些经过验证的技法按分类和搜索整理好,选中就会原样进入构建。
其实不选也行,工作室会自动挑出契合提示词的技能并组合。即便如此还要学会自己挑,是因为当你一定要放进某个技法时,你得能指定它。普拉提网站只要加一个动作照片随滚动柔和浮现的演出,档次就不一样。
用下方的“在工作室试试”打开浏览·添加技能,在搜索框里敲 3D 或视差试试。它只会筛出适合你当前构建类型的技能。
动手试试小贴士
技能像做菜的香料,一两种正好。堆满华丽技能的网站,反而显得又慢又乱。
现在轮到用访客的眼睛看了。打开手机视图,网站会在真实尺寸的手机边框里打开,还能把 iPhone 和 Galaxy 并排比较。两种机型的屏幕比例和圆角不同,在一边完美的版式,在另一边可能就错位。
检查例程有三条。第一,主标题有没有别扭的换行。第二,按钮够不够大拇指按。第三,预约表单是不是滚动几下就能到。大部分访客用手机进来,手机上的样子实际上就是网站的真面目。

出现这样就成功了
两个边框里并排显示同一个网站。找到显示不一样的地方,就算成功。那个地方会成为下一步要修的清单。
所谓响应式,是版式随屏幕大小自动重排的性质。在电脑上排成 3 列的价格表,到手机上会叠成 1 列。工作室的构建默认就是响应式的,但内容改多了,可能出现错位的点。
检查中发现的问题用持续改进解决。要领是把屏幕尺寸和症状一起说,比如“在手机上时间表被截断了,手机上请竖向堆叠”。把预览窗口的宽度左右拉伸收缩,看版式是否跟着动,也是快速检查法。
注意
只看电脑屏幕就判定完工,是新手时期最常见的失误。养成保存前必过一遍手机视图的习惯。
网站完成了,该扩语言了。翻译功能把全部可见文本自然地翻译成指定语言,设计和功能原封不动。用中文做好的普拉提网站,几次点击就有了英文、日文、韩文版本。
游客常来的街区门店、瞄准海外客户的服务,这个功能就是营业额本身。把各语言版本分别保存,就能按客人切换着拿出来。

小贴士
翻译后请以按钮和菜单这类短文案为主扫一遍。别扭感在短 UI 文案里比在长句子里更显眼,发现了就用持续改进当场改掉。
除了用嘴改的持续改进,还有用手改的路。打开点击编辑,就能直接点选预览里的元素,当场改文字。为了改一个主标题的错别字,再也不用发一条聊天了。
还有进阶功能:拖拽移动、抓着手柄改大小、在检查器里精修颜色和间距。细节留给点击编辑专门课程,今天只要打开它、亲手改一个字就好。
别担心失手弄坏。有撤销,最坏的情况重新生成也是免费的。放开手摸的人进步最快。
小贴士
嘴上说不清的微调用点击编辑,动结构的修改用持续改进。这套分工长在手上,编辑速度会翻几倍。
网站上写的内容,真的都对吗?AI 写的初稿里可能混着貌似有理却不准确的句子,夸大效果的表述、未经确认的数字是典型。要站到客人面前的网站,出门前必须过筛。
可信度核查用 4 个阶段完成这件事。第一步,提取网站里的论断。第二步,与谷歌搜索对照核实。第三步,把代码放进沙箱真实运行。第四步,给出报告和修改建议。连出问题的句子该怎么改都会建议好,你只需要决定采不采纳。
出现这样就成功了
运行后会送达一份报告,附上发现的条目数。条目不是 0 也别惊讶。上线前发现的问题,全都是资产。
完成的作品也能走出 VibeCampus。嵌入功能会生成复制粘贴即可的代码,把它贴到现有主页、博客、网店介绍页的任何位置,你的作品就会在那里出现。
对已经有主页在运营的店主特别有用。不用推倒重来,就能像挂画一样加上预约表单、活动页这类新功能。制作在工作室,展示在任何地方。这就是嵌入的精神。
把完成的网站用 4 种语言提供服务,最快的方法是什么?
现在是从头到尾独自完赛的时刻。点下方的“在工作室试试”按钮,婚礼摄影师作品集网站的提示词已经填好:全屏图库、套餐价格、咨询表单。这是照片当主角的网站,这门课学的技术会全部用上。
慢慢来,但要走完全部工序。完成后,在下方的展开里对照模范路线即可。
动手试试任务
用填好的提示词开始构建,完成婚礼摄影师网站。必查四项:① 图库、价格、咨询表单板块是否齐全 ② 是否把主视觉主标题改成了以顾客价值为中心的句子 ③ 是否用手机视图确认了 iPhone、Galaxy 两种机型 ④ 是否用翻译做出了英文版。做完后记得按保存。
模范路线是这样的:发送提示词后,clarify 会问照片色调和套餐构成;在蓝图里确认图库、价格、咨询表单已列入计划,然后构建。完成后用持续改进或点击编辑把主标题换成“留住两个人最闪耀的一天”这类价值中心的句子,再到手机视图确认图库图片在竖屏里没有被裁掉。最后在翻译里选英文生成版本、分别保存,就是完赛。走到这里都靠自己完成的话,你已经有替别人做网站的水平了。
回头看,这一路不短。从挑模板开始,到结构、文案、图片、技能、双机型检查、响应式、四种语言、核查、嵌入。掌握全部工序的人,从此不再害怕网站。它成了你随取随用的武器。
这件武器也不是只能用在你自己的生意上。身边的店铺、朋友的工作室、街角的手作坊,需要网站的地方到处都是。下一门课,我们升级到数据鲜活的应用。
