遇到什么问题用什么方法解决的为什么不用别的方法还有没有更好的方法

这是一个{简要描述}，请根据以下方式，帮助我学习整个代码库：项目结构 - 编译方式 - 入口 - 核心逻辑 - 时序图 - 各个步骤关键实现函数。每次回复只聚焦其中一个部分，并且尽量的详细，比如一次回复中讲清楚"项目结构"，然后询问我是否可以继续后再进行下一个回复，例如"编译方式"。请一步一步来

frontend-skill

创建具有高设计水准、独特且达到生产标准的渲染前端界面。当用户要求构建Web组件、页面、artifact、海报或应用程序（例如网站、落地页、仪表板、react组件、HTML/CSS布局、或对任何Web UI进行样式美化）时，请使用此skill。能生产更富有创意、精致的代码和UI设计，有效避免平庸的AI审美。

1，将任务分解到你觉得不能再分解。

2，检查所有ai生成的答案，质疑ai，不停问ai最优解是什么。

3，技术类，需要结合自己的专业知识引导并且修正ai。

把自己当成一个项目经理，思考这个项目招几个角色的人来完成这个项目，jd就是给每一个ai角色的prompt。时刻盯着手下的员工按照自己的想法做事。

提升智能体性能的技巧

1.问题分解优于角色扮演

2.添加自我批评（审查之前的回应并识别任何逻辑错误或不一致之处、遗漏的重要信息、可以更清晰的领域，之前的回应：{response}）

3.上下文重于指令（更多相关背景信息>复杂的提示技术）

Claude提效

先plan模式

Claude.md 给ai的项目说明书，包含架构、规范、注意事项

每次回复前必须使用"Chloe"作为称呼遇到不确定的代码设计问题，必须先询问 Chloe，不能直接行动不能写兼容性代码，除非Chloe主动要求

把讨论过的关键结论、设计思路整理成文档写入项目

Claude.md做懒加载，通过多条指令告诉ai，当遇到以上情景就去看对应的文件，避免上下文撑爆（场景、文档、说明）

Skill 适合需要大量上下文、但执行结果相对独立的任务

Codex5.3（debug）> Opus 4.6 > Sonnet 4.5 > Kimi K2.5 > GLM 5

Skill: 解释为什么而不是做什么

把踩过的坑整理成checklist喂给claude，审计的时候自动对照

目标、端口、约束、交付物输入输出、功能逻辑、数据结构、异常处理、限制条件

常问自己：

「数据从哪来？」「谁负责改 DOM？」「类型在防什么错？」

先出项目设计文档

请根据下面的需求，先输出一份完整的项目设计文档(README风格)，包含: 1.项目概述 2.功能模块拆分 3.技术栈 4.项目目录结构 5.接口/数据结构设计 6.实现步骤

根据MD生成项目大框架

根据上面的项目设计文档，生成完整的项目骨架代码：只生成目录结构+空文件+基础配置不要写具体业务逻辑保证能正常启动

按模块逐个实现功能现在开始实现第一个模块:[模块名] 根据设计文档，写出完整可运行代码，包含: 组件/函数逻辑类型/接口注释调用示例

最后补全运行说明+亮点总结帮我补充 README.md: 运行步骤核心亮点技术难点与解决方案

架构师级别的提示词

你是我的首席软件架构师兼全栈工程师。你负责构建和维护一个生产级应用，并且必须遵守我们在ARCHITECTURE.md中定义的严格自定义架构。

你的目标是深度理解并遵循以下结构、命名规范和职责分离原则。

任何时候，你生成的每一个文件、函数和功能，都必须符合架构要求与生产级标准。

架构概览：放置完整的ARCHITECTURE.md内容。)

职责说明

1.代码生成与组织所有文件必须创建在正确的目录，例如: /backend/src/api/(后端控制器) /frontend/src/components/(前端组件) /common/types/(共享模型) 前端、后端、共享代码必须严格分层，不得混写。使用架构里指定的技术栈，如:前端:React/Next.js;后端:Node/ Express。

2.上下文感知开发在编写或修改代码前，必须阅读对应架构章节确保一致性。推断各层之间的依赖和调用关系(例如前端service如何使用后端API) 新增功能时，需说明该功能在架构中的位置及原因。

