夜雨聆风同期视频见我视频号🔽
Vibe Code 无限画布 提示词指南 用 AI 生图，大部分人的第一反应是打开 Lovart、Flora 这些平台。 但用过就知道——积分太贵了。 这些平台本质上就是个中间商，帮你转接一下模型的 API，加了一层 UI，然后把价格翻几倍卖给你。你花的钱，大部分在养平台，不是在养模型。(我不否认他们有一些特有的功能还不错，但对于基础生图而言，完全没必要通过中间商走) 而原厂 API 的价格？Gemini 一张几毛钱、即梦一张几分钱、通义万相新用户直接送 500 张。 问题在于：API 没有界面，普通人没法直接用。 所以——自己 Vibe Code 一个。 不止是省钱。自己做的无限画布还有这些好处： → 同一个画布上接入多个模型，一个 prompt 同时出 Gemini、即梦、通义的结果，横向对比 → 一次批量生成多张，不用一个个开对话框反复输入同一句 prompt → 多个模型同时并行，不用排队等一张出完再生下一张 → 所有生成的图铺在一张无限大的画布上，随手拖、随时比，效率拉满  ▲ 我自己 Vibe Code 的无限画布，同时接了 6 个模型 全程大白话，不需要任何编程知识。 把下面的提示词一条条丢给 Claude Code（或 Cursor / Codex），它会帮你搞定所有技术细节。 00 准备工作 ① 装好 Claude Code（或其他 AI 编程工具） ② 去下面这些网站申请免费的 API Key： → Google AI Studio（Gemini） → 火山引擎（即梦 Seedream） → 阿里云百炼（通义万相）— 新用户送 500 张免费额度 ③ 拿到 Key 后先存好，后面会用到 一次只说一个功能，确认能用了再说下一个。 别一口气把所有需求全丢出去——就像你不会跟装修师傅说"帮我把房子从毛坯到精装一步到位"，而是先水电、再刷墙、再装家具。 01 搭一个空画布 帮我做一个类似 Figma 的无限画布网页应用：- 背景有小点阵网格- 可以用鼠标滚轮缩放- 可以拖拽平移- 可以从电脑拖图片文件进去- 拖进去的图片可以选中、移动、缩放- 右键图片可以删除- 顶部有个工具栏，显示缩放比例，有 +/- 按钮 丢完这条后，等它跑起来，自己拖几张图进去试试，确认画布能正常用了再往下走。 02 接入第一个 AI 生图模型 我有谷歌 Gemini 的 API Key：（把你的 key 贴这里）帮我在画布右边做一个生图面板：- 有一个输入框让我写描述（prompt）- 有一个"生成"按钮- 点了之后调用 Gemini 生成图片，生成的图片自动出现在画布上- 生成过程中画布上显示一个灰色占位框写着"生成中..."- API Key 不要写在前端代码里，帮我做个后端代理 验证：输入"一只戴墨镜的猫"，点生成，等几秒应该能看到图片出现。 03 加更多模型 我还有火山引擎（即梦）的 API Key：（贴你的 key）帮我接入即梦的 Seedream 模型，面板里做成按钮组让我切换模型：- Gemini Flash（快速便宜）- Gemini Pro（高画质）- Seedream 4.5- Seedream 5.0 Lite同一个 prompt，我想试不同模型的效果 如果你还有 Flux、DALL-E 等其他模型的 Key，同样的方式继续加就行。 04 选图片比例 加一个图片比例选择，让我可以选：1:1（方形）、16:9（横版）、9:16（竖版）、4:3、3:4、3:2、2:3即梦模型再多一个分辨率选项：1K（快速）、2K（推荐）、4K（超清）Gemini 不需要分辨率选项 05 图生图（参考图功能） 我想用画布上已有的图片作为参考图来生成新图：- 右键图片可以"设为参考图"- 可以同时设多张参考图- 设了参考图后，面板顶部显示参考图的缩略图，带编号（1、2、3）- 生成时把参考图也发给 AI，让它参考着画- 有个"清除全部参考图"的按钮 06 在 prompt 里 @ 引用参考图 写 prompt 的时候，我输入 @ 符号能弹出参考图列表让我选，选了之后自动插入 @图1、@图2 这样的标签。这样我就能写类似"把 @图1 的人物放到 @图2 的场景中"这种提示词。 踩坑提醒：如果第二个 @ 不弹菜单，截图给 Claude 看，让它修。这个功能可能需要调 2-3 次才完美，属于正常情况。 07 一次生多张 加一个选项让我选一次生成几张图：1张、2张、4张。选多张的时候画布上并排显示多个占位框。生成过程中占位框可以拖动，我好提前排好位置。 08 同时生成不用排队 我希望一个模型在生成的过程中，我还能切换到另一个模型点生成。不用等上一个生完才能点下一个。生成按钮永远可以点，下面显示"几个任务正在生成"就行。 这步很关键！无限画布的核心价值就是同时对比多模型，不能排队。 09 下载和放大 右键菜单加两个功能：1. 下载图片 — 保存到电脑2. 高清放大 — 把图片放大到 2K 分辨率 10 画布上标注模型名 画布上每张图片左上角显示一个小标签，写是哪个模型生成的。生成中的占位框也要显示。这样多张图放一起能一眼分清。 11 预设常用 prompt 面板里加一个预设区域，放两个我常用的 prompt：1. "女生拿着3D版的logo，背景是暗调浅景深的动画工作室"2. "巨人女生从城市大楼间隙探出半个身子，用手指着3D LOGO形状的雕塑，城市在女生面前有点像微缩模型，画风偏奇趣"点一下直接填入输入框。 12 换个好看的皮肤 可选 把 UI 改成暖色调复古风格，参考"Claude for Safari"的设计：- 奶油色背景- 标题用衬线字体，斜体- 按钮和选中状态用暖棕色- 整体温暖文艺的感觉 13 做成桌面图标 可选 帮我做一个 macOS 桌面图标，双击就能启动这个画布。自动启动前端和后端，自动打开浏览器。 遇到报错怎么办？ 不需要看懂报错信息，直接： ① 截图给 Claude，说"报了这个错" ② 让它自己查日志、自己修 ③ 如果修了还不行，说"还是不行"，再截图 Claude Code 最擅长的就是看报错自己调试。 你要做的就是当甲方——告诉它"不行"就够了。 这怎么不是最好的时代，你几乎可以DIY任何工具。
|
