AI原型工程提示词生成器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_b13835cb/proto-prompt-generator 到你的 AI 助手中。
技能介绍
解决什么问题
把一句模糊的产品想法丢给 AI 编程工具,得到的往往是一次性生成的整套原型代码。问题不在于工具不会写,而在于结果难以控制:目录结构可能混乱,页面之间缺少统一约定,后续要调整时只能重来。原型阶段的需求又天然不稳定,UI、字段和交互都在变,一次性生成反而放大了返工成本。
@user_b13835cb/proto-prompt-generator 不直接生成代码,而是先把需求转成一组按层级组织的提示词,让 AI 工具逐步搭建可交互的前端原型。
核心能力
- 渐进式生成:先搭工程骨架,再补模块和页面细节,不要求 AI 一次输出全部代码
- 分层拆解:需求被拆成
P0项目骨架、P1模块、P2复杂交互、P3公共组件四个层级,每层可独立验证 - 输入适配:支持模糊描述、需求文档、功能清单、设计稿截图和已有原型改造等输入形式,必要时先提问澄清
- 工具通用:提示词面向 Codebuddy、Trae、Cursor、Claude Code、Codex 等工具设计,格式不绑定单一 IDE
工作流程
- 分析输入并识别类型,模糊需求先引导补全关键信息
- 确认原型类型、技术栈和数据方案,UI 风格只做轻量确认
- 按业务域拆解模块、页面、功能点和数据模型,并与用户核对
- 按层级生成
P0到P3的 Markdown 提示词文件,输出到proto-prompts/目录 - 逐层交给 AI 工具执行,每层完成后验证页面渲染、菜单导航、路由和控制台报错
跨层连续性
分段执行最大的风险是层间断裂:后续提示词覆盖或破坏了前面的工程成果。因此每份 P1 及之后的提示词都强制包含四个衔接章节:前置工程状态检查清单、上下文衔接说明、文件归属边界、执行后完整性验证。模块间的数据和组件依赖也在拆解阶段预先标注,P1 按依赖顺序执行,共享 Mock 数据统一维护。
适用边界
- 面向前端原型 demo,默认使用 Mock 数据;真实的后端 API 设计不在范围内
- 当前内置后台管理、移动端 H5、小程序、数据看板、官网营销页五种类型模板,桌面应用或 CLI 工具需评估后再用
- 分层执行才能发挥价值,一次性把所有提示词丢给工具会失去可控性
- 用户未明确的细节标注为
[待确认],不自行假设填充
使用场景
- 拿着一句产品想法,要让 AI 工具先搭后台管理系统的空架子,再逐个补页面
- 需求文档已经写好,要把 PRD 拆成模块清单并生成分层提示词让 AI 逐步实现
- 手上有设计稿截图,需要先提取页面结构和字段,再生成对应的前端原型
- 原型交互复杂、涉及状态流转和数据联动,要单独产出 P2 详细设计提示词
适合人员
- 从零做前端原型的个人开发者,想在不写大量样板代码的前提下快速看到可点击的效果
- 对接客户但需求还没定型的外包工程师,需要先把模糊想法落成可演示的 demo
- 用 AI 编程工具搭建内部管理系统的全栈开发者,希望按模块逐步推进而不是一次性生成整套代码
- 需要用可视化原型验证交互流程的产品经理,想绕开手写代码直接产出可操作的界面