Skip to content

Latest commit

 

History

History
197 lines (144 loc) · 7.88 KB

prompts.md

File metadata and controls

197 lines (144 loc) · 7.88 KB

AI Prompts（提示语）文档

暴论）Prompts 文档将替代需求文档、技术方案文档（逃

跳到总结

核心模块的 Prompts

前置操作：使用 vite + Svelte + ts 模板生成项目，移除无关代码。

窗口布局组件

创建空白文件 Layout.svelte

@Layout.svelte

我需要使用 svelte 实现类型 MacOS 下的 Finder App。
布局结构：
1. 左侧快捷导航区域，包括“个人收藏”，“标签”两个分组
2. 右侧上方是工具栏，包括“前进 后退” icon，当前文件夹名字，以及一系列功能相关 ICON
3. 右侧工具栏下方是主内容区域，显示文件、文件夹信息

能用自然语言快速描述的改动，就不要动手写代码。

siderbar 元素应该固定宽度，不受右侧内容的影响

文件夹内容列表组件

创建空白文件 DirList.svelte

@DirList.svelte

参考 MacOS 的 finder，以列表形式展示文件夹的内容。
最上方是表头，包括：名称、大小、修改日期、创建日期 四列。
1. 名称列显示文件、文件夹的名字，名字左边是文件夹或文件的 icon
2. 如果当前行是文件夹，名称列允许展开/折叠文件夹的内容，默认折叠状态，所以 DirList 是一个递归组件，用于支持地轨展开子文件夹内容
3. “大小“列显示文件的体积大小，文件夹使用 “--“ 占位；文件体积原始数据单位是 byte，页面显示单位需要格式化为”字节、KB、MB、GB“，最多保留一位小数
4. 修改日期、创建日期列，将时间戳格式化为本地时间字符串，包含”年、日、月、小时、分钟“

视觉效果差距较大，不必着急动手写 css，让 AI 先改一次。
提供截图、说明需要改进的方向。

@image(上传截图) @Layout.svelte @DirList.svelte
参考该截图优化 Layout、DirList 组件的样式，主要优化点包括：边框、背景色、窗口阴影

文件选中

不仅仅是 UI 界面，在偏逻辑的场景 AI 生成的代码也很好用。

让我惊艳的地方在于，按住 shift 点选文件批量选中效果；
在我没提供详细描述的情况下，它也能准确理解“两个文件之间的所有文件”；
数据是树形结构，两个文件节点可能距离很远且层级不同。

@DirList.svelte @App.svelte

请在 DirList 组件中实现文件、文件夹选中功能。
通过鼠标点击选中单个文件、文件夹；按住 cmd 或 ctrl 按键时点击文件实现多选中能；
按住 shift 按键点击文件时，选中最后一个被选中的文件到当前点击文件之间的所有文件。
需要考虑 DirList 嵌套的场景。
将选中的文件、文件夹的 id（即 path）存储在 App 组件中。

拖拽移动文件

拖拽、放置（DnD）是非常常见的功能需求，实现并不难、但代码量大且繁琐。
下面提示语描述的是功能与限制，AI 很聪明地补全了交互时的样式变化。
AI 非常适合做这种有很多资料（先例）的功能，甚至不用提供非常详细的描述，它也能精确理解。

@DirList.svelte
列表中的元素（文件、文件夹）应该是可拖拽的（draggable），
可拖拽列表元素将其放置到文件夹中，从而改变数据结构，成为文件夹的子元素；
其中文件类型不包含子元素，所以不能成为放置的目标。

右键菜单

“懒“到极致。
像这种很长的功能描述提示语，新建一个空白文件编写提示语，不要在 Chat 框中慢慢输入。
AI 会帮你补全正在写的文字描述，对于常见的功能功能描述，准确率还不错。
不常见的内容，AI 提供的补全反过来会是一种打扰，可了解一下开关 AI 补全的快捷方式，按需使用。

@image(上传的图片) @ContxtMenu.svelte @App.svelte

