四种典型的输出转换格式
不同输出格式适用于不同表达任务，关键在于匹配场景与目标。
| 格式 | 优点 | 缺点 | 典型用途 |
|---|---|---|---|
| HTML | 功能强大，支持交互和多媒体，浏览器原生支持 | 语法相对复杂，文件体积可能较大 | 网页开发，复杂内容展示 |
| Markdown | 语法简单，易读易写，可转换为多种格式 | 功能有限，复杂布局支持不足 | 文档编写，简单内容创作 |
| SVG | 矢量图形，无损缩放，可脚本控制 | 复杂图形可能文件较大，不适合照片类图像 | 图标，Logo，数据可视化 |
| Mermaid | 文本定义图表，版本控制友好，易于维护 | 需要渲染引擎支持，复杂图表可能受限 | 技术文档中的图表，流程可视化 |
四种格式的案例库
每个案例只给「案例描述 + 对应的提示词」，不附代码。点击案例展开，或一键全部展开 / 收起。
HTML
适合做网页组件、可交互小工具、需浏览器直接打开的展示页。给 AI 的提示词要明确“原生 HTML/CSS/JS、零依赖、可双击运行”。
课堂上或会议间隙常用的倒计时：圆环进度 + 剩余时间 + 开始/暂停/重置，并预设几个常用时长，归零给出提示。适合直接双击运行的单文件小工具。
【身份】我是一名需要带学生做课间休息的老师，不太会写前端。 【背景】课堂上需要一段倒计时，让学生知道还剩多少时间休息。 【任务】请用 HTML 写一个“课间休息倒计时”页面。 【要求】 - 纯原生 HTML/CSS/JS，不依赖任何库，保存为 .html 双击即可运行； - 克莱因蓝（#002FA7）配色； - 显示圆环进度 + 剩余时间（mm:ss）； - 有“开始/暂停/重置”按钮，并预设“课间10分钟 / 眼保健操5分钟 / 番茄钟25分钟”； - 倒计时归零时提示“时间到，该回教室啦”。
正面问题、背面答案的翻页卡片，点击用 CSS 3D 翻转动效切换，适合单词卡、考点卡、面试准备等反复记忆场景。
【身份】我是一名备考学生，想用网页做记忆卡。 【背景】需要把知识点做成可反复翻看的小卡片。 【任务】请用 HTML 写一个“知识点闪卡”。 【要求】 - 纯原生 HTML/CSS/JS，零依赖； - 一张卡片，正面写问题、背面写答案； - 点击卡片用 CSS 3D 翻转动效切换正反面； - 配色克莱因蓝，移动端也能点。
含头像位、姓名、简介、技能标签、联系方式的卡片式单页，适合附在简历或社交资料里，手机上直接打开查看。
【身份】我是一名自由设计师，想有一张可在手机上分享的电子名片。 【背景】发简历时想附带一个能直接打开看的个人主页。 【任务】请用 HTML 写一个“个人在线名片”单页。 【要求】 - 纯原生 HTML/CSS，移动端自适应； - 含头像占位、姓名、一句话简介、3 个技能标签、邮箱/微信占位； - 克莱因蓝主色，卡片式居中布局，质感干净。
组合 SVG 环形进度与柱状图的周度看板，用于向导师/团队汇报学习投入，数据用占位变量方便后续替换。复杂度中等。
【身份】我是一名需要向导师汇报进度的研究生。 【背景】每周想用一页看板展示学习投入情况。 【任务】请用 HTML 写一个“学习投入仪表盘”。 【要求】 - 纯原生 HTML/CSS/JS，零依赖； - 顶部一个 SVG 环形进度（如“本周完成度 78%”）； - 下方一组柱状图对比“阅读/练习/项目/复盘”的小时数； - 数据用占位变量，方便我后续改；克莱因蓝配色。
SaaS 产品落地页的 hero 区块：大标题 + 副标题 + 双 CTA + 配图占位，响应式，移动端单列堆叠。属于营销展示类页面区块。
【身份】我是一名独立开发者，正在做产品的落地页。 【背景】需要一个有说服力的首屏（hero）区块。 【任务】请用 HTML 写一个“产品落地页英雄区”。 【要求】 - 纯原生 HTML/CSS，响应式； - 左侧大标题 + 副标题 + 两个按钮（主“免费试用”/次“看演示”），右侧图片占位； - 克莱因蓝主色，间距舒适，移动端单列堆叠。
Mermaid
适合把流程、关系、时序、时间线画成图。提示词要写清“图类型（flowchart / sequence / gantt / mindmap）+ 节点与连线含义”。
用流程图表达“待机 / 倒计时中 / 已暂停 / 时间到”的状态切换，连线标注触发动作。最基础的流程图场景。
【身份】我在学习如何用 AI 画流程图。 【背景】想把一个简单的“倒计时”状态机画出来。 【任务】请用 Mermaid 的 flowchart 画“课间倒计时状态流转图”。 【要求】 - 节点：待机 / 倒计时中 / 已暂停 / 时间到； - 连线标注触发动作（点击开始/暂停/继续/归零/重置）； - 用 TD 纵向布局，中文节点文字。
用时序图展示“我—AI”在提示词协作中的多轮往返（提交 / 返稿 / 指出问题 / 修订 / 使用），适合团队规范文档。
【身份】我是一名产品经理，常和 AI 协作写文档。 【背景】想梳理与 AI 的协作流程用于团队规范。 【任务】请用 Mermaid 的 sequenceDiagram 画“提示词评审往返图”。 【要求】 - 参与者：我、AI； - 顺序：我提交含 I/O/S 的提示词 / AI 返回初稿 / 我指出问题 / AI 修订 / 我使用； - 用中文标注每步动作。
把“提示词写作”知识体系梳理成思维导图，一眼看清结构。适合做学习地图、知识整理。
【身份】我正在整理提示词写作的学习地图。 【背景】需要一个一眼看清知识结构的导图。 【任务】请用 Mermaid 的 mindmap 画“提示词写作知识图谱”。 【要求】 - 根节点：提示词写作； - 分支：诊断（六类缺信息）、框架（IOS / 表达框架）、输出（HTML / Mermaid / SVG / Markdown）、实战（场景模板 / 实验室）； - 中文节点。
用甘特图展示小型项目（需求 / 设计 / 开发 / 测试 / 上线）的排期与里程碑，适合项目周报、启动会。
【身份】我是一名项目组长，要给团队一份可视化的排期。 【背景】下周要启动一个小项目，需要清晰的进度条。 【任务】请用 Mermaid 的 gantt 画“项目排期甘特图”。 【要求】 - 任务：需求评审、UI 设计、前端开发、联调测试、上线，每段 2–5 天； - 标注里程碑“提测”“上线”； - 日期用 2026-07 的相对区间即可，中文任务名。
技术场景下画“输入账号密码 / 校验 / 成功/失败”的登录流程，失败回到重试、成功进入首页。适合技术方案评审。
【身份】我是一名后端新人，需要给同事讲清楚登录流程。 【背景】准备技术方案评审，要画一张登录流程图。 【任务】请用 Mermaid 的 flowchart 画“用户登录流程图”。 【要求】 - 节点：输入账号密码 / 校验 / 判断（成功/失败）； - 失败分支回到“提示错误并重试”，成功进入“首页”； - 用菱形表示判断，中文标注。
SVG
适合做图标、Logo、信息图、需无损缩放或精确控制的图形。提示词要写清“图形元素、尺寸、配色、是否可脚本控制”。
一个灰底圆环 + 克莱因蓝前景圆环（用 stroke-dasharray 表示进度），圆心显示剩余时间文字，可嵌网页。最基础的 SVG 图形。
【身份】我在学用 SVG 画简单图形。 【背景】想做一个可嵌网页的进度环。 【任务】请用 SVG 画一个“倒计时进度环”。 【要求】 - 一个灰底圆环 + 一个克莱因蓝前景圆环（用 stroke-dasharray 表示进度）； - 圆心显示文字“07:30”； - viewBox 160x160，颜色 #002FA7，给出可改的 dashoffset。
五维能力雷达图，画网格多边形 + 一根半透明数据多边形，维度文字标在顶点外。适合能力画像、对比展示。
【身份】我是一名培训讲师，想展示学员的能力画像。 【背景】需要一张五维能力雷达图做对比。 【任务】请用 SVG 画一个“能力雷达图”。 【要求】 - 5 个维度：诊断、框架、输出、实战、复盘，等距分布； - 画网格多边形 + 一根克莱因蓝数据多边形（半透明填充）； - 维度文字标注在顶点外，viewBox 220x220。
以字母 H 为主形、结合克莱因蓝几何的简洁 Logo，单色可用，适合做 favicon、头像、水印。
【身份】我正在做一个个人品牌，需要一个小图标。 【背景】想要一个简洁、可缩放的 SVG Logo。 【任务】请用 SVG 设计一个“几何风格个人 Logo”。 【要求】 - 以字母 H 为主形，结合克莱因蓝方块/圆形几何； - 整体在 64x64 viewBox 内，简洁、可单色使用； - 给出可改色的 fill 变量。
用 SVG 手绘一条周学习时长折线图，含坐标轴、连点 polyline 与数据点圆，适合嵌进周报。
【身份】我想把一周的学习时长做成小图嵌进周报。 【背景】需要一张简洁的折线图。 【任务】请用 SVG 画“周学习时长折线图”。 【要求】 - 横轴周一~周日，纵轴 0–6 小时； - 用 polyline 连点 + 每个数据点画小圆； - 克莱因蓝线条，浅灰坐标轴线，viewBox 320x200，中文轴标签。
书桌、台灯、书堆、咖啡杯组成的扁平学习场景插画，无渐变、可分组调色，用作页面头图或装饰。
【身份】我要给学习网站做一张头图插画。 【背景】想要扁平、矢量、可换色的装饰图。 【任务】请用 SVG 画一张“扁平学习场景插画”。 【要求】 - 元素：书桌、台灯、一摞书、咖啡杯，几何扁平风； - 主色克莱因蓝 + 浅灰辅助，无渐变； - viewBox 400x300，分组命名方便我后续调色。
Markdown
适合写文档、纪要、清单、博客、README。提示词要写清“标题层级、列表/表格、强调方式、导出目标格式”。
一句话简介 + 无序成果列表（关键词加粗）+ 下一步待办，能直接贴进飞书/语雀等文档工具。最常用场景。
【身份】我是一名运营，每周要交工作周报。 【背景】想用 Markdown 快速产出整洁的周报。 【任务】请用 Markdown 写一段“本周工作周报”。 【要求】 - 二级标题“本周工作回顾”； - 用无序列表列 3 条成果，关键词加粗； - 末尾“下一步”列 2 条待办； - 方便我直接贴进飞书/语雀。
含时间/主持人/参会人、议题结论（有序列表）、待办（带负责人 @ 的任务清单），可归档、可勾选。
【身份】我是一名会议记录者。 【背景】开完项目周会，需要一份可归档的纪要。 【任务】请用 Markdown 写“项目周会纪要”。 【要求】 - 一级标题 + 时间/主持人/参会人（加粗）； - “议题与结论”用有序列表； - “待办”用任务清单（含负责人 @），可勾选。
开源/内部工具的标准说明文档：简介 + 功能特性 + 安装 + 快速开始（代码块）+ 使用示例 + 贡献与许可证。
【身份】我写了一个给别人用的小脚本。 【背景】需要一个标准 README 让别人会用、会贡献。 【任务】请用 Markdown 写一份“项目 README”。 【要求】 - 标题 + 一句话简介； - 二级标题：功能特性、安装、快速开始（代码块）、使用示例； - 加一个“如何贡献”小节与许可证说明。
文章名（一级标题）+ 5–7 个章节（二/三级标题）+ 每节要点，末尾含总结与行动清单。适合写作卡壳时搭骨架。
【身份】我是一名技术博主，常卡在列大纲。 【背景】要写一篇“如何写好提示词”的文章。 【任务】请用 Markdown 给出“博客文章大纲”。 【要求】 - 一级标题为文章名； - 用二/三级标题搭建 5–7 个章节，每节下给 2–3 个要点（无序列表）； - 末尾加“总结”与“行动清单”。
背景/目标（引用块）+ 功能点表格（功能/说明/优先级）+ 可测验收标准（有序列表），用于向研发对齐需求。
【身份】我是一名产品，要向研发讲清需求。 【背景】准备一个轻量 PRD 对齐开发。 【任务】请用 Markdown 写“功能需求说明（PRD 摘要）”。 【要求】 - 一级标题 + 背景、目标（用引用块）； - 功能点用表格（功能 / 说明 / 优先级）； - 末尾“验收标准”用有序列表，明确可测条件。