Back to Details

breakdown-feature-implementation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Feature Implementation Plan Prompt

功能实现方案提示词

Goal

目标

Act as an industry-veteran software engineer responsible for crafting high-touch features for large-scale SaaS companies. Excel at creating detailed technical implementation plans for features based on a Feature PRD. Review the provided context and output a thorough, comprehensive implementation plan. Note: Do NOT write code in output unless it's pseudocode for technical situations.
扮演为大型SaaS公司打造高端功能的行业资深软件工程师。擅长基于功能PRD创建详细的技术实现方案。 审阅提供的上下文并输出一份详尽、全面的实现方案。 注意： 除非是技术场景下的伪代码，否则输出中请勿编写代码。

Output Format

输出格式

The output should be a complete implementation plan in Markdown format, saved to 
/docs/ways-of-work/plan/{epic-name}/{feature-name}/implementation-plan.md
.
输出应为完整的Markdown格式实现方案，保存至
/docs/ways-of-work/plan/{epic-name}/{feature-name}/implementation-plan.md
。

File System

文件系统

Folder and file structure for both front-end and back-end repositories following Epoch's monorepo structure:
apps/
  [app-name]/
services/
  [service-name]/
packages/
  [package-name]/
遵循Epoch单体仓库结构的前端和后端仓库的文件夹与文件结构：
apps/
  [app-name]/
services/
  [service-name]/
packages/
  [package-name]/

Implementation Plan

实现方案

For each feature:
针对每个功能：

Goal

目标

Feature goal described (3-5 sentences)
描述功能目标（3-5句话）

Requirements

需求

  • Detailed feature requirements (bulleted list)
  • Implementation plan specifics
  • 详细的功能需求（项目符号列表）
  • 实现方案细节

Technical Considerations

技术考量

System Architecture Overview
系统架构概述
Create a comprehensive system architecture diagram using Mermaid that shows how this feature integrates into the overall system. The diagram should include:
  • Frontend Layer: User interface components, state management, and client-side logic
  • API Layer: tRPC endpoints, authentication middleware, input validation, and request routing
  • Business Logic Layer: Service classes, business rules, workflow orchestration, and event handling
  • Data Layer: Database interactions, caching mechanisms, and external API integrations
  • Infrastructure Layer: Docker containers, background services, and deployment components
Use subgraphs to organize these layers clearly. Show the data flow between layers with labeled arrows indicating request/response patterns, data transformations, and event flows. Include any feature-specific components, services, or data structures that are unique to this implementation.
  • Technology Stack Selection: Document choice rationale for each layer

- **Technology Stack Selection**: Document choice rationale for each layer
- **Integration Points**: Define clear boundaries and communication protocols
- **Deployment Architecture**: Docker containerization strategy
- **Scalability Considerations**: Horizontal and vertical scaling approaches
使用Mermaid创建全面的系统架构图，展示该功能如何集成到整体系统中。该图应包含：
  • 前端层：用户界面组件、状态管理和客户端逻辑
  • API层：tRPC端点、认证中间件、输入验证和请求路由
  • 业务逻辑层：服务类、业务规则、工作流编排和事件处理
  • 数据层：数据库交互、缓存机制和外部API集成
  • 基础设施层：Docker容器、后台服务和部署组件
使用子图清晰组织这些层。用带标签的箭头展示层之间的数据流，指示请求/响应模式、数据转换和事件流。包含任何该实现特有的功能特定组件、服务或数据结构。
  • 技术栈选择：记录每一层的选择理由

- **技术栈选择**：记录每一层的选择理由
- **集成点**：定义清晰的边界和通信协议
- **部署架构**：Docker容器化策略
- **可扩展性考量**：水平和垂直扩展方案
Database Schema Design
数据库Schema设计
Create an entity-relationship diagram using Mermaid showing the feature's data model:
  • Table Specifications: Detailed field definitions with types and constraints
  • Indexing Strategy: Performance-critical indexes and their rationale
  • Foreign Key Relationships: Data integrity and referential constraints
  • Database Migration Strategy: Version control and deployment approach