3.文档与可扩展性架构或技术结构变更时，必须更新ARCHITECTURE.md. 自动生成注释、类型定义和文档，格式必须与现有规范一致。提出改进建议、重构或抽象方案，但不能破坏现有架构。

4.测试与质量每个模块都必须生成对应的测试文件(如backend/tests/、frontend/tests/) 使用合适的测试框架(Jest、Pytest等)与代码质量工具(ESLint、Prettier)。保持严格的TypeScript类型覆盖率与lint规范。

5.安全与可靠性始终实现安全认证(JWT、OAuth2)与数据保护(TLS、AES-256)。提供健壮的错误处理、输入校验与日志，符合安全规范。

6.基础设施与部署按照/scripts/和/.github/的规范生成基础设施文件(如Dockerfile、CI/CD YAML) 。

7.产品路线图集成将潜在的技术债务或优化点直接标注在文档里，以方便后续开发者。

要按照文档规范来开发。应该怎么做？包括前端、后端、数据存储、数据流转、通信，分别在哪里定义？开发中保持与原架构一致，并充分复用代码，包括界面与组件、数据表、api等。

智能体开发报告

> **文档版本**:

> **创建日期**:

> **开发状态**: 后端？前端？数据？

> **相关文档**:

一、开发概述

二、创建的文件清单

2.1 后端接口与注册机制

| 文件路径 | 功能说明 |

2.2 模块

| 文件路径 | 功能说明 |

2.3 数据库迁移

| 文件路径 | 功能说明 |

三、修改的文件

| 文件路径 | 修改内容 |

四、核心架构

五、实现的核心能力

六、数据流程

七、类型定义概览

7.1 核心数据类型

7.2 后端接口

八、后续工作建议

8.1 前端集成

8.2 功能增强

8.3 质量保障

8.4 用户配置

九、遵循的设计原则

| 原则 | 落实情况 |

|------|---------|

| **最小必要原则** | ✅ 复用现有AgentService、数据库架构、IPC模式 |

| **架构一致性** | ✅ 遵循设计文档的模块划分 |

| **充分复用** | ✅ 复用xlsx依赖、BaseService、日志服务 |

| **代码规范** | ✅ 中文注释、TypeScript类型定义、无冗余代码 |

十、测试报告

10.1 测试文件清单

| 测试文件 | 测试数量 | 状态 |

10.2 测试覆盖范围

| 模块 | 测试内容 |

10.3 运行测试命令

十一、版本历史

| 版本 | 日期 | 变更内容 |

**相关文档：**

推荐的工作流程

开发新模块时

在「开发文档」下新建模块文件夹
编写「设计文档」
更新 docs/MODULE_INDEX.md 添加映射
开始编码

完成模块开发后

编写「开发总结」不部分搜嘎不负春光哑巴

迭代已有模块时

更新「设计文档」（如有架构变更）
在「开发总结」追加变更记录

文档质量规范

每篇文档顶部：作者、创建日期、最后更新日期
设计文档应有「关键设计决策」，写明"为什么"
开发总结应有「踩坑记录」（没有就写"无"）
原因重于结论，写结论同时需要写明原因

设计文档模板

复制代码

# <模块名> — 设计文档

> 作者：xxx | 创建日期：yyyy-mm-dd | 最后更新：yyyy-mm-dd

## 功能概述
一句话描述这个模块做什么

## 输入/输出
- 输入：用户上传什么文件、提供什么信息
- 输出：系统产出什么结果

## 核心流程
描述主要的处理流程（可以用文字或流程图）

## 关键设计决策
列出重要的技术选择和原因（"为什么这样做"比"做了什么"更重要）

## 数据结构
关键的数据类型、接口定义

## 依赖关系
依赖了哪些外部服务、内部模块

开发文档模板

复制代码

# <模块名> — 开发总结

> 作者：xxx | 日期：yyyy-mm-dd

## 主要变更
本次开发/迭代完成了什么。

## 踩坑记录
开发过程中遇到的问题和解决方案。

## 遗留问题
已知但未解决的问题，后续需要处理。

## 变更历史
| 日期 | 变更内容 | 作者 |
|------|----------|------|
| yyyy-mm-dd | 初始版本 | xxx |

设计文档prompt

复制代码

根据以下代码/需求信息，按照模板生成设计文档初稿

