全部路线
最初的 15 分钟:想法变成画面的那一刻
免费 · 基础

最初的 15 分钟:想法变成画面的那一刻

从注册到保存第一个作品,为今天刚来的你准备的最短成功路线

约 25 分钟12 步

完成后你将拥有

从输入提示词到 clarify、蓝图、构建、手机视图,再到保存,亲手走完工作室的基本流程,并把第一件成果收进我的作品。

准备清单

  • VibeCampus 账号可选

    还没有也没关系。我们会在这门课的第二步一起注册,注册免费。

1

15 分钟后,这个画面就会出现在你眼前

这不是想象,而是预告。课程时间表排得整整齐齐,教练介绍配着照片一一展开,页面最底部还挂着一个真的能输入的预约表单,这就是一个普拉提馆网站。15 分钟后,它就会出现在你的屏幕上。

做出它需要的不是编程实力,而是一句话。你写下句子,AI 来写代码,你只需要在中途点击选项、把握方向就可以了。为什么按这个顺序学?因为把工作室的流程完整走通过一次的人,和没走过的人,之后所有课程的吸收速度完全不同。

好,就当计时器已经按下,我们开始吧。从下一步起,你的手会一直动个不停。

2

注册与第一份打卡奖励

先要给自己安个座位。点击下方的“在工作室试试”按钮,注册页面就会打开。用邮箱或社交账号一分钟搞定,不花一分钱。

注册进来后,打卡奖励已经在等你。VibeCampus 每天登录都会为你积累名为 Vibes 的积分,这些积分之后会成为构建和各种功能的燃料。为什么让你从第一天就开始领?因为打卡是唯一一种错过就消失的奖励。

动手试试

小贴士

注册后马上在个人资料里选好感兴趣的领域,之后页面各处的推荐都会按你的口味调整。

3

工作室界面 30 秒速览

现在进入工作间。工作室界面正中央有一个大大的输入框。这里就是你写句子的地方,也就是这个平台的心脏。

看看输入框周围。有网页、应用、游戏、视频这些构建类型可选,有在快速构建和深度构建之间切换的构建模式开关。“提示词助手”按钮是不知道该写什么时按的求助铃,打开“从模板开始”,125 个完成品示例正在等你。

现在只要眼熟这些名字就够了。每一个都会在后面的课程里逐一展开。为什么要先转一圈?因为光是知道界面上什么在哪里,第一次构建的紧张感就会减半。

出现这样就成功了

如果能看到界面中央的提示词输入框,以及周围的构建类型、构建模式、提示词助手和模板按钮,就说明你进对地方了。

动手试试
4

第一个提示词:发出一句话试试

点击下方的“在工作室试试”按钮,工作室输入框里已经预先填好了第一个提示词。这是一份为小型普拉提馆准备的预约网站请求,包含课程时间表、教练介绍和预约表单。

把填好的句子出声读一遍。它写清了为谁而做(普拉提馆)、需要什么(时间表、介绍、预约表单)。好提示词的骨架就长这样。满意就照发,想改的地方尽管改,然后点发送。

从发送的那一刻起,就轮到 AI 工作了。你做的只是发出一句话,而画面即将忙碌起来。

动手试试

注意

不要为了写出完美的句子纠结太久。第一个提示词只是对话的开始,不足的部分自有下一步的追问和修改功能来兜底。

5

clarify:用选项回答 AI 的追问

提示词发出去后,AI 不会立刻开始写代码。它会先发来 clarify,也就是追问。想要什么样的氛围、预约采用什么方式,这类问题会以选项按钮的形式排列出来。

点选合适的就行。标着“可多选”的问题可以选多个,没有中意的选项还可以自行输入。都选好后点“就这样做”。着急的话也有“跳过,直接做”,但第一次建议认真回答一遍。看看 AI 在好奇什么,这本身就是学习。

为什么要有这一步?因为同一句话,每个人脑中的画面都不一样。追问就是用几次点击填平这条沟的装置。

小贴士

在选项下方的“其他需求”栏里补上一行,结果会明显更精准。比如“淡紫色调,照片要温暖的感觉”。

6

怎么读懂蓝图

