prd-generator

PRD Generator Skill

Overview

Based on the page implementation code, spec.md specification document, and the user-specified functional scope, intelligently identify the page type and match the corresponding template to generate a structured Product Requirements Document (PRD) for R&D and testing personnel.

When to Use

• When the user explicitly requests PRD document generation
• When the user needs to convert implemented pages into a PRD document
• When the user needs to generate a formal PRD based on spec.md

Template Types

1. Data dashboard type (data-prd-template.md)

Applicable scenarios：

• Data statistics dashboard
• Report analysis page
• Metric monitoring page

Key content：

• Metric definitions and data caliber
• Data source description
• Filter conditions
• Chart descriptions
• Interaction rules

2. Backend list type (backend-list-prd-template.md)

Applicable scenarios：

• Data list management page
• Query list page
• Ledger management page

Key content：

• Filter conditions
• List field definitions
• Sorting rules
• Pagination rules
• Batch operations
• Row operations

3. Backend form editing type (backend-form-edit-prd-template.md)

Applicable scenarios：

• Add/Edit form page
• Configuration management page
• Data entry page

Key content：

• Field definitions
• Field validation rules (required, length, format)
• Default values
• Field linkage logic
• Submission rules

4. Backend form preview type (backend-form-preview-prd-template.md)

Applicable scenarios：

• Details view page
• Preview page
• Read-only page

Key content：

• Field display rules
• Data display format
• Action buttons

5. User frontend type (user-frontend-prd-template.md)

Applicable scenarios：

• C-end user page
• Marketing campaign page
• Product display page

Key content：

• User interaction scenarios
• Function trigger conditions
• Operation feedback
• Display specifications

Workflow

Step 1: Page analysis

1. Read the target page's index.tsx(or main implementation file)
2. Read spec.md specification document (if it exists)
3. Read content.md or other related documents
4. View screenshot.png to understand the page visuals

Step 2: Type identification

Automatically identify the type based on page content:

• Contains many charts and metrics → Data dashboard type
• Contains lists, filters, pagination → Backend list type
• Contains form input, submission → Backend form editing type
• Display only, no input → Backend form preview type
• C-end user interface → User frontend type

Step 3: Requirements confirmation

Confirm with the user:

1. The PRD's page type (if not automatically identified)
2. Whether there is a specified functional scope
3. Special requirements or concerns

Step 4: PRD generation

1. Apply the corresponding template
2. Extract information from the page implementation and spec.md
3. Fill in the template content
4. Save to <project-dir>/src/prototypes/<page-name>/prd.md

Step 5: Consistency check

Check the following dimensions:

• ✅ Functional points are consistent with the page implementation
• ✅ Technical conventions are consistent with spec.md
• ✅ The scope is consistent with the user's requirements
• ✅ No core content is omitted

If there are inconsistencies, return to Step 4 to regenerate.

Rules

1. Path specification: The PRD must be saved to src/prototypes/<page-name>/prd.md
2. Naming specification: The filename must be prd.md(lowercase)
3. Terminology specification: Use common terminology for development/testing
4. Scope constraint: When the user specifies a scope, do not exceed it
5. Must check: A consistency check must be performed after generation

Example Usage

用户：帮我生成 data-search 页面的PRD
→ 执行：
  1. 分析 index.tsx 和 spec.md
  2. 识别为数据看板类
  3. 应用 data-prd-template.md
  4. 生成 src/prototypes/data-search/prd.md
  5. 核对一致性