# 零基础怎么用 Vibe Coding 把一句诗做成互动风景？我拆了五步路径 > 作者/来源: UCloud 运营管理员 > 发布时间: 2026-10-15T07:14:22.555Z > 分类: AI专区 > 原文链接: http://117.50.162.249:3000/yun/articles/2839 --- ## 先说结论 零基础做互动作品，卡住你的通常不是代码，而是「说不清想要什么」。 我拿「明月松间照，清泉石上流」试了一遍，路径其实可以拆成五步：写需求 → 做首版 → 改画面 → 用模型 → 打包小工具。制作阶段用优刻得星图 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 页 保存与互动 把这一帧诗意，留在相册里；你想让哪句诗长成风景？ 主图放最终导出的诗意卡片，保留对应古诗；小图展示用户点击保存后的实际反馈。给结尾互动句留白，以作品收尾。 视觉参考： ![](https://ucloud-blog.cn-bj.ufileos.com/imagebed/0998207951586341-0aec6274e7cb87e4ee91e3423e4caa7b.jpg) ![](https://ucloud-blog.cn-bj.ufileos.com/imagebed/0998207951586245-357a0aaa13c364fb467a1edf6275b604.jpg) ## 十、常见问题 FAQ Q1：零基础真的能做出来吗？ 可以。第一步只需要把想法写成三句话，代码由 DSH 这类 AI 编程工具生成，你负责判断画面是否符合预期。 Q2：为什么制作阶段用大模型，作品里却用 p5.js？ 制作阶段用优刻得星图 AstraFlow 的大模型 API 把诗句整理成景物、配色和动效参数；作品端由 p5.js 离线读取这些参数并绘制，避免运行时依赖网络。 Q3：怎么判断一次修改是否有效？ 每轮只改一处，并要求 AI 给出同尺寸的修改前后预览，对照松影、留白、诗句位置等具体元素判断。 Q4：打包后为什么强调断网测试？ 小工具需要离线运行，所以要验证断网选诗、手机触控和保存图片，并清理联网调用及密钥。 Q5：保存图片失败怎么办？ 调用小红书容器的 saveImageToPhotosAlbum 时，要处理拒绝授权和保存失败；普通浏览器提供卡片预览作为兜底。 ## 十一、总结建议 你的第一件互动作品，可以从一句喜欢的诗开始。先把意境说清楚，再一点点做成能看、能玩的东西。 如果让我给一个最省力的起步顺序：先写三句话需求，让 AI 跑通首版，然后每轮只改一处画面。制作阶段用优刻得星图 AstraFlow 解诗，作品端用 p5.js 离线绘制，最后按小红书小工具规范打包并做断网测试。