product-doc-hub

面向 AI 产品团队的一站式文档解决方案，一套工具覆盖从产品定义到 API 上线的全链路文档：PRD（功能规格说明书）、Product Brief（投资人/团队轻量介绍）、Experience Framework（体验验证方法论，含四维模型+埋点指标+SUS/EV/NPS/SAM量表设计）、API Console...

Security Scan

该 Skill 是一个以静态前端页面为主的产品文档与可配置 API 控制台集合，声明的功能与包含的文件内容基本一致，没有发现要求不相干权限或隐蔽的安装步骤。

Purpose & Capability

名称与描述（PRD/Brief/体验框架/API Console）与文件清单、assets 中的 HTML/JS 内容一致：包括 PRD、产品简介、体验框架与一个可配置的 API 控制台模板。所含 API 路径示例（/translate, /sts, /track 等）与文档中述及的后端架构（SCF 云函数、COS、MPS）一致。没有看到与目标不符的额外权限或外部凭据要求。

Instruction Scope

SKILL.md 与文件主要指导复制/修改静态 HTML/JS 来定制文档页与 API 控制台；运行时行为限于在浏览器中向 user-specified baseUrl 发送请求并渲染结果，这是 API 控制台的预期功能。值得注意的点：文档多次提到埋点（tracker.js / /track 接口）与 COS 前端直传（需 /sts 获取临时凭证），但 skill 包清单未声明任何后端或凭据，因此使用前需部署或指向可信后端。API 控制台能向任意配置的 baseUrl 发送真实请求（包括上传文件），这对用户配置的目标 API 有直接影响。

Install Mechanism

这是一个 instruction-only / 静态前端技能（没有安装脚本、无二进制下载）。没有通过 npm、下载 URL 或其他执行/提权步骤写入本地系统，风险低。

Credentials

Skill 声明不需要环境变量或凭据，这与其作为静态前端模板的性质一致。但文档中描述的真实工作流依赖后端（SCF 云函数 提供 /sts、API 签名代理等）以及 COS、MPS 服务——这些会需要云端凭据（应由后端安全管理）。另外文档提到的“全自动埋点/track”功能可能会采集用户操作数据；尽管清单中没有包含 tracker.js 文件，但若你启用埋点或指向第三方 track 接口，可能会上传敏感使用数据，需审查。

Persistence & Privilege

技能没有设置 always:true，也不请求修改其他技能或系统配置；作为静态资源不会在代理端持续驻留或提升权限。Agent 自动调用权限为默认值（允许自主调用），但该能力本身与技能提供的静态页面无直接危险。

Assessment

简明建议： - 在把 API Console 指向真实服务之前，先在本地或测试环境试用，避免把 baseUrl 指向生产或内部管理接口（尤其是含敏感用户数据或管理权限的端点）。 - 文档提到的 /sts（生成临时 COS 凭证）与后端签名代理需要在可信后端实现；不要把长期密钥或 SecretKey 暴露在前端代码。确认后端实现不会把永久凭据泄露给客户端。 - 注意埋点/analytics：如果启用 tracker.js 或把 /track 指向第三方，请审查会收集哪些用户行为数据并遵循隐私合规要求。若未提供 tracker.js，检查是否有额外脚本被添加。 - 如果你打算部署或分享这些页面，最好托管在受信任的域（自有 GitHub/GitHub Pages、公司域名），并在首次使用前人工审查所有 JS 文件（查找任何未知的远端上报/外链脚本）。 总体上该 Skill 在功能与请求上内部一致，但因为它能向任意配置的 API 发送真实请求并可能包含埋点逻辑，使用者应对所指向的后端与跟踪端点做额外审查和安全配置。

Product Doc Hub Skill — 产品知识库聚合器 v2（API Console 可配置版）

🎯 5 分钟上手

最简配置（API Console，复制即用）

<script src="api-console-config.js"></script>
<script>
  window.API_CONSOLE_CONFIG = {
    productName: '我的产品',
    baseUrl:     'https://api.my-product.com',
    groups: [
      {
        name: '用户',
        apis: [
          { method: 'POST', path: '/users', desc: '创建用户',
            params: [
              { name:'name',  type:'text',   required:true,  placeholder:'姓名' },
              { name:'email', type:'text',   required:true,  placeholder:'邮箱' }
            ]
          },
          { method: 'GET',  path: '/users/:id', desc: '查询用户',
            params: [
              { name:'id', type:'text', required:true, placeholder:'用户ID' }
            ]
          }
        ]
      }
    ]
  };
</script>
<script src="api.html"></script>

其他页面

页面	定制方式
PRD	复制 prd.html，替换章节内容
产品简介	复制 product-brief.html，替换内容
体验框架	复制 experience-framework.html，替换四维模型内容
Hub 导航	复制 hub.html，修改四个入口链接

---

概述

本 Skill 提供一套可配置的产品文档黄页，包含 PRD/Brief/体验框架/API调试台四类页面。

页面	文件	用途	定制方式
PRD	prd.html	功能规格说明书	内容替换
产品简介	product-brief.html	面向投资人轻量介绍	内容替换
体验框架	experience-framework.html	AI产品体验验证方法论	章节模板
API 控制台	api.html	在线 API 调试	配置化 ⭐
Hub 导航	hub.html	四页面导航入口	内容替换

---

⭐ API Console 配置化（重点）

快速使用

