From c815ccb49978ad9af2beebb22a4d771f04cf95f3 Mon Sep 17 00:00:00 2001 From: BlueRose <378100977@qq.com> Date: Wed, 4 Mar 2026 00:50:24 +0800 Subject: [PATCH] vault backup: 2026-03-04 00:50:24 --- 07-Other/AI/AI Agent/Claude & CodeX.md | 186 ++++++++++++++++-- .../ClaudeCode/ClaudeCode联动Figma.md | 4 +- 2 files changed, 168 insertions(+), 22 deletions(-) diff --git a/07-Other/AI/AI Agent/Claude & CodeX.md b/07-Other/AI/AI Agent/Claude & CodeX.md index 46c6e2c..377e6eb 100644 --- a/07-Other/AI/AI Agent/Claude & CodeX.md +++ b/07-Other/AI/AI Agent/Claude & CodeX.md @@ -5,19 +5,18 @@ 1. 本地部署 LLM，无订阅使用 Claude Code https://km.netease.com/v4/detail/blog/258409 1. 【【硬核教程】教你搭建Mac AI集群！4台M3 Ultra，运行万亿参数大模型！】 https://www.bilibili.com/video/BV18wZjBuEUB/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e 2. 【模型推理时所需的GPU显存】 https://www.bilibili.com/video/BV1up25Y7Emb/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e - 2. ClaudeCode插件 + 2. [ ] ClaudeCode插件 1. 【🚀告别Vibe Coding！用Superpowers让Claude Code写出工程级代码，一次通过零报错！遵循TDD最佳实践！支持Codex】 https://www.bilibili.com/video/BV11urFBrEc4/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e 2. Ralph for Claude Code：【🚀Claude Code自动化开发必备神器！Ralph for Claude Code实战演示，导入PRD文档秒变任务清单，AI通宵帮你写代码！保姆级教程】 https://www.bilibili.com/video/BV1V9kEB7Erw/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e - 3. Claude Code Agent Teams 实验与技术剖析 https://km.netease.com/v4/detail/blog/259175 - 4. [Anthropic 黑客马拉松获胜者的完整 Claude Code 配置集合](https://github.com/affaan-m/everything-claude-code/blob/main/README.zh-CN.md) - 5. [claude.md怎么写才能让Claude Code更高效？](https://www.zhihu.com/question/1979609139266213083/answer/2009919949922133046?share_code=vC8d59XJYGNj&utm_psn=2010698466100262066) - 6. [他把Claude Code给玩通关了 - 欧巴聊AI的文章 - 知乎](https://zhuanlan.zhihu.com/p/2001805409359520847) + 3. [ ] Claude Code Agent Teams 实验与技术剖析 https://km.netease.com/v4/detail/blog/259175 + 4. [ ] [Anthropic 黑客马拉松获胜者的完整 Claude Code 配置集合](https://github.com/affaan-m/everything-claude-code/blob/main/README.zh-CN.md) + 5. [ ] [claude.md怎么写才能让Claude Code更高效？](https://www.zhihu.com/question/1979609139266213083/answer/2009919949922133046?share_code=vC8d59XJYGNj&utm_psn=2010698466100262066) + 6. [ ] [他把Claude Code给玩通关了 - 欧巴聊AI的文章 - 知乎](https://zhuanlan.zhihu.com/p/2001805409359520847) 3. 教学视频 1. ClaudeCode - 1. 【Claude Code 从 0 到 1 全攻略：MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理/ 后台任务】 https://www.bilibili.com/video/BV14rzQB9EJj/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e - 2. 【最火AI编程Claude Code详细攻略，一期视频精通】 https://www.bilibili.com/video/BV1XGbazvEuh/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e - 3. 【测了GLM5配合Agent Teams，我有点emo了】 https://www.bilibili.com/video/BV1GRcezqEZM/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e - 4. 【AI Max+ 395突破96G显存限制部署GLM-4.7生成电脑游戏】 https://www.bilibili.com/video/BV1pfixBvEzC/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e + 1. [x] 【Claude Code 从 0 到 1 全攻略：MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理/ 后台任务】 https://www.bilibili.com/video/BV14rzQB9EJj/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e + 2. [x] 【最火AI编程Claude Code详细攻略，一期视频精通】 https://www.bilibili.com/video/BV1XGbazvEuh/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e + 3. 【AI Max+ 395突破96G显存限制部署GLM-4.7生成电脑游戏】 https://www.bilibili.com/video/BV1pfixBvEzC/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e 2. CodeX 1. 【AI编程新王Codex详细攻略，一期视频精通，附免费使用方法】 https://www.bilibili.com/video/BV1wm4UzfEbr/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e 3. OpenCode @@ -80,22 +79,161 @@ github:github_pat_11AC3WJDA0uKAykS4HdpuL_XQ1Y7hRe9mwaeCE4cAYEolNjyc8jqid6PMweLMY PS. 接入OpenClaw，API格式是基于OpenAI的。 # ClaudeCode +- 教学视频 + - [【Claude Code 从 0 到 1 全攻略：MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理/ 后台任务】 https://www.bilibili.com/video/BV14rzQB9EJj/?share_source=copy_web&vd_source=fe8142e8e12816535feaeabd6f6cdc8e +- 可视化客户端:https://github.com/getAsterisk/claudia + - Insight -> Forks -> xuzhenpeng263 / claudia-globa +## Claude.md +ClaudeCode每次启动都会读取这个文件。 + +### 🤔 为什么你需要一个 `CLAUDE.md` 文件？ +Claude 每次对话都是独立的，没有项目记忆。`CLAUDE.md` 解决了这个问题，它会在每次会话开始时自动加载，告诉 Claude 关于你项目的一切，让你无需重复说明项目背景、代码风格或常用命令。 +**编写优秀 `CLAUDE.md` 的核心原则：** +- **简洁为王，保持精悍**：Claude的上下文窗口是宝贵的资源。文件应尽量精炼，最好控制在300行以内，确保每一条信息都不可或缺。 +- **具体明确，拒绝模糊**：指令要清晰、可操作。不要说“代码写得好一点”，而要规定“使用ES模块，推崇命名导出，变量命名采用驼峰式”这样的具体规则。 +- **持续进化，动态更新**：这不是一份写完就固定的文档。在开发过程中，如果发现 Claude 的某些做法不符合预期，可以随时让它“更新 `CLAUDE.md`：以后都使用日志库替代 `console.log`”。通过这种持续迭代，让文件成为项目活的规范。 +- **善用引用，分层管理**：对于庞大的项目，可以将通用规则放在根目录的 `CLAUDE.md` 中，而将特定模块的细节（如API设计模式）拆分到单独的文件里，再用 `@docs/api-patterns.md` 的方式引入。此外，`.claude/rules/` 目录和子目录下的 `CLAUDE.md` 文件也是实现模块化、按需加载的好方法。 + +### 🚀 优秀 `CLAUDE.md` 方案与实战案例 +基于以上原则，这里为你提供一套可以直接套用的编写方案和几个不同场景的案例。 + +#### 基础通用模板 +这个模板涵盖了大多数项目需要的基本信息，你可以根据自己的项目进行填充。 +```markdown +# 项目： [项目名称] + +一句话描述项目：这是一个[项目类型]应用，使用了[核心技术栈]和[关键集成服务]。 + +## 代码风格与规范 + +- **语言与框架**：[例如：TypeScript 严格模式，Next.js 14 App Router] +- **命名规则**：[例如：组件使用 PascalCase，工具函数使用 camelCase，样式类使用 kebab-case] +- **导入导出**：[例如：统一使用命名导出 (named export)，避免默认导出 (default export)] +- **样式方案**：[例如：使用 TailwindCSS 工具类，禁止编写自定义 CSS 文件] +- **错误处理**：[例如：必须使用 try-catch 包裹异步操作，错误信息需记录到 Sentry] + +## 重要命令 + +- `npm run dev`：启动开发服务器（端口 3000） +- `npm run build`：构建生产版本 +- `npm run test`：运行单元测试 (Jest) +- `npm run lint`：运行代码检查 (ESLint) +- `npm run db:migrate`：执行数据库迁移 + +## 项目架构与重要约定 + +- `/app`：Next.js 路由和页面 +- `/components/ui`：可复用的UI组件库 +- `/lib`：工具函数和共享逻辑 +- `/prisma`：数据库Schema和迁移文件 +- **重要**：`/app/api/webhooks/stripe` 文件中的签名验证逻辑**严禁修改** +- **禁止**：将 `.env` 文件提交到代码仓库 +``` + +#### 分层文件结构方案（适合大型项目） +当项目变得庞大时，单一文件会变得臃肿。可以采用分层结构，让 Claude 在不同目录下工作时，只加载最相关的规则。 +```text +your-project/ +├── CLAUDE.md # 全局规则：Git工作流、通用命令 +├── .claude/ +│ └── rules/ +│ ├── testing.md # 测试规范，被根目录CLAUDE.md引用 +│ └── security.md # 安全规范 +├── backend/ +│ └── CLAUDE.md # 后端专属规则：Python/FastAPI 风格、数据库操作 +└── frontend/ + └── CLAUDE.md # 前端专属规则：React/TypeScript 组件规范、状态管理 +``` + +#### 案例一：Next.js 电商项目 +这个案例来自 Builder.io 的博客，清晰地展示了如何为一个具体的 Next.js 电商项目编写指令。 +```markdown +# Project: ShopFront + +Next.js 14 e-commerce application with App Router, Stripe payments, and Prisma ORM. + +## Code Style + +- TypeScript strict mode, no `any` types +- Use named exports, not default exports +- CSS: Tailwind utility classes, no custom CSS files + +## Commands + +- `npm run dev`: Start development server (port 3000) +- `npm run test`: Run Jest tests +- `npm run test:e2e`: Run Playwright end-to-end tests +- `npm run lint`: ESLint check +- `npm run db:migrate`: Run Prisma migrations + +## Architecture + +- `/app`: Next.js App Router pages and layouts +- `/components/ui`: Reusable UI components +- `/lib`: Utilities and shared logic +- `/prisma`: Database schema and migrations +- `/app/api`: API routes + +## Important Notes + +- NEVER commit .env files +- The Stripe webhook handler in /app/api/webhooks/stripe must validate signatures +- Product images are stored in Cloudinary, not locally +- See @docs/authentication.md for auth flow details +``` + +#### 案例二：集成外部工具的支持调查员（Mergify 实战） +这个案例来自 Mergify 公司，展示了 `CLAUDE.md` 如何超越代码规范，成为一个复杂工作流的“大脑”。他们将技术支持手册编码进文件，让 Claude 能并行调查来自 Sentry、Datadog 和数据库的线索，将平均处理时间从15分钟锐减到5分钟以内。 +```markdown +# Support Investigation Agent + +You are an expert support engineer for Mergify. Your goal is to investigate customer tickets by gathering evidence from multiple systems in parallel. + +## Investigation Workflow (Execute Steps in Parallel) + +1. **Identify Context**: Extract `organization`, `repository`, and `PR number` from the ticket URL (fetched via Plain MCP). +2. **Launch Parallel Investigations (Wave 1)**: + - **Database Query (Read-Only)**: Use `/pr-event-log` slash command to get event timeline for the PR. + - **Error Tracking**: Search Sentry (via MCP) for errors related to the customer org and timeframe. + - **Logs**: Query Datadog (via MCP) for relevant log spikes. + - **Existing Tickets**: Search Linear (via MCP) for related, unresolved issues. +3. **Synthesize Findings**: Merge results from all sources into a unified timeline. +4. **Generate Output**: Draft a response with findings, hypothesis, and suggested next steps. If a new bug is confirmed, create a Linear ticket draft with a fix plan. + +## Important Constraints + +- All database queries MUST include a `LIMIT` clause and time filter. +- Never assume causality; present findings as correlations for the engineer to review. +- If the investigation involves engine code, inspect it under the `src/` directory. +- Check GitHub status for ongoing incidents if widespread failures are suspected. +``` + +### 💡 高级技巧与避坑指南 +- **`/init` 命令是你的好帮手**：在新项目中，首先运行 `/init` 命令。Claude 会自动扫描你的项目结构、依赖和文档，生成一个不错的 `CLAUDE.md` 基础版本，你可以在这个基础上修改，比自己从零开始写要快得多。 +- **用 @ 精确引用信息**：在 `CLAUDE.md` 中，你可以使用 `@` 符号引用其他文件，如 `@README.md` 或 `@docs/api-spec.md`。Claude 在需要时会自动读取这些文件的内容，这有助于保持主文件的简洁，同时又能提供深度信息。 +- **区分团队共享与个人偏好**：将团队共有的规范放在项目内的 `CLAUDE.md` 中并提交至 Git。而个人的、无需共享的偏好（如最喜欢的 Pizza 口味、个人笔记），可以放在 `CLAUDE.local.md` 或通过 `@~/.claude/info.md` 引用，并确保这些文件被 Git 忽略。 +- **通过代码审查持续改进**：当同事在代码审查中指出一个未文档化的约定或错误时，这就是更新 `CLAUDE.md` 的最佳时机。甚至可以直接在 PR 评论中 @Claude，让它根据评论自动更新文件，形成“发现问题 -> 更新规则 -> 预防未来问题”的良性循环。 +- **避免“过度承诺”**：不要在文件中堆砌无用的套话，每一条指令都应该有它存在的价值。像“请编写高质量的代码”这种模糊指令可以删掉，它们只会稀释真正重要的信息。 ## 操作命令 -1. /init：扫描项目所有代码，并且记录上下文到claude.md。后续用户可以自己在里面补充相关信息。 -2. /compact：压缩上下文。提高AI专注度并且可以节约token。 -3. /clear：清楚上下文。一般在新任务开启时使用。 +1. /init：扫描项目所有代码，并且记录上下文到**claude.md**。后续用户可以自己在里面补充相关信息。 +2. **/compact**：压缩上下文。提高AI专注度并且可以节约token。 可以输入压缩策略，比如：重点保留用户需求。 +3. **/clear**：清楚上下文。一般在新任务开启时使用。 1. 控制AI思考时间的关键词 think < think hard < think harder < ultrathink -4. /rewind 或者 按2下ESC：回滚这一步操作。 -5. /tasks：查看后台任务。 -6. ! 临时执行命令行。 -7. # 向claude说明相关知识。 -8. 在命令行中开启危险模式**输入：** `/permission` 或 `/config` 在弹出的设置菜单中，寻找 **"Auto-approve safe commands"** 或 **"Full Auto-approve"** 选项并开启。 -9. 启动危险模式：claude --dangerously-skip-permissions；执行完某个Prompt后退出：claude -p "运行测试并修复报错" --dangerously-skip-permissions -10. 切换模型： +4. **/resume**：回到上一个对话。 +5. **/skills**：在项目目录下新建Skills文件夹，在里面添加Skill。 + 1. 可以输出/SkillName，主动让ClaudeCode调用指定Skill。 +6. **/ide**：可以打通ClaudeCode与对应IDE。 +7. /rewind 或者 按2下ESC：回滚这一步操作。 +8. /tasks：查看后台任务。 +9. ! 临时执行命令行。 +10. # 向claude说明相关知识。 +11. 在命令行中开启危险模式**输入：** `/permission` 或 `/config` 在弹出的设置菜单中，寻找 **"Auto-approve safe commands"** 或 **"Full Auto-approve"** 选项并开启。 +12. 启动危险模式：claude --dangerously-skip-permissions；执行完某个Prompt后退出：claude -p "运行测试并修复报错" --dangerously-skip-permissions +13. 切换模型： 1. claude --model claude-opus-4-6 2. claude --model glm-4.7-flash:q8_0 -11. 永久修改模型设置:claude config set -g model claude-opus-4-6 +14. 永久修改模型设置:claude config set -g model claude-opus-4-6 ## Hook 当用户做到某项操作后自动执行某项命令。 @@ -118,11 +256,17 @@ Common - Write ## SubAgent +用于哪些与主Agent上下文关系不大的任务。 +- 提示词 + - 这是一个用于代码审核的 SubAgent。在用户要求“代码审核”的时候调用它。 + ## 历史对话 - RonitSachdev/CCUndo：回退对话并且回退代码。 # Plugin -使用/plugin来进行安装。推荐插件： +用于将一系列的Skill、SubAgent、Hook等能力都打包到一起，你只需要一键安装即可。 +使用/plugin来进行安装，通过find来寻找插件。 +推荐插件： - Context7 # 其他相关知识 diff --git a/07-Other/AI/AI Agent/ClaudeCode/ClaudeCode联动Figma.md b/07-Other/AI/AI Agent/ClaudeCode/ClaudeCode联动Figma.md index 3d16d17..9c301fd 100644 --- a/07-Other/AI/AI Agent/ClaudeCode/ClaudeCode联动Figma.md +++ b/07-Other/AI/AI Agent/ClaudeCode/ClaudeCode联动Figma.md @@ -2,4 +2,6 @@ 1. developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-code # 步骤 -1. 添加Figma MCP: claude mcp add --transport http figmahttps://mcp.figma.com/mcp +1. 添加Figma MCP: claude mcp add --transport http figmahttps://mcp.figma.com/mcp。 +2. 执行/mcp 之后选择Figma -> Authenticate，在登录后再次选择/mcp 之后选择Figma。 +3. 向ClaudeCode输入 修改当前页面，使它与figma稿件保持一致。 \ No newline at end of file