纯本地文本差异比对与高亮查重器
无论是审查合同修改痕迹,还是比对两段代码的不同,这个工具都是绝对的刚需。纯本地处理机制,让你的机密商业文本绝不外泄。
复制下方提示词发给 AI (如 Claude/Cursor):
请用纯 HTML+JS+CSS 编写一个“文本差异比对工具”。
核心要求:
1. 技术框架:引入 diff-match-patch 纯前端库,禁止任何后端比对。
2. 界面布局:采用左右双栏同步滚动设计。左侧输入原文本,右侧输入修改后的文本。
3. 核心比对:实时监听输入,自动以不同底色高亮显示差异处(例如:新增的内容用浅绿色高亮,删除的内容用浅红色高亮并带删除线)。
4. 交互优化:提供一个“互换位置”按钮和一键清空按钮;双栏在垂直滚动时必须保持行号与内容的严格对齐同步。
5. UI 风格:现代极简的编辑器风格,使用细微的圆角和低对比度的莫兰迪色系背景。
6. 交付:输出单文件 index.html 源码,确保离线可用。
Markdown 一键转动态思维导图渲染器
把枯燥的会议记录和阅读笔记,瞬间变成结构清晰的思维导图。这个工具能实时解析大纲,直接生成可交互的脑图,非常适合汇报和复盘。
复制下方提示词发给 AI:
请开发一个“纯本地 Markdown 转思维导图可视化工具”。
核心要求:
1. 核心技术:引入 markmap 库或类似的纯前端 SVG 渲染引擎。
2. 交互逻辑:左侧为 Markdown 文本编辑区(实时语法高亮),右侧为全屏可视化的思维导图展示区。支持鼠标拖拽画布、滚轮缩放查看脑图节点。
3. 节点交互:右侧的思维导图必须支持点击节点折叠/展开子节点,动画要求丝滑。
4. 导出功能:提供一键将当前右侧的脑图状态导出为 SVG 矢量图或高清 PNG 图片的功能。
5. 视觉规范:支持浅色/暗色模式切换,导图的线条颜色要求自动生成高级渐变色。
6. 交付:HTML 单文件代码交付,代码需注释清晰。
正则表达式可视化实时测试台
写正则对于很多人来说就像看天书,这个工具不仅能实时测试你的正则是否生效,还能直接把你的匹配逻辑拆解并高亮显示,调试利器。
复制下方提示词发给 AI:
请编写一个“纯前端正则表达式可视化测试与生成工具”。
核心要求:
1. 核心布局:顶部输入正则表达式(支持勾选全局、忽略大小写等修饰符),中间输入测试文本,底部实时显示匹配结果表格。
2. 实时高亮:用户在中间输入文本时,如果符合正则规则,必须用鲜艳的高亮底色动态标出匹配片段。如果有多个匹配组,使用不同颜色区分。
3. 知识速查:在侧边栏提供一个常用的正则表达式速查字典(如手机号、邮箱、身份证),点击即可一键填入测试。
4. UI 风格:借鉴 Apple Liquid Glass 风格,采用半透明面板和暗色背景,极客感拉满,但输入框文字需保证高对比度。
5. 交付:输出 index.html 单文件源码。
无限画板式极简待办与灵感收集器
普通的列表待办太死板了!我们用 AI 生成一个基于无限画板的便利贴面板,你可以随意拖拽、分组,非常适合用来做头脑风暴和视觉化任务管理。
复制下方提示词发给 AI:
请开发一个“纯本地无限画板与便利贴看板系统”。
核心要求:
1. 核心依赖:使用 Fabric.js 或原生的 Canvas/DOM 拖拽 API 构建一个支持无限平移的底层画板。
2. 便利贴系统:双击画板空白处即可新建一张彩色便利贴(支持修改便签颜色)。便利贴可以自由输入文字、拖拽位置。
3. 本地存储:在不需要任何后端的情况下,利用浏览器的 LocalStorage 实时自动保存当前画板的所有便签位置和内容,刷新网页不丢失数据。
4. 整理操作:支持框选多张便利贴进行批量移动或对齐;提供一个小地图(Minimap)或“一键回到中心”按钮。
5. 交付:HTML 单文件交付,要求逻辑模块划分清晰。
核心总结:
制作办公效率类工具,最关键的是向 AI 强调状态保存(如 LocalStorage)和复杂的交互逻辑(如双栏同步滚动、无限平移画布)。把这些专业需求描述清楚,AI 就能帮你跨越技术门槛,打造出顺手丝滑的神仙应用。