菜单
前置评估工作量技能——产品设计前的改造工作量评估。根据需求文字描述和实际项目代码分析，生成含设计流程图和实际工作量的HTML报告。当用户说'调用前置评估工作量技能'、'前置评估'、'设计前评估'、'工作量预评估'，或在产品设计阶段需要评估开发工作量时使用。涉及后端需后端项目路径，涉及前端需前端项目路径。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | pre-estimation |
| description | 前置评估工作量技能——产品设计前的改造工作量评估。根据需求文字描述和实际项目代码分析，生成含设计流程图和实际工作量的HTML报告。当用户说'调用前置评估工作量技能'、'前置评估'、'设计前评估'、'工作量预评估'，或在产品设计阶段需要评估开发工作量时使用。涉及后端需后端项目路径，涉及前端需前端项目路径。 |
| argument-hint | [需求描述] [前端项目路径] [后端项目路径] |
产品设计前的改造工作量评估。基于需求文字描述和实际项目代码分析，输出包含设计流程图和实际工作量的HTML报告。
以下信息会逐步收集，不要求一次性提供：
| 条件 | 必需 | 说明 |
|---|---|---|
| 需求文字描述 | 是 | 描述业务意图和功能期望 |
| 前端项目路径 | 按需 | 涉及前端改造时必须提供，本地绝对路径 |
| 后端项目路径 | 按需 | 涉及后端改造时必须提供，本地绝对路径 |
| 目标总人天 | 否 | 可作为参考，不强制凑数 |
| 设计流程图描述 | 否 | 用户可描述期望的流程；未提供则基于代码分析自动生成 |
缺失项目路径的处理：
对每个项目路径执行：
扫描输出：涉及模块清单、改造类型判断、复用度评估
核心原则（贯穿分析全程）：
| 原则 | 解决什么问题 | 实践要点 |
|---|---|---|
| 结合项目实际 | 凭空估算、脱离代码 | 每个改造点必须基于实际代码文件分析；拿不准的实现细节务必读取源码确认，不可猜测 |
| 编码前思考 | 错误假设、隐藏困惑、缺少权衡 | 先理解现有实现的设计意图和约束条件，再判断改造方式（扩展 vs 新建）；识别模块间的隐式依赖 |
| 简洁优先 | 过度复杂、臃肿抽象 | 优先复用已有模块和组件；不过度设计抽象层；一个改造点只做一件事 |
| 精准修改 | 无关编辑、触碰不应碰的代码 | 明确每个改造点的边界和影响范围；不顺手重构、不扩展需求范围外的功能 |
| 目标驱动执行 | 方向偏离、无法验证 | 每个改造点描述可验证的产出标准；工时估算对应明确的可交付成果 |
已有页面扩展的深度评估（强制）：
当改造类型为"已有页面/模块扩展"时，必须执行以下步骤，不可仅凭表面复杂度低估人天：
工时估算方法论：
粒度说明：本技能面向设计前评估，改造点描述以功能模块为单位，属于粗粒度估算。
完成分析后，展示评估摘要供用户确认：
必须等待用户确认后才能生成HTML。 用户可能要求调整改造点、修改人天估算、或补充遗漏项。
用户确认后，生成HTML文件。HTML必须包含以下四个核心区域：
使用以下模板结构生成HTML。模板中的占位符 {{PLACEHOLDER}} 在实际生成时替换为真实内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前置评估工作量报告 - {{REPORT_TITLE}}</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
:root {
--primary: #1a73e8;
--success: #0d904f;
--warning: #e37400;
--danger: #d93025;
--bg: #f8f9fa;
--card-bg: #ffffff;
--text: #202124;
--text-secondary: #5f6368;
--border: #e0e0e0;
--radius: 8px;
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
/* Header */
.report-header {
background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
color: #fff;
padding: 32px 40px;
border-radius: var(--radius);
margin-bottom: 24px;
}
.report-header h1 { font-size: 24px; margin-bottom: 8px; }
.report-header .meta { font-size: 14px; opacity: 0.85; }
.report-header .meta span { margin-right: 24px; }
/* Summary cards */
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.summary-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px 24px;
box-shadow: var(--shadow);
}
.summary-card .card-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.summary-card .card-value { font-size: 28px; font-weight: 700; }
.summary-card .card-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.card-value.frontend { color: var(--primary); }
.card-value.backend { color: var(--success); }
.card-value.total { color: var(--warning); }
/* Section */
.section {
background: var(--card-bg);
border-radius: var(--radius);
padding: 24px 32px;
margin-bottom: 20px;
box-shadow: var(--shadow);
}
.section h2 {
font-size: 18px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.section h2 .icon { font-size: 20px; }
/* Flowchart */
.flowchart-container {
background: #fafbfc;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
overflow-x: auto;
}
.flowchart-container .mermaid { text-align: center; }
/* Table */
.table-wrapper { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
thead th {
background: #f1f3f4;
color: var(--text);
font-weight: 600;
text-align: left;
padding: 10px 14px;
border-bottom: 2px solid var(--border);
white-space: nowrap;
}
tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
tbody tr:hover { background: #f8f9fa; }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.badge-new { background: #e8f5e9; color: #2e7d32; }
.badge-mod { background: #fff3e0; color: #e65100; }
.badge-reuse { background: #e3f2fd; color: #1565c0; }
/* Risk */
.risk-list { list-style: none; }
.risk-list li {
padding: 8px 12px;
margin-bottom: 6px;
border-left: 3px solid var(--warning);
background: #fff8e1;
border-radius: 0 4px 4px 0;
font-size: 14px;
}
.risk-list li.high { border-left-color: var(--danger); background: #fce8e6; }
/* Footer */
.report-footer {
text-align: center;
color: var(--text-secondary);
font-size: 12px;
padding: 16px;
margin-top: 8px;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media print {
body { background: #fff; }
.section { box-shadow: none; border: 1px solid #ddd; }
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="report-header">
<h1>{{REPORT_TITLE}}</h1>
<div class="meta">
<span>评估日期：{{REPORT_DATE}}</span>
<span>前端项目：{{FRONTEND_PROJECT}}</span>
<span>后端项目：{{BACKEND_PROJECT}}</span>
</div>
</div>
<!-- Summary Cards -->
<div class="summary-cards">
<div class="summary-card">
<div class="card-label">前端开发人天</div>
<div class="card-value frontend">{{FE_DEV_DAYS}}</div>
<div class="card-sub">改造点：{{FE_POINTS}}个</div>
</div>
<div class="summary-card">
<div class="card-label">后端开发人天</div>
<div class="card-value backend">{{BE_DEV_DAYS}}</div>
<div class="card-sub">改造点：{{BE_POINTS}}个</div>
</div>
<div class="summary-card">
<div class="card-label">开发总人天</div>
<div class="card-value total">{{TOTAL_DAYS}}</div>
<div class="card-sub">改造点：{{TOTAL_POINTS}}个</div>
</div>
</div>
<!-- Flowchart -->
<div class="section">
<h2><span class="icon">📊</span> 设计流程图</h2>
<div class="flowchart-container">
<div class="mermaid">
{{MERMAID_CHART}}
</div>
</div>
</div>
<!-- Frontend Work Breakdown -->
<div class="section">
<h2><span class="icon">🎨</span> 前端工作量明细</h2>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>功能模块</th>
<th>改造内容</th>
<th>改造类型</th>
<th>开发人天</th>
</tr>
</thead>
<tbody>
{{FE_TABLE_ROWS}}
</tbody>
</table>
</div>
</div>
<!-- Backend Work Breakdown -->
<div class="section">
<h2><span class="icon">⚙️</span> 后端工作量明细</h2>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>功能模块</th>
<th>改造内容</th>
<th>改造类型</th>
<th>开发人天</th>
</tr>
</thead>
<tbody>
{{BE_TABLE_ROWS}}
</tbody>
</table>
</div>
</div>
<!-- Summary & Risk -->
<div class="section">
<h2><span class="icon">⚠️</span> 汇总与风险提示</h2>
<table style="margin-bottom: 16px;">
<thead>
<tr><th>端</th><th>改造点数</th><th>开发人天</th></tr>
</thead>
<tbody>
<tr>
<td>前端</td><td>{{FE_POINTS}}</td><td>{{FE_DEV_DAYS}}</td>
</tr>
<tr>
<td>后端</td><td>{{BE_POINTS}}</td><td>{{BE_DEV_DAYS}}</td>
</tr>
<tr style="font-weight:700;background:#f1f3f4;">
<td>合计</td><td>{{TOTAL_POINTS}}</td><td>{{TOTAL_DAYS}}</td>
</tr>
</tbody>
</table>
<h3 style="font-size:15px;margin-bottom:10px;">风险点</h3>
<ul class="risk-list">
{{RISK_ITEMS}}
</ul>
</div>
<div class="report-footer">
本报告由前置评估工作量技能自动生成 | 评估日期：{{REPORT_DATE}} | 工时仅含开发实现，不含测试和部署
</div>
</div>
<script>
mermaid.initialize({
startOnLoad: true,
theme: 'default',
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
securityLevel: 'loose'
});
</script>
</body>
</html>
生成HTML时替换以下占位符：
| 占位符 | 说明 | 示例 |
|---|---|---|
{{REPORT_TITLE}} | 报告标题 | 内部版发起确认页签署设置信息展示-前置评估 |
{{REPORT_DATE}} | 评估日期 | 2026-05-11 |
{{FRONTEND_PROJECT}} | 前端项目名或"无" | anysign-cmcc-portal-frontend |
{{BACKEND_PROJECT}} | 后端项目名或"无" | anysign-cmcc-portal-backend |
{{FE_DEV_DAYS}} | 前端开发人天 | 5 |
{{BE_DEV_DAYS}} | 后端开发人天 | 8 |
{{TOTAL_DAYS}} | 开发总人天 | 13 |
{{TOTAL_POINTS}} | 改造点总数 | 8 |
{{FE_POINTS}} | 前端改造点数 | 3 |
{{BE_POINTS}} | 后端改造点数 | 5 |
{{MERMAID_CHART}} | Mermaid流程图定义 | graph TD; A[开始]-->B[结束] |
{{FE_TABLE_ROWS}} | 前端表格行HTML | <tr>...</tr> |
{{BE_TABLE_ROWS}} | 后端表格行HTML | <tr>...</tr> |
{{RISK_ITEMS}} | 风险项列表HTML | <li>...</li> |
Mermaid流程图使用 graph TD（自上而下）布局：
style 标注新增节点（绿色）和改造节点（橙色）graph TD
A[用户进入发起确认页] --> B{是否内部版}
B -->|是| C[展示签署设置信息]
B -->|否| D[跳过签署设置]
C --> E[SignInfoDisplay组件渲染]
E --> F[显示签署方式/保密级别/截止时间等]
style C fill:#e8f5e9,stroke:#2e7d32
style E fill:#e8f5e9,stroke:#2e7d32