6小时极速开发：本地提示词管理器 + vibecoding完整提示词分享

sibuchen · 2026 年4 月 13 日 06:09

6 小时极速开发：本地提示词管理器 + vibe coding 完整提示词分享

作者有话说

作者是计算机科学与技术和市场营销专业的大学生，所以日常会经常使用各类提示词。该项目是以作者自身的真实痛点和需求为起点，利用TRAE SOLO进行vibecoding的6小时极速开发产品。一共经历了6个阶段：“竞品分析–需求分析与功能边界–UI/UX设计–前端（HTML/CSS）–前端与后端–安全与测试”。(目前该项目已经经过了"Canary测试“（由作者与作者的舍友），目前开展”Beta测试“)
项目已经开源至Github仓库，目前为v0.1.0-alpha，正在持续迭代中，目前只是MVP（Minimum Viable Product），所以如果你在看完该篇文章/实际体验后有任何的想法 or 建议都可以在此帖下留言（作者都会一一阅读并答复）(或者在issues下留言)。
该项目是基于TRAE SOLO平台vibe coding的产物，为此帖投票并提交截图至评论区可以私信作者获取该项目vibe coding的全流程提示词。
点击项目中侧边栏的 “History” 会有惊喜哦~

项目信息速览

同类型其它产品的不足

存储在第三方托管的服务器，不够私密且不方便批量处理（如批量复制，不方便使用CLI类的Agent进行批量操作，最好是本地以markdown形式存储）
直接以Github仓库的方式存放，不够直观（不如使用类似于Tree的管理架构）
主要服务于文生图提示词，无法精确解决我的需求（各种类型的前端的后端的 AIGC的最好可以按标签分类）
只是简单的存储，无法进行快速检索，不利于后期使用/维护（快速检索很重要特备是后期提示词文件较多时）
Douker部署，数据加密等等，太”重“了（感觉本地+Web前端就好）
不够美观（UI设计颜色搭配好丑）

开发期间我与TRAE SOLO解决的问题

UI界面不美观
无法与本地数据相关联（如无法关联本地文件夹，无法批量导入导出等等）
标签系统的Bug修复及其性能的优化（如标签方式，双标记的同步策略等等）
检索系统的Bug修复及其性能优化（如卡片的路由跳转，检索算法等等）
文件管理系统的Bug修复及其性能优化（如文件路径丢失与保存覆盖，扫盘策略等等）
编辑器系统的Bug修复（如编辑器跳转，“千层饼”问题等等）
其它细节问题（如文本格式识别，元数据识别等等）

开发期间的Prompt展示(节选)

展示1

任务目标： 优化项目的保存逻辑，确保文件路径追踪的一致性，并增加重名冲突检测机制，防止数据意外丢失。

1. 建立文件位置追踪机制 (Path Persistence)
问题描述：目前修改已有文件后，保存路径会丢失并默认回退到根目录。
需求说明：
	上下文补全：在从 Workspace 或 Library 打开文件时，除了传递文件名和内容，还必须同步传递并记录该文件在工作区中的“父目录路径”或“目录句柄（Handle）”。
	保存预设：在打开保存弹窗（Dialog）时，系统应优先判断当前文件是否有已记录的物理路径。如果有，弹窗内的目标路径应默认选中该路径，而非重置为根目录。
	逻辑区分：明确区分“新建文件”与“保存已有文件”。“保存”操作应默认对原路径进行覆盖确认，只有“另存为”才允许重新选择路径。

2. 增加保存前的冲突检测 (Conflict Detection)
问题描述：新建或另存为文件时，系统会直接覆盖同名文件，导致旧数据丢失。
需求说明：
	前置扫描：在调用底层写入函数之前，系统必须先在选定的目标目录下执行检索操作，检查是否存在同名的 .md 文件。
	阻断与反馈：
		若检测到同名文件，必须立即中断写入流程。
		向用户展示一个警告提示（与项目风格保持一致），明确告知“该目录下已存在同名文件”，并询问用户是“取消操作”、“更改名称”还是“确认覆盖”。
	原子性保证：确保只有在用户明确授权“覆盖”后，才执行实际的物理写操作。

3. 性能与安全性规范
异步处理：检索同名文件和写入文件的操作必须是异步的，且在处理期间保持 UI 的加载状态（Loading）。
状态同步：保存成功后，确保本地缓存（索引文件）和 UI 状态（如文件标题）同步更新，反映最新的物理存储信息。

请先分析目前的保存数据流（涉及 Editor 页面与保存弹窗的交互），提出修改方案后再进行代码实现。

展示2

核心任务： > 基础数据底座已完全稳固（.metadata.json【SavePromptDialog.jsx】已严格保证包含 { tags, preview, lastModified }）。现在请根据以下逻辑，开发项目的 “Library” 模块【Library.jsx】（基于 React, pnpm 和 Tailwind CSS v4.2.2）。
最高准则：全程实现“零文件读取（Zero File I/O）”的极速检索，严禁在渲染和检索时去读取实际的 .md 实体文件内容。
1. 路由与入口配置
在左侧导航栏配置 “Library” 【Library.jsx】入口，点击后无缝切入该页面。
卡片交互（关键）：点击 Library 中的任意结果卡片，系统应自动路由跳转回 “Editor” 【Editor.jsx】页面，并加载对应的 .md 文件内容。
2. 极致性能的搜索与排序引擎 (React 规范)
请严格使用 useMemo 建立数据流的级联计算，确保在 500+ 文件下输入时保持 60FPS：
解析层：初次加载时读取并解析 .metadata.json【SavePromptDialog.jsx】，缓存为全局/局部状态。增加 isLoading 状态加载动画。
过滤层 (多维聚合搜索)：
监听搜索框（支持空格或逗号分隔的多个关键词）。
匹配逻辑：大小写不敏感（Case-insensitive）。采用“或（OR）”逻辑，只要关键词存在于 tags 数组中，或包含在 preview 字符串中，即算命中。
排序层：
相关性优先：根据“命中关键词的数量”计算权重分数，分数高者排前。
时间排序：直接比较 JSON 里的 lastModified 时间戳进行最新/最早排序。
3. Popular Tags 动态生成
算法：基于读取到的 JSON，在内存中实时统计所有标签的出现频率。
交互：按频率降序排列展示 Top N。点击标签可将其自动添加/追加至搜索框中（多选以逗号分隔）。
4. 结果展示与 UI (参考现有设计)
统计信息：顶部实时动态显示“匹配到 X 个结果”。
卡片网格布局：参考现有设计【Library.jsx】，确保HTML与CSS与现有项目风格一致。
卡片数据绑定：
标题：展示文件名（可去除 .md 后缀显得更干净）。
摘要：直接渲染 JSON 中的 preview 内容（限制最多显示 2-3 行，超出使用 line-clamp 省略号）。
底部：遍历展示对应的 tags 标签块。
空状态 (Empty State)：当搜索结果为 0，或 .metadata.json 为空时，展示一个优雅的空状态提示（例如：“未找到匹配的 Prompt” 和一个友好的 SVG 图标）。
请先生成实现计划供我检查（特别是拆分的组件结构和 useMemo 的依赖链设计）。

痛点描述

经常使用各类提示词，种类分布广泛，包括文档编辑，UI设计、前端优化、后端处理、AIGC等等，总是重复的打开本地文件夹或飞书文档，有时还要自己深入查找，不仅麻烦还低效率。于是就有了使用提示词管理器的想法。

产品开发

竞品分析阶段

其实一开始，作者并不想自己开发一个提示词管理器，但是看了很多现有的产品，都不能很好地满足作者的需求。于是就萌生了自己开发一个提示词管理器的想法。该阶段主要利用TRAE SOLO的MTC模式进行竞品分析，分析范围覆盖国内外所有的相关产品。SOLO MTC用了不到20分钟的实践就撰写了一份7000字左右的报告，报告内容覆盖了近40款国内外竞品的详细数据（这一步真的是震惊到作者的小脑袋瓜了！）。