零基础怎么用 Vibe Coding 把一句诗做成互动风景？我拆了五步路径

先说结论

零基础做互动作品，卡住你的通常不是代码，而是「说不清想要什么」。

我拿「明月松间照，清泉石上流」试了一遍，路径其实可以拆成五步：写需求 → 做首版 → 改画面 → 用模型 → 打包小工具。制作阶段用优刻得星图 AstraFlow 的大模型 API 把诗句整理成景物、配色和动效参数，作品端交给 p5.js 离线绘制，最终产物是一个断网也能玩的小红书小工具。

下面按我实际操作的顺序展开。

一、问题背景：一句诗，怎么变成能玩的东西

想把喜欢的古诗做成一组可以玩的风景。选「明月松间照，清泉石上流」，月光落进松林，手指划过溪水，波纹轻轻散开，还能把这一帧存成诗意卡片。

画面交给 p5.js——一个用代码画画、做动画的 JavaScript 工具库。制作阶段接入优刻得星图 AstraFlow 这个 AI 开发平台的大模型 API，让模型整理精选诗句的景物、配色和动效参数；接口兼容 OpenAI，也能用同一把 Key 比较不同模型的解读。确认好的场景数据存进作品，再由 p5.js 绘制。

二、核心痛点：为什么很多人第一步就卡住

零基础做互动作品，最常见的卡点有三个：

• 想法太模糊，只说「想要有诗意」，AI 不知道往哪改。
• 一上来就想学编程，结果还没做出东西就放弃了。
• 制作阶段和作品运行阶段混在一起，运行时依赖网络，打包后容易出问题。

对应的解法其实很直接：先把需求写成三句话，再让 AI 跑通首版；反馈具体到可执行；制作阶段用大模型解诗，作品端用 p5.js 离线画景。

三、五步路径总览

步骤 目标 关键动作 验收标准 Step 1 写需求 把想法写成三句话 给谁用、用户做什么、得到什么 能列出页面、按钮和验收标准 Step 2 做首版 让 AI 做出能点的第一版 用 DSH 等 AI 编程工具生成 p5.js 代码 选诗、触摸涟漪、卡片预览跑通 Step 3 改画面 像改作文一样给具体反馈 每轮只改一处，对照前后画面 同尺寸修改前后预览可对比 Step 4 用模型 制作阶段用大模型解诗 优刻得星图 AstraFlow 输出 JSON 配置 场景数据存进作品，p5.js 离线读取 Step 5 打包 打包成小红书小工具 资源随包、脚本外置 断网选诗、手机触控、保存图片均通过

四、Step 1：先把需求写成三句话

小白第一次 Vibe Coding，可以先把想做的小工具写成三句话：给谁用、用户做什么、最后得到什么。

• 给谁用：诗词爱好者。
• 用户做什么：选择内置诗句。
• 得到什么：能互动、能保存的风景。

先把月夜松林做完整，再扩展长河落日、荷塘蜻蜓等场景。

可直接复制的 Prompt

请整理最小需求：给诗词爱好者用，选择内置诗句，得到能互动、能保存的风景卡。先把月夜松林做完整，列出页面、按钮和验收标准。

五、Step 2：让 AI 做出能点的第一版

把需求交给 DSH 这样的 AI 编程工具，让它用 p5.js 画出月色、松影和溪流。先用固定参数，跑通选诗、触摸涟漪和卡片预览。

可直接复制的 Prompt

用 p5.js 的 Canvas 2D 做深色底的光绘月夜松林，以银白与青绿线条描绘月光、松影和溪流。先使用固定场景参数，实现选诗、触摸涟漪和卡片预览，适配手机尺寸，提供可运行的首版和预览方式。

六、Step 3：像改作文一样，给具体反馈

把「更有诗意」说具体：松影淡一点，水流慢一点，月亮周围多留白，诗句避开按钮。每轮改一处，对照前后画面。

可直接复制的 Prompt

保留现有功能，只调整视觉：深色背景更干净，松影的青绿光线更细，水流更慢，月亮旁多留白；减弱涟漪的亮度，诗句避开按钮。给我同尺寸的修改前后预览。

七、Step 4：制作时用 AI 解诗，作品里用 p5.js 画景

在制作阶段，接入优刻得星图 AstraFlow 的大模型 API，让模型整理精选诗句的景物、配色和动效参数。接口兼容 OpenAI，也能用同一把 Key 比较不同模型的解读。确认好的场景数据存进作品，再由 p5.js 绘制。

可直接复制的 Prompt

通过优刻得星图 AstraFlow，为精选诗句整理景物、深色光绘配色和动效参数，只输出与现有画面组件匹配的 JSON 配置。校验后存成包内 JS 数据，让 p5.js 离线读取并绘制。

八、Step 5：测试并打包成小红书小工具

核对优刻得星图 AstraFlow 本次制作的调用与用量，再把 p5.js、诗句和场景一起打包。小工具离线运行，测试断网选诗、手机触控和保存图片，让大家直接玩内置风景。

