Prompt万能模板 = 立角色 + 述问题 + 定目标 + 补需求

在编写 Prompt 时，从0到1地编写出第一版 Prompt 往往是最难的，而基于已有 Prompt 利用各种技巧进行优化则相对简单。如上图所示，我们使用了一套 “万能模版”，把一个 Prompt 拆分成了 “立角色 + 述问题 + 定目标 + 补要求” 这四个部分，利用这个模版可以得到一个“及格”的 Prompt。下面我就具体和大家阐述一下这个模版是如何得到的，为什么他是有效的。

Prompt 的作用就是根据我们的问题调用模型的能力，我们要通过提问的方式，明确的让模型知道我们想要什么，我们的目标是什么，从这个基本思想出发，Prompt 应该包含以下几点：
问题是什么，你要做什么，有什么要求。

问题是什么：首先你要告诉模型你的问题是什么，你的任务是什么，要尽量描述清楚你的需求。
你要做什么：下面你需要告诉大模型具体要做什么，比如做一份攻略，写一段代码，对文章进行优化，等等。
有什么要求：最后我们往往还需求对任务补充一些要求，比如按特定格式输出，规定长度限制，只输出某些内容，等等。

通这 3 部分的描述我们就把 “要大模型做什么” 描述清楚了，这个想法十分自然，即便不是大模型，而是希望其他人为你完成某项任务，往往也需要通过这 3 部分把问题描述清楚。由于这仅仅是第一版 Prompt，你不需要描述的过于详细，也不需要使用技巧，只需要用简练的语言把这几部分描述清晰即可。

问题是什么

我们现在要做一个云小课的 app，类似于 mooc 这样的一个学习平台，他的服务对象是医疗方面从业者（医学生，护士，护士长，医生），云小课的 MVP 版本要在一个星期内做出来，所以一开始不需要很多复杂的功能，但是有几个核心功能需要在 MVP 版本上线，1. 课件生成视频，2. 视频生成课件，3. 视频出题，4. 视频观看体验（加字幕、分小节+课程大纲等）5. 核心业务流程(产品)a. 发起者分享小课到小课的群内或者微信群/个人b. 群内人学习：过程AI干预、数据AI统计分析6. 后台管理（课件、用户、数据），现在你需要帮我理清楚页面结构，哪些页面有哪些功能。
（注意到我上买你不仅用序号编排了顺序还用了字母，让ai明白了功能上的一个层级结构）

大模型会给你一个还不错的结果，这个结果他帮你把页面层级理清了，就比如这样：

核心页面架构（共8大模块）

首页（课程广场）

智能推荐区：AI根据用户身份（医学生/医生/护士长）推荐急救技能、病例解析等垂直内容
课程分类导航：按「手术操作」「护理规范」「医学影像」「职称考试」等医疗专题分类
热门课程排行榜：显示24小时学习量TOP10的临床教学课程
快速创建入口：悬浮按钮直达「创建小课」功能

课程创建页

_课件生成视频_：
- 支持上传PPT/PDF（自动转视频）
- AI语音合成医学专业术语（可切换男/女声医学发音）
- 视频分段标记（自动识别PPT章节生成时间轴）
_视频生成课件_：
- 手术录像智能提取关键帧生成图文课件
- 自动标注医疗仪器名称（如内窥镜型号识别）
  视频学习页
医疗专用播放器：
- 双字幕系统（主字幕+医学名词术语解释浮层）
- 章节导航（支持按「术前准备」「操作步骤」「术后处理」跳转）
_视频出题模块_：
- AI在关键操作节点弹出选择题（如「此处应选择几号缝合线？」）
- 病理图片标注题（标记CT影像病灶区域）

学习群组页

_分享流程_：
- 支持将课程生成带医院LOGO的H5页面
- 微信群嵌入AI助教（自动@未完成学习者）
_AI干预系统_：
- 学习进度看板（护士长可查看组员完成率）
- 智能错题提醒（针对高频错误操作推送补充资料）

个人中心

医疗身份认证：执业医师/护士资格证上传核验
学习档案：
- CME学分统计（符合继续医学教育要求）
- 手术操作熟练度雷达图（AI评估技能短板）

后台管理系统

_医疗内容审核_：
- 敏感词过滤（药品名称合规性检查）
- 专家评审流程（三甲医院主任医师审核权限）
数据看板：
- 学习热力图（显示各科室活跃时段）
- 医疗事故关联分析（标记高风险操作学习记录）

