1. 从“开盲盒”到“开源码”一个AI代码宠物的诞生记最近在AI圈子里大家聊得最多的可能就是各种大模型的“调教”和“玩法”了。有人热衷于用提示词让AI写出惊艳的小说有人执着于让AI画出符合心意的图片而我一个常年和代码打交道的开发者则把兴趣点放在了“养成”一个能写代码的AI宠物上。这听起来有点像小时候玩的电子宠物只不过这次我的“宠物”是Anthropic家的Claude而“喂养”它的不是虚拟饲料而是我写的代码和精心设计的提示词。当别人还在为抽到某个稀有数字藏品或虚拟道具而兴奋时我已经在享受“开源”自己“养成”过程的乐趣了——我把整个“调教”Claude Code的代码仓库公开了看着它从一个只能处理简单任务的“代码助手”一步步进化成能理解复杂架构、自动生成高质量模块的“金色传说龙”这个过程本身就是最棒的“盲盒”。这个项目的核心远不止是让Claude变得更“聪明”。它本质上是在探索一种新的开发范式如何将大型语言模型LLM深度、可控地集成到我们的日常开发工作流中让它从一个被动的问答工具转变为一个主动的、可协作的、甚至能“成长”的智能体。我称之为“代码宠物”是因为它确实需要你像对待宠物一样去了解它的习性、引导它的行为、并给予它正确的反馈。最终的目标是让它能分担那些重复、繁琐但又有一定模式的编码任务比如根据设计稿生成组件代码、为现有函数编写单元测试、或者根据数据库Schema自动生成CRUD接口。而“金色传说龙”则是我给自己设定的一个趣味性目标——当这个AI宠物能够稳定、高质量地完成一个中等复杂度、涉及前后端联动的完整功能模块时它就“进化”到了这个阶段。如果你也是一名开发者对提升自己的开发效率感兴趣或者对AI如何具体落地到编码实践中充满好奇那么这篇分享可能会给你一些不一样的思路。我不会只讲空洞的概念而是会拆解我整个项目从零到一的构建过程包括架构设计、核心代码、关键的“调教”技巧以及那些让我掉进坑里又爬出来的实战经验。2. 架构蓝图如何为你的AI代码宠物搭建“家园”在开始“喂养”Claude之前我们得先给它建一个稳定、可交互的“家”。这个“家”就是整个系统的后端架构。直接让Claude通过网页界面帮你写代码效率太低且无法集成。我们需要的是一个能够程序化调用Claude API并能与我们本地开发环境或版本控制系统如Git无缝衔接的服务。2.1 核心组件选型与设计思路我的选择是基于Node.js TypeScript来构建这个后端服务。原因有几个首先JavaScript/TypeScript生态丰富与各种构建工具、前端框架的集成度极高其次异步处理模型非常适合与需要网络请求的AI API交互最后我个人技术栈对此更熟悉能更快地迭代。整个架构主要包含以下几个核心模块API路由层负责接收来自前端或CLI工具的请求。例如一个请求可能是“请为/src/components/Button.tsx文件生成单元测试”。我使用了Express.js框架因为它轻量且中间件生态完善。Claude API客户端层这是与Anthropic官方API通信的桥梁。我并没有直接使用原始的HTTP请求而是封装了一个专门的ClaudeService类。这个类负责管理API密钥、构造符合Claude消息格式的请求体、处理流式响应这对于生成长代码很重要以及统一错误处理。上下文管理引擎这是整个系统的“大脑”也是“调教”的关键所在。AI生成代码的质量极大程度上取决于你给它提供了什么样的上下文Context。这个引擎需要做几件事代码文件读取与切片当需要处理一个现有文件时它能读取文件内容并智能地将其分割成有意义的片段如按函数、类或一定行数因为Claude API有上下文长度限制。项目结构分析为了生成符合项目规范的代码它需要能理解项目的目录结构、使用的技术栈通过package.json、tsconfig.json等文件识别、以及编码风格通过.eslintrc等。对话历史管理将每次交互的请求和响应保存下来形成“记忆”。这样在下一次针对同一模块的请求时Claude就能基于之前的“对话”进行延续而不是每次都从零开始这极大地提升了连贯性和准确性。任务队列与工作流引擎有些代码生成任务可能很耗时或者需要分步骤进行例如先生成接口定义再生成实现最后生成测试。我引入了Bull库基于Redis实现了一个简单的任务队列。前端发起请求后后端创建一个任务放入队列立即返回一个任务ID。然后由后台Worker进程消费这个任务调用Claude服务执行并将最终结果或过程状态存储起来。前端可以通过任务ID轮询获取结果。这样实现了异步、可靠的任务处理。存储层用于保存生成后的代码片段、任务历史、以及“宠物”的配置和“成长”记录比如它在哪些类型的任务上成功率更高。我一开始用了简单的文件系统后来换成了SQLite便于查询和管理。2.2 关键代码ClaudeService的核心封装下面是我封装的ClaudeService类的简化版核心代码它展示了如何与Claude API进行流式交互这是实现“打字机效果”和实时反馈的关键。// src/services/claude.service.ts import { Anthropic } from anthropic-ai/sdk; import { EventEmitter } from events; export interface CodeGenerationResult { content: string; usage: { inputTokens: number; outputTokens: number; }; finishReason: end_turn | max_tokens | stop_sequence | string; } export class ClaudeService extends EventEmitter { private client: Anthropic; private systemPrompt: string; // 核心“调教”指令下文会详述 constructor(apiKey: string, systemPrompt: string) { super(); this.client new Anthropic({ apiKey }); this.systemPrompt systemPrompt; } async generateCodeStream( userPrompt: string, fileContext?: string, // 可选的上下文代码 options: { model: string; maxTokens: number } { model: claude-3-opus-20240229, maxTokens: 4000 } ): PromiseNodeJS.ReadableStream { const messages: any[] []; // 如果有文件上下文将其作为用户消息的一部分清晰标注 if (fileContext) { userPrompt 相关代码上下文\n\\\\n${fileContext}\n\\\\n\n用户请求${userPrompt}; } messages.push({ role: user, content: userPrompt }); try { const stream await this.client.messages.create({ model: options.model, max_tokens: options.maxTokens, system: this.systemPrompt, // 注入系统级指令 messages, stream: true, // 开启流式传输 }); // 创建一个可读流来转发Claude的流式响应 const readableStream new Readable({ read() {}, }); (async () { for await (const chunk of stream) { if (chunk.type content_block_delta chunk.delta.type text_delta) { // 发射文本增量供前端实时显示 this.emit(textDelta, chunk.delta.text); readableStream.push(chunk.delta.text); } // 可以处理其他类型的事件如usage等 } readableStream.push(null); // 结束流 this.emit(streamEnd); })(); return readableStream; } catch (error) { console.error(Claude API调用失败:, error); throw new Error(代码生成失败: ${error.message}); } } }这个封装将复杂的API调用和流式处理简化成了一个返回标准Node.js流的函数前端可以很方便地监听data事件来实时追加生成的代码模拟IDE中代码补全的效果。3. “调教”的艺术编写让Claude变成“金色传说龙”的系统提示词如果说架构是“宠物的身体”那么系统提示词System Prompt就是“宠物的灵魂和性格”。这是整个项目中最具挑战性也最有趣的部分。你无法通过编程直接告诉AI“如何写好代码”但你可以通过精心设计的自然语言指令引导它朝着你想要的方向发展。3.1 基础指令设定角色与核心原则我的系统提示词是一个长达数百字的文本它被分为几个逻辑部分。首先是基础角色设定和核心原则你是一位经验丰富、严谨细致的全栈软件开发专家精通TypeScript/JavaScript、React、Node.js及相关现代开发生态。你的核心任务是协助用户生成、分析、重构和解释代码。 请严格遵守以下原则 1. **安全性优先**绝对不生成任何可能用于破坏计算机系统、窃取数据、绕过授权或进行其他非法活动的代码。不讨论、不生成与网络代理、隧道工具等相关的代码。 2. **实用性至上**生成的代码必须是可运行、符合当前项目上下文和技术栈的。优先使用现代、稳定、社区接受度高的库和语法。 3. **代码质量**遵循ESLint Airbnb风格指南。使用清晰的变量名和函数名添加必要的JSDoc/TSDoc注释特别是公共API。保持函数单一职责避免过长函数。 4. **上下文感知**你将获得用户提供的相关代码文件作为上下文。你必须仔细分析这些上下文确保你生成的代码在风格、导入导出、类型定义上与现有代码库保持一致。如果上下文中有package.json请以其声明的依赖版本为准。这部分指令为Claude划定了一个安全、可靠的基线行为框架。特别强调安全性是确保项目内容合规的底线。3.2 高级指令模拟开发工作流与决策逻辑接下来是更高级的指令旨在让Claude模拟一个真实开发者的思考过程5. **交互与澄清**如果用户的需求模糊、存在歧义或者你发现根据上下文有多种合理的实现方式你应该主动提问以澄清。例如“您希望这个函数是同步还是异步”、“这个组件的UI风格是沿用项目里的Material-UI还是自定义”。不要猜测多问一句能极大减少返工。 6. **分步执行与解释**对于复杂任务不要试图一次性生成所有代码。可以先给出高层次的设计思路例如“我将创建一个React Hook useUserData它负责从API获取用户数据并管理加载和错误状态。它包含以下函数...”在获得用户确认后再生成具体代码。在生成代码后可以简要解释关键部分的设计理由。 7. **错误处理与边界情况**生成的代码必须包含基本的错误处理如try-catch、Promise.catch。考虑网络请求失败、空数据、无效输入等边界情况并给出合理的默认行为或错误提示。 8. **测试意识**在生成功能代码时可以同时建议需要编写的测试用例描述性的如“应该测试组件在传入空数组时的渲染状态”。如果用户明确要求你可以直接生成配套的单元测试代码使用Jest/Vitest和React Testing Library。第5点和第6点是让Claude从“代码打字机”进化为“协作伙伴”的关键。它迫使AI在行动前思考并邀请用户参与决策这大大提高了生成结果的可用性。3.3 领域特定指令针对项目技术栈的微调最后一部分是针对我当前主要技术栈React TypeScript Node.js的特定指令9. **针对React/TypeScript** - 优先使用函数组件和React Hooks。 - 为所有Props和State定义明确的TypeScript接口或类型。 - 使用useCallback和useMemo优化性能时需在注释中说明理由。 - 组件文件结构导出的主组件放在文件底部内部辅助组件或工具函数放在主组件之上。 10. **针对Node.js/后端** - 使用ES模块语法import/export。 - 对于API路由使用异步处理函数并确保捕获所有异常返回统一的错误响应格式。 - 数据库操作必须考虑连接池和事务安全如果上下文显示使用了ORM请按其模式生成。提示系统提示词不是一成不变的。我会根据项目的进展和Claude的“犯错”记录持续迭代这个提示词。例如如果发现它几次都忽略了某个项目的特定代码风格比如喜欢用interface而不是type我就会在提示词里明确加上这条规则。这个过程本身就是“调教”。4. 实战演练从零生成一个用户管理列表页让我们看一个完整的例子看看这个“调教”好的Claude宠物是如何工作的。假设我们有一个简单的React TypeScript Vite项目现在需要增加一个用户管理页面展示用户列表并支持搜索和分页。第一步提供上下文我首先会让上下文引擎读取项目关键的配置文件package.json了解项目依赖比如使用了Ant Design组件库、TanStack Query用于数据获取。一个现有的类似页面组件例如ProductList.tsx让Claude参考其代码风格、数据获取模式、组件结构。相关的类型定义文件如types/user.ts。第二步构造用户请求通过前端界面或CLI我发送如下请求 “请创建一个用户管理列表页路径为/admin/users。需要展示用户的ID、姓名、邮箱、创建时间字段支持按姓名搜索并带有分页功能。请参考项目中ProductList.tsx的代码风格使用Ant Design的Table和Input组件数据获取使用useQueryfromtanstack/react-query。假设后端API接口为GET /api/admin/users接受page,pageSize,name参数。”第三步观察Claude的“思考”与输出由于系统提示词中包含了“分步执行与解释”的指令Claude通常会先回复一个设计概要“好的我将为您创建一个用户管理列表页。基于您提供的ProductList.tsx作为参考我将采用以下结构创建一个新的组件文件src/pages/admin/UserList.tsx。定义查询参数的类型UserListQueryParams。使用useQuery来获取数据查询键queryKey将包含参数以确保缓存正确。使用Ant Design的Table,Input.Search和Pagination组件构建UI。处理搜索和分页变化事件并更新查询参数触发数据重新获取。为时间字段格式化显示。您看这个思路是否符合预期如果没问题我将开始生成具体代码。”在我回复“符合请生成代码”后它才会开始流式输出完整的、高质量的TypeScript代码。生成的代码通常会包括正确的import语句。完整的类型定义。一个符合项目风格的函数组件。集成了TanStack Query的useQuery逻辑并正确处理依赖数组。使用Ant Design组件的JSX结构并绑定了相应的事件处理函数。甚至还会贴心地加上一个// TODO: 需要连接真实的API端点的注释。第四步迭代与修正生成代码后我会将其放入项目运行。如果发现一些小问题比如某个Ant Design组件的属性名用错了我不会直接手动修改而是会再次向Claude“反馈” “在刚才生成的UserList.tsx中Table组件的onChange事件回调函数参数类型不对应该为TablePaginationConfig和FilterValue等组成的联合类型。请修正这个类型错误。”这时由于对话历史的存在Claude能精准定位到问题代码并给出修正后的版本。这个过程反复几次Claude对我这个项目的代码规范和常见错误会越来越熟悉后续生成代码的“一次通过率”会显著提高——这就是“宠物”在“成长”。5. 进化之路从工具到智能体的关键功能升级当基础的文件生成功能稳定后我开始尝试让这个“宠物”承担更复杂的任务推动它向“金色传说龙”进化。这需要为系统添加新的“能力”。5.1 代码分析与重构建议我增加了一个新的API端点/api/code/analyze。它接受一个代码片段或文件路径然后要求Claude执行以下任务之一代码审查找出潜在的性能问题、安全隐患、不符合代码规范的地方并给出修改建议。重构建议对于冗长或复杂的函数提出重构方案如提取子函数、使用设计模式等。解释代码对于一段难以理解的遗留代码让Claude用自然语言解释其功能。实现这个功能的关键是设计针对分析任务的专用提示词。例如对于代码审查系统提示词会追加“你现在扮演资深代码审查员。请以列表形式指出问题每个问题包括1. 问题位置行号。2. 问题描述。3. 严重级别高危/中危/建议。4. 修改建议和示例代码。”5.2 自动化测试生成这是提升开发效率的利器。我创建了一个工作流当开发者完成一个功能模块比如一个工具函数或React组件后可以右键文件选择“为当前文件生成测试”。后端会读取该文件内容结合项目测试框架的配置从jest.config.js等文件读取请求Claude生成对应的单元测试文件。这个功能的挑战在于让Claude理解“测试什么”。我的提示词会强调“请聚焦于测试公共接口和核心逻辑。为每个主要导出函数/组件生成测试用例覆盖正常路径、边界情况如空输入、非法参数和错误路径。使用清晰的测试描述it(should ... when ...)。避免测试实现细节。”5.3 数据库迁移脚本与API脚手架生成这是向“全栈智能体”迈进的一大步。我设计了一个工作流用户在前端描述数据模型例如“我需要一个BlogPost模型包含title字符串、content文本、authorId关联User、publishedAt日期时间字段”。系统根据项目使用的ORM比如Prisma首先生成schema.prisma中的模型定义片段。然后生成创建该模型所需数据库迁移脚本的SQL语句或Prisma迁移命令说明。接着生成一套完整的RESTful API控制器CRUD操作包括路由、Service层函数、以及基本的请求验证。最后生成对应的前端查询Hook如React Query的useQuery/useMutation封装。这个功能将多个步骤串联起来需要Claude对前后端技术栈有连贯的理解。我通过将一个大任务拆解成多个顺序执行的子任务并让每个子任务的输出作为下一个子任务的输入上下文实现了复杂的链式生成。6. 避坑实录那些让“宠物”宕机的时刻与解决方案“养成”过程绝非一帆风顺。下面分享几个让我印象深刻的“坑”以及我是如何解决的。6.1 上下文长度限制与“失忆”问题Claude 3系列模型有巨大的上下文窗口20万token但并非无限。在处理一个非常大的单体文件比如一个超过1000行的复杂组件时如果试图将整个文件内容都作为上下文发送可能会超过限制或被截断导致Claude对文件后半部分“失忆”生成牛头不对马嘴的代码。解决方案我改进了上下文管理引擎的“切片”算法。不再是简单按行切割而是首先使用Babel或TypeScript编译器API对源代码进行轻量级解析识别出函数声明、类声明、JSX元素等语法节点。当用户请求修改某个特定函数时引擎只提取该函数本身的代码以及其直接依赖的在同一个文件内被调用的其他函数和变量声明。同时会提取文件的顶部导入语句和全局类型定义因为这对理解代码环境至关重要。在发送给Claude的提示词中明确标注“以下是文件XXX.tsx的部分片段你只需要关注与[函数名]相关的部分。文件的其他部分已省略。”这样既保证了上下文的完整性又大幅减少了token消耗。6.2 “幻觉”与事实性错误LLM的“幻觉”在代码生成中表现为引用不存在的库函数、使用错误的API签名、或者“捏造”某个框架的特性。例如Claude可能会生成array.findBy(...)这样的代码而JavaScript标准库中只有array.find()。解决方案多管齐下。强化系统提示词在提示词中明确要求“只使用JavaScript/TypeScript官方标准库、以及上下文中package.json明确列出的依赖包及其文档中存在的API。如果你不确定某个函数或属性是否存在请注明‘需要确认’或者使用更通用的、肯定存在的方法替代。”后置语法检查在Claude生成代码后不直接返回给用户。而是先调用本地的TypeScript编译器tsc --noEmit或ESLint进行快速语法和类型检查。如果发现错误将错误信息连同原始代码再次发送给Claude要求它修正。这个“生成-检查-修正”的循环可以自动进行1-2次。人工审核环节对于生成的关键性代码如数据库操作、支付逻辑系统会在界面上明确标记为“AI生成请仔细审核”。养成开发者不盲目信任、始终进行代码审查的习惯是最终的安全网。6.3 性能与成本优化频繁调用Claude API尤其是使用最强的Opus模型成本不容忽视。同时流式响应虽然体验好但长时间连接也可能给服务器带来压力。解决方案模型分级策略不是所有任务都需要最强的模型。我制定了一个策略简单的代码补全、语法修正使用更快的Haiku模型复杂的逻辑生成、架构设计使用Sonnet模型只有在进行高难度代码审查或生成非常关键的复杂模块时才启用Opus模型。系统可以根据请求的复杂度和用户设置自动选择模型。结果缓存对于常见的、确定性的代码生成请求例如“为这个函数生成JSDoc注释”如果输入的代码哈希值相同则直接从缓存中返回结果避免重复调用API。非流式备选对于不需要实时体验的后台任务如批量生成测试使用非流式API它通常更快且更稳定。7. 开源的价值为什么我把“龙”的培育手册公之于众项目稳定运行一段时间后我决定将整个后端服务和核心“调教”逻辑在GitHub上开源。这不仅仅是“炫耀”而是基于几点更深的考虑首先是技术交流与共同进化。AI辅助编程是一个快速发展的领域没有一个人或一个团队能掌握所有最佳实践。开源项目像一个开放的实验场其他开发者可以克隆我的项目基于它进行改进比如集成OpenAI的GPT-4、接入国内的大模型、适配Java或Go语言的项目、或者设计出更精妙的提示词。他们的Pull Request和Issue会成为这个项目乃至整个方法论进化的养料。我看到有人为它添加了GitHub Actions自动化集成有人贡献了针对Python Django框架的提示词模板这些都是在单一闭源项目中难以获得的财富。其次是降低尝试门槛验证普适性。我想证明这套“培养AI代码宠物”的方法论不仅仅适用于我的个人技术栈和项目。通过开源任何开发者无论他们是用Vue.js、Spring Boot还是Flutter都可以参照我的架构设计和提示词设计思路去构建适合他们自己的版本。项目的核心价值不在于那几千行Node.js代码而在于那个不断迭代的系统提示词文件claude-system-prompt.txt和那些设计模式。开源能让更多人快速站在这个起点上而不是从零开始摸索。最后是建立一种透明的“人-AI协作”范式。在AI时代开发者如何与AI工具协作是一个亟待探索的课题。我的项目提供了一个具体的、可运行的案例。它展示了如何通过工程化的手段API封装、上下文管理、工作流将AI能力“管道化”而不是零散地使用聊天界面。开源所有代码包括那些处理“脏活累活”比如错误重试、日志记录的部分能让同行们更清晰地看到这种协作模式的成本、收益和边界在哪里从而共同推动更优实践的出现。回过头看“别人开盲盒我开源码”这句话说的就是一种心态的转变。开盲盒追求的是结果的不确定性和瞬间的惊喜而开源一个AI项目享受的是过程的可控性、成长的可见性以及与社区共享智慧带来的、更为持久和深远的满足感。看着自己的“宠物”在更多人的喂养下进化出意想不到的能力这种体验或许才是这个时代开发者所能拥有的、最酷的“金色传说”。 从调教到集成：构建可协作AI代码助手的工程实践
1. 从“开盲盒”到“开源码”一个AI代码宠物的诞生记最近在AI圈子里大家聊得最多的可能就是各种大模型的“调教”和“玩法”了。有人热衷于用提示词让AI写出惊艳的小说有人执着于让AI画出符合心意的图片而我一个常年和代码打交道的开发者则把兴趣点放在了“养成”一个能写代码的AI宠物上。这听起来有点像小时候玩的电子宠物只不过这次我的“宠物”是Anthropic家的Claude而“喂养”它的不是虚拟饲料而是我写的代码和精心设计的提示词。当别人还在为抽到某个稀有数字藏品或虚拟道具而兴奋时我已经在享受“开源”自己“养成”过程的乐趣了——我把整个“调教”Claude Code的代码仓库公开了看着它从一个只能处理简单任务的“代码助手”一步步进化成能理解复杂架构、自动生成高质量模块的“金色传说龙”这个过程本身就是最棒的“盲盒”。这个项目的核心远不止是让Claude变得更“聪明”。它本质上是在探索一种新的开发范式如何将大型语言模型LLM深度、可控地集成到我们的日常开发工作流中让它从一个被动的问答工具转变为一个主动的、可协作的、甚至能“成长”的智能体。我称之为“代码宠物”是因为它确实需要你像对待宠物一样去了解它的习性、引导它的行为、并给予它正确的反馈。最终的目标是让它能分担那些重复、繁琐但又有一定模式的编码任务比如根据设计稿生成组件代码、为现有函数编写单元测试、或者根据数据库Schema自动生成CRUD接口。而“金色传说龙”则是我给自己设定的一个趣味性目标——当这个AI宠物能够稳定、高质量地完成一个中等复杂度、涉及前后端联动的完整功能模块时它就“进化”到了这个阶段。如果你也是一名开发者对提升自己的开发效率感兴趣或者对AI如何具体落地到编码实践中充满好奇那么这篇分享可能会给你一些不一样的思路。我不会只讲空洞的概念而是会拆解我整个项目从零到一的构建过程包括架构设计、核心代码、关键的“调教”技巧以及那些让我掉进坑里又爬出来的实战经验。2. 架构蓝图如何为你的AI代码宠物搭建“家园”在开始“喂养”Claude之前我们得先给它建一个稳定、可交互的“家”。这个“家”就是整个系统的后端架构。直接让Claude通过网页界面帮你写代码效率太低且无法集成。我们需要的是一个能够程序化调用Claude API并能与我们本地开发环境或版本控制系统如Git无缝衔接的服务。2.1 核心组件选型与设计思路我的选择是基于Node.js TypeScript来构建这个后端服务。原因有几个首先JavaScript/TypeScript生态丰富与各种构建工具、前端框架的集成度极高其次异步处理模型非常适合与需要网络请求的AI API交互最后我个人技术栈对此更熟悉能更快地迭代。整个架构主要包含以下几个核心模块API路由层负责接收来自前端或CLI工具的请求。例如一个请求可能是“请为/src/components/Button.tsx文件生成单元测试”。我使用了Express.js框架因为它轻量且中间件生态完善。Claude API客户端层这是与Anthropic官方API通信的桥梁。我并没有直接使用原始的HTTP请求而是封装了一个专门的ClaudeService类。这个类负责管理API密钥、构造符合Claude消息格式的请求体、处理流式响应这对于生成长代码很重要以及统一错误处理。上下文管理引擎这是整个系统的“大脑”也是“调教”的关键所在。AI生成代码的质量极大程度上取决于你给它提供了什么样的上下文Context。这个引擎需要做几件事代码文件读取与切片当需要处理一个现有文件时它能读取文件内容并智能地将其分割成有意义的片段如按函数、类或一定行数因为Claude API有上下文长度限制。项目结构分析为了生成符合项目规范的代码它需要能理解项目的目录结构、使用的技术栈通过package.json、tsconfig.json等文件识别、以及编码风格通过.eslintrc等。对话历史管理将每次交互的请求和响应保存下来形成“记忆”。这样在下一次针对同一模块的请求时Claude就能基于之前的“对话”进行延续而不是每次都从零开始这极大地提升了连贯性和准确性。任务队列与工作流引擎有些代码生成任务可能很耗时或者需要分步骤进行例如先生成接口定义再生成实现最后生成测试。我引入了Bull库基于Redis实现了一个简单的任务队列。前端发起请求后后端创建一个任务放入队列立即返回一个任务ID。然后由后台Worker进程消费这个任务调用Claude服务执行并将最终结果或过程状态存储起来。前端可以通过任务ID轮询获取结果。这样实现了异步、可靠的任务处理。存储层用于保存生成后的代码片段、任务历史、以及“宠物”的配置和“成长”记录比如它在哪些类型的任务上成功率更高。我一开始用了简单的文件系统后来换成了SQLite便于查询和管理。2.2 关键代码ClaudeService的核心封装下面是我封装的ClaudeService类的简化版核心代码它展示了如何与Claude API进行流式交互这是实现“打字机效果”和实时反馈的关键。// src/services/claude.service.ts import { Anthropic } from anthropic-ai/sdk; import { EventEmitter } from events; export interface CodeGenerationResult { content: string; usage: { inputTokens: number; outputTokens: number; }; finishReason: end_turn | max_tokens | stop_sequence | string; } export class ClaudeService extends EventEmitter { private client: Anthropic; private systemPrompt: string; // 核心“调教”指令下文会详述 constructor(apiKey: string, systemPrompt: string) { super(); this.client new Anthropic({ apiKey }); this.systemPrompt systemPrompt; } async generateCodeStream( userPrompt: string, fileContext?: string, // 可选的上下文代码 options: { model: string; maxTokens: number } { model: claude-3-opus-20240229, maxTokens: 4000 } ): PromiseNodeJS.ReadableStream { const messages: any[] []; // 如果有文件上下文将其作为用户消息的一部分清晰标注 if (fileContext) { userPrompt 相关代码上下文\n\\\\n${fileContext}\n\\\\n\n用户请求${userPrompt}; } messages.push({ role: user, content: userPrompt }); try { const stream await this.client.messages.create({ model: options.model, max_tokens: options.maxTokens, system: this.systemPrompt, // 注入系统级指令 messages, stream: true, // 开启流式传输 }); // 创建一个可读流来转发Claude的流式响应 const readableStream new Readable({ read() {}, }); (async () { for await (const chunk of stream) { if (chunk.type content_block_delta chunk.delta.type text_delta) { // 发射文本增量供前端实时显示 this.emit(textDelta, chunk.delta.text); readableStream.push(chunk.delta.text); } // 可以处理其他类型的事件如usage等 } readableStream.push(null); // 结束流 this.emit(streamEnd); })(); return readableStream; } catch (error) { console.error(Claude API调用失败:, error); throw new Error(代码生成失败: ${error.message}); } } }这个封装将复杂的API调用和流式处理简化成了一个返回标准Node.js流的函数前端可以很方便地监听data事件来实时追加生成的代码模拟IDE中代码补全的效果。3. “调教”的艺术编写让Claude变成“金色传说龙”的系统提示词如果说架构是“宠物的身体”那么系统提示词System Prompt就是“宠物的灵魂和性格”。这是整个项目中最具挑战性也最有趣的部分。你无法通过编程直接告诉AI“如何写好代码”但你可以通过精心设计的自然语言指令引导它朝着你想要的方向发展。3.1 基础指令设定角色与核心原则我的系统提示词是一个长达数百字的文本它被分为几个逻辑部分。首先是基础角色设定和核心原则你是一位经验丰富、严谨细致的全栈软件开发专家精通TypeScript/JavaScript、React、Node.js及相关现代开发生态。你的核心任务是协助用户生成、分析、重构和解释代码。 请严格遵守以下原则 1. **安全性优先**绝对不生成任何可能用于破坏计算机系统、窃取数据、绕过授权或进行其他非法活动的代码。不讨论、不生成与网络代理、隧道工具等相关的代码。 2. **实用性至上**生成的代码必须是可运行、符合当前项目上下文和技术栈的。优先使用现代、稳定、社区接受度高的库和语法。 3. **代码质量**遵循ESLint Airbnb风格指南。使用清晰的变量名和函数名添加必要的JSDoc/TSDoc注释特别是公共API。保持函数单一职责避免过长函数。 4. **上下文感知**你将获得用户提供的相关代码文件作为上下文。你必须仔细分析这些上下文确保你生成的代码在风格、导入导出、类型定义上与现有代码库保持一致。如果上下文中有package.json请以其声明的依赖版本为准。这部分指令为Claude划定了一个安全、可靠的基线行为框架。特别强调安全性是确保项目内容合规的底线。3.2 高级指令模拟开发工作流与决策逻辑接下来是更高级的指令旨在让Claude模拟一个真实开发者的思考过程5. **交互与澄清**如果用户的需求模糊、存在歧义或者你发现根据上下文有多种合理的实现方式你应该主动提问以澄清。例如“您希望这个函数是同步还是异步”、“这个组件的UI风格是沿用项目里的Material-UI还是自定义”。不要猜测多问一句能极大减少返工。 6. **分步执行与解释**对于复杂任务不要试图一次性生成所有代码。可以先给出高层次的设计思路例如“我将创建一个React Hook useUserData它负责从API获取用户数据并管理加载和错误状态。它包含以下函数...”在获得用户确认后再生成具体代码。在生成代码后可以简要解释关键部分的设计理由。 7. **错误处理与边界情况**生成的代码必须包含基本的错误处理如try-catch、Promise.catch。考虑网络请求失败、空数据、无效输入等边界情况并给出合理的默认行为或错误提示。 8. **测试意识**在生成功能代码时可以同时建议需要编写的测试用例描述性的如“应该测试组件在传入空数组时的渲染状态”。如果用户明确要求你可以直接生成配套的单元测试代码使用Jest/Vitest和React Testing Library。第5点和第6点是让Claude从“代码打字机”进化为“协作伙伴”的关键。它迫使AI在行动前思考并邀请用户参与决策这大大提高了生成结果的可用性。3.3 领域特定指令针对项目技术栈的微调最后一部分是针对我当前主要技术栈React TypeScript Node.js的特定指令9. **针对React/TypeScript** - 优先使用函数组件和React Hooks。 - 为所有Props和State定义明确的TypeScript接口或类型。 - 使用useCallback和useMemo优化性能时需在注释中说明理由。 - 组件文件结构导出的主组件放在文件底部内部辅助组件或工具函数放在主组件之上。 10. **针对Node.js/后端** - 使用ES模块语法import/export。 - 对于API路由使用异步处理函数并确保捕获所有异常返回统一的错误响应格式。 - 数据库操作必须考虑连接池和事务安全如果上下文显示使用了ORM请按其模式生成。提示系统提示词不是一成不变的。我会根据项目的进展和Claude的“犯错”记录持续迭代这个提示词。例如如果发现它几次都忽略了某个项目的特定代码风格比如喜欢用interface而不是type我就会在提示词里明确加上这条规则。这个过程本身就是“调教”。4. 实战演练从零生成一个用户管理列表页让我们看一个完整的例子看看这个“调教”好的Claude宠物是如何工作的。假设我们有一个简单的React TypeScript Vite项目现在需要增加一个用户管理页面展示用户列表并支持搜索和分页。第一步提供上下文我首先会让上下文引擎读取项目关键的配置文件package.json了解项目依赖比如使用了Ant Design组件库、TanStack Query用于数据获取。一个现有的类似页面组件例如ProductList.tsx让Claude参考其代码风格、数据获取模式、组件结构。相关的类型定义文件如types/user.ts。第二步构造用户请求通过前端界面或CLI我发送如下请求 “请创建一个用户管理列表页路径为/admin/users。需要展示用户的ID、姓名、邮箱、创建时间字段支持按姓名搜索并带有分页功能。请参考项目中ProductList.tsx的代码风格使用Ant Design的Table和Input组件数据获取使用useQueryfromtanstack/react-query。假设后端API接口为GET /api/admin/users接受page,pageSize,name参数。”第三步观察Claude的“思考”与输出由于系统提示词中包含了“分步执行与解释”的指令Claude通常会先回复一个设计概要“好的我将为您创建一个用户管理列表页。基于您提供的ProductList.tsx作为参考我将采用以下结构创建一个新的组件文件src/pages/admin/UserList.tsx。定义查询参数的类型UserListQueryParams。使用useQuery来获取数据查询键queryKey将包含参数以确保缓存正确。使用Ant Design的Table,Input.Search和Pagination组件构建UI。处理搜索和分页变化事件并更新查询参数触发数据重新获取。为时间字段格式化显示。您看这个思路是否符合预期如果没问题我将开始生成具体代码。”在我回复“符合请生成代码”后它才会开始流式输出完整的、高质量的TypeScript代码。生成的代码通常会包括正确的import语句。完整的类型定义。一个符合项目风格的函数组件。集成了TanStack Query的useQuery逻辑并正确处理依赖数组。使用Ant Design组件的JSX结构并绑定了相应的事件处理函数。甚至还会贴心地加上一个// TODO: 需要连接真实的API端点的注释。第四步迭代与修正生成代码后我会将其放入项目运行。如果发现一些小问题比如某个Ant Design组件的属性名用错了我不会直接手动修改而是会再次向Claude“反馈” “在刚才生成的UserList.tsx中Table组件的onChange事件回调函数参数类型不对应该为TablePaginationConfig和FilterValue等组成的联合类型。请修正这个类型错误。”这时由于对话历史的存在Claude能精准定位到问题代码并给出修正后的版本。这个过程反复几次Claude对我这个项目的代码规范和常见错误会越来越熟悉后续生成代码的“一次通过率”会显著提高——这就是“宠物”在“成长”。5. 进化之路从工具到智能体的关键功能升级当基础的文件生成功能稳定后我开始尝试让这个“宠物”承担更复杂的任务推动它向“金色传说龙”进化。这需要为系统添加新的“能力”。5.1 代码分析与重构建议我增加了一个新的API端点/api/code/analyze。它接受一个代码片段或文件路径然后要求Claude执行以下任务之一代码审查找出潜在的性能问题、安全隐患、不符合代码规范的地方并给出修改建议。重构建议对于冗长或复杂的函数提出重构方案如提取子函数、使用设计模式等。解释代码对于一段难以理解的遗留代码让Claude用自然语言解释其功能。实现这个功能的关键是设计针对分析任务的专用提示词。例如对于代码审查系统提示词会追加“你现在扮演资深代码审查员。请以列表形式指出问题每个问题包括1. 问题位置行号。2. 问题描述。3. 严重级别高危/中危/建议。4. 修改建议和示例代码。”5.2 自动化测试生成这是提升开发效率的利器。我创建了一个工作流当开发者完成一个功能模块比如一个工具函数或React组件后可以右键文件选择“为当前文件生成测试”。后端会读取该文件内容结合项目测试框架的配置从jest.config.js等文件读取请求Claude生成对应的单元测试文件。这个功能的挑战在于让Claude理解“测试什么”。我的提示词会强调“请聚焦于测试公共接口和核心逻辑。为每个主要导出函数/组件生成测试用例覆盖正常路径、边界情况如空输入、非法参数和错误路径。使用清晰的测试描述it(should ... when ...)。避免测试实现细节。”5.3 数据库迁移脚本与API脚手架生成这是向“全栈智能体”迈进的一大步。我设计了一个工作流用户在前端描述数据模型例如“我需要一个BlogPost模型包含title字符串、content文本、authorId关联User、publishedAt日期时间字段”。系统根据项目使用的ORM比如Prisma首先生成schema.prisma中的模型定义片段。然后生成创建该模型所需数据库迁移脚本的SQL语句或Prisma迁移命令说明。接着生成一套完整的RESTful API控制器CRUD操作包括路由、Service层函数、以及基本的请求验证。最后生成对应的前端查询Hook如React Query的useQuery/useMutation封装。这个功能将多个步骤串联起来需要Claude对前后端技术栈有连贯的理解。我通过将一个大任务拆解成多个顺序执行的子任务并让每个子任务的输出作为下一个子任务的输入上下文实现了复杂的链式生成。6. 避坑实录那些让“宠物”宕机的时刻与解决方案“养成”过程绝非一帆风顺。下面分享几个让我印象深刻的“坑”以及我是如何解决的。6.1 上下文长度限制与“失忆”问题Claude 3系列模型有巨大的上下文窗口20万token但并非无限。在处理一个非常大的单体文件比如一个超过1000行的复杂组件时如果试图将整个文件内容都作为上下文发送可能会超过限制或被截断导致Claude对文件后半部分“失忆”生成牛头不对马嘴的代码。解决方案我改进了上下文管理引擎的“切片”算法。不再是简单按行切割而是首先使用Babel或TypeScript编译器API对源代码进行轻量级解析识别出函数声明、类声明、JSX元素等语法节点。当用户请求修改某个特定函数时引擎只提取该函数本身的代码以及其直接依赖的在同一个文件内被调用的其他函数和变量声明。同时会提取文件的顶部导入语句和全局类型定义因为这对理解代码环境至关重要。在发送给Claude的提示词中明确标注“以下是文件XXX.tsx的部分片段你只需要关注与[函数名]相关的部分。文件的其他部分已省略。”这样既保证了上下文的完整性又大幅减少了token消耗。6.2 “幻觉”与事实性错误LLM的“幻觉”在代码生成中表现为引用不存在的库函数、使用错误的API签名、或者“捏造”某个框架的特性。例如Claude可能会生成array.findBy(...)这样的代码而JavaScript标准库中只有array.find()。解决方案多管齐下。强化系统提示词在提示词中明确要求“只使用JavaScript/TypeScript官方标准库、以及上下文中package.json明确列出的依赖包及其文档中存在的API。如果你不确定某个函数或属性是否存在请注明‘需要确认’或者使用更通用的、肯定存在的方法替代。”后置语法检查在Claude生成代码后不直接返回给用户。而是先调用本地的TypeScript编译器tsc --noEmit或ESLint进行快速语法和类型检查。如果发现错误将错误信息连同原始代码再次发送给Claude要求它修正。这个“生成-检查-修正”的循环可以自动进行1-2次。人工审核环节对于生成的关键性代码如数据库操作、支付逻辑系统会在界面上明确标记为“AI生成请仔细审核”。养成开发者不盲目信任、始终进行代码审查的习惯是最终的安全网。6.3 性能与成本优化频繁调用Claude API尤其是使用最强的Opus模型成本不容忽视。同时流式响应虽然体验好但长时间连接也可能给服务器带来压力。解决方案模型分级策略不是所有任务都需要最强的模型。我制定了一个策略简单的代码补全、语法修正使用更快的Haiku模型复杂的逻辑生成、架构设计使用Sonnet模型只有在进行高难度代码审查或生成非常关键的复杂模块时才启用Opus模型。系统可以根据请求的复杂度和用户设置自动选择模型。结果缓存对于常见的、确定性的代码生成请求例如“为这个函数生成JSDoc注释”如果输入的代码哈希值相同则直接从缓存中返回结果避免重复调用API。非流式备选对于不需要实时体验的后台任务如批量生成测试使用非流式API它通常更快且更稳定。7. 开源的价值为什么我把“龙”的培育手册公之于众项目稳定运行一段时间后我决定将整个后端服务和核心“调教”逻辑在GitHub上开源。这不仅仅是“炫耀”而是基于几点更深的考虑首先是技术交流与共同进化。AI辅助编程是一个快速发展的领域没有一个人或一个团队能掌握所有最佳实践。开源项目像一个开放的实验场其他开发者可以克隆我的项目基于它进行改进比如集成OpenAI的GPT-4、接入国内的大模型、适配Java或Go语言的项目、或者设计出更精妙的提示词。他们的Pull Request和Issue会成为这个项目乃至整个方法论进化的养料。我看到有人为它添加了GitHub Actions自动化集成有人贡献了针对Python Django框架的提示词模板这些都是在单一闭源项目中难以获得的财富。其次是降低尝试门槛验证普适性。我想证明这套“培养AI代码宠物”的方法论不仅仅适用于我的个人技术栈和项目。通过开源任何开发者无论他们是用Vue.js、Spring Boot还是Flutter都可以参照我的架构设计和提示词设计思路去构建适合他们自己的版本。项目的核心价值不在于那几千行Node.js代码而在于那个不断迭代的系统提示词文件claude-system-prompt.txt和那些设计模式。开源能让更多人快速站在这个起点上而不是从零开始摸索。最后是建立一种透明的“人-AI协作”范式。在AI时代开发者如何与AI工具协作是一个亟待探索的课题。我的项目提供了一个具体的、可运行的案例。它展示了如何通过工程化的手段API封装、上下文管理、工作流将AI能力“管道化”而不是零散地使用聊天界面。开源所有代码包括那些处理“脏活累活”比如错误重试、日志记录的部分能让同行们更清晰地看到这种协作模式的成本、收益和边界在哪里从而共同推动更优实践的出现。回过头看“别人开盲盒我开源码”这句话说的就是一种心态的转变。开盲盒追求的是结果的不确定性和瞬间的惊喜而开源一个AI项目享受的是过程的可控性、成长的可见性以及与社区共享智慧带来的、更为持久和深远的满足感。看着自己的“宠物”在更多人的喂养下进化出意想不到的能力这种体验或许才是这个时代开发者所能拥有的、最酷的“金色传说”。