下面给出“格式转换”方向的在线工具生成型提示词示例。每条提示词都要求 AI 直接输出可用的 HTML 源码(至少包含完整的 index.html),并包含文件树、源码、运行方式与 QA 清单,便于离线交付与验收。
Markdown 多文档 -> 可检索知识库单页
把多篇 Markdown 快速变成带目录、搜索与高亮的知识库网页。
提示词 (Prompts):
你是资深前端工程师与技术写作者。请直接生成一个“离线可用”的静态知识库网页交付包。
硬约束:你的回答必须直接给出可用的 HTML 代码(必须包含完整的 index.html 内容;代码用三反引号包裹并标注 html)。你不需要描述任何“导出/一键导出 HTML”的产品功能,而是直接输出 HTML 源码作为交付物。
不允许使用任何 CDN/外链依赖;如需脚本与样式请放在本地 assets/ 下并给出完整源码。
输出结构必须包含:
1) 文件树(至少 index.html;可选 assets/style.css、assets/app.js);
2) 每个文件的完整源码;
3) 使用说明(离线双击打开 + 可选本地静态服务器);
4) 至少 12 条 QA/测试清单(含边界情况与错误提示)。
业务需求:
- 输入:在页面内粘贴多篇 Markdown(用分隔符 ---DOC--- 区分),每篇可带标题行。
- 转换:把 Markdown 转为 HTML(至少支持标题/列表/代码块/表格/引用/链接)。
- 组织:左侧目录树(按文档与标题层级折叠),右侧正文;顶部提供全文搜索(关键词高亮、跳转定位)。
- 体验:代码块提供复制按钮;支持浅色/深色切换;@media print 打印友好(隐藏导航、保留正文)。
- 数据:支持导入/导出 JSON;内容存 localStorage;提供一键清空与恢复默认示例。
- 安全:所有渲染做 XSS 基础防护(至少转义/白名单)。
主要用途:
适用于把零散笔记/说明文档整理成一个可离线打开的知识库页面,便于检索、阅读、打印与交付。
Markdown 清单 -> 资源导航页(筛选/收藏/导出)
把 Markdown 资源清单渲染成可筛选的导航页。
提示词 (Prompts):
你是资深前端工程师与技术写作者。请直接生成一个“离线可用”的静态知识库网页交付包。
硬约束:你的回答必须直接给出可用的 HTML 代码(必须包含完整的 index.html 内容;代码用三反引号包裹并标注 html)。你不需要描述任何“导出/一键导出 HTML”的产品功能,而是直接输出 HTML 源码作为交付物。
不允许使用任何 CDN/外链依赖;如需脚本与样式请放在本地 assets/ 下并给出完整源码。
输出结构必须包含:
1) 文件树(至少 index.html;可选 assets/style.css、assets/app.js);
2) 每个文件的完整源码;
3) 使用说明(离线双击打开 + 可选本地静态服务器);
4) 至少 12 条 QA/测试清单(含边界情况与错误提示)。
业务需求:
- 输入:一份 Markdown 清单(每行一个条目:标题|URL|标签|摘要)。
- 生成:把清单渲染为可筛选的资源导航页(按标签筛选、按关键词搜索、支持排序)。
- 交互:卡片模式/列表模式切换;支持收藏(localStorage);支持导出当前筛选结果为 JSON。
- UI:提供“快速上手”示例数据;页面顶部展示统计(条目数、标签数、最近更新)。
主要用途:
用于把链接清单“产品化”,离线可用,适合团队共享与持续维护。
Markdown -> 代码片段索引与复制面板
把 Markdown 里的代码块抽取出来,生成可筛选的代码索引。
提示词 (Prompts):
你是资深前端工程师与技术写作者。请直接生成一个“离线可用”的静态知识库网页交付包。
硬约束:你的回答必须直接给出可用的 HTML 代码(必须包含完整的 index.html 内容;代码用三反引号包裹并标注 html)。你不需要描述任何“导出/一键导出 HTML”的产品功能,而是直接输出 HTML 源码作为交付物。
不允许使用任何 CDN/外链依赖;如需脚本与样式请放在本地 assets/ 下并给出完整源码。
输出结构必须包含:
1) 文件树(至少 index.html;可选 assets/style.css、assets/app.js);
2) 每个文件的完整源码;
3) 使用说明(离线双击打开 + 可选本地静态服务器);
4) 至少 12 条 QA/测试清单(含边界情况与错误提示)。
业务需求:
- 输入:粘贴一段 Markdown(包含大量代码块),工具自动生成“代码索引”与“片段目录”。
- 功能:按语言/文件名筛选代码块;一键复制;支持在正文中定位该片段出现的位置。
- 输出:交付依然是可离线打开的 index.html(可选本地 assets/),并提供 QA 清单。
主要用途:
适合把教程/规范文档里的代码片段集中管理,提升查找与复用效率。
补充说明:本主题强调“交付即代码”,因此每条提示词都应要求给出 index.html 完整源码,并且要求不依赖外部网络资源。知识库页面建议包含:目录折叠、面包屑、搜索高亮、定位滚动、复制按钮、错误提示、深色模式、打印样式、以及数据导入导出。QA 清单建议覆盖:空内容、超长文档、特殊字符、Emoji、不同浏览器、移动端适配、键盘可达性、XSS 过滤、localStorage 满额、以及搜索性能。发布时可按同一主题继续扩展更多场景以满足字数要求与信息密度。
提示:为了通过内容长度要求与可读性要求,实际发布时建议每条提示词补充更具体的 UI 细节、错误提示文案与测试用例覆盖(例如空输入、超大文本、非法 Markdown 语法、搜索无结果、localStorage 配额不足等)。