菜单
自动化交互式 PRD（产品需求文档）生成工作流。该技能通过确保 PRD 文档和 HTML 原型页面之间的命名一致性，将它们组装成一个统一的交互式网页。它会在原型页面旁边注入全局的悬浮目录（TOC）导航和对应的 PRD 详细说明，支持多状态同步、暗黑模式切换和移动端/PC端响应式适配。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
全流程产品设计向导，负责迭代生命周期管理并按需调度子技能。当用户提出一个产品想法或需求，需要从零开始经历完整的“调研 -> 设计 -> 原型 -> PRD”端到端工作流，或需要管理/追踪项目迭代版本时，必须作为入口主控技能优先触发。
生成标准 PRD 文档。当原型设计验证完成（通常由 pm-workflow 的阶段 4 触发），或者需要综合前期所有产出物（背景、流程、原型等）输出一份格式严谨的综合性产品需求文档时使用此技能。
设计业务流程、用户故事与页面结构。当产品需求进入系统调研与架构设计阶段（通常由 pm-workflow 的阶段 2 触发），或需要输出概念设计(Concept\_Design)、用户旅程图(User\_Journey\_Map)、业务流程图(Business\_Flow)及页面结构(Page\_Structure)时使用此技能。
启动新需求迭代，进行需求调研与背景分析。当用户提供初步需求描述、启动新项目迭代（通常由 pm-workflow 的阶段 1 触发），或需要明确核心场景并输出 Requirement_Background.md 时使用此技能。
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.
| name | interactive-prd-builder |
| description | 自动化交互式 PRD（产品需求文档）生成工作流。该技能通过确保 PRD 文档和 HTML 原型页面之间的命名一致性，将它们组装成一个统一的交互式网页。它会在原型页面旁边注入全局的悬浮目录（TOC）导航和对应的 PRD 详细说明，支持多状态同步、暗黑模式切换和移动端/PC端响应式适配。 |
将标准的 Markdown 格式 PRD 转换为高保真、可交互的单文件 HTML 文档，并与原型页面（iframe）进行联动。
在编写任何代码之前，你必须遵守以下红线：
width: 100%。必须使用固定宽度并通过 CSS transform: scale() 进行缩放适配。getBoundingClientRect() 的滚动侦听方案和双重防抖重载逻辑）。href 必须同步更新，点击后能在新标签页（target="_blank"）直接打开当前原型 HTML 页面。☰ 控制目录，🌙/☀️ 控制暗黑模式）。rounded-full, w-10 h-10）。<head> 注入 <script>tailwind.config = { darkMode: 'class' }</script>，且切换逻辑必须同时操作 document.documentElement 和 document.body 的 class。padding-bottom: 100vh 或 <div class="h-screen"></div>），确保短章节标题能滚动到屏幕顶部以触发侦听。375x830），包裹 CSS 手机外壳（带圆角和刘海），并使用 transform: scale() 缩放。width: 800px; height: 100%;）。1440px），并应用 transform: scale(calc(800 / 1440)) 且 transform-origin: top left;。calc(100% * (1440 / 800)) 进行反向补偿。min-w-0（min-width: 0）属性彻底防撑破。onload="hideIframeScrollbar(this)" 拦截函数，并在其中注入 ::-webkit-scrollbar { display: none !important; }。body（通过 JS 在 onload 时注入）同时添加深色背景（如 #0f172a），覆盖原型白边。Interactive_PRD.html 文件，构建 Tailwind + Mermaid 的基础 HTML 三栏外壳和悬浮控制按钮。getBoundingClientRect() 的滚动侦听 JS 代码。611，禁止硬编码中文标题）。window.addEventListener('hashchange', ...) 逻辑，支持弹窗或状态切换。