可直接复制的 Prompt

按小红书小工具规范打包：一个 HTML 入口，p5.js 和所有资源随包，脚本外置。验证断网切诗、触控和手机适配，清理联网调用及密钥，输出可检查的发布候选包。

保存诗意卡片

增加「保存诗意卡片」：把当前画布导出为 PNG，点击后调用小红书容器的 saveImageToPhotosAlbum 保存；处理拒绝授权和保存失败，普通浏览器提供卡片预览。

九、逐页画面方案（9 页）

统一采用 3:4 竖版，以深色背景、光线形成光绘风格。第 1 页用大幅主视觉和清晰标题呈现冲击力；第 2 至 9 页依次展开作品目标、玩法和制作方法，每页保留一个重点与一段可复制的创作 Prompt。标题与正文保持明暗对比，Prompt 区域使用深色底与清晰文字。操作截图、运行结果与前后对比按实际制作展示。

页码 画面主文案 需要的画面 第 1 页 独立封面 文科生零基础 Vibe Coding 五步法；用 p5.js，让一句诗长成风景 以深蓝黑背景上的月亮、松林和溪流构成大幅光绘主视觉，银白月光与青绿水纹形成明暗对比，效果图占据页面主体。主标题与副标题落在清晰留 白区 ，封面不放 Prompt、步骤或操作说明。使用概念图时标注「视觉概念」，与实际程序效果区分。 第 2 页 作品目标与五步预览 从一句诗开始，做出第一个互动作品；写需求 → 做首版 → 改画面 → 用模型 → 打包 五步路径卡采用深色底与细光线连接，配一张月夜松林作品的小图。下方完整展示制作目标 Prompt。 第 3 页 案例玩法 选一句诗，走进它的风景里；选诗 → 触摸互动 → 保存卡片 展示内置诗句选项，重点放月夜场景。用互动前后两帧局部截图标出触摸位置与水纹变化，旁边露出生成的诗意卡片。 第 4 页 Step 1 先把需求写成三句话；给谁用？用户做什么？得到什么？ 放大 DSH 需求对话，把用户、动作、结果整理成三张对应卡片。下方配最简单的选诗、看景、保存流程。 第 5 页 Step 2 用 p5.js，让第一幅风景动起来 一侧放 DSH 生成与预览操作，另一侧放真实首版，标出选诗区、水面互动区与卡片预览。画面突出第一次能运行的结果。 第 6 页 Step 3 把「更有诗意」，说得具体一点 同尺寸对照真实修改前后，圈出松影、留白和诗句位置；用水纹局部帧辅助说明动效变化。反馈文字与对应变化用细线连接。 第 7 页 Step 4 制作时用 AI 解诗，作品里用 p5.js 画景 展示同次制作的三段链路：星图中的诗句解读、整理好的场景参数、p5.js 渲染结果。保留平台名称，遮挡密钥；旁边配这轮制作的实际用量记录。 第 8 页 Step 5 打包成一个断网也能玩的诗词小工具 以手机断网仍能切换场景和触摸互动的实测画面为主，配精简的包内文件示意。不同诗句对应的景物与配色要能清楚区分。 第 9 页 保存与互动 把这一帧诗意，留在相册里；你想让哪句诗长成风景？ 主图放最终导出的诗意卡片，保留对应古诗；小图展示用户点击保存后的实际反馈。给结尾互动句留白，以作品收尾。

视觉参考：

十、常见问题 FAQ

Q1：零基础真的能做出来吗？ 可以。第一步只需要把想法写成三句话，代码由 DSH 这类 AI 编程工具生成，你负责判断画面是否符合预期。

Q2：为什么制作阶段用大模型，作品里却用 p5.js？ 制作阶段用优刻得星图 AstraFlow 的大模型 API 把诗句整理成景物、配色和动效参数；作品端由 p5.js 离线读取这些参数并绘制，避免运行时依赖网络。

Q3：怎么判断一次修改是否有效？ 每轮只改一处，并要求 AI 给出同尺寸的修改前后预览，对照松影、留白、诗句位置等具体元素判断。

Q4：打包后为什么强调断网测试？ 小工具需要离线运行，所以要验证断网选诗、手机触控和保存图片，并清理联网调用及密钥。

Q5：保存图片失败怎么办？ 调用小红书容器的 saveImageToPhotosAlbum 时，要处理拒绝授权和保存失败；普通浏览器提供卡片预览作为兜底。

十一、总结建议

你的第一件互动作品，可以从一句喜欢的诗开始。先把意境说清楚，再一点点做成能看、能玩的东西。

如果让我给一个最省力的起步顺序：先写三句话需求，让 AI 跑通首版，然后每轮只改一处画面。制作阶段用优刻得星图 AstraFlow 解诗，作品端用 p5.js 离线绘制，最后按小红书小工具规范打包并做断网测试。