你要做什么

下面一步就是你要做什么，在功能梳理好之后，你就需要告诉大模型你想要的页面效果，做到详细，限定好范围。这一步可以用上黄金法则：立角色 + 述问题 + 定目标 + 补要求

立角色
明确AI的「身份」，激活其专业能力包。
✅ 示例：
“你现在是拥有10年经验的高级软件工程师，精通代码重构和设计模式，曾成功优化多个大型遗留系统。”
述问题
- 任务拆解：将复杂需求拆分为子任务（如开发用户注册功能时拆解为数据模型设计、验证逻辑等）
- 背景补充：提供代码片段、需求文档等上下文信息
  ✅ 示例：
  “我需要开发一个用户注册功能，包含以下子任务：1.设计用户数据模型；2.实现防机器人注册策略…”
定目标
定义清晰的输出标准，避免开放式提问。
✅ 示例：
“生成的代码需满足：①遵循SOLID原则；②包含单元测试；③提供API文档”
补要求
- 格式规范：如“使用Markdown格式，代码块标注语言类型”
- 约束条件：“避免解释性文字，仅输出JSON格式结果”

下面来看看我的Prompt：

1.产品界面规划：你是一个经验丰富的UI设计师，现在需要你根据页面结构定义关键界面，确保信息架构合理 (立角色)
2.用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。**(立角色)**
3.高保真 UI 设计，作为 UI 设计师，设计贴近真ios/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。（立角色)

这里插一句话，在ui设计的地方可以告诉大模型你对标的是哪一款应用的ui，大模型会根据你的偏好生成更适合你的风格，比如：小红书风格，知乎风格，Netflix风格等等。

4.HTML 原型实现：使用 HTML + Tailwind CSS （或者 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他 UI 组件）让界面更加精美，洁净真实的 APP 设计。拆分代码文件，保持结构清晰 (定目标)

5.每个界面应作为独立的 HTML 文件存放，例如home.html,profile.html,settings.html 等。

index.html 作为主入口，不直接写入所有界面的 HTML 代码、而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面平铺展示在 index 页面中，而不是跳转链接。（述问题）
真实感增强（述问题）：
- 界面尺寸模拟 iPhone15 pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符（可从 Unsplsh、Pexels、Apple 官方 UI 资源中选择）
- 添加顶部状态栏（模拟 ios 状态栏），并包含 App 导航栏（类似 ios 底部 TarBar）
  请按照以上要求生成完整的 HTML 代码，并确保其可以用于实际开发。（补要求）
最终得到的效果如图：

其中我个人认为立角色和补要求是最为重要的，因为有研究显示大模型在接受prompt的过程中，对于开头和结尾的内容更加关注，attention权重更高。

一个好的prompt + 一个好的工具（cursor） => 一个好的作品

如果你觉得是巧合，你可以用同样的方法生成一个好的后台管理系统的原型图。

企业级后台原型设计需求说明书
产品界面规划：作为UI设计师，定义关键界面，确保信息架构合理。生成高保真 UI 设计，设计贴近真实网页页面设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。 1. 项目背景定位 系统类型：B端管理系统（如CRM/ERP/数据中台）用户角色：管理员（80%）、审核员（15%）、访客（5%）设计规范：参照Ant Design Pro 5.0/TDesign 4.0设计系统 2. 核心功能规划 - ▸ 全局导航：三级菜单（主菜单240px + 子菜单200px） - ▸ 数据看板：支持ECharts/D3.js动态可视化（含实时刷新） - ▸ 表格系统：列配置记忆（LocalStorage）虚拟滚动（10万+数据处理） - ▸ 权限体系：RBAC权限颗粒度控制（按钮级） 3. 视觉规范定义 主题色系：#1677FF（主色）+ 5级灰度体系字体方案：HarmonyOS Sans（中文字体） + Inter（英文字体）组件库：Ant Design Pro Table/ProForm 高级组件 4. 技术实现要求 开发框架：Vue3 + Vite5 / React18 + Next.js 样式方案：Tailwind CSS 4.0（JIT模式）交互增强： * 骨架屏加载动画数据加载延≥300ms时触发 *错误边界处理（全局捕获React/Vue错误）使用真实的 UI 图片，而非占位符（可从 Unsplsh、Pexels、Apple 官方 UI 资源中选择） 请按照以上要求生成完整的 HTML 代码，并确保其可以用于实际开发。

效果如下：
Lena