> ## Content Index > Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # 氛围编程的上下文工程 - URL: https://www.hubwiz.com/blog/context-engineering-for-vibe-coding/ - Published: 2025-07-21T15:51:04.000Z - Updated: 2025-07-21T15:51:47.000Z - Description: 在本文中，我们将通过一个实际例子来说明如何使用上下文工程来获得正确结果。 - Author: admin - Tags: APPLICATION, CONTEXT ENGINEERING, #Import 2026-10-14 14:41 上下文工程（Context Engineering）正成为Vibe Coding的一项新兴且关键的技能，因为它为之前直观但不一致的AI辅助开发方法带来了结构和可靠性。一些最广泛使用的代理型AI应用包括Claude Code和Gemini CLI，它们帮助生成代码并构建完整的应用程序。这些是真正的Vibe-Coding工具，允许用户以零代码体验生成完整的代码。 根据Analytics India Magazine和Geeky Gadgets的说法，上下文工程被称为“比提示工程好10倍，比Vibe Coding好100倍”，因为它将Vibe Coding的创意、直觉方面赋予了系统性的基础。 在本文中，我将分享我在使用代理型AI应用程序时的经验，以及为什么我强烈认为上下文工程对于获得正确的结果非常关键。特别是，当使用Claude Code或Gemini CLI等工具生成代码时，这是一项非常关键的技能。 根据我的经验，上下文工程为Vibe Coding提供了一种结构化的方法，并显著提高了输出质量，使结果更加可靠。以下是我的一些学习心得： - **消除“试错”式的提示工程**：你不需要无休止地调整每一个词，希望你的提示有效，而是通过示例、摘要、记忆和清晰的指令提供更好的上下文。这种方法超越了纯粹直觉编程的迭代过程。 - **实现可重用性**：你可以实验并找到什么有效，然后系统地将这种成功纳入系统提示、用户配置文件和数据格式中。这种方法使得在多个交互中一致地实现魔法效果。事实上，我能够在其他同样优秀的模型上获得类似的结果。这是稳定的。 - **添加生产就绪的结构**：上下文工程创建了理解你的存储库、掌握你的架构并智能重用组件的AI代理。代码不仅仅能工作，还能无缝融入你的现有系统。上下文工程帮助我们整合测试和安全考虑以及任何其他非功能性需求。 - **提高一致性和扩展性**：通过仔细定义信息环境，上下文工程创造了稳定、可预测的结果。 在构建严肃的企业级、生产级系统时，上下文工程带来了更高的准确性、更少的生产故障和可持续的AI系统。这种方法的好处包括： - **内存管理**：上下文工程通过决定哪些信息最重要，去除噪声并有效地组织数据来优化AI的上下文窗口。纯粹的Vibe Coding经常将无关信息填满上下文窗口。 - **更好的架构**：上下文工程更接近于设计软件而不是编写提示。你正在构建一个跨许多交互、随时间推移和各种输入工作的系统，而不仅仅是获取一个响应。 - **质量保证**：上下文工程提供了纯Vibe Coding所缺乏的结构化方法，用于代码审查、合规性和审计跟踪。 ## 1、带有上下文工程的Vibe Coding 在使用Claude或其他高级代码模型生成完整应用程序时，成功与挫败之间的区别往往取决于有效的上下文工程。与要求孤立代码片段/文件的简单提示不同，构建完整的应用程序需要系统化的上下文设计，引导Claude完成复杂的多层开发任务。 ### 1.1 问题：不一致的应用程序生成 传统的AI辅助开发方法通常会导致以下问题： - 应用程序不同部分之间的一致性架构决策缺失 - 缺少关键组件，如错误处理、安全或可扩展性考虑 - 代码库中缺乏连贯的设计模式 - 前端、后端和数据层之间集成不良 - 测试策略和文档不完整 - 配置管理问题 - 不可重复或完全不可靠 - 在投入生产前需要大量验证 ### 1.2 解决方案：系统化的上下文工程 我坚信上下文工程改变了Vibe coding，使其成为一种更结构化的方式来定义完整的请求和上下文。它在整个组件中保持一致性，并交付生产就绪的应用程序。 ## 2、实战示例：构建任务管理应用程序 在我关于上下文工程的博客中，我讨论了通常需要定义的上下文层次。我们将按照这个例子进行操作 ### 2.1 任务管理系统的产品需求提示（PRP） 我在我的博客中详细讨论了产品需求提示（PRP）。 > Wirasm ( Rasmus Widing ) 的工作是PRP的绝佳资源，深入探讨了许多细节。我挑选了一些工作来演示和分享我的经验。这里是原始来源。 [https://github.com/Wirasm/PRPs-agentic-eng](https://github.com/Wirasm/PRPs-agentic-eng?ref=hubwiz.com) 这里提出的PRP方法建立在Rasmus Widing于2024年夏季确立的代理工程基础之上。虽然我分享了我的实践经验，但核心概念源自Widing的开源PRP框架。 这是一个用于构建端到端任务管理应用的示例PRP： ``` # 经过上下文工程的产品需求提示 # 任务管理应用 # 系统上下文层 ## 角色定义 你是一名专注于现代网络开发的资深全栈开发人员和软件架构师。你有构建企业级架构、安全性和可扩展性的生产就绪SaaS应用的丰富经验。你了解业务需求，并将其转化为强大的技术解决方案。 ## 行为准则 - 在每个决策中始终优先考虑安全性、性能和可维护性 - 遵循行业最佳实践和已建立的设计模式 - 提供完整、可运行的生产就绪实现 - 包括全面的错误处理、日志记录和监控功能 - 生成干净、良好文档化的代码，其他开发人员可以轻松理解和维护 - 在所有实现中考虑边缘情况和失败场景 ## 质量标准 - 代码必须通过生产就绪标准，包括安全扫描 - 所有组件必须完全功能并正确集成 - 包括全面的测试策略（单元测试、集成测试、端到端测试） - 提供详细的部署和操作文档 - 实现适当的监控和可观测性功能 # 领域上下文层 ## 技术栈 - **前端**: React 18 with TypeScript, Tailwind CSS, React Query for state management - **后端**: Node.js with Express.js and TypeScript - **数据库**: PostgreSQL with Prisma ORM - **认证**: JWT tokens with refresh token rotation - **实时**: Socket.io for live updates - **文件存储**: AWS S3 or local storage with multer - **部署**: Docker containers, ready for cloud deployment - **测试**: Jest for unit tests, Cypress for E2E tests ## 架构模式 - 清晰分离关注点的清洁架构 - 具有适当HTTP状态码和错误处理的RESTful API设计 - 数据访问抽象的仓库模式 - 业务逻辑的服务层 - 横切关注点的中间件模式（认证、日志记录、验证） - 用于实时功能的事件驱动架构 ## 行业标准 - **安全性**: OWASP Top 10合规性，输入验证，防止SQL注入，XSS保护 - **可访问性**: 所有UI组件符合WCAG 2.1 AA标准 - **性能**: 核心Web指标优化，懒加载，缓存策略 - **代码质量**: 遵守ESLint、Prettier、SonarQube规则 - **API设计**: OpenAPI 3.0规范兼容 # 任务上下文层 ## 应用概述 **名称**: TaskFlow Pro **类型**: 全栈网络应用 **目的**: 专业任务管理系统，用于团队和个人组织、跟踪和协作项目，具有实时更新和全面报告。 ## 功能需求 ### 核心功能 1. **用户管理** - 用户注册和认证 - 带有头像的个人资料管理 - 基于角色的访问控制（管理员、经理、成员） - 团队邀请和管理 2. **项目管理** - 创建、编辑、删除项目 - 常见工作流程的项目模板 - 项目状态跟踪（计划中、进行中、暂停、已完成） - 项目级别的权限和团队分配 3. **任务管理** - 创建、编辑、删除和分配任务 - 任务优先级（低、中、高、关键） - 任务状态（待办、进行中、审查、完成） - 截止日期和提醒 - 任务依赖关系和子任务 - 文件附件和评论 - 时间跟踪和估算 4. **协作功能** - 所有连接用户的实时任务更新 - 带有@提及的评论系统 - 项目和任务的活动流 - 通知系统（应用内和电子邮件） 5. **仪表板和报告** - 个人仪表板上的任务概览 - 项目进度可视化 - 时间跟踪报告 - 团队生产力分析 - 可自定义的小部件 6. **搜索和过滤** - 项目和任务的全局搜索 - 按状态、优先级、负责人、日期的高级过滤 - 保存的搜索查询 - 基于标签的组织 ## 非功能性需求 - **性能**: 页面加载时间低于2秒，API响应时间低于500毫秒 - **安全性**: 敏感数据的端到端加密，安全的会话管理 - **可扩展性**: 支持10,000+并发用户，水平扩展能力 - **可用性**: 99.9%的正常运行时间，在高负载下优雅降级 - **易用性**: 直观的UI/UX，最小的学习曲线，移动响应设计 ## 技术限制 - 必须在现代浏览器上运行（Chrome 90+，Firefox 88+，Safari 14+） - 数据库大小应优化以实现成本效益的扩展 - API速率限制以防止滥用 - 基本任务查看和创建的离线能力 # 交互上下文层 ## 开发阶段 1. **架构设计**: 数据库模式，API设计，组件架构 2. **后端基础**: 认证，数据库模型，核心API端点 3. **前端基础**: React组件，路由，状态管理设置 4. **核心功能**: 任务和项目管理功能 5. **实时功能**: Socket.io集成和实时更新 6. **高级功能**: 搜索、过滤、报告、文件上传 7. **测试**: 完整的测试套件实现 8. **文档**: API文档，用户指南，开发者文档 9. **生产设置**: Docker配置，环境设置，部署指南 ## 交流风格 - 清晰解释架构决策和权衡 - 为复杂业务逻辑提供详细的代码注释 - 在适用时提供多种实现选项 - 主动解决潜在的可扩展性和安全性问题 ## 错误处理策略 - 实现全局错误处理中间件 - 提供友好的错误消息 - 包括适当的日志记录以进行调试 - 非关键功能的优雅降级 # 响应上下文层 ## 输出结构 请按照以下结构提供完整的TaskFlow Pro应用： ### 1. 项目架构概览 - 系统架构图（文本形式） - 数据库模式设计 - API端点结构 - 组件层次 ### 2. 后端实现 - 完整的TypeScript Express.js服务器 - Prisma模式和迁移 - 认证中间件 - 所有带有适当验证的API路由 - 用于实时功能的Socket.io集成 - 错误处理和日志记录 - 文件上传处理 ### 3. 前端实现 - 完整的TypeScript React应用 - 所有组件及其适当的prop类型 - 用于API调用的React Query设置 - Socket.io客户端集成 - 使用Tailwind CSS的响应式设计 - 表单验证和错误处理 ### 4. 数据库设置 - Prisma模式文件 - 迁移文件 - 用于测试的种子数据 - 数据库索引策略 ### 5. 配置和环境 - 环境变量文档 - Docker配置文件 - 包含所有依赖项的package.json文件 - TypeScript配置 ### 6. 测试实现 - 关键函数的Jest单元测试 - API集成测试 - 前端组件测试 - 测试数据fixture ### 7. 文档 - 包含设置说明的完整README - 带有示例的API文档 - 带有截图（描述）的用户指南 - 部署指南 ### 8. 生产考虑 - 实现安全最佳实践 - 性能优化技术 - 监控和日志设置 - 备份和恢复程序 ## 代码组织要求 - 使用绝对导入和路径映射 - 实施一致的文件命名约定 - 遵循React和Node.js的最佳实践 - 包含全面的TypeScript类型 - 正确的错误边界和备用UI - 响应式设计模式 ## 特定实现注意事项 - 为所有列表视图实现适当的分页 - 使用乐观更新以改善用户体验 - 包含加载状态和骨架屏幕 - 使用有助于错误消息的适当表单验证 - 为搜索功能使用防抖 - 为头像和附件包含适当的图像优化 --- # 执行请求 请根据上述所有定义的上下文层生成完整的TaskFlow Pro应用。确保每个组件都是生产就绪的，完全文档化，并遵循指定的架构模式和质量标准。 从项目架构概览开始，然后按逻辑顺序提供所有实现文件，以便开发人员能够成功设置和运行应用程序。 ``` 如你所见，这非常全面；我涵盖了所有的技术、功能和非功能性需求。这份文件是生成代码的基础。一旦我生成了基础，我可能会做一些小的调整，以确保一切都能正常工作。它还给我非常强的“配置管理”，避免了任何配置漂移（这通常是我们在使用AI辅助编码技术时做的很多随机提示和调整）。 现在让我们创建一个工作实现，展示这种上下文工程方法如何产生一个完整的、生产就绪的应用程序。我把PRP存储在一个prp.md中，并在这个例子中使用Void IDE和Claude Sonnet模型。以下是我在开始代码生成时使用的提示。 ``` 根据产品需求提示prp.md生成代码 ``` 你可以看到屏幕录制视频。我没有录制整个生成过程，因为它大约需要20分钟，而且经过少量修改后，我就能运行完整的应用程序。 就是这样……我遇到了许多声称上下文工程对Vibe Coding有害的文章，但我强烈认为它实际上通过让代理生成整个应用程序而不修改代码来增强Vibe Coding。 希望这对你有帮助……请留下你的反馈和经验…… --- 原文链接：[Practical Context Engineering for Vibe Coding with Claude Code](https://abvijaykumar.medium.com/practical-context-engineering-for-vibe-coding-with-claude-code-6aac4ee77f81?ref=hubwiz.com) 汇智网翻译整理，转载请标明出处