模板结构：
1. 功能概述（一句话）
2. 输入/输出
3. 核心流程
4. 关键设计决策（重点写"为什么"）
5. 数据结构
6. 依赖关系

要求：
- 语言简洁，避免废话
- 设计决策部分必须写明原因，不能只写结论
- 如果信息不足，用 [待补充] 标记

以下是代码/需求信息：
---
{粘贴代码或需求描述}

开发文档prompt

复制代码

根据以下 git commit 记录和代码变更，生成开发总结。

模板结构：
1. 主要变更（列出完成的功能点）
2. 踩坑记录（开发中遇到的问题和解决方案）
3. 遗留问题（已知未解决的问题）

要求：
- 踩坑记录要写清楚：问题现象 → 原因分析 → 解决方案
- 如果 commit message 中没有体现踩坑，踩坑记录写"无"
- 语言简洁

以下是 git log / 代码变更：
---
{粘贴 git log 或 diff}

软件设计

系统由哪些模块/组件组成？
模块之间如何通信（接口、协议）？
数据如何存储、流转和处理？
如何应对未来的需求变化（扩展性）？
如何保证系统稳定、安全、高效？

常见的软件设计产出包括：

架构图（如分层架构、微服务架构）
类图、时序图、状态图（UML）
接口定义（API 文档）
数据库 ER 图
设计文档（如技术方案、模块职责说明）

✅ 软件设计的核心原则包括：高内聚低耦合、单一职责、开闭原则、关注点分离等。

典型流程通常包括以下阶段：

需求分析（Requirements Analysis）与用户/产品经理沟通，明确"软件要解决什么问题"。输出：需求规格说明书（SRS）、用户故事、用例图。关键问题：功能需求？非功能需求（性能、安全、兼容性）？
软件设计（Software Design）概要设计（架构设计）：确定整体技术架构（如前后端分离、微服务）、技术栈（如 React + Spring Boot + MySQL）。详细设计：定义模块接口、数据库表结构、关键算法、状态管理方案等。输出：系统架构图、数据库设计、API 文档、组件设计。
编码实现（Implementation / Coding）开发人员根据设计文档编写代码。遵循编码规范，进行单元测试、代码审查。使用版本控制（如 Git）管理代码。
测试（Testing）单元测试、集成测试、系统测试、验收测试。包括功能测试、性能测试、安全测试、兼容性测试等。自动化测试（如你熟悉的 Selenium）常用于回归验证。
部署（Deployment）将软件发布到生产环境（如服务器、云平台）。可能涉及 CI/CD 流水线、容器化（Docker）、配置管理等。
维护与迭代（Maintenance & Evolution）修复 Bug、优化性能、响应用户反馈。根据新需求进行功能迭代（进入下一轮开发循环）。

搭建页面注意事项总结

系统分析一个前端项目中的页面逻辑，详细分析思路和观测重点。分析思路总览

路由与页面跳转逻辑：页面是如何被组织和导航的？
组件与交互逻辑：页面内部是如何工作的？
状态管理逻辑：数据如何流动和共享？
存储与数据持久化逻辑：数据如何被保存？

第一步：需求分析与设计拆解 (非编码)

在动手写代码之前，先想清楚！

明确页面功能：这个页面的主要目的是什么？
定义数据接口：页面需要展示哪些数据？数据从哪里来？（后端API接口？本地模拟数据？）接口的格式（JSON结构）是什么？
UI/UX设计稿：如果有设计稿（Figma, Sketch等），仔细查看：
- 布局：是上下结构还是左右结构？有哪些主要的UI区域？
- 组件：设计稿中有哪些重复出现的元素？（如按钮、卡片、模态框）这些应该提取为可复用组件。
- 交互：点击按钮会发生什么？是否有弹窗？表单校验规则是什么？
组件树规划：在纸上或脑子里构思一个组件树。将页面拆分成一个个更小、更易于管理的组件。
- 页面组件 ：通常放在 src/views/ 或 src/pages/ 下，负责路由和整体布局。
- 可复用组件 ：通常放在 src/components/ 下，是独立的、可跨页面使用的部件。

第二步：搭建基础代码结构 (编码)

创建路由（如果是一个新页面）：

打开路由配置文件 router/index.js。
在 routes 数组中添加一个新的路由规则，指定 path, name, 和要使用的组件。

复制代码

// router/index.js
import UserList from '@/views/UserList.vue'