<!-- Step 1: 引入配置 -->
<script src="api-console-config.js"></script>

<!-- Step 2: 修改配置 -->
<script>
  window.API_CONSOLE_CONFIG.productName = '我的产品';
  window.API_CONSOLE_CONFIG.baseUrl = 'https://api.my-product.com';

  // 修改端点列表
  window.API_CONSOLE_CONFIG.groups = [
    {
      name: '用户模块',
      icon: '<svg ...>',          // 可选 SVG
      apis: [
        {
          method: 'POST',
          path: '/users',
          desc: '创建用户',
          params: [
            { name: 'name',     type: 'text',   required: true,  desc: '用户名' },
            { name: 'email',    type: 'text',   required: true,  desc: '邮箱' },
            { name: 'role',     type: 'select', required: false, default: 'user',
              options: ['user','admin','vip'], desc: '用户角色' }
          ]
        },
        {
          method: 'GET',
          path: '/users/:id',
          desc: '查询用户详情',
          params: [
            { name: 'id', type: 'text', required: true, desc: '用户 ID' }
          ]
        }
      ]
    }
  ];
</script>

<!-- Step 3: 引入页面 -->
<script src="api.html"></script>

页面会自动读取 API_CONSOLE_CONFIG 并渲染端点列表、发送请求。

API_CONSOLE_CONFIG 完整字段

字段	类型	默认值	说明
productName	string	'本产品'	页面标题
baseUrl	string	—	API 基础地址
timeout	number	30000	请求超时（ms）
showStats	boolean	true	是否显示统计卡片
initialStats	object	见下方	初始统计数据
groups	array	内置默认	端点分组列表
theme	string	'dark'	'dark' / 'light'

initialStats 默认值：

{
  totalCalls: 0,    // 总调用次数
  successRate: 100, // 成功率%
  avgLatency: 0,   // 平均延迟ms
  activeTasks: 0   // 活跃任务数
}

端点参数格式

{
  method:   'GET' | 'POST' | 'PUT' | 'DELETE',
  path:     '/endpoint/:param',      // :param 会被识别为路径参数
  desc:     '端点描述',
  params: [                           // 请求参数（用于构造器）
    {
      name:     'paramName',          // 参数名
      type:     'text' | 'file' | 'select',
      required: true | false,
      default:  '默认值',              // 可选
      options:  ['a','b','c'],         // type=select 时必填
      desc:     '参数说明'              // 可选
    }
  ]
}

---

文件结构

product-doc-hub/
├── SKILL.md                          # 本文档
└── assets/
    ├── prd.html                     # 产品需求文档（可直接修改内容）
    ├── product-brief.html            # 产品简介（可直接修改内容）
    ├── experience-framework.html    # 体验框架（保留结构换内容）
    ├── api.html                      # API 调试台（配置化）
    ├── api-console-config.js         # API Console 配置模板 ⭐
    ├── hub.html                      # Hub 导航页
    └── (其他产品文档资源)

---

PRD / Brief 定制指南

PRD 定制（最快）

1. 复制 prd.html 作为 my-product-prd.html
2. 全局替换产品名称为"我的产品"
3. 修改各章节的功能规格描述
4. 保留 Callout / Flow / 目录等组件结构

Brief 定制

1. 复制 product-brief.html 作为 my-product-brief.html
2. 全局替换产品名称为"我的产品"
3. 修改产品定位、目标用户、核心流程
4. 调整功能状态表（已完成 → 进行中 → 待开发）

体验框架 定制

1. 复制 experience-framework.html 作为 my-ef.html
2. 保留"四维体验验证模型"的结构框架
3. 替换每个维度的具体内容为新产品的设计策略
4. 更新 SUS/EV/SAM/NPS 的具体题目文本
5. 调整埋点指标映射

---

设计系统（四个页面共享）

暗色主题变量

background: #08080c
surface: rgba(255,255,255,0.02~0.08)
text-primary: #e2e8f0
text-secondary: #94a3b8
accent-blue: #818cf8
accent-green: #10b981
accent-amber: #f59e0b
accent-purple: #a855f7
border: rgba(255,255,255,0.05~0.10)

通用组件类

组件	CSS 类	说明
Callout	.callout .callout-blue/green/yellow/purple	左色条信息卡片
Flow 步骤	.flow-step + .flow-arrow	流程图
表格	标准 <table> + th/td	数据表格
代码	<code> 半透明底	内联代码
等宽框	.diagram	ASCII 架构图

---

如何为新产品构建 Product Hub

推荐顺序

1. Brief 先行（半天）— 写清楚"为什么做"，给所有人看
2. PRD 跟进（1-2天）— 写清楚"做什么怎么做"，给实现团队
3. EF 并行（1-2天）— 同时设计体验验证方案
4. API Console 最后（1小时配置）— 有接口了再配置端点

定制检查清单

• 全局替换产品名称为新产品名
• 更新 Brief 的产品定义和目标用户
• 重写 PRD 的功能规格（保留章节结构）
• 调整 EF 的四维模型内容（保留验证方法论）
• 更新 API Console 的 groups 端点列表
• 调整配色（如果品牌色不同）
• 更新版本号和日期

---

发布到 GitHub

cd ~/.codebuddy/skills/product-doc-hub
git init
git add .
git commit -m "feat: product-doc-hub v2"
git remote add origin https://github.com/YOUR_USERNAME/product-doc-hub.git
git push -u origin main