User Authentication Feature【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibeUser StoriesAs a new user, I want to register with my emailAs a registered user, I want to log in with email and passwordAs a user who forgot my password, I want to reset it by emailAcceptance CriteriaValidate email format and password strength during registrationLock the account for 15 minutes after 5 failed login attemptsPassword reset links are valid for 30 minutes**第二层语言无关规格How——架构层**——定义数据结构、架构模式与安全需求 markdown ## Technical Design ### Data Model - users table: id, email, password_hash, created_at, locked_until - sessions table: id, user_id, token, expires_at ### API Design - POST /api/auth/register - 201 Created - POST /api/auth/login - 200 OK JWT - POST /api/auth/reset-password - 202 Accepted ### Security Requirements - Passwords use bcrypt with cost factor 12 - JWT expires in 15 minutes, refresh token in 7 days - Enable rate limiting on all endpoints第三层语言相关规格How——实现层——版本要求、测试框架与文档规范## Implementation Constraints ### Tech Stack - Runtime: Node.js 20 - Framework: Express 5 - ORM: Prisma - Testing: Vitest ### Code Conventions - Use TypeScript strict mode - Use a custom AppError class for error handling - All API endpoints require JSDoc comments三层规格各司其职第一层对齐「做什么」第二层约束「架构怎么做」第三层锁定「代码怎么写」从意图到实现层层收敛。三、在 Claude Code 中落地 Spec Coding 工作流Claude Code 的设计哲学天然契合 Spec Coding——它的CLAUDE.md、Rules 目录和/plan命令都是规格驱动开发的载体。值得参考的实践来自 OpenAI 自身当 OpenAI 用 Codex 构建项目时会用AGENTS.md文件作为规格来引导 AI Agent。他们的核心经验是当 Agent 遇到困难时把它当作一个信号——识别缺失的是什么工具、护栏还是文档然后补充到仓库中。这与 Spec Coding 完全一致规格是活的工件应当持续演进。Augment Code 的研究也支持同一结论可执行规格之所以能保持准确是因为 AI Agent 直接依据规格生成代码这形成了一种强制机制——过时的规格必然产生残缺的实现。这意味着规格不会像传统文档那样腐烂。3.1 第一步用CLAUDE.md建立项目规格CLAUDE.md是项目的「活规格」。Claude Code 每次启动都会读取该文件相当于给 AI 一份持久化的项目手册。在 Spec Coding 语境下它不仅是配置文件更是项目规格的入口。LogRocket 的工程师强调扎实的上下文对 AI Agent 至关重要因为它能防止幻觉和低效。没有规格AI Agent 可能对项目做出大规模、不受控的改动。CLAUDE.md就是提供「扎实上下文」的第一道防线。# E-commerce Project Specification ## Project Positioning A SaaS e-commerce platform for small and medium-sized merchants, supporting multiple stores and multiple payment channels. ## Architectural Decisions - Frontend-backend separation with an API-first design - Microservice backend architecture, with services communicating through a message queue - Read-write database separation ## Core Constraints - Store all monetary amounts as integers in cents to avoid floating-point precision issues - The order state machine must strictly follow: pending payment - paid - shipped - completed - Payment-related endpoints must be idempotentAviator 团队总结了规格应当捕获的关键信息——这也正是你的CLAUDE.md应该覆盖的内容输入输出格式与数据类型业务规则与边界情况系统依赖与约束性能与可扩展性要求错误处理与安全要求仓库实例验证本仓库根目录的 CLAUDE.md 就是一个教科书级的项目规格——它写明了项目定位面向零基础到进阶的 AI Vibe Coding 教育课程、四阶段课程结构Stage 0 幼儿园 → Stage 1 AI 产品经理 → Stage 2 初中级开发工程师 → Stage 3 高级开发工程师、开发命令npm run dev/npm run build、Node.js 版本要求 18.0.0、VitePress 基础路径配置逻辑docs/.vitepress/config.mjs:3-5依据VERCEL环境变量区分/与/easy-vibe/、文件命名规范kebab-case以及代码格式化约定Prettier无分号、单引号、无尾逗号。当你要求 Claude Code 在本仓库内修改文档或组件时它会自动依据这份「规格」行事——这正是 Spec Coding 的日常形态。3.2 第二步用 Rules 目录管理分层规格项目成长后单一CLAUDE.md不再够用此时应使用.claude/rules/目录组织分层规格。这正是 Augment Code 所说的「可执行规格」规格不是静态文档而是 AI Agent 直接消费的活指令。把规则拆进 Rules 目录后每个规则文件只在编辑相关文件时被加载既节省 token 又保持精确。Tessl 的工程师发现把需求拆解为结构化文档——用 PRD 定义「是什么和为什么」用技术规格定义「怎么做」——有助于防止 AI 在长对话中积累困惑显著提升输出一致性。.claude/rules/ ├── 00-architecture.md # Architecture rules (global) ├── 01-security.md # Security rules (global) ├── 10-api-design.md # API design rules ├── 11-frontend-patterns.md # Frontend pattern rules ├── 12-database.md # Database rules └── 20-testing.md # Testing rules每个规则文件可以通过 frontmatter 指定作用范围--- globs: - src/api/**/*.ts - src/services/**/*.ts --- # API Design Rules ## Route Design - RESTful style, use plural nouns: /api/v1/orders - Nested resources can go at most two levels deep: /api/v1/users/123/orders ## Response Format - Success: { data, pagination? } - Error: { error: { code, message, details? } } ## Must Follow - All write operations require authentication - All list endpoints must support pagination - Sensitive operations must write audit logs这样当 Claude Code 编辑 API 相关文件时会自动加载这份规格确保生成的代码遵循统一标准。3.3 第三步用/plan实现 Specify → Plan → Tasks → Implement标准 Spec Coding 工作流是一个四阶段循环。GitHub Spec Kit 将其标准化为Specify → Plan → Tasks → Implement而 Claude Code 的/plan命令天然支持这一流程。SpecThis 团队强调了一条关键原则在 Agent 运行之前就定义好边界——在任何代码变更发生之前先弄清楚什么应该被改变。这正是/plan的价值所在。阶段一Specify明确规格——先写清楚要构建什么不要急着写代码/plan I need to implement an order refund feature. The specification is: Functional requirements: - Users can request a full refund before shipment - Within 7 days after shipment, users can request a return and refund - Refunds require administrator approval Acceptance criteria: - The refund amount cannot exceed the amount actually paid for the order - Refund state machine: requested - approved - refunding - refunded - Inventory is restored after the refund is completed - Log every operation throughout the process阶段二Plan生成计划——Claude 会根据你的规格生成技术方案 Refund Feature Implementation Plan 1. Data model design - Create a refunds table - Add refund-related states to the order state machine 2. API design - POST /api/orders/:id/refund - request a refund - PUT /api/refunds/:id/approve - approve a refund - GET /api/refunds - refund list 3. Business logic - Refund eligibility checks - Refund amount calculation - Inventory restoration logic 4. Integrations - Connect to the payment providers refund API - Send refund notifications阶段三Tasks拆解任务——把计划拆成可独立执行的小任务并为每个任务给出明确的完成标准。阶段四Implement逐步实现——一次实现一个任务每完成一个就验证一次。3.4 实战对比用两种方式构建用户通知系统Orchestrator.dev 的数据显示2025 年 Stack Overflow 调查中 84% 的开发者使用或计划使用 AI 工具但只有 22% 对结果满意46% 认为准确性是问题——Spec Coding 正是弥合满意度差距的关键。Vibe Coding 方式You: Build a notification feature AI: [Immediately starts writing code and generates a simple notification list] You: It should support read and unread AI: [Modifies the code and adds a read field] You: It also needs multiple notification types AI: [Changes it again and adds a type field] You: It should push notifications to phones too AI: [Makes a big rewrite, and the previous structure no longer fits very well...]结果四轮修改下来架构被反复推翻代码越改越乱。Spec Coding 方式先写规格文档specs/notification.md# User Notification System Specification ## Functional Requirements 1. Support three channels: in-app notifications, email notifications, and push notifications 2. Notification types: system announcements, order status, promotional campaigns, security alerts 3. Users can configure notification preferences by channel and type 4. Support read/unread state and bulk mark-as-read ## Data Model - notifications table: id, user_id, type, channel, title, content, is_read, created_at - notification_preferences table: user_id, type, channel, enabled ## API Design - GET /api/notifications?typeis_read - get notification list (paginated) - PUT /api/notifications/:id/read - mark as read - PUT /api/notifications/read-all - mark all as read - GET /api/notification-preferences - get preference settings - PUT /api/notification-preferences - update preference settings ## Acceptance Criteria - The unread notification count updates in real time - The notification list supports infinite scrolling - Push notification latency 3 seconds - Preference changes take effect immediately然后在 Claude Code 中specs/notification.md Implement the user notification system according to this specification. Start with the data model, then implement the API, and finally build the frontend components. Pause after each module is complete, and I will confirm before you continue.结果一次落地方案架构清晰无需反复推倒重来。3.5 用 Superpowers 强化 Spec Coding上一章 Superpowers工程级开发技能体系 介绍了 Superpowers 技能系统。Spec Coding 与 Superpowers 是天作之合Spec Coding 阶段匹配的 Superpowers 技能定义规格brainstorming- 用苏格拉底式提问澄清需求技术规划writing-plans- 把规格拆成小任务增量实现test-driven-development- TDD 红绿重构质量验证code-reviewverification-before-completion组合使用示例specs/notification.md Implement the notification system according to this specification using TDD, and help me review the code after it is done这一条指令同时激活了 Spec Coding 工作流与 TDD、Code Review 等 Superpowers 技能形成完整的工程级开发闭环。3.6 规格的版本控制与持续演进Vibe Coding Substack 提出了一个重要观点规格现在就是代码Specs are now code。如果规格是代码就应该像代码一样管理版本控制把规格文件放入 Git与代码一起提交变更追踪规格的每次改动都有提交记录知道谁改了、改了什么、为什么改代码评审规格变更也应走 PR 评审保持团队对齐CI 集成规格变更触发自动化测试验证实现是否仍符合规格在 Claude Code 中这意味着你的CLAUDE.md、.claude/rules/和specs/目录都应纳入版本控制。Robomotion 的经验是把规格与实现一起做版本管理可以防止漂移并保持全程可审计。OpenAI 的 Harness Engineering 实践也印证了这一点他们的AGENTS.md文件本身由 Codex 编写并随项目演进持续更新。当 Agent 遇到困难时修复方式不是直接改代码而是让 Codex 更新规格本身——形成规格的自我修复循环。本仓库 AGENTS.md 中「Commit Pull Request Guidelines」遵循 Conventional Commits、PR 需附截图与改动路径说明等条目正是这种「规格持续被维护」理念的落地样本。四、混合策略从 Vibe 渐进迁移到 Spec行业共识不是「抛弃 Vibe Coding」而是针对不同场景选择正确的方法。4.1 何时使用 Vibe Coding30 分钟内构建原型验证想法是否可行探索不熟悉的技术或框架黑客松或内部演示一次性脚本或工具4.2 何时使用 Spec Coding生产功能开发多人协作项目需要长期维护的代码安全、支付、数据等敏感领域API 设计与系统集成4.3 推荐的渐进式工作流阶段一Vibe 探索——先用 Vibe Coding 快速验证想法暂时不写规格也不担心代码质量Build a simple notification popup so we can see how it feels阶段二提炼规格——可行性确认后把探索期间学到的内容整理成规格甚至可以请 AI 帮忙Based on the notification feature prototype we just built, help me organize a formal functional specification document, including the data model, API design, and acceptance criteria阶段三按规格重建——基于规格用 Spec Coding 重新实现生产级版本specs/notification.md Implement this from scratch according to the specification, and do not refer to the previous prototype code【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考