参考该图片的样式，使用 Svelte 5 语法实现一个右键菜单组件。功能描述：
1. 组件从 props 接收一个 items 数组，数组中的每个元素是一个对象，对象包含 icon、name、 children、onClick 属性，icon 是可选项。
2. children 类型与 items 一致，用于支持多级子菜单
3. 鼠标 hover 时，菜单项有高亮效果，点击时执行 onClick 函数
4. 如果菜单项有 children 属性，鼠标 hover 时 延迟 300ms 展开子菜单，鼠标离开隐藏子菜单

@App.svelte
当鼠标右键 Layout 组件的空白区域时，显示右键菜单。
右键菜单的内容：新建文件夹、新建文本文件。

当鼠标点击 DirList 组件中的文件、文件夹时，显示右键菜单。
右键菜单的内容：删除、复制、打开方式, 打开方式 包含子菜单： 文本、图片、视频、音频。

复制/删除功能

因为数据是树形结构且支持多选，复制/删除需要先识别出公共节点，需要一定的逻辑描述。

另外，我们可以明确让 AI 创建函数，这样可以更好地达到复用目的（复制删除都需要识别公共节点），和隔离逻辑复杂性；
否则 AI 可能会把一段代码写得太长，降低可维护性。

@App.svelte
如果 hitItem 是被选中状态（在 selectedIds 中），那么需要复制所有被选中的元素。
所以：
1. 需要创建一个函数，从 selectedIds 筛选出公共节点，如被选中的节点结构如下((a (b c)) d)，a节点包含 b c节点，那么 a、b、c 的公共节点是 a，只需要保留 a、d 节点
2. 复制筛选出来的 a、d 节点

如果 hitItem 没有被选中，那么只需要复制 hitItem 节点即可；
创建一个函数实现复制节点功能，参考现有实现，需要区分 file、dir 类型

需要手动的场景

  1. 资料少非通用场景，如本项目依赖 opfs-tools 操作文件
  2. 需要精调的数据的场景，如颜色值、宽高等属性
  3. 10 行代码就能解决的问题
    提示语写多了会逐渐依赖这种方式，有时候手动调整代码会更快，不必强行用提示语
  4. 一些通用场景，已有成熟的可以复用组件或代码
    比如本项目通过鼠标拖拽缩放窗口功能，免去调试工作量
  5. 测试/Debug 程序，这个目前 AI 还没办法搞定

练习题

README 文档中还有一些 TODO，不妨借助 AI 尝试能否实现。

总结

@prompts.md
根据上文内容，总结使用 AI prompts 协助编程的方法论

AI 回复内容

作者略作删改

  1. 提示语编写原则

    • 自然语言优先，特别是初始化代码、结构性代码
    • 分而治之
      • 将复杂功能拆分成独立模块
      • 每个提示语专注于一个具体功能点

  2. 高效工作流程

    • 使用独立文件编写提示语
      • 避免在聊天框中编写长篇提示语
      • 便于管理和复用提示语模板
    • 渐进式优化
      • 先实现基础功能，再通过提供截图等方式优化视觉效果
      • 分步骤迭代，而不是一次性要求完美实现

  3. 适用场景

    • 最适合的场景
      • 通用性强的功能实现（如拖拽、菜单等）
      • 有大量参考资料的标准功能
      • 代码量大但逻辑相对固定的任务
    • 不适合的场景
      • 项目特定的依赖和工具使用
      • 需要精确调优的样式和数值
      • 简单且直观的小型改动
      • 程序调试和测试

  4. 提示语技巧

    • 提供必要上下文
      • 指明目标文件
      • 说明功能的关联性
      • 必要时提供截图参考
    • 描述限制条件
      • 明确功能的边界条件
      • 说明特殊场景的处理方式
    • 独立功能明确说明创建函数，提升代码可维护性
      • 函数可以复用
      • 函数可以隔离复杂性

  5. 注意事项

    • 不要过度依赖 AI，简单任务直接手写更高效
    • 保持对生成代码的审查和理解
    • 合理利用 AI 代码补全功能，必要时可以关闭