Prompt Library 与 Rule Cards 的区别

这是一个很好的问题，有助于我们明确网站的核心定位和内容策略。根据我们已经实现的功能和您提供的 Rule 内容，我们可以这样来定义 Prompt Library 和 Rule Cards 的区别：

Prompt Library (提示词库) - "做什么" (What to Do)

• 核心内容: 具体的、可直接执行的 AI 指令 (Prompts)。
• 目标: 为用户提供即插即用的解决方案。用户可以直接复制这些提示词到 AI 工具（如 Cursor, ChatGPT）中，以完成一个特定的、原子化的开发任务。
• 形式:
  • 指令式: "生成一个支持暗黑模式的 Tailwind 卡片"、"重构这个旧的 JS 组件为 React Hooks"。
  • 角色扮演式: "你是一个高级前端专家..."、"你是一个响应式布局专家..."。这些也是一种特殊的提示词，旨在设定上下文以获得更高质量的输出。
• 例子: 我们目前 prompts.ts 里的所有内容，无论是生成组件的指令，还是设定 AI 角色的 Rule，本质上都是一种 Prompt。它们都是用户可以直接用来与 AI 对话的输入。

Rule Cards (规则卡片) - "如何做" & "为什么这样做" (How & Why)

• 核心内容: 最佳实践、开发规范、决策指南和代码风格准则。
• 目标: 帮助开发者建立正确的开发心智模型 (Mental Model)，理解"为什么"要这么做，而不仅仅是"做什么"。它更侧重于知识和规范的传递。
• 形式:
  • 可视化图表: 决策树（例如，选择哪个状态管理库？Redux vs. Zustand）、流程图。
  • 清单 (Checklists): 代码审查清单、发布前检查清单。
  • 规范文档: 像您之前提供的 TypeScript General Guidelines 和 Gatsby Best Practices，这些虽然可以被包装成一个大的 Prompt，但其核心价值是作为一套开发团队需要共同遵守的规则。
  • 简明的"Do's and Don'ts"：用正反面对比的方式，清晰地展示推荐和不推荐的做法。
• 例子:
  • 一个名为"CSS 命名规范"的卡片，可能展示 BEM 规范的核心思想和示例。
  • 一个名为"React 组件设计"的卡片，可能会有一个图表，解释容器组件 (Container) 和展示组件 (Presentational) 的区别。
  • 一个名为"文件夹结构"的卡片，会用树状图展示一个推荐的 Next.js 项目结构。

核心区别总结

协同关系

Rule Cards 和 Prompt Library 可以是相辅相成的。

• 一张 Rule Card（如"Gatsby 最佳实践"）可以链接到多个相关的 Prompts（如"生成一个使用 gatsby-plugin-image 的组件"、"创建一个 useStaticQuery 的 hook"）。
• 一个 Prompt 的详情页也可以反向链接到它所遵循的 Rule Card，帮助用户理解这个 Prompt 背后的设计思想。

简而言之，用户去 Prompt Library 是为了找工具，而去 Rule Cards 是为了学方法。