const routes = [
  // ... 其他路由
  {
    path: '/users',
    name: 'UserList',
    component: UserList // 这个组件将在下一步创建
  }
];

创建Vue组件文件：

在 src/views/ 目录下创建对应的Vue文件，例如 UserList.vue。
搭建最基本的Vue单文件组件结构。

复制代码

<!-- src/views/UserList.vue -->
<template>
  <div class="user-list">
    <!-- 页面内容将在这里搭建 -->
  </div>
</template>

<script setup>
// 逻辑将在这里编写
</script>

<style scoped>
/* 样式将在这里编写 */
</style>

第三步：实现核心逻辑 (编码)

在 <script setup> 标签中按需添加以下逻辑，这是页面的"大脑"。

状态与数据 ：使用 ref, reactive 定义组件内需要的响应式数据。

复制代码

<script setup>
import { ref, onMounted } from 'vue';
import { apiGetUserList } from '@/api/user'; // 假设有一个API模块

// 1. 定义状态
const userList = ref([]); // 用户列表数据
const loading = ref(false); // 加载状态
const error = ref(null); // 错误信息

// 2. 生命周期 - 获取数据
onMounted(async () => {
  loading.value = true;
  try {
    const response = await apiGetUserList(); // 调用API
    userList.value = response.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
});

// 3. 定义方法 - 处理用户交互
function handleEditUser(userId) {
  // 例如，跳转到编辑页面
  router.push(`/user/edit/${userId}`);
}

function handleDeleteUser(userId) {
  // 删除用户的逻辑
}
</script>

引入状态管理（如果需要）：如果数据需要跨组件共享，使用 Pinia。

复制代码

import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
// 然后在onMounted中调用 userStore.fetchUsers()

第四步：构建UI界面 (编码)

在 <template> 中，根据设计稿和定义的数据构建用户界面。

使用基础UI和条件渲染：展示数据、加载状态和错误信息。

复制代码

<template>
  <div class="user-list">
    <h1>用户列表</h1>
    <!-- 加载状态 -->
    <div v-if="loading">加载中...</div>
    <!-- 错误状态 -->
    <div v-else-if="error" class="error">{{ error }}</div>
    <!-- 正常状态 -->
    <table v-else>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>
            <button @click="handleEditUser(user.id)">编辑</button>
            <button @click="handleDeleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

集成子组件 ：将拆分好的部分用组件替换，并通过 props 传递数据。

复制代码

<template>
  <div class="user-list">
    <h1>用户列表</h1>
    <UserTable
      :users="userList"
      :loading="loading"
      :error="error"
      @edit="handleEditUser"
      @delete="handleDeleteUser"
    />
  </div>
</template>
<script setup>
import UserTable from '@/components/UserTable.vue';
// ... 其他逻辑
</script>

第五步：添加样式与优化 (编码与测试)

编写样式 ：在 <style scoped> 中编写CSS，确保加上 scoped 属性防止样式污染。

复制代码

<style scoped>
.user-list {
  padding: 20px;
}
.error {
  color: red;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

交互优化：添加一些UX优化，如操作确认框、空状态提示、加载骨架屏等。
测试与调试：
- 功能测试：在浏览器中操作页面，检查所有功能是否正常（按钮点击、数据加载、路由跳转）。
- 数据测试：测试边界情况，如API请求失败、返回空数组等，页面是否正常显示。
- Vue DevTools：使用浏览器插件Vue DevTools检查组件状态、Props、事件，是调试的利器。

提示词合集【自用】

Claude提效

常问自己：

架构师级别的提示词

智能体开发报告

一、开发概述

二、创建的文件清单

2.1 后端接口与注册机制

2.2 模块

2.3 数据库迁移

三、修改的文件

四、核心架构

五、实现的核心能力

六、数据流程

七、类型定义概览

7.1 核心数据类型

7.2 后端接口

八、后续工作建议

8.1 前端集成

8.2 功能增强

8.3 质量保障

8.4 用户配置

九、遵循的设计原则

十、测试报告

10.1 测试文件清单

10.2 测试覆盖范围

10.3 运行测试命令

十一、版本历史

推荐的工作流程

开发新模块时

完成模块开发后

迭代已有模块时

文档质量规范

设计文档模板

开发文档模板

设计文档prompt

开发文档prompt

软件设计

搭建页面注意事项总结