回答完毕后,AI 会给你看蓝图,也就是一份整理了要做什么、怎么做的设计摘要。会有哪些页面、哪些功能能用、整体走什么氛围,都逐项写在里面。

这时你要做的,是用审稿人的眼光扫一遍。我说的预约表单在不在?时间表有没有漏?没问题就批准,发现缺了什么,在这个时间点提出来成本最低。这和在图纸上改墙永远比砌完再搬墙快得多,是同一个道理。

出现这样就成功了

你会看到一份摘要,列出要做的页面清单、核心功能和设计方向。请在这个时间点确认你的要求是否全部包含在内。

7

构建进度条转动时发生的事

批准后构建开始,进度条渐渐充满。这段时间不是在空转,而是 AI 智能体拿着蓝图,一行一行写下真正的代码。你会看到屏幕左侧有代码在流动,那正是你的网站被建造的施工现场。

完全不需要看懂。只要记住一件事:那些代码全都是你的。VibeCampus 提供成果的全部代码,之后你可以下载并带去任何地方。

出现这样就成功了

进度条到达 100% 后,右侧会出现运行结果。左边是代码,右边是真正在运转的你的网站。

8

预览与手机视图

完成的网站已经出现在右侧预览里。别光看,去摸一摸。点点按钮,在预约表单里填个名字,把页面滚到最底部。亲手确认它真的能用,是这门课最精彩的瞬间。

接下来是手机视图。它会用真实尺寸的手机边框包住你的网站,还可以把 iPhone 和 Galaxy 并排比较。如今大部分访客都是用手机进来的,网站在手机上的样子几乎就是它真正的样子。

注意

预览运行在安全沙箱里,部分浏览器功能可能受限。想全屏认真测试,请使用“在新标签页打开”。

9

免费重新生成与持续改进:不满意就再来

结果第一口就 100% 合心意,反而是例外。所以这里有两件工具。免费重新生成,是把当前作品以更高质量从头再做一遍的功能;持续改进,是通过聊天提出“按钮再大一点”“时间表改成表格”这类局部修改的功能。

错了也没关系,重新生成是免费的。相信这句话、放手去实验的人进步最快。整体氛围偏了就重新生成,只想修某个部分就用持续改进。抓住这个区分就够了。

注意

重新生成会把整体重做一遍。如果当前结果里有你喜欢的部分,更安全的做法是不重新生成,而是用持续改进只修不满意的地方。

10

保存与我的作品

得到满意的结果就点保存。保存的作品会一件件收进我的作品,随时可以重新打开继续修改或分享。

用下方的“在工作室试试”按钮打开我的作品看看吧。刚做好的普拉提网站应该正占着第一格。以后这个架子上会一件件多出应用、游戏和视频。这里既是你的作品集,也是你工作间的置物架。

动手试试

小贴士

保存时把名字起得具体一点。等作品攒到几十个的时候,“普拉提预约 v1”会比“测试1”拯救你。

11

确认小测:流程上手了吗?

提示词发出后,工作室最先做的事是什么?

12

恭喜,接下来是下一张地图

你刚刚走完了提示词、clarify、蓝图、构建、预览、保存这条工作室的骨架流程。以后无论做什么,这条流程都会原样重复。今天这 15 分钟,会成为支撑你今后所有构建的地基。

下一张地图有两条岔路。如果开发术语听起来还像外语,就去术语完全攻克课程;想提升成果质量,就去提示词的技术课程。无论哪条路,今天做的普拉提网站都会继续当教材。

还有,明天也要来。打卡奖励每天都在积累,你的作品架也可以每天长大。

记住这些

  • 15 分钟前的你和现在的你已经不同了。因为你成了把“想法变成画面”这条完整流程走通过一次的人。
  • 今天学的流程,也就是从提示词经过 clarify 和蓝图,一路走到构建和保存的路,会在所有课程中原样重复。反复做到熟练为止吧,反正重新生成是免费的。
  • 下一门课,要么拆掉术语之墙(术语完全攻克),要么学会提升成果质量的技术(提示词的技术)。我的作品的第一格已经填上了。要不要去填第二格?
在工作室试试
课程新建作品