truelove123645

PRD And Prototype Kit — Development skill for Claude Code

Development community

产品经理工作套件:HTML→PNG 原型 / docx PRD / xlsx 交付模板的 Claude Skill.

How to install PRD And Prototype Kit

This entry records only its repository, not the path inside it, so there is no exact command to give. Open truelove123645/prd-and-prototype-kit and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What PRD And Prototype Kit does

产品经理工作套件:HTML→PNG 原型 / docx PRD / xlsx 交付模板的 Claude Skill.

Alternatives in Development

Octo Docs — Document delivery with export to PPTX, DOCX, PDF formats 2.8k ★
Ian Handdrawn Ppt — 中文手绘技术 PPT 整页图像生成 Skill 21:9 封面 + 16:9 正文配图 PNG 输出 1.4k ★
Math Modeling Skill — 数学建模技能 - 面向 CUMCM、MCM/ICM 等数学建模竞赛的三阶段工作流：建模分析、Python/MATLAB 编程与 DOCX 论文生成 902 ★

README

name: "prd-and-prototype-kit" description: "产品经理向：把需求沉淀为高保真原型图（PNG）与结构化PRD（docx），并可产出导出交付表格（xlsx）。当用户要求'画原型/原型图'、'出PRD/需求文档'、'仿某系统页面风格'、'导出交付表格'时调用。内置HTML建模→puppeteer截图→docx-js出稿的完整流水线与避坑清单。"

PRD & 原型图生产套件（prd-and-prototype-kit）

面向 B 端/中后台产品经理的需求交付流水线。核心方法：**用 HTML/CSS 高保真复刻目标系统的页面风格 → 用无头 Chrome 截高清 PNG → 用 docx-js 生成结构化 PRD → 用 openpyxl 生成交付用的 Excel 模板**。

何时使用本 Skill

用户说：画原型图 / 出原型 / 仿照某个系统页面 / 高保真线框图
用户说：出一份 PRD / 需求文档 / 产品方案（要 .docx）
用户说：把配置字段整理成导出模板 / Sheet 表头（要 .xlsx）

一、总原则

中间产物（HTML、生成脚本、临时数据）放临时工作目录；最终交付（PNG/docx/xlsx）放用户工作区目录，并用 computer:// 链接给用户。
原型风格要贴目标系统：主色、圆角、字号、表格线、Tab、按钮形态尽量还原；对「新增/改动点」用红框(outline)+红色 badge 标注，让评审一眼看到差异。
所有交付可迭代：改一处 → 重跑脚本 → 覆盖输出。脚本化是关键，不要手工画图。
每次改动后回读一次 PNG 自检（Read 图片），确认无错位/文字溢出再交付。

二、环境准备（Windows / macOS，一次性）

**Windows**

# npm 走国内镜像，规避证书问题
npm config set registry https://registry.npmmirror.com
# 原型需要 puppeteer-core + 系统 Chrome（勿装完整 puppeteer，太重）
npm install puppeteer-core docx --registry=https://registry.npmmirror.com
# 系统 Chrome 路径（Windows 默认，按实际安装位置调整）
# $env:CHROME = "C:\Program Files\Google\Chrome\Application\chrome.exe"
# Excel
pip install openpyxl

**macOS**

# npm 走国内镜像，规避证书问题
npm config set registry https://registry.npmmirror.com
# 原型需要 puppeteer-core + 系统 Chrome（勿装完整 puppeteer，太重）
npm install puppeteer-core docx --registry=https://registry.npmmirror.com
# 系统 Chrome 路径（macOS 默认，按实际安装位置调整）
# export CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
# Excel（pip3 报错时改 python3 -m pip install openpyxl）
pip3 install openpyxl

**避坑清单（本套件实战总结）**

macOS 差异：Chrome 路径用 export CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"；pip 用 pip3 / python3 -m pip；macOS 上 launch 不需要 --no-sandbox（留着也无碍）。
numpy 破坏 openpyxl：若报 numpy has no attribute 'short'/__version__，说明环境里有残缺 numpy。最省事：脚本顶部加 import sys; sys.modules["numpy"] = None，让 openpyxl 走无 numpy 分支即可。
**npm SSL 证书错