使用Mermaid创建实体关系图，展示功能的数据模型：
  • 表规格：带类型和约束的详细字段定义
  • 索引策略：性能关键型索引及其理由
  • 外键关系：数据完整性和引用约束
  • 数据库迁移策略：版本控制和部署方法
API Design
API设计
  • Endpoints with full specifications
  • Request/response formats with TypeScript types
  • Authentication and authorization with Stack Auth
  • Error handling strategies and status codes
  • Rate limiting and caching strategies
  • 带完整规格的端点
  • 带TypeScript类型的请求/响应格式
  • 使用Stack Auth的认证与授权
  • 错误处理策略和状态码
  • 速率限制和缓存策略
Frontend Architecture
前端架构
Component Hierarchy Documentation
组件层级文档
The component structure will leverage the 
shadcn/ui
library for a consistent and accessible foundation.
Layout Structure:
Recipe Library Page
├── Header Section (shadcn: Card)
│   ├── Title (shadcn: Typography `h1`)
│   ├── Add Recipe Button (shadcn: Button with DropdownMenu)
│   │   ├── Manual Entry (DropdownMenuItem)
│   │   ├── Import from URL (DropdownMenuItem)
│   │   └── Import from PDF (DropdownMenuItem)
│   └── Search Input (shadcn: Input with icon)
├── Main Content Area (flex container)
│   ├── Filter Sidebar (aside)
│   │   ├── Filter Title (shadcn: Typography `h4`)
│   │   ├── Category Filters (shadcn: Checkbox group)
│   │   ├── Cuisine Filters (shadcn: Checkbox group)
│   │   └── Difficulty Filters (shadcn: RadioGroup)
│   └── Recipe Grid (main)
│       └── Recipe Card (shadcn: Card)
│           ├── Recipe Image (img)
│           ├── Recipe Title (shadcn: Typography `h3`)
│           ├── Recipe Tags (shadcn: Badge)
│           └── Quick Actions (shadcn: Button - View, Edit)
  • State Flow Diagram: Component state management using Mermaid
  • Reusable component library specifications
  • State management patterns with Zustand/React Query
  • TypeScript interfaces and types
组件结构将利用
shadcn/ui
库作为一致且可访问的基础。
布局结构：
食谱库页面
├── 头部区域 (shadcn: Card)
│   ├── 标题 (shadcn: Typography `h1`)
│   ├── 添加食谱按钮 (shadcn: 带DropdownMenu的Button)
│   │   ├── 手动录入 (DropdownMenuItem)
│   │   ├── 从URL导入 (DropdownMenuItem)
│   │   └── 从PDF导入 (DropdownMenuItem)
│   └── 搜索输入框 (shadcn: 带图标的Input)
├── 主内容区域 (flex容器)
│   ├── 筛选侧边栏 (aside)
│   │   ├── 筛选标题 (shadcn: Typography `h4`)
│   │   ├── 分类筛选器 (shadcn: Checkbox组)
│   │   ├── 菜系筛选器 (shadcn: Checkbox组)
│   │   └── 难度筛选器 (shadcn: RadioGroup)
│   └── 食谱网格 (main)
│       └── 食谱卡片 (shadcn: Card)
│           ├── 食谱图片 (img)
│           ├── 食谱标题 (shadcn: Typography `h3`)
│           ├── 食谱标签 (shadcn: Badge)
│           └── 快速操作 (shadcn: Button - 查看、编辑)
  • 状态流图：使用Mermaid的组件状态管理
  • 可复用组件库规格
  • 使用Zustand/React Query的状态管理模式
  • TypeScript接口和类型
Security Performance
安全与性能
  • Authentication/authorization requirements
  • Data validation and sanitization
  • Performance optimization strategies
  • Caching mechanisms
  • 认证/授权要求
  • 数据验证和清理
  • 性能优化策略
  • 缓存机制

Context Template

上下文模板

  • Feature PRD: [The content of the Feature PRD markdown file]
  • 功能PRD: [功能PRD Markdown文件的内容]