ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Cloudflare VibeSDK 提示词实战指南:从 samplePrompts.md 学会用一段话驱动全栈应用生成

Cloudflare VibeSDK 提示词实战指南:从 samplePrompts.md 学会用一段话驱动全栈应用生成 Cloudflare VibeSDK 提示词实战指南从 samplePrompts.md 学会用一段话驱动全栈应用生成【免费下载链接】vibesdkAn open-source vibe coding platform that helps you build your own vibe-coding platform, built entirely on Cloudflare stack项目地址: https://gitcode.com/GitHub_Trending/vi/vibesdksamplePrompts.md 是 Cloudflare VibeSDK 仓库根目录下的一份提示词样本集收录了从ChatGPT 克隆到GitHub 克隆等 9 个典型用户请求。这份文件既是平台能力的演示清单也是学习如何向 AI 编程平台提需求的最佳入门教材。读完本文你将掌握VibeSDK 如何把一句自然语言提示词转换成可部署的全栈应用、这些样本分别测试了平台的哪些能力以及如何参照源码写出信息密度更高、更容易被 Agent 准确执行的提示词。一、samplePrompts.md 是什么一份面向 Agent 的需求规格样本samplePrompts.md位于仓库根目录全文只有 9 条原始提示词没有任何格式说明。它更像一份意图测试集每条提示词都以自然语言描述一个完整产品需求覆盖游戏、工具、仪表盘、全栈克隆应用等不同复杂度与领域。仓库把它放在根目录与 README.md、docs/并列从侧面表明这些提示词是平台开发者在验证生成链路时使用的代表性请求适合作为用户上手时抄作业的起点。理解这些样本的真正价值需要先理解它们会被谁消费不是人而是 VibeSDK 内部由 ThinkAgent 驱动的模型-工具循环。提示词写得好不好直接决定模板选择、蓝图Blueprint质量与后续迭代的效率。二、一条提示词如何变成应用VibeSDK 的生成流水线要把样本提示词用好必须先了解平台把一段话变成一个应用的完整链路。以下流程均有仓库源码佐证项目类型预测当用户没有显式指定项目类型时templateSelector.ts 中的predictProjectType会调用模型把请求归类为app全栈 Web 应用、workflow后端工作流/API、presentation演示文稿或general文档/从零开始四类之一并输出推理与置信度。对应结构化 schema 定义在 schemas.ts 的ProjectTypePredictionSchema。模板选择selectTemplate见 templateSelector.ts基于项目类型过滤可用模板再让模型依据功能对齐、技术栈匹配、架构契合、改动最小四条标准选出最合适的起始模板同时给出复杂度simple/moderate/complex、风格Minimalist、Brutalism、Retro、Illustrative、Kid_Playful、Custom 等与 useCaseschema 见TemplateSelectionSchemaschemas.ts。蓝图Blueprint生成选好模板后blueprint.ts 的generateBlueprint依据项目类型选择不同提示词模板完整PHASIC_SYSTEM_PROMPT要求详细的 PRD、设计系统、UI/UX 规格、LITE_PHASIC_SYSTEM_PROMPT轻量模板800 词以内或SIMPLE_SYSTEM_PROMPTagentic 模式。输出被强约束为PhasicBlueprintSchema/AgenticBlueprintSchemaschemas.ts包含标题、配色、框架清单、视图、用户流、实现路线图与首个实施阶段含文件清单。澄清提问human-in-the-loop请求信息不足时ThinkAgent 会调用ask_questions工具ask-questions-tool.ts通过前端弹窗clarifying-questions-popup.tsx向用户提出带选项、可多选、可自由输入的澄清问题得到答案后才继续构建。实现与迭代需求进入queue_request队列由 UserConversationProcessor.ts 中的对话型 Agent 中继给后台开发 Agent而 AgenticProjectBuilder.ts 则暴露虚拟文件系统、生成/重生成文件、运行静态分析、部署预览、获取运行时错误、git 提交等工具让 Agent 在模型-工具循环中自主构建、验证、修复。从源码结构可以推断提示词的质量直接影响前三个阶段的输出——类型误判会导致选错模板需求模糊会触发澄清提问拖慢首轮生成功能描述缺失则会让蓝图自行脑补带来后期多轮返工。三、逐条拆解样本提示词它们各自考验平台什么下面逐条分析samplePrompts.md中的 9 条提示词标注其核心需求与平台处理时的关键链路。1. ChatGPT 克隆工具调用 多模型Please build a chatgpt clone for me with a beautiful UI, sidebar, ability to save and retrieve previous conversations, choose between various models etc. It should be able to use tools. Use Cloudflare agents to build it这条提示词同时点名了 UIbeautiful UI、sidebar、数据持久化保存/检索历史会话、多模型选择choose between various models与工具调用use tools并要求Use Cloudflare agents to build it——这正是 VibeSDK 自身的运行形态。它测试的是平台对前后端一体应用 数据存储Durable Object Facet SQLite 模型路由的端到端生成能力复杂度属于moderate级别。2. Cloudflare 数据中心记忆游戏游戏逻辑 计时交互Build a game where I see a map with circles on cities. Each city is a cloudflare datacenter. The map shows with data centres highlighted for 20 seconds, and after that, we show grayed out circles in multiple regions. The users goal is to remember and click as many regions as they can in 20 seconds and get points based on that一条典型的游戏需求。它把规则描述得非常具体高亮 20 秒 → 变灰 → 用户限时点击得分。对应源码中蓝图阶段对游戏类项目的专门要求blueprint.ts 的Algorithm Logic Specification段落必须写明精确规则、胜负条件、计分系统和状态转换必要时给出核心算法的输入输出示例如moveLeft的行变换例子。可见游戏提示词的关键是讲清楚状态机与计分规则。3. 拖拽式 AI 路由编排器可视化编辑器 条件/限流节点Build a drag and drop flow based editor for configuring dynamic routing to ai models. i should be able to add model nodes, conditional nodes, rate limit nodes to build my routing graph这条要求一个拖拽式流程编辑器核心是三类节点模型节点、条件节点、限流节点。它考验平台对可视化编辑器canvas 拖拽、节点连线与后端配置持久化的组合实现能力。提示词通过明确节点类型清单大幅降低了需求歧义——这正是在为predictProjectType与模板选择提供高信号输入。4. 文件管理器仪表盘经典 CRUD 导航结构Create a file manager dashboard with a sidebar for navigation, a main area for file display, a toolbar for actions. The sidebar should allow users to navigate between folders in a natural way. The main area should show files and folders in a grid or list view. The toolbar should have buttons for creating, deleting, and renaming files and folders. I should also be able to open, close, edit the files as well as upload and download files. The design should be clean and modern, with a focus on usability.这条提示词演示了布局优先 功能清单的写法先描述三栏布局sidebar / main area / toolbar再逐项列出操作增删改查、打开编辑、上传下载最后给出设计基调clean and modern, focus on usability。对照PhasicBlueprintSchemaschemas.ts中userFlow.uiLayout、views等字段这类提示词几乎可以直接映射为蓝图中的视图与布局规格生成质量通常很高。5. LLM 评估/沙箱环境并行评测 Judge 模型复杂度最高Please build a tool/dashboard for me for evaluating various LLM models and comparing their performances side by side - in terms of latency and token generation speed (assume 1 token ~ 4 chars or 0.75 words). I should be able to add custom model names, set custom baseUrl and apiKey per model etc from UI itself. I should also be able to evaluate all these models together in parallel on various tasks such as code generation or text generation (I should give a single prompt and have all models work on it in parallel with streaming output, and see how fast they work). The generated code should not be attempted to be executed. Whatever the output for all the models, I should also be able to ask a judge model to evaluate and give rating to each models output w.r.t each other. Thus this should be a complete LLM testing/sandboxing environment这是样本中规格最完整的提示词堪称教科书级它给出了度量口径latency、token 生成速度并假设 1 token ≈ 4 字符/0.75 词、UI 可配置项自定义模型名、baseUrl、apiKey、并行流式评测模式、安全边界生成的代码不执行、Judge 模型互评机制最后用一句话总结定位complete LLM testing/sandboxing environment。这类提示词几乎不需要澄清问题就能直接进入蓝图生成说明约束与边界写得越明确Agent 越不需要自行假设。6. 银行应用极简提示词的对照实验Make a full banking app仅一句极简请求与第 5 条形成鲜明对照。从predictProjectType的规则templateSelector.ts不确定时默认app以及ask_questions工具的说明请求不明确时先澄清再构建可以推断这类提示词要么触发澄清弹窗要么由 Agent 用默认假设补齐账户、转账、交易记录等常见功能。这条样本的实际价值是提醒用户越笼统的需求最终产品越取决于平台与模型的默认偏好。7. 3D 模型查看器专业化领域需求create web-based 3D model viewers for rendering and manipulating 3D assets in real time一条简短但领域指向明确的提示词。它考验模板与蓝图阶段对需要额外引入 Three.js 等 3D 渲染库的识别能力。PhasicBlueprintSchema的frameworks字段专门用于除模板自带依赖外需要追加的框架清单而蓝图提示词明确要求只选开箱即用、无需 API key 的库见 blueprint.ts 的 Frameworks Dependencies 部分——这保证了像 3D 渲染这类强依赖需求能被合理规划。8-9. GitHub 克隆两版迭代功能增量的范例Build a full github clone. I should be able to view a repo page, see issues/PRs, navigate to files, also explore new repos, see my open issues/ other use profiles. There should also be a profile page with the timeline for a users changes, and a github like grid with their contributions. Add any other features to make it a complete github clone.Build a full fledged github clone with all its functionalities. I should be able to create/edit/commit files, make repos, have organizations, pull requests, issues, proper markdown rendering, code rendering, proper code editor, kanban board, github actions, likes, stars, forks, users, etc.两条提示词描述同一类产品但范围差异明显第一版聚焦查看型功能repo 页、issues/PR、文件导航、个人主页与贡献格子第二版升级为完整功能型创建/编辑/提交文件、组织、PR、issues、Markdown 与代码渲染、代码编辑器、看板、Actions、star/fork 等。这组样本演示了渐进式需求增量的写法——第一版验证基础框架第二版在同一主题上扩充功能面。由于两版提示词都足够具体平台可以直接据此判断项目复杂度与实施阶段规划implementationRoadmap而不必依赖澄清。四、从样本与源码中提炼的提示词工程要点综合 9 条样本与平台源码可以沉淀出以下可复用的提示词编写原则功能清单化而非散文化样本 1、3、4、9 都采用我希望能……的逐项列举。结构化枚举比长篇描述更有利于 Agent 提取可执行需求也更容易被queue_request原样转述为实施任务UserConversationProcessor.ts 要求把模糊请求翻译成清晰、可执行的描述。讲清交互与布局样本 220 秒高亮 → 变灰 → 限时点击与样本 4sidebar/main/toolbar 三区证明明确的交互流程和界面分区能直接映射到蓝图userFlow.uiLayout与views字段schemas.ts显著降低首轮实现偏差。显式声明约束与边界样本 5 中的生成的代码不要尝试执行假设 1 token ≈ 4 字符属于需求约束样本 1 的Use Cloudflare agents属于实现约束。约束提前声明Agent 就不必在中途停下来追问见 ask-questions-tool.ts 中范围未明确前不要写文件的指引。复杂度与描述量匹配样本 6一行需求与样本 5大段规格说明平台蓝图提示词本身要求项目复杂度与蓝图规模成比例blueprint.ts 的TASK段落无需过度工程化一个 todo 应用。用户侧也应遵循同样原则简单需求不必堆砌细节复杂需求必须写足规格。善用迭代而非一次性求全样本 8→9 展示了同一主题的两级需求。结合平台先建首个阶段、再逐阶段规划/实现、随后进入代码评审与文件再生循环的状态机见 UserConversationProcessor.ts 中的平台机制说明更稳妥的上手方式是先用小范围提示词跑通主流程再通过追加请求queue_request持续扩展功能并在对话中报告自己观察到的 bug让平台进入修复循环。保持适度明确避免过度指定源码中的系统提示词反复强调修改请求应具体但不要包含代码级实现细节UserConversationProcessor.ts。这意味着提示词应描述做什么、达到什么效果而不是指定具体文件或代码写法——实现细节应交由 Agent 依据模板与蓝图决策。五、进阶把样本改造成你自己的提示词模板参照samplePrompts.md的写法可以总结出一个通用的高质量提示词骨架请构建一个 [产品类型/名称]。 ## 界面与布局 - [主区域/侧边栏/工具栏等结构描述] - [交互流程如先……然后……最后……] ## 核心功能 - [功能 1……] - [功能 2……含输入输出或计分/规则细节] - [功能 3……] ## 约束 - [技术约束如必须使用 Cloudflare Workers / 不使用二进制资源] - [边界约束如不执行生成的代码 / 不需要登录系统] ## 设计基调 [clean and modern / 游戏化 / 数据密集等一句话即可]将上述骨架与本文第三节的样本对照即可发现样本 5 正是这一结构的完美实例。实际使用时你还可以在需求模糊时主动等待平台的澄清问题弹窗用选项或自由文本补全信息对应 clarifying-questions-popup.tsx 的交互若首轮结果与预期不符用追加消息描述具体问题如预览报 maximum update depth exceeded触发deep_debug或queue_request进入修复循环UserConversationProcessor.ts 中的示例对话即展示了这一模式参考 samplePrompts.md 中由简到繁的两级写法先验证核心流程再在同一提示词上增量扩功能面。总之samplePrompts.md不是一份需要逐字照抄的脚本而是一套用自然语言精确描述软件需求的方法论样本。理解它背后的模板选择、蓝图生成与澄清机制源码见 templateSelector.ts、blueprint.ts、ask-questions-tool.ts你就能把任意产品想法压缩成一段信息密度足够、Agent 可直接执行的提示词让 VibeSDK 的生成链路从一开始就走在正确的轨道上。【免费下载链接】vibesdkAn open-source vibe coding platform that helps you build your own vibe-coding platform, built entirely on Cloudflare stack项目地址: https://gitcode.com/GitHub_Trending/vi/vibesdk创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表