技能介绍

先解决需求落地的断点

很多需求的起点并不完整：可能只有一句产品描述、几张竞品截图，或者手绘草图加旧系统界面。传统做法是把这些材料转成一次性文档或静态原型，后续评审时问题很容易暴露——PRD、流程图、框架图和页面交互分别散落在多个工具里，改一处就要重做一遍。

这个技能把输入整理成一个单文件 prd-studio.html。它包含 6 个可编辑标签页：PRD 文档、产品逻辑图、产品框架图、页面流程图、高保真交互原型和设计参考。目标是让产品经理、设计师和开发在同一份可编辑交付物上完成需求确认与迭代，而不是生成一份只能阅读的说明。

核心能力与生成步骤

技能会先执行输入检查，至少确认产品名称与一句话定位、目标用户与核心场景、3-5 个核心功能、参考素材和约束条件。如果信息不足，它会主动反问关键问题，避免基于模糊描述生成低质量 PRD。

生成时，技能会：

从需求描述、原型截图、竞品截图、业务背景或手绘草图中提取产品名称、用户场景、功能模块、优先级、业务流程、页面清单和视觉方向。
需要调整整体布局或视觉风格时，先用 show_widget 出预览稿，确认方向后再写入最终文件，减少大文件反复返工。
生成的 PRD 文档 支持编辑标题、段落、表格和优先级卡片；产品逻辑图、产品框架图、页面流程图 使用 SVG，节点可拖拽、双击编辑文字，连线可创建和删除。
高保真交互原型 支持横竖版切换、编辑模式、元素拖拽、6px 吸附对齐、删除、微调、复制、撤销和功能标注。
所有编辑能力依赖固定 DOM ID 和全局函数签名。生成后必须校验 tab-prd、logic-svg、hifi-phone、orient-landscape 等关键锚点，避免标签页、拖拽、连线或标注失效。

适用边界与注意点

它适合快速形成可评审、可迭代的 PRD 工作台，适合教育 SaaS、电商、工具、B 端后台和 C 端 App 等产品场景。但它不是后端服务：保存依赖浏览器 localStorage，跨设备或多人协作仍需导出和导入。

文件较大时，应使用脚本做字符串或正则替换，而不是直接重写整个 HTML；修改 SVG/HTML 属性时不要使用 .strip()，否则可能破坏关键标记。产品框架图默认表达产品侧功能结构，除非用户明确要求，不应输出技术架构。若用户提供参考截图并要求保留所有元素，应保持原结构，只优化排版。最终质量仍取决于输入信息是否准确；输入不足时，技能应先追问关键假设。