{"id":"82878f4f-fb41-4986-a337-5ddcbb0de31f","entityType":"agent","slug":"clawhub-barry0-0-pm-proto-prd-pin","name":"Pm Proto Prd Pin","canonicalUrl":"https://www.xpersona.co/agent/clawhub-barry0-0-pm-proto-prd-pin","canonicalPath":"/agent/clawhub-barry0-0-pm-proto-prd-pin","generatedAt":"2026-10-12T17:35:03.574Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":null},"description":"A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Skill: Pm Proto Prd Pin Owner: barry0-0 Summary: A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Tags: latest:1.4.0 Version history: v1.4.0 | 2026-09-22T03:17:50.242Z | user **Cloudflare D1 边缘数据库集成与权限隔离升级** - 新增对 Cloudflare D1 边缘数据库及 Pages 反代网关的原生集成，支持全球 CDN 极速直读写及国内免翻墙部署。 - 持久化体系升级为五模态（新增 Cloudflare D1 选项）。 - 权限体系升级：访客只读与创立人密钥鉴权动态显隐所有敏感功能入口","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 982 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s177p6xqw6fyxtp27jbabtncy583j12w:pm-proto-prd-pin","sourceUrl":"https://clawhub.ai/barry0-0/pm-proto-prd-pin","homepage":"https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/barry0-0/pm-proto-prd-pin","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Skill: Pm Proto Prd Pin Owner: barr"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":null},"stars":null,"forks":null,"downloads":982,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.4.0","tractionLabel":"982 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T22:45:15.831Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T22:45:16.054Z","lastCrawledAt":"2026-10-11T22:45:15.831Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T22:45:15.831Z","lastVerifiedAt":null,"highlights":[{"version":"1.4.0","createdAt":"2026-09-22T03:17:50.242Z","changelog":"**Cloudflare D1 边缘数据库集成与权限隔离升级** - 新增对 Cloudflare D1 边缘数据库及 Pages 反代网关的原生集成，支持全球 CDN 极速直读写及国内免翻墙部署。 - 持久化体系升级为五模态（新增 Cloudflare D1 选项）。 - 权限体系升级：访客只读与创立人密钥鉴权动态显隐所有敏感功能入口，未授权状态下自动全量隐藏新增/编辑/删除/排序/版本管理等操作。 - 增加多项产品文档截图 (`assets/images/*.png`)，便于快速了解核心功能。 - 移除 skill-card.md 文件，优化 Skill 结构和指引。","fileCount":14,"zipByteSize":8199238},{"version":"1.3.1","createdAt":"2026-08-31T01:07:53.829Z","changelog":"pm-proto-prd-pin v1.3.1 - 移除 skill-card.md 文件，优化 Skill 文件结构。 - description 中将设计系统描述更新为“shadcn/ui 现代极简设计系统 (Zinc & Slate Theme...)”。 - 文档和描述中提及设计系统从“Elegant Slate & Crisp White 商业设计系统”升级为“shadcn/ui Standard”。 - 其余核心功能、跨框架协议和持久化体系保持不变。","fileCount":10,"zipByteSize":180452},{"version":"1.3.0","createdAt":"2026-08-25T04:37:15.217Z","changelog":"pm-proto-prd-pin v1.3.0 - 新增「⚡Supabase Serverless 数据库直读直写」模式，支持企业级大容量与高并发PRD打点存储。 - 常驻右侧增加分体式悬浮胶囊，含独立“👁小眼睛”功能切换打点显隐，默认纯净视图免干扰。 - 全新高雅炭灰与极简白商业设计系统：更宽间距、12px大圆角，提升视觉体验。 - 原三模态持久化体系升级为四模态（Supabase/JSONBin/GitHub API/本地Node），支持更灵活数据管理和一键迁移。 - 优化描述文档与结构，移除 skill-card.md 文件。","fileCount":10,"zipByteSize":181087},{"version":"1.2.0","createdAt":"2026-08-25T02:19:10.652Z","changelog":"pm-proto-prd-pin v1.2.0 - 移除 skill-card.md 文件，简化项目结构。 - 其他功能保持不变，无新增特性或破坏性变更。 - 更改相关主题色，去ai味","fileCount":10,"zipByteSize":177009},{"version":"1.1.1","createdAt":"2026-08-24T09:04:54.463Z","changelog":"- 增强跨框架兼容：新增对 Vue (2/3)、React (17/18/Next.js) 工程的原生支持，并在无法识别前端框架时引导用户确认应用范围与入口。 - 移除演示与文档相关资源：删除所有截图图片（如抽屉、PRD文档、Mermaid 渲染等）及 skill-card.md 说明文件。 - 明确禁止在现代前端工程中生成独立 HTML 文件，要求以全局外挂方式集成打点引擎。 - 丰富云端持久化与数据同步说明，强调跨端免密访问与云端强一致性校验。 - 文档全面升级，突出多端协同、跨技术栈部署、安全权限隔离等功能亮点。","fileCount":10,"zipByteSize":177969},{"version":"1.1.0","createdAt":"2026-08-24T02:34:14.688Z","changelog":"pm-proto-prd-pin 1.1.0 - 全面升级为三模态持久化体系，支持 Serverless 云端 KV、GitHub Contents API、Node.js 本地直写三套数据存储方案并可一键跨模式迁移。 - 增强核心安全防护：实现严格的读写权限分离与 Master Key 创立人身份鉴权，彻底隔离访客与编辑权限。 - 增补智能迁移弹窗与本地安全备份机制，切换存储模式时支持数据同步和一键导出。 - 文档同步更新以反映架构调整和功能增强，统一描述格式，移除冗余文档说明文件。 - 其余接口协议与前端标注体验保持标准一致性，无破坏性变更。","fileCount":14,"zipByteSize":8186008},{"version":"1.0.4","createdAt":"2026-08-21T08:45:45.059Z","changelog":"**Summary:** Removed documentation file for this version. - 删除了 skill-card.md 文件，不影响核心功能和标准实现。 - 新增GitHub编辑打标同步功能，==其实是自行commit了一次。解决不走后端服务的问题","fileCount":14,"zipByteSize":8175662},{"version":"1.0.3","createdAt":"2026-08-19T08:32:27.862Z","changelog":"pm-proto-prd-pin v1.0.3 - 新增前置服务健康探测与只读阻断拦截机制：在关键编辑操作前提前探测后端接口状态，无服务时阻断进入并弹窗提示只读模式。 - 为无持久化服务环境增加极简启动引导和一键复制启动命令，提升静态托管和预览体验安全性。 - 去除 skill-card.md 文件，无影响功能变动。 - 其余核心功能无更动，兼容现状。","fileCount":14,"zipByteSize":8165208}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s177p6xqw6fyxtp27jbabtncy583j12w:pm-proto-prd-pin","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T17:35:03.566Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-barry0-0-pm-proto-prd-pin/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":null},"readme":"Skill: Pm Proto Prd Pin\n\nOwner: barry0-0\n\nSummary: A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype\n\nTags: latest:1.4.0\n\nVersion history:\n\nv1.4.0 | 2026-09-22T03:17:50.242Z | user\n\n**Cloudflare D1 边缘数据库集成与权限隔离升级**\n\n- 新增对 Cloudflare D1 边缘数据库及 Pages 反代网关的原生集成，支持全球 CDN 极速直读写及国内免翻墙部署。\n- 持久化体系升级为五模态（新增 Cloudflare D1 选项）。\n- 权限体系升级：访客只读与创立人密钥鉴权动态显隐所有敏感功能入口，未授权状态下自动全量隐藏新增/编辑/删除/排序/版本管理等操作。\n- 增加多项产品文档截图 (`assets/images/*.png`)，便于快速了解核心功能。\n- 移除 skill-card.md 文件，优化 Skill 结构和指引。\n\nv1.3.1 | 2026-08-31T01:07:53.829Z | user\n\npm-proto-prd-pin v1.3.1\n\n- 移除 skill-card.md 文件，优化 Skill 文件结构。\n- description 中将设计系统描述更新为“shadcn/ui 现代极简设计系统 (Zinc & Slate Theme...)”。\n- 文档和描述中提及设计系统从“Elegant Slate & Crisp White 商业设计系统”升级为“shadcn/ui Standard”。\n- 其余核心功能、跨框架协议和持久化体系保持不变。\n\nv1.3.0 | 2026-08-25T04:37:15.217Z | user\n\npm-proto-prd-pin v1.3.0\n\n- 新增「⚡Supabase Serverless 数据库直读直写」模式，支持企业级大容量与高并发PRD打点存储。\n- 常驻右侧增加分体式悬浮胶囊，含独立“👁小眼睛”功能切换打点显隐，默认纯净视图免干扰。\n- 全新高雅炭灰与极简白商业设计系统：更宽间距、12px大圆角，提升视觉体验。\n- 原三模态持久化体系升级为四模态（Supabase/JSONBin/GitHub API/本地Node），支持更灵活数据管理和一键迁移。\n- 优化描述文档与结构，移除 skill-card.md 文件。\n\nv1.2.0 | 2026-08-25T02:19:10.652Z | user\n\npm-proto-prd-pin v1.2.0\n\n- 移除 skill-card.md 文件，简化项目结构。\n- 其他功能保持不变，无新增特性或破坏性变更。\n- 更改相关主题色，去ai味\n\nv1.1.1 | 2026-08-24T09:04:54.463Z | user\n\n- 增强跨框架兼容：新增对 Vue (2/3)、React (17/18/Next.js) 工程的原生支持，并在无法识别前端框架时引导用户确认应用范围与入口。\n- 移除演示与文档相关资源：删除所有截图图片（如抽屉、PRD文档、Mermaid 渲染等）及 skill-card.md 说明文件。\n- 明确禁止在现代前端工程中生成独立 HTML 文件，要求以全局外挂方式集成打点引擎。\n- 丰富云端持久化与数据同步说明，强调跨端免密访问与云端强一致性校验。\n- 文档全面升级，突出多端协同、跨技术栈部署、安全权限隔离等功能亮点。\n\nv1.1.0 | 2026-08-24T02:34:14.688Z | user\n\npm-proto-prd-pin 1.1.0\n\n- 全面升级为三模态持久化体系，支持 Serverless 云端 KV、GitHub Contents API、Node.js 本地直写三套数据存储方案并可一键跨模式迁移。\n- 增强核心安全防护：实现严格的读写权限分离与 Master Key 创立人身份鉴权，彻底隔离访客与编辑权限。\n- 增补智能迁移弹窗与本地安全备份机制，切换存储模式时支持数据同步和一键导出。\n- 文档同步更新以反映架构调整和功能增强，统一描述格式，移除冗余文档说明文件。\n- 其余接口协议与前端标注体验保持标准一致性，无破坏性变更。\n\nv1.0.4 | 2026-08-21T08:45:45.059Z | user\n\n**Summary:** \nRemoved documentation file for this version.\n\n- 删除了 skill-card.md 文件，不影响核心功能和标准实现。\n- 新增GitHub编辑打标同步功能，==其实是自行commit了一次。解决不走后端服务的问题\n\nv1.0.3 | 2026-08-19T08:32:27.862Z | user\n\npm-proto-prd-pin v1.0.3\n\n- 新增前置服务健康探测与只读阻断拦截机制：在关键编辑操作前提前探测后端接口状态，无服务时阻断进入并弹窗提示只读模式。\n- 为无持久化服务环境增加极简启动引导和一键复制启动命令，提升静态托管和预览体验安全性。\n- 去除 skill-card.md 文件，无影响功能变动。\n- 其余核心功能无更动，兼容现状。\n\nv1.0.2 | 2026-08-19T08:03:00.879Z | user\n\npm-proto-prd-pin v1.0.2\n\n- 集成 Vditor IR 即时渲染 Markdown 编辑器，支持多级 Tab/Shift+Tab 列表缩进与可视化表格、Mermaid 流程图即时渲染。\n- 新增 assets/vendor/vditor/index.css 与 index.min.js，实现本地静态资源加载与离线降级支持。\n- 完善右侧抽屉三态切换，支持 400px 全展开、56px 标号竖条半收起与 0px 全收起，增加左侧双按钮控制切换。\n- 增强打点拾取与高精度十字准星打点标注，打标时自动收起抽屉。\n- 严格多版本物理隔离与上传冲突解决模态框 (覆盖/追加/另存) 全面实现。\n- 移除 skill-card.md，优化项目工程文件规范与文档描述。\n\nv1.0.1 | 2026-08-18T06:01:52.192Z | user\n\n- Added a global multilingual support framework, with built-in support for Simplified Chinese, English, Japanese, and Korean, covering all UI elements and supporting runtime hot-switching and local preference storage. - During build time, the system now requires users to confirm their preferred interface language first; all data, templates, and table headers are output strictly in accordance with the selected language. - Other core modules and features remain consistent with the previous version, including interactive tables, line-by-line editors, multi-version mark-up management, Mermaid diagram rendering without truncation, and PRD dashboards. - The structure of the technical documentation and APIs remains unchanged, but `skill-card.md` has been removed.\n\nv1.0.0 | 2026-08-18T04:32:07.657Z | user\n\npm-proto-prd-pin v1.0.0 – Initial public release\n\n- Provides one-click interactive PRD pin marking and multi-version spec management for any HTML prototype.\n- Features fully visual, inline-editable tables and a borderless document editor with live preview and seamless formatting.\n- Supports strict multi-version management with isolated data, version switching, import/export, and conflict handling.\n- Integrates pure white Mermaid diagram rendering with dynamic bottom padding to prevent SVG clipping.\n- Includes fuzzy search for pin titles and a secure drawer with management lock mode.\n- Offers full PRD documentation display with new tab/export support and independent minimizable draft capsules.\n\nv0.1.0 | 2026-08-18T04:29:57.455Z | auto\n\npm-proto-prd-pin v0.1.0 – Initial Release\n\n- Instantly injects an interactive PRD annotation and multi-version specification system into any HTML prototype.\n- Provides visual pinning UI, multi-version management (create, switch, copy, import/export), and strict version data isolation.\n- Features WYSIWYG interactive editable tables—no markdown pipe syntax required—and a seamless, borderless real-time editor.\n- Includes a pure-white Mermaid diagram engine with dynamic truncation prevention, and fullscreen PRD document view/export support.\n- Enables secure mode switching for management actions, fuzzy search of annotations, pin bubble autonomy, and minimized draft capsule for easy workflow.\n\nArchive index:\n\nArchive v1.4.0: 14 files, 8199238 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (310175b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (19729b), scripts/inject.py (4133b), skill-card.md (2464b), SKILL.md (28523b), _meta.json (135b)\n\nFile v1.4.0:SKILL.md\n\n---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、五模态持久化体系 (⚡Cloudflare D1 边缘数据库与 Pages 反代网关直读直写 / ⚡Supabase Serverless 数据库 / 🔑JSONBin.io 云端KV存储 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、右侧常驻分体式悬浮胶囊 (独立👁小眼睛打点显隐开关 / 默认纯净视图免干扰)、shadcn/ui 现代极简设计系统 (Zinc & Slate Theme / Sheet / Dialog / Popover / Card / Tabs / Sonner Toast 组件体系规范)、动态权限隔离与未授权功能全量隐藏保护矩阵 (访客只读模式下彻底隐藏新增打点、编辑需求、删除打点、排序管理、版本新建/导入等入口；输入创立人专属密钥一键校验解锁)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V7.0 (Cloudflare D1 Edge Edition))\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Cloudflare D1 边缘数据库 / Cloudflare Pages 免翻墙网关 / Supabase / JSONBin 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**五模态持久化、访客只读与动态权限隐藏矩阵**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 `dependencies.react`、`next.config.*`、`vite.config.*`（含 `@vitejs/plugin-react`）、或 `App.tsx`/`index.jsx`；\n - **HTML 静态原型**：检查根目录下是否存在独立 `.html` 原型文件（如 `admin.html`、`index.html`）且无前端构建依赖；\n2. **Step 2: 无法确定框架时的强制前置确认 (Interactive Clarification Fallback)**：\n - **若项目中无 `package.json` 或无法明确推断框架体系，Agent 必须向用户发起明确提问**：\n > 💬 *“请问当前项目采用的是什么前端框架？（HTML 静态原型 / Vue 2/3 / React / Next.js / Nuxt）以及 PRD 打点标注工具需要应用在哪些页面或模块？（全局所有路由页面 / 仅特定业务端页面）”*\n3. **Step 3: 各框架精准接入指导 (严禁跨形态误生成文件)**：\n - **React 工程 (Vite / Next.js / CRA / React 18)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 资源放置：将 `prd-pin-tool.js` 与 `vendor/vditor` 置于 `public/assets/js/` 和 `public/assets/vendor/`；\n - 入口引入：在 `src/main.tsx` 或 `src/App.tsx` 中写入：\n ```tsx\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - 零修改 `index.html`，零侵入原有业务组件。\n - **Vue 工程 (Vue 2 / Vue 3 / Vite / Nuxt)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 入口引入：在 `src/main.js` 或 `src/main.ts` 中写入：\n ```javascript\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - **纯静态 HTML 原型 (Vanilla Multi-Page HTML)**：\n - 仅在纯静态 HTML 仓库中，才在各 HTML 页面 `` 闭合前引入 ``。\n\n---\n\n### Module 1: 💾 五模态持久化体系 (含 Cloudflare D1 边缘数据库与 Pages 免翻墙网关)\n\n> 🌟 **云端强确认后置缓存核心原则 (Post-Cloud Confirmation Cache Principle)**： \n> 1. **严禁前置假保存**：严禁在云端请求返回前静默写入 `localStorage` 假装保存成功； \n> 2. **真实 HTTP 200 强校验**：必须在收到云端返回的 `HTTP 200 OK` 且携带确认实体后，才允许将数据镜像写入 `localStorage` 作为客户端离线/秒开缓存； \n> 3. **失败原子回滚**：若云端网络超时或鉴权失败，系统立即阻断并自动回滚内存状态，弹出红色错误 Toast，杜绝本地与云端数据不一致； \n> 4. **跨浏览器/多端免密直读**：系统默认公开 `GET /api/prd/:docId` 只读端点，任何同事、评审方在任意新电脑/新浏览器（含无痕模式）中打开，启动时自动秒级拉取最新规约，实现真正的「全员零配置直读、创立人权限写入」。\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **⚡ 方案 0：Cloudflare D1 边缘数据库 + Pages 网关 —— 【默认推荐 / 全球加速首选】** | 基于 Cloudflare D1 (SQLite) + Worker + Pages 反代网关：
• 读：`GET /api/prd/{docId}`（公开只读，边缘就近缓存）
• 写：`POST /api/prd/{docId}` 带 `Authorization: Bearer ` | **极速 (50~150ms)**
全球 CDN 边缘就近读取，国内免翻墙直连，永不休眠 | **企业、团队协作与公网演示首选**：完美解决 `workers.dev` 在大陆地区的 SNI 阻断问题，强一致性写入，零服务器运维成本。 |\n| **⚡ 方案 1：Supabase Serverless 数据库 (PostgREST API) —— 【大容量备选】** | 基于 Supabase RESTful PostgREST 架构：
• 读：`GET /rest/v1/{table}?id=eq.{docId}` 带 `apikey`
• 写：`POST /rest/v1/{table}` 带 `Prefer: resolution=merge-duplicates` | **极速 (100~200ms)**
企业级直连，500MB 大容量与高并发 | **大型复杂多库原型**：适合已有 Supabase 基础设施的项目，支持强关系字段与海量规约。 |\n| **🔑 方案 2：Serverless 云端 KV 存储 (JSONBin.io) —— 【免建表即用】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待 | **轻量备用**：无需任何后端建表，开箱即用（免费版单条 100KB 限制）。 |\n| **☁️ 方案 3：GitHub Contents API 推送提交 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}` 提交正式 Commit | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。 |\n| **💻 方案 4：本地 Node.js 磁盘直写 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n#### 🏗️ Cloudflare 全栈部署最佳实践（标准化架构）\n\n```mermaid\ngraph LR\n Browser[\"浏览器 / 访客 (国内直连)\"] -->|HTTPS 请求| PagesGateway[\"Cloudflare Pages 网关
(*.pages.dev 反代)\"]\n PagesGateway -->|内部代理转发| WorkerAPI[\"Cloudflare Worker
(API 鉴权与业务逻辑)\"]\n WorkerAPI -->|D1 驱动查询/写入| D1Database[\"Cloudflare D1 (SQLite)
prd_registry 表\"]\n```\n\n1. **D1 数据表结构 (`schema.sql`)**：\n ```sql\n CREATE TABLE IF NOT EXISTS prd_registry (\n id TEXT PRIMARY KEY,\n data TEXT NOT NULL,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP\n );\n ```\n2. **Worker 核心接口规范**：\n - `GET /api/prd/:docId`：公开读取当前页面的全量规约 JSON；\n - `POST /api/prd/:docId`：验证 `Authorization: Bearer `，通过后写入/覆盖 D1；\n - `GET /api/prd/list`：列出所有已持久化的页面主键；\n - 支持完整的 CORS 预检（`OPTIONS`）与 `Access-Control-Allow-Origin: *`。\n3. **Pages 透明反向代理网关 (`_worker.js`)**：\n ```javascript\n export default {\n async fetch(request, env) {\n const url = new URL(request.url);\n const targetOrigin = 'https://.workers.dev';\n const targetUrl = new URL(url.pathname + url.search, targetOrigin);\n const forwardHeaders = new Headers(request.headers);\n forwardHeaders.set('Host', targetUrl.host);\n return fetch(targetUrl.toString(), {\n method: request.method,\n headers: forwardHeaders,\n body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : null\n });\n }\n };\n ```\n\n---\n\n### Module 2: 🔒 读写权限隔离、动态功能隐藏保护矩阵与创立人身份鉴权 (Dynamic UI Guard & Creator Auth)\n\n为防止外部人员、评审方或访客随意篡改线上 PRD 原型规约，系统实现了**严格的动态权限显隐与读写物理隔离保护矩阵**：\n\n```mermaid\ngraph TD\n UserOpen[\"用户打开原型页面\"] --> CheckAuth{\"是否已持有管理员密钥鉴权？
(isPRDEditAuthorized)\"}\n \n CheckAuth -->|❌ 未解锁 (访客只读模式)| VisitorUI[\"【动态隐藏全部管理与编辑入口】
• 隐藏抽屉顶部「排序管理」按钮
• 隐藏版本栏「新建/导入」按钮与下拉菜单管理项
• 隐藏卡片底部「编辑」与「删除」按钮，禁用拖拽
• 隐藏抽屉底部「新增打点」主按钮
• 隐藏 Mini-rail「+」按钮
• 隐藏大头针气泡「编辑需求」按钮
• 状态徽标显示「🔒 Cloudflare (访客只读)」\"]\n \n CheckAuth -->|✅ 已解锁 (管理员模式)| AdminUI[\"【全量展现完整编辑工作台】
• 展现新增打点、编辑、删除、拖拽排序
• 展现新建版本、导入数据、管理锁
• 状态徽标显示「🟢 Cloudflare (已解锁)」
• 任意修改实时同步至 Cloudflare D1\"]\n \n VisitorUI --> ClickUnlock[\"点击状态徽标 🔒 或触发鉴权\"]\n ClickUnlock --> EnterSecret[\"输入创立人专属 API Key / Secret Key\"]\n EnterSecret --> Verify[\"云端实时校验密钥有效性\"]\n Verify -->|✅ 校验通过| AdminUI\n```\n\n#### 1. 🔒 访客只读模式下的动态元素隐藏规则（未授权状态）\n当 `isPRDEditAuthorized()` 为 `false` 时，前端界面自动执行全要素安全收敛：\n- **抽屉顶部操作栏**：彻底隐藏「排序管理」按钮（`#prd-manage-order-btn`）；\n- **多版本工具栏**：彻底隐藏「新建」和「导入」按钮（`#prd-version-new-btn`, `#prd-version-import-btn`）；版本下拉框（`#prd-version-select`）仅保留版本切换选项，**彻底过滤并隐藏所有「新建空白版本/复制当前版本/上传数据/删除版本」等选项**；\n- **需求卡片列表 (`renderRightDrawerList`)**：卡片底部**彻底隐藏「编辑」与「删除」按钮**，仅保留「定位」按钮；禁用卡片拖拽手柄与点击改序交互；\n- **抽屉底部操作栏**：**彻底隐藏「➕ 新增打点」主按钮**，将「查看完整PRD」按钮自适应填满整行宽度；\n- **56px Mini-rail 紧凑标号条**：**彻底隐藏底部的「+」圆圈新增打点按钮**；\n- **大头针悬浮气泡 (`showInspectBubble`)**：底部**彻底隐藏「编辑需求」按钮**，展示轻量「访客只读」状态标签；\n- **全景 PRD 文档大屏 (`openCurrentPagePRDDoc`)**：顶部工具栏**彻底隐藏「上传/导入版本」按钮**。\n\n#### 2. 🟢 创立人身份密钥校验与动态解锁\n- 点击抽屉顶部的 `🔒 Cloudflare (访客只读)` 状态徽标；\n- 弹出管理员鉴权模态框，输入管理员写入密钥（`PRD_ADMIN_SECRET`）；\n- 系统向 Cloudflare / Supabase / GitHub 发起真实写权限校验；\n- 校验通过后将状态注入 `sessionStorage`，徽标实时更新为 `🟢 Cloudflare (已解锁)`，页面毫秒级动态重绘，**瞬间展示所有隐藏的新增、编辑、删除、版本与排序管理按钮**。\n\n#### 3. 🔒 一键锁定恢复只读\n- 点击 `🟢 Cloudflare (已解锁)` 徽标，点击「清除授权 (切换为只读模式)」；\n- 系统立即清除本地会话密钥，界面瞬间恢复为纯净的访客只读模式，所有编辑入口立即全部收敛隐藏。\n\n---\n\n### Module 3: 📍 交互式十字准星打点与智能空间锚定 (Pinning & Spatial Anchoring Engine)\n- **十字准星拾取器 (`bindPickListeners`)**：\n - 点击「📍 新增打点」进入打标模式，鼠标指针变为 `crosshair`，底层元素高亮深琥珀色虚线框；\n - **打标时自动收起右侧抽屉**：进入十字准星打标模式时，右侧抽屉**自动完全收起**，折叠为边缘胶囊 `✕ 📍 点击组件打标 (点击或ESC退出)`，彻底杜绝侧边栏遮挡底层页面组件；\n - 拾取完成或按 ESC 后，自动无缝呼出需求规格编辑工作台；\n- **自愈式弹性 CSS 选择器算法 (`getElementSelector`)**：\n - 优先提取精准 `#id`、语义化类名、结构层级路径（`div:nth-of-type(n)`）与表单属性，保证动态重绘后打点依然 100% 准确对齐；\n- **连续帧率发光框追踪算法 (Continuous Frame-Rate Glow Box Tracking)**：\n - 采用 `requestAnimationFrame` 在平滑滚动的 50 帧（约 800ms）全周期内实时调用 `getBoundingClientRect()` 动态重绘红色发光脉冲框（`position: fixed`），彻底解决页面平滑滚动导致的坐标漂移；\n- **智能容器自动展开 (Smart Container Auto-Unfolding)**：\n - 当打点目标位于未激活的 Tab 面板、已关闭的弹窗或折叠面板中时，定位时自动触发父容器的激活事件（如 `click` / Tab 切换），确保目标元素完全可见后再平滑聚焦。\n\n---\n\n### Module 4: ✍️ Vditor IR 即时渲染与多级缩进工作台 (Vditor IR Editor Workbench)\n- **独立自包含原生 Toast 浮动反馈系统 (`#prd-global-toast-container`)**：\n - 彻底解耦外部环境，内建原生浮动 Toast UI 容器（`z-index: 10000099`），不依赖任何第三方 UI 库或 `window.UI`；\n - 在保存、删除、模式切换、鉴权拦截等关键操作节点提供翡翠绿/珊瑚红/深空灰渐变的高可见度即时反馈；\n- **三方组件集成架构 (Vditor Instant Rendering Engine)**：\n - **双通道与 SPA 绝对路径加载机制 (`ensureVditorLoaded`)**：\n - 采用绝对根路径与 CDN 双通道加载，杜绝 React / Vue 深层 SPA 嵌套路由下相对路径 404（HTML 污染）导致 CSS 失效；\n - **Tailwind CSS Preflight 样式强隔离与重置修复**：\n - 强制对 `#prd-vditor-container` 实施严格样式沙箱隔离，重置并锁定工具栏 SVG 图标为标准的 `14px × 14px`，彻底杜绝 Tailwind CSS 全局 `svg { display:block; width:100% }` 造成的工具栏图标撕裂与字母巨大化（H/B/T 字母变形）问题；\n - **IR (Instant Rendering) 即时渲染模式**：\n - Typora 级的流式文档编写手感，输入 `- 列表` 或 `### 标题` 即刻呈现高保真排版；\n- **⌨️ 完整支持 Tab / Shift+Tab 多级层级缩进**：\n - **多级嵌套列表**：在无序列表、有序列表或任务清单中按 **`Tab`** 即可瞬间向右缩进生成下一层级（如 `1 -> 1.1 -> 1.1.1` 或 `• -> ◦ -> ▪`）；\n - **反向缩进 / 升级层级**：按 **`Shift + Tab`** 或行首 `Backspace` 即可瞬间回退层级；\n- **📊 交互式可视化表格直编**：\n - 彻底告别 Markdown 竖线管道符 (`| col |`)，表格直接渲染为可视 HTML 矩阵；\n - 支持鼠标点击任意单元格直接打字输入，按 `Enter/Tab` 顺畅换行换格；\n - 原生工具栏一键插入表格与进行行列扩展；\n- **🔄 纯白底色 Mermaid 矢量图表即时渲染**：\n - 支持即时渲染 Mermaid 状态图、时序图、流程图，纯白背景卡片呈现，杜绝暗色杂乱；\n- **💡 业务规约三大核心预置模板 (3 Core Standard Templates)**：\n 1. **📋 业务规则模版**：触发条件、前置校验、流转逻辑（含多级缩进）、异常分支处理；\n 2. **🔄 状态机流程图**：标准 Mermaid `graph TB` 状态机流转矢量图；\n 3. **📊 字段数据字典表**：字段名、字段类型、是否必填、枚举值/格式、业务口径与默认值表格；\n- **单一入口草稿暂存与最小化机制 (`.prd-editor-mini-dock`)**：\n - **右上角极简**：仅保留右上角关闭按钮 `✕`，彻底去除重复按钮；\n - **底部单一看页面入口**：底部操作栏保留 **「👀 暂存并看页面」** 按钮；\n - **无损暂存与一键恢复**：点击后草稿数据实时自 Vditor 实例读取并无损暂存，弹窗折叠为右下角常驻胶囊（`✏️ 编辑中: 需求名称 · 草稿已暂存`），点击 **「恢复编辑」** 即可无损还原全部内容。\n\n---\n\n### Module 5: 🗂️ 三态抽屉与左边缘双按钮控制体系 (3-State Drawer & Dual Inward Handles)\n- **左边缘双按钮控制把手组 (朝内指向抽屉，颜色与功能清晰区隔)**：\n - **上方按钮 (全收起)**：深色科技质感（`#0f172a`）+ 朝内向右箭头 `›`，点击完全收起抽屉；\n - **下方按钮 (半收起)**：深铁锈红质感（`#8C4A28`）+ 朝内紧凑标号条图标 `⇥`，点击收窄为 56px 纯数字标号竖条；\n - **收起状态极简呈现**：当抽屉完全收起时，页面右侧中间无任何多余漂浮物，仅保留右上角 `📌 需求打点 (n)` 胶囊把手；\n- **三态无缝切换 (`全展开 400px` ⇄ `半收起标号条 56px` ⇄ `完全收起 0px`)**：\n - **全展开 (400px)**：展示完整需求卡片列表、多版本下拉框、完全模糊搜索栏；\n - **半收起紧凑标号竖条 (56px Mini Rail)**：抽屉收窄为右侧极窄的纯标号竖条 `[①][②][③][④]...`，完全释放底层 95% 页面画布；\n - 点击标号条中任意序号：页面平滑滚动并闪烁定位发光框，且**在目标组件旁精准弹出打点详情气泡 (`Inspect Popover`)**，无缝查看需求；\n - 鼠标悬停标号展示需求标题 Tooltip；\n - **完全收起**：折叠至右侧边缘胶囊 `📌 需求打点 (n)`；\n- **100% 绝对统一卡片高度 (Strict 136px Unified Height)**：\n - 标题单行截断带省略号（`text-overflow: ellipsis`）；\n - 简介使用纯文本摘要提取算法（过滤代码块/表格/标记），锁定标准 2 行（36px）展示，杜绝高度塌陷；\n - 所有卡片高度**严格统一为 136px**，列表排版整齐如一；\n- **纯标题完全模糊搜索与检索系统 (Fuzzy Title Search)**：\n - 支持中英文子串包含、空格多关键词分词（如 `订单 履约`）、以及字符流顺序模糊检索，配有一键清空按钮 `✕`。\n\n---\n\n### Module 6: 🔒 排序管理安全锁与依次顺延瞬移体系 (Sequential Cascade Reordering)\n- **日常安全浏览模式（默认）**：\n - 卡片隐藏排序/删除按钮，禁用拖拽，彻底防止日常查阅和定位误触；\n- **排序与删除管理模式（点击 `⚙️ 排序管理` 开启，需创立人鉴权）**：\n - 抽屉浮现提示条与 `✓ 完成退出` 按钮；\n - **智能连续排序与依次瞬移顺延**：\n - `🔝 置顶`：直接将目标项瞬移至第 1 项，后续所有项目**自动依次向下顺延 (1 -> 2 -> 3...)**；\n - `🔢 移至`：输入目标序号，目标项精准插入，其余项目依次顺延；\n - `▲` / `▼`：单步上移/下移；\n - `⠿`：鼠标按住拖拽排序；\n - **列表滚动高度锁定与平滑高亮**：调整排序后列表滚动位置毫秒级锁定不跳动，瞬移到位的新卡片带有呼吸发光边框，页面大头针数字同步更新。\n\n---\n\n### Module 7: 🏷️ 严格多版本物理隔离与导入冲突控制 (Multi-Version & Import Resolver)\n- **版本数据模型与向后兼容**：\n - 统一由 `versionRegistry` 全局维护：\n ```javascript\n window.PRD_VERSION_REGISTRY = {\n \"activeVersion\": \"v1.0.0\",\n \"versions\": {\n \"v1.0.0\": [ /* pins */ ],\n \"v1.1.0\": [ /* pins */ ]\n }\n };\n ```\n- **严格版本物理隔离 (Strict Version Isolation & Zero Cross-Contamination)**：\n - 页面大头针徽标、右侧抽屉列表、打点详情气泡、以及全文 PRD 文档大屏**仅展示当前所选激活版本的数据**，互相版本的打点**完全物理隔离、互不可见**；\n - **新建版本一律为全新空白版本 (Default Clean Blank Slate)**：\n - 点击「➕」或「➕ 新建空白版本...」时，直接创建一个全新的空打点版本（打点数：0），方便 PM 从零开始标注下一迭代；\n - 若需要派生副本，可选择「📋 复制当前版本副本」；\n- **上传 JS 文件与同版本智能冲突处理 (Conflict Modal)**：\n - 用户上传 `.js` / `.json` 文件时弹出冲突模态框：\n - 🔴 **【覆盖现有版本】**：清空当前版本旧打点，完全替换为上传内容；\n - 🟢 **【追加合并】**：保留旧打点，将上传打点追加至末尾并重新递增编号；\n - 🔵 **【另存为新版本】**：自动命名为 `[版本]_imported`。\n\n---\n\n### Module 8: 📑 全景 PRD 文档大屏与交付导出 (PRD Document Screen & Export)\n- **抽屉常驻入口**：右侧抽屉底部常驻 `📑 查看完整PRD` 按钮；\n- **独立新网页打开 (`↗️ 在新网页打开`)**：\n - 在独立新标签页中打开纯净 PRD 大屏文档，带固定 TOC 目录大纲；\n - 适配打印排版，按 `Ctrl+P / Cmd+P` 一键导出交付级 PDF；\n- **多格式一键导出**：支持 `📥 导出 Markdown`、`💾 导出 JS 数据`、`🖨️ 打印 / 导出 PDF`。\n\n---\n\n### Module 9: ⚛️ Vue & React 现代框架 SPA 兼容与自适应引擎 (Vue & React Framework Adaptation Engine)\n\n针对现代前端 SPA 单页应用与组件化工程，引擎内建了框架自适应技术：\n\n1. **🌐 SPA 客户端路由自动劫持 (`pushState` / `popstate`)**：\n - 自动代理拦截全局 `history.pushState` 与 `history.replaceState`，并监听 `popstate` 与 Hash 变更；\n - 当 Vue Router / React Router / Next.js 执行无刷新路由跳转时，系统毫秒级识别当前页面路由（如 `/mall/detail` -> `mall_detail`），自动热重绘对应路由的打点列表与大头针。\n2. **🔄 虚拟 DOM 动态挂载自愈 (Virtual DOM Dynamic Re-anchoring)**：\n - 结合全局 `MutationObserver` 监听 DOM 树的动态增删；\n - 当 Vue 的 `v-if` 或 React 的条件渲染组件（如弹窗、抽屉、异步表格）动态插入页面时，引擎在 50~100ms 内自动重新计算坐标并贴附大头针。\n3. **🧹 Scoped CSS 与哈希类名清洗过滤 (Scoped CSS & Hash Filtration)**：\n - 自动识别并过滤 Vue 的 `data-v-xxxx` 以及 React CSS-in-JS (Emotion / styled-components) 生成的动态随机哈希类名（如 `.css-178fa9`）；\n - 优先提取稳定的语义结构路径（`nth-of-type`）、组件 ID、表单名称、或业务自定义属性（`data-prd=\"key\"`），保证打包重构后打点永不漂移。\n4. **🛡️ HTTP Header ISO-8859-1 编码清洗与云端校验**：\n - 自动对 SPA 中文路由路径（如 `/预警信息/押品预警信息`）进行 `encodeURIComponent` 清洗，杜绝浏览器原生 `fetch` 因中文字符导致的 `non ISO-8859-1 code point` 校验阻断，确保云端 KV 瞬时秒级同步。\n\n---\n\n## 🛠️ 项目工程结构与文件规范\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A (或 Vue / React 路由页面)\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本 (自动拉起静态服务与持久化接口)\n└── assets/\n ├── vendor/ # 第三方独立组件库\n │ └── vditor/\n │ ├── index.min.js # Vditor 核心引擎 (本地离线支持)\n │ └── index.css # Vditor 核心样式\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (跨框架通用: HTML / Vue / React)\n ├── prd-data-admin.js# admin.html 专属数据底包\n ├── prd-data-mall.js # mall.html 专属数据底包\n ├── prd-data-merchant.js\n ├── prd-data-h5.js\n └── prd-data-merchant-h5.js\n```\n\nFile v1.4.0:README.md\n\n# 📌 PM Prototype PRD Pinning & Multi-Version Specification Engine\n\n
\n\n**The Ultimate Interactive PRD Pinning, Vditor IR Markdown Editor & Five-Modal Persistence System for HTML / Vue / React Prototypes.**\n\n[![Version](https://img.shields.io/badge/version-7.0.0-blue.svg)](https://github.com/barry0-0/pm-proto-prd-pin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![i18n](https://img.shields.io/badge/i18n-en%20%7C%20zh--CN%20%7C%20ja%20%7C%20ko-brightgreen.svg)](#-internationalization-i18n)\n[![Zero-Dependency](https://img.shields.io/badge/dependencies-zero--native-orange.svg)](#-quick-start)\n\n[English](#-english-documentation) • [简体中文](#-简体中文文档) • [日本語](#-日本語ドキュメント) • [한국어](#-한국어-문서)\n\n
\n\n---\n\n## 📸 Interface Screenshots\n\n| ✍️ Vditor IR Live Editor & Visual Tables | 🗂️ 3-State Drawer (Full / Semi Rail / Hidden) |\n| :---: | :---: |\n| ![Visual Table Editor](assets/images/screenshot_visual_table_editor.png) | ![Drawer Overview](assets/images/screenshot_drawer_overview.png) |\n| **🔄 Pure-White Mermaid Statecharts** | **📑 Full Page Deliverable PRD Screen** |\n| ![Mermaid Render](assets/images/screenshot_mermaid_render.png) | ![Full PRD Document](assets/images/screenshot_full_prd_document.png) |\n\n---\n\n# 🌐 English Documentation\n\n## ⚛️ Cross-Framework Compatibility (HTML / Vue / React) & Autonomous Detection\n\n- **Autonomous Tech-Stack Inspection**: Automatically analyzes `package.json`, Vite/Webpack configs, or HTML structure to detect if the project is **Pure HTML**, **Vue.js (2/3/Nuxt)**, or **React (18/Next.js)**.\n- **Interactive Clarification Fallback**: If the framework cannot be determined automatically, the agent prompts the user to confirm the framework and target pages/modules before proceeding.\n- **SPA Client-Side Route Sync**: Intercepts `history.pushState` / `popstate` to automatically adapt pins across SPA route transitions without page refreshes.\n- **Virtual DOM Dynamic Re-anchoring**: Automatically re-attaches pins when conditional components (`v-if` / React modals) enter or exit the DOM.\n- **Scoped CSS & Hash Filtration**: Automatically filters Vue `data-v-xxxx` and React CSS-in-JS hashes to guarantee robust long-term selector anchoring.\n- **Tailwind CSS Reset Isolation & SPA Resource Hydration**: Full CSS isolation sandbox protecting Vditor toolbar icons from Tailwind Preflight distortion, with ISO-8859-1 safe header sanitization for non-ASCII SPA routes.\n\n---\n\n## 🌟 Five-Modal Persistence System & Comparison\n\n| Persistence Mode | Underlying Architecture | Read/Write Latency | Use Cases & Key Characteristics |\n| :--- | :--- | :--- | :--- |\n| **⚡ Mode 0: Cloudflare D1 Edge Database + Pages Gateway —— [Recommended / Global Speed]** | Cloudflare D1 (SQLite) + Worker + Pages Reverse Proxy Gateway (`GET /api/prd/{docId}` Public Read, `POST` Private Write with Bearer Secret) | **Ultra-Fast (50~150ms)**
Global CDN edge cache, China mainland direct access bypass, 24/7 always on | **Best for Team Collaboration & Hosted Demos**: Zero server ops, seamless Mainland China access via Pages proxy, instant global sync. |\n| **⚡ Mode 1: Supabase Serverless Database** | Supabase RESTful PostgREST (`GET /rest/v1/{table}` Public Read, `POST` Upsert with API Key) | **Ultra-Fast (100~200ms)**
Enterprise relational backend, 500MB storage | **Best for Large Multi-Table Prototypes**: High concurrency, structured relational specs, and extensive revision logs. |\n| **🔑 Mode 2: Serverless Cloud KV Storage (JSONBin.io / Custom KV)** | RESTful KV API (`GET /latest` Public Read, `PUT` Private Write with Master Key) | **Instant (200~300ms)**
Zero build wait, instant cross-browser hydration | **Best for Fast Online Staging**: Zero-server deployment (GitHub Pages, Vercel). Instant synchronization across devices. |\n| **☁️ Mode 3: GitHub Contents API Git Commit** | GitHub REST API (`PUT /contents/{filePath}` Base64 encoded Git Commits) | **Slower (1~3s)**
Git tree hashing, commit chaining, and Pages rebuild delay | **Best for Strict Audit Trails**: Automatically generates formal Git commits with complete commit history. |\n| **💻 Mode 4: Local Node.js Disk Storage** | Native Node.js server (`POST /api/save-prd` writing directly to disk via fs) | **Sub-millisecond (10~50ms)**
Direct local filesystem I/O | **Best for Offline Development**: Pure offline local development with zero external network dependency. |\n\n---\n\n## 🔒 Dynamic UI Guard & Creator Authentication Matrix\n\nTo prevent unauthorized modifications on hosted prototypes, the system enforces a strict dynamic protection matrix:\n\n```mermaid\ngraph TD\n UserOpen[\"User Opens Prototype Page\"] --> CheckAuth{\"Is Admin Secret Verified?
(isPRDEditAuthorized)\"}\n \n CheckAuth -->|❌ Unauthorized (Visitor Read-Only)| VisitorUI[\"【Dynamic UI Guard & Feature Hiding】
• Hide top 'Reorder' button
• Hide 'New/Import' buttons & management dropdown options
• Hide card 'Edit' & 'Delete' actions
• Hide drawer bottom '+ Add Pin' primary button
• Hide 56px Mini-rail bottom '+' button
• Hide pin inspect bubble 'Edit Spec' action
• Status badge displays '🔒 Cloudflare (Visitor Read-Only)'\"]\n \n CheckAuth -->|✅ Authorized (Admin Mode)| AdminUI[\"【Full Interactive Workbench】
• Show Add Pin, Edit, Delete, and Reorder
• Show New Version, Import, and Safety Lock
• Status badge displays '🟢 Cloudflare (Unlocked)'
• Real-time mutations saved directly to cloud storage\"]\n```\n\n1. **Visitor Read-Only Mode (Zero-Interruption Browsing)**:\n - Visitors get instant read access to all pins, Markdown specs, Mermaid diagrams, and PDF exports without entering credentials.\n - All editing, pin creation, deletion, version management, and import entry points are completely hidden from the UI.\n2. **One-Click Creator Unlock**:\n - Clicking the `🔒 Cloudflare (Visitor Read-Only)` badge prompts for the Admin Secret Key (`PRD_ADMIN_SECRET`).\n - Once validated, the UI instantly unlocks and unhides all management controls.\n\n---\n\n## 🌟 Key Capabilities & Features\n\n| Capability | Technical Implementation | PM & Engineering Benefit |\n| :--- | :--- | :--- |\n| **✍️ Vditor IR Markdown Workbench** | Integrated Vditor (Instant Rendering mode) with relative vendor loading + CDN auto-fallback | Typora-grade live authoring experience; instantaneous rendering for all components |\n| **⌨️ Multi-Level Tab Indentation** | Native `Tab` and `Shift+Tab` event handlers for unordered/ordered/task lists | Effortlessly organize nested specifications (`1 -> 1.1 -> 1.1.1`) |\n| **📊 Interactive Visual Table Editor** | 2D HTML cell matrix, direct cell typing, `Enter/Tab` navigation, 1-click row/col ops | Completely eliminates markdown pipe `\\| col \\|` syntax friction; feels like Excel/Word |\n| **🔄 Pure-White Mermaid Vector Engine** | Dedicated white container with dynamic bottom viewBox compensation (+28px) | Zero clipped labels or distorted arrows on Statecharts, Sequences, and Flowcharts |\n| **💡 3 Core Business Templates** | Fast-insert buttons for Business Rules, Statechart Diagrams, and Data Dictionary Tables | Rapid authoring of standardized specification clauses |\n| **👀 Single-Entry Stash & Minimize** | Clean close `✕` in header + `👀 Stash & View Page` in bottom bar (`.prd-editor-mini-dock` pill) | Review underlying prototype elements without losing unsaved drafts; 1-click restore |\n| **🌐 Native 4-Language i18n** | Full 115-key dynamic dictionary covering `en`, `zh-CN`, `ja`, `ko`; runtime hot-switching | Seamless multi-lingual team collaboration across global product workflows |\n| **🗂️ 3-State Drawer & Dual Handles** | Full (400px), Semi (56px Mini Rail), Hidden (0px); dual inward-facing edge handles | Frees up 95% of prototype canvas while keeping all pins immediately accessible |\n| **🔒 Reorder Safety Lock & Cascade** | Normal browsing locks order; manage mode unlocks `🔝 Top`, `🔢 Move To`, sequential cascade | Accidental reordering prevention; seamless 1 -> 2 -> 3 cascading when reordering |\n| **🏷️ Multi-Version Physical Isolation** | Isolated `versionRegistry`; new versions start clean (0 pins); upload conflict resolver | No pin cross-contamination across sprint iterations |\n| **📑 Full PRD Document & PDF Export** | Dedicated doc modal + new tab view with TOC outline and print styling | 1-click export to deliverable PDF or Markdown specifications |\n\n---\n\n# 🇨🇳 简体中文文档\n\n## ⚛️ 跨框架兼容架构 (HTML / Vue / React) 与自主工程感知\n\n- **🚫 SPA 工程严禁生成冗余 HTML (Zero-HTML In React/Vue)**：在 React/Vue 现代工程中，绝对禁止生成任何独立的 `.html` 页面，仅在全局入口（`main.tsx` / `main.js`）以一行 `import` 挂载，零 HTML 污染；\n- **工程架构自主嗅探 (Autonomous Inspection)**：自动检查 `package.json`、Vite/Webpack 插件及文件类型，智能识别当前工程是 **HTML 静态原型**、**Vue.js (Vue 2/3/Nuxt)** 还是 **React (React 18/Next.js)**；\n- **未能识别时的前置提问协议**：若无法推断框架，Agent 自动前置发起询问：确认所用技术栈及 PRD 打点需应用的页面/模块；\n- **SPA 客户端路由热感知**：自动代理全局 `history.pushState` / `popstate`，Vue Router / React Router 无刷新切页时自动切换打点数据；\n- **虚拟 DOM 动态挂载自愈**：结合 `MutationObserver`，在 `v-if` / 弹窗动态挂载时毫秒级自动定位并贴附大头针；\n- **Scoped CSS 与随机哈希清洗**：智能剔除 `data-v-xxxx` 与 CSS-in-JS 哈希类名，优先提取语义化结构路径；\n- **Tailwind CSS 样式强隔离与深层 SPA 路由安全**：构建 Vditor 专属样式沙箱，根除 Tailwind Preflight 造成的图标撕裂，并自动对中文 SPA 路由执行 ISO-8859-1 安全编码。\n\n---\n\n## 🌟 五模态持久化体系与方案实现对比\n\n针对产品经理在不同阶段（本地制作、团队评审、线上发布）的诉求，系统提供了五套严格排他的持久化架构：\n\n```mermaid\ngraph TD\n SaveAction[\"触发 保存/新增/编辑/排序/导入\"] --> ModeCheck{\"当前锁定的持久化模式\"}\n \n ModeCheck -->|⚡ 方案 0: Cloudflare D1 + Pages 网关| ModeCF[\"【Cloudflare D1 边缘数据库】
⚡ 50~150ms 极速就近直写
Pages 反代直连，国内免翻墙，零运维成本\"]\n ModeCheck -->|⚡ 方案 1: Supabase Serverless 数据库| ModeSB[\"【Supabase RESTful API】
⚡ 100~200ms 直读直写
PostgREST 企业级架构，500MB 大容量\"]\n ModeCheck -->|🔑 方案 2: Serverless 云端 KV 存储| ModeKV[\"【JSONBin.io / 自建 KV API】
⚡ 200~300ms 秒级直写
无需服务器，免编译等待，跨端即时同步\"]\n ModeCheck -->|☁️ 方案 3: GitHub Contents API| ModeGH[\"【GitHub REST API Git Commit】
⏳ 1~3秒 提交较慢
自动生成 Commit 节点，代码库归档，审计追踪\"]\n ModeCheck -->|💻 方案 4: 本地 Node.js 模式| ModeLocal[\"【本地 Node.js /api/save-prd】
⚡ 10ms 磁盘直写
纯本地脱机运行，修改本地物理 js 文件\"]\n```\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **⚡ 方案 0：Cloudflare D1 边缘数据库 + Pages 网关 —— 【默认推荐 / 全球加速首选】** | 基于 Cloudflare D1 (SQLite) + Worker + Pages 反代网关：
• 读：`GET /api/prd/{docId}`（公开只读，边缘就近缓存）
• 写：`POST /api/prd/{docId}` 带 `Authorization: Bearer ` | **极速 (50~150ms)**
全球 CDN 边缘就近读取，国内免翻墙直连，永不休眠 | **企业、团队协作与公网演示首选**：完美解决 `workers.dev` 在大陆地区的 SNI 阻断问题，强一致性写入，零服务器运维成本。 |\n| **⚡ 方案 1：Supabase Serverless 数据库 (PostgREST API) —— 【大容量备选】** | 基于 Supabase RESTful PostgREST 架构：
• 读：`GET /rest/v1/{table}?id=eq.{docId}` 带 `apikey`
• 写：`POST /rest/v1/{table}` 带 `Prefer: resolution=merge-duplicates` | **极速 (100~200ms)**
企业级直连，500MB 大容量与高并发 | **大型复杂多库原型**：适合已有 Supabase 基础设施的项目，支持强关系字段与海量规约。 |\n| **🔑 方案 2：Serverless 云端 KV 存储 (JSONBin.io) —— 【免建表即用】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待 | **轻量备用**：无需任何后端建表，开箱即用（免费版单条 100KB 限制）。 |\n| **☁️ 方案 3：GitHub Contents API 推送提交 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}` 提交正式 Commit | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。 |\n| **💻 方案 4：本地 Node.js 磁盘直写 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n---\n\n## 🔒 读写权限隔离、动态功能隐藏保护矩阵与创立人身份鉴权\n\n为了防止原型发布到线上后被外部人员随意篡改，系统内建了**企业级权限隔离与动态 UI 安全隐藏矩阵**：\n\n1. **👁️ 访客只读保护（全量敏感功能动态隐藏）**：\n - 外部访客、设计或研发人员打开页面，直接只读加载全部打点、Markdown 规约、Mermaid 流程图与数据字典，无任何弹窗打扰；\n - **动态隐藏矩阵**：在未通过管理员密钥验证时，界面自动执行全要素安全收敛：\n - 抽屉顶部彻底隐藏「排序管理」按钮；\n - 多版本工具栏彻底隐藏「新建」和「导入」按钮，版本下拉框过滤所有管理选项；\n - 需求卡片底部彻底隐藏「编辑」与「删除」按钮，仅保留「定位」；\n - 抽屉底部彻底隐藏「➕ 新增打点」按钮；\n - 56px Mini-rail 标号条底部彻底隐藏「+」新增按钮；\n - 大头针悬浮气泡底部彻底隐藏「编辑需求」按钮；\n - 全景 PRD 文档大屏彻底隐藏「上传/导入版本」按钮。\n2. **🟢 创立人身份密钥校验与动态解锁**：\n - 点击抽屉顶部的 `🔒 Cloudflare (访客只读)` 状态徽标；\n - 弹出管理员鉴权模态框，输入管理员写入密钥（`PRD_ADMIN_SECRET`）；\n - 校验通过后将状态注入 `sessionStorage`，徽标更新为 `🟢 Cloudflare (已解锁)`，页面毫秒级动态重绘，**瞬间展示所有隐藏的新增、编辑、删除、版本与排序管理按钮**。\n3. **🔒 一键锁定恢复只读**：\n - 点击 `🟢 Cloudflare (已解锁)` 徽标选择「清除授权」，界面瞬间恢复纯净只读视图，所有编辑入口立即全部收敛隐藏。\n\n---\n\n## 🛠️ 项目工程结构与集成\n\n```html\n\n\n```\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本\n└── assets/\n ├── vendor/\n │ └── vditor/ # Vditor 离线资源\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (V7.0 跨框架通用: HTML / Vue / React)\n ├── prd-data-admin.js\n ├── prd-data-mall.js\n └── prd-data-merchant.js\n```\n\n---\n\n# 🇯🇵 日本語ドキュメント\n\n## 🌟 5 つの永続化モードとアーキテクチャ比較\n\n1. **⚡ モード 0: Cloudflare D1 エッジデータベース + Pages ゲートウェイ —— 【デフォルト推奨・最高速】**：\n - Cloudflare D1 (SQLite) + Worker + Pages リバースプロキシ。グローバル CDN エッジキャッシュ、常時高速応答（50〜150ms）、サーバーレス運用。\n2. **⚡ モード 1: Supabase Serverless データベース (PostgREST API)**：\n - 大容量（500MB）と高同時実行性を備えたリレーショナルクラウド DB。\n3. **🔑 モード 2: Serverless クラウド KV ストレージ (JSONBin.io)**：\n - RESTful API による高速リアルタイム同期（200〜300ms）。\n4. **☁️ モード 3: GitHub Contents API プッシュモード (Git Commit)**：\n - GitHub REST API を介して正式な Git Commit を自動作成。監査ログに最適。\n5. **💻 モード 4: ローカル Node.js ディスク直接保存**：\n - ローカルの `node server.js` を介してローカルディスクの `.js` ファイルを直接更新。オフライン開発に最適。\n\n## 🔒 閲覧・編集の権限分離と動的 UI 保護マトリクス\n- **閲覧者モード（デフォルト）**：認証なしでピン、Markdown 仕様書、Mermaid 図、PDF エクスポートを自由に閲覧可能。**編集、ピン追加、削除、インポート、バージョン作成ボタンは自動的に非表示化**されます。\n- **管理者キー認証**：ステータスバッジ `🔒 (閲覧者モード)` をクリックして秘密鍵を入力すると、全機能が瞬時にロック解除・表示されます。\n\n---\n\n# 🇰🇷 한국어 문서\n\n## 🌟 5가지 영속성 모드 및 아키텍처 비교\n\n1. **⚡ 모드 0: Cloudflare D1 엣지 데이터베이스 + Pages 게이트웨이 —— 【기본 권장 / 초고속】**：\n - Cloudflare D1 (SQLite) + Worker + Pages 리버스 프록시 게이트웨이. 글로벌 CDN 엣지 캐싱, 50~150ms 극속 응답, 무중단 서버리스 운용.\n2. **⚡ 모드 1: Supabase Serverless 데이터베이스 (PostgREST API)**：\n - 500MB 대용량 및 고동시성 지원 클라우드 DB.\n3. **🔑 모드 2: Serverless 클라우드 KV 스토리지 (JSONBin.io)**：\n - RESTful API 기반 초고속 실시간 동기화 (200~300ms).\n4. **☁️ 모드 3: GitHub Contents API 푸시 모드 (Git Commit)**：\n - GitHub REST API를 통해 정식 Git Commit을 자동 생성.\n5. **💻 모드 4: 로컬 Node.js 디스크 직접 저장**：\n - `node server.js`를 통해 로컬 디스크의 `.js` 파일을 직접 수정.\n\n## 🔒 읽기/쓰기 권한 분리 및 동적 UI 보호 매트릭스\n- **방문자 읽기 전용 (기본)**：인증 없이 핀, 마크다운 명세, Mermaid 다이어그램을 자유롭게 열람. **편집, 핀 추가, 삭제, 가져오기, 버전 생성 등의 모든 관리 버튼이 자동으로 숨김 처리**됩니다.\n- **관리자 키 인증**：상태 배지 `🔒 (방문자 읽기 전용)`를 클릭하여 관리자 비밀키를 입력하면 모든 편집 도구가 즉시 잠금 해제되고 화면에 표시됩니다.\n\n---\n\n## 📄 License\nMIT License. Created for Product Managers & UI/UX Engineers.\n\nFile v1.4.0:_meta.json\n\n{\n \"ownerId\": \"kn7b10aee3mw0zzb4d2xy1mn7h820ysv\",\n \"slug\": \"pm-proto-prd-pin\",\n \"version\": \"1.4.0\",\n \"publishedAt\": 1790047070242\n}\n\nFile v1.4.0:skill-card.md\n\n## Description:\n\nA zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for HTML, Vue, and React prototypes.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[barry0-0](https://clawhub.ai/user/barry0-0)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers, UX designers, and frontend developers use this skill to add in-page PRD pins, rich Markdown specifications, versioned requirements, and exportable PRD documents to existing prototypes. It supports static HTML prototypes and framework-aware integration guidance for Vue and React projects.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The release stores powerful cloud or GitHub write credentials in browser storage.\n\nMitigation: Use narrowly scoped, disposable credentials; avoid confidential PRD data until credential storage is redesigned; rotate any credentials used during testing.\n\nRisk: The bundled local write server is unauthenticated and uses permissive CORS.\n\nMitigation: Run the server only on localhost or a trusted machine; do not expose it to a network; add authentication and restrictive CORS before team or hosted use.\n\nRisk: The scanner flagged exploitable rendering weaknesses around Markdown rendering.\n\nMitigation: Sanitize rendered Markdown and HTML, and review imported or externally supplied PRD content before displaying it in shared prototypes.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin)\n- [Publisher profile](https://clawhub.ai/user/barry0-0)\n- [Artifact README](artifact/README.md)\n- [Artifact skill definition](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown guidance with code snippets, shell commands, and generated or modified project files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce PRD annotation assets, local server commands, persistence configuration, and exportable Markdown, JavaScript data, or PDF-ready PRD documents.]\n\n## Skill Version(s):\n\n1.4.0 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.3.1: 10 files, 180452 bytes\n\nFiles: assets/prd-pin-tool.js (287522b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (18664b), scripts/inject.py (4133b), skill-card.md (2250b), SKILL.md (27758b), _meta.json (135b)\n\nFile v1.3.1:SKILL.md\n\n---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、四模态持久化体系 (⚡Supabase Serverless 数据库直读直写 / 🔑JSONBin.io 云端KV存储 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、右侧常驻分体式悬浮胶囊 (独立👁小眼睛打点显隐开关 / 默认纯净视图免干扰)、shadcn/ui 现代极简设计系统 (Zinc & Slate Theme / Sheet / Dialog / Popover / Card / Tabs / Sonner Toast 组件体系规范)、读写分离与创立人 Master Key 身份鉴权强拦截矩阵 (无痕与访客只读保护)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V6.3 (v1.3.1 shadcn/ui Standard))\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Serverless 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**三模态持久化与权限强鉴权**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 `dependencies.react`、`next.config.*`、`vite.config.*`（含 `@vitejs/plugin-react`）、或 `App.tsx`/`index.jsx`；\n - **HTML 静态原型**：检查根目录下是否存在独立 `.html` 原型文件（如 `admin.html`、`index.html`）且无前端构建依赖；\n2. **Step 2: 无法确定框架时的强制前置确认 (Interactive Clarification Fallback)**：\n - **若项目中无 `package.json` 或无法明确推断框架体系，Agent 必须向用户发起明确提问**：\n > 💬 *“请问当前项目采用的是什么前端框架？（HTML 静态原型 / Vue 2/3 / React / Next.js / Nuxt）以及 PRD 打点标注工具需要应用在哪些页面或模块？（全局所有路由页面 / 仅特定业务端页面）”*\n3. **Step 3: 各框架精准接入指导 (严禁跨形态误生成文件)**：\n - **React 工程 (Vite / Next.js / CRA / React 18)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 资源放置：将 `prd-pin-tool.js` 与 `vendor/vditor` 置于 `public/assets/js/` 和 `public/assets/vendor/`；\n - 入口引入：在 `src/main.tsx` 或 `src/App.tsx` 中写入：\n ```tsx\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - 零修改 `index.html`，零侵入原有业务组件。\n - **Vue 工程 (Vue 2 / Vue 3 / Vite / Nuxt)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 入口引入：在 `src/main.js` 或 `src/main.ts` 中写入：\n ```javascript\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - **纯静态 HTML 原型 (Vanilla Multi-Page HTML)**：\n - 仅在纯静态 HTML 仓库中，才在各 HTML 页面 `` 闭合前引入 ``。\n\n---\n\n### Module 1: 💾 四模态持久化体系 (含 Supabase 企业级数据库)、一键数据迁移与跨浏览器免密直读架构 (Tri-Engine Persistence & Zero-Config Cloud Sync)\n\n> 🌟 **云端强确认后置缓存核心原则 (Post-Cloud Confirmation Cache Principle)**： \n> 1. **严禁前置假保存**：严禁在云端请求返回前静默写入 `localStorage` 假装保存成功； \n> 2. **真实 HTTP 200 强校验**：必须在收到云端 Serverless KV 返回的 `HTTP 200 OK` 且携带合法 `record` / `metadata` 实体后，才允许将数据镜像写入 `localStorage` 作为客户端离线/秒开缓存； \n> 3. **失败原子回滚**：若云端网络超时或鉴权失败，系统立即阻断并自动回滚内存状态，弹出红色错误 Toast，杜绝本地与云端数据不一致； \n> 4. **跨浏览器/多端免密直读**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 固化绑定公开只读 Bin ID，任何同事、评审方在新电脑/新浏览器（含无痕模式）中打开，启动时自动从该 Bin ID 秒级拉取最新规约，实现真正的「全员零配置直读、创立人权限写入」。\n\n> 🌟 **跨浏览器/多端免密实时同步核心架构原理 (Cross-Browser Zero-Config Protocol)**： \n> 1. **创立人写入流程 (Creator Write Flow)**：创立人通过专属 Master Key 向指定的云端 Bin 发送 `PUT` 请求，成功后数据即时在 JSONBin 全球 CDN 上更新； \n> 2. **团队/访客免密直读流程 (Visitor Zero-Config Read Flow)**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 内置该项目或各页面的公开只读 Bin ID。**任何团队成员、评审方、或在任意新电脑、新浏览器（包括无痕模式）打开时，无需输入任何 Key 或进行任何配置，系统在页面启动时自动秒级拉取最新规约并热重绘**，实现真正的「一次配置、全员秒读、权限隔离、云端协同」！\n\n> 🌟 **核心战略价值 (Strategic Significance)**： \n> 彻底解决传统 HTML 原型与 SPA 页面在静态托管平台（GitHub Pages / 纯前端静态服务器 / 预览链接）上**「有展示、无后端、无法在线编辑、无法团队跨端协同」**的致命痛点。 \n> 同时提供了**「一键跨模式数据无缝迁移引擎」**：当产品经理在某一模式（如本地 Node 磁盘开发）制作完成打点后，切换至另一模式（如云端 JSONBin 或 GitHub Pages）时，系统自动弹出迁移决策弹窗，**支持一键将当前全量打点与多版本规约整体同步写入至新目标数据源**，实现零断点无缝过渡！\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **⚡ 方案 0：Supabase Serverless 数据库打点 (PostgREST API) —— 【强烈推荐 / 大容量首选】** | 基于 Supabase RESTful PostgREST 架构：
• 读：`GET /rest/v1/{table}?id=eq.{docId}` 带 `apikey`
• 写：`POST /rest/v1/{table}` 带 `Prefer: resolution=merge-duplicates` | **极速 (100~200ms)**
企业级直连，500MB 大容量与高并发，无单条记录容量限制 | **企业与高频首选**：大型复杂原型、多页面多版本规约、海量流程图。突破 JSONBin 100KB 单条限制与请求上限，支持显式 Doc ID 映射与自动建档。 |\n| **🔑 方案 1：Serverless 云端 KV 存储打点 (JSONBin.io) —— 【免建表即用】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待，抗浏览器缓存 | **轻量备用**：无需建表、开箱即用。适合轻量级原型（免费版限制 100KB/记录及月度调用限制）。 |\n| **☁️ 方案 2：GitHub Contents API 推送打点 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}`，将打点 Base64 编码后生成正式 Git Commit 提交入库 | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。 |\n| **💻 方案 3：本地 Node.js 磁盘直写打点 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n- **🔄 模式切换二次确认与一键数据迁移决策 (`showModeSwitchConfirmModal`)**:\n - 当在配置中心切换持久化引擎时，系统自动弹出模式迁移决策模态框：\n - 🚀 **【同步迁移当前数据到新方案 (推荐)】**：将当前已编辑的全部打点与版本（共 N 项规约）即刻同步写入到新的持久化数据源中（如向新 JSONBin 执行 `PUT` 或向 GitHub 提交 Commit），实现零断点无缝过渡；\n - 📥 **【不同步现有数据 (从新数据源拉取)】**：仅切换底层模式配置，不覆盖新目标存储，切换后直接从新数据源拉取最新规约或保持空白；\n - 🛡️ **【本地防丢安全备份】**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n### Module 2: 🔒 读写权限分离与创立人 Master Key 身份鉴权架构 (Auth & Permission Guard)\n\n为防止外部人员、评审方或访客恶意篡改线上 PRD 原型规约，系统实现了**严格的读写权限物理隔离**：\n\n```mermaid\ngraph TD\n UserAction[\"用户触发敏感操作
(📍 新增打点 / ✏️ 编辑规约 / 🗑️ 删除 / 📂 导入 / 🔀 新建版本 / ⚙️ 排序管理)\"] --> AuthCheck{\"当前会话是否已输入 Master Key 解锁？\"}\n \n AuthCheck -->|❌ 未解锁 (无痕/访客/全新打开)| PopAuthModal[\"【强制弹出 🔒 创立人身份鉴权弹窗】
展示当前项目模式与绑定的云端 Bin ID\"]\n PopAuthModal --> EnterKey[\"输入专属 API Key / Master Key\"]\n EnterKey --> VerifyCloud[\"向云端发起真实鉴权写入验证\"]\n VerifyCloud -->|✅ 验证通过| UnlockSession[\"当前会话解锁 (sessionStorage)
自动执行刚刚点击的操作并开放全量编辑工作台\"]\n \n AuthCheck -->|✅ 已解锁 (当前会话已授权)| Proceed[\"直接执行操作并写入持久化数据\"]\n```\n\n1. **👁️ 访客只读模式（默认免密）**：\n - 任何访客、设计、测试或研发人员打开页面，系统自动从云端或底包加载最新打点、富文本 Markdown、Mermaid 流程图与数据字典；\n - 访客可全功能查阅、检索、定位发光框、查看气泡、全屏浏览 PRD 大屏、导出 PDF，但无权修改；\n2. **🔒 创立人身份强鉴权拦截矩阵（100% 敏感操作拦截）**：\n - 无论在公网环境还是在本地无痕模式下打开，触发以下任一操作时系统**立即前置弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点**（`setPRDMode('pick')`）\n - ✏️ **打开规约编辑窗**（`openEditorForPin(id)`）\n - 🗑️ **删除需求点**（`deletePin(id)`）\n - 📂 **导入 PRD 文件**（`handlePRDImportFile()`）\n - 🔀 **新建版本**（`createPRDVersion(ver)`）\n - 🗑️ **删除版本**（`deletePRDVersion(ver)`）\n - ⚙️ **排序管理模式**（`toggleDrawerManageMode()`）\n3. **🔑 Master Key 云端真实验证与会话保活**：\n - 创立人输入 Key 后，系统向云端发起真实鉴权验证；\n - 验证通过后将授权状态注入当前浏览器的 `sessionStorage`，当前会话即刻解锁全量编辑工作台；\n - 关闭无痕窗口或标签页后会话自动重置，防止 Key 遗留泄露。\n4. **⚡ 绝对单一排他模式（Strict Single Mode Exclusivity）**：\n - 当项目锁定为 `jsonbin` 模式时，哪怕在 `localhost` 打开也绝对禁止调用本地 `/api/save-prd` 写入磁盘，100% 仅向云端 JSONBin 同步；\n - 彻底杜绝多端或本地产生的交叉覆盖与脏数据。\n\n---\n\n### Module 3: 📍 交互式十字准星打点与智能空间锚定 (Pinning & Spatial Anchoring Engine)\n- **十字准星拾取器 (`bindPickListeners`)**：\n - 点击「📍 新增打点」进入打标模式，鼠标指针变为 `crosshair`，底层元素高亮深琥珀色虚线框；\n - **打标时自动收起右侧抽屉**：进入十字准星打标模式时，右侧抽屉**自动完全收起**，折叠为边缘胶囊 `✕ 📍 点击组件打标 (点击或ESC退出)`，彻底杜绝侧边栏遮挡底层页面组件；\n - 拾取完成或按 ESC 后，自动无缝呼出需求规格编辑工作台；\n- **自愈式弹性 CSS 选择器算法 (`getElementSelector`)**：\n - 优先提取精准 `#id`、语义化类名、结构层级路径（`div:nth-of-type(n)`）与表单属性，保证动态重绘后打点依然 100% 准确对齐；\n- **连续帧率发光框追踪算法 (Continuous Frame-Rate Glow Box Tracking)**：\n - 采用 `requestAnimationFrame` 在平滑滚动的 50 帧（约 800ms）全周期内实时调用 `getBoundingClientRect()` 动态重绘红色发光脉冲框（`position: fixed`），彻底解决页面平滑滚动导致的坐标漂移；\n- **智能容器自动展开 (Smart Container Auto-Unfolding)**：\n - 当打点目标位于未激活的 Tab 面板、已关闭的弹窗或折叠面板中时，定位时自动触发父容器的激活事件（如 `click` / Tab 切换），确保目标元素完全可见后再平滑聚焦。\n\n---\n\n### Module 4: ✍️ Vditor IR 即时渲染与多级缩进工作台 (Vditor IR Editor Workbench)\n- **独立自包含原生 Toast 浮动反馈系统 (`#prd-global-toast-container`)**：\n - 彻底解耦外部环境，内建原生浮动 Toast UI 容器（`z-index: 10000099`），不依赖任何第三方 UI 库或 `window.UI`；\n - 在保存、删除、模式切换、鉴权拦截等关键操作节点提供翡翠绿/珊瑚红/深空灰渐变的高可见度即时反馈；\n- **三方组件集成架构 (Vditor Instant Rendering Engine)**：\n - **双通道与 SPA 绝对路径加载机制 (`ensureVditorLoaded`)**：\n - 采用绝对根路径与 CDN 双通道加载，杜绝 React / Vue 深层 SPA 嵌套路由下相对路径 404（HTML 污染）导致 CSS 失效；\n - **Tailwind CSS Preflight 样式强隔离与重置修复**：\n - 强制对 `#prd-vditor-container` 实施严格样式沙箱隔离，重置并锁定工具栏 SVG 图标为标准的 `14px × 14px`，彻底杜绝 Tailwind CSS 全局 `svg { display:block; width:100% }` 造成的工具栏图标撕裂与字母巨大化（H/B/T 字母变形）问题；\n - **IR (Instant Rendering) 即时渲染模式**：\n - Typora 级的流式文档编写手感，输入 `- 列表` 或 `### 标题` 即刻呈现高保真排版；\n- **⌨️ 完整支持 Tab / Shift+Tab 多级层级缩进**：\n - **多级嵌套列表**：在无序列表、有序列表或任务清单中按 **`Tab`** 即可瞬间向右缩进生成下一层级（如 `1 -> 1.1 -> 1.1.1` 或 `• -> ◦ -> ▪`）；\n - **反向缩进 / 升级层级**：按 **`Shift + Tab`** 或行首 `Backspace` 即可瞬间回退层级；\n- **📊 交互式可视化表格直编**：\n - 彻底告别 Markdown 竖线管道符 (`| col |`)，表格直接渲染为可视 HTML 矩阵；\n - 支持鼠标点击任意单元格直接打字输入，按 `Enter/Tab` 顺畅换行换格；\n - 原生工具栏一键插入表格与进行行列扩展；\n- **🔄 纯白底色 Mermaid 矢量图表即时渲染**：\n - 支持即时渲染 Mermaid 状态图、时序图、流程图，纯白背景卡片呈现，杜绝暗色杂乱；\n- **💡 业务规约三大核心预置模板 (3 Core Standard Templates)**：\n 1. **📋 业务规则模版**：触发条件、前置校验、流转逻辑（含多级缩进）、异常分支处理；\n 2. **🔄 状态机流程图**：标准 Mermaid `graph TB` 状态机流转矢量图；\n 3. **📊 字段数据字典表**：字段名、字段类型、是否必填、枚举值/格式、业务口径与默认值表格；\n- **单一入口草稿暂存与最小化机制 (`.prd-editor-mini-dock`)**：\n - **右上角极简**：仅保留右上角关闭按钮 `✕`，彻底去除重复按钮；\n - **底部单一看页面入口**：底部操作栏保留 **「👀 暂存并看页面」** 按钮；\n - **无损暂存与一键恢复**：点击后草稿数据实时自 Vditor 实例读取并无损暂存，弹窗折叠为右下角常驻胶囊（`✏️ 编辑中: 需求名称 · 草稿已暂存`），点击 **「恢复编辑」** 即可无损还原全部内容。\n\n---\n\n### Module 5: 🗂️ 三态抽屉与左边缘双按钮控制体系 (3-State Drawer & Dual Inward Handles)\n- **左边缘双按钮控制把手组 (朝内指向抽屉，颜色与功能清晰区隔)**：\n - **上方按钮 (全收起)**：深色科技质感（`#0f172a`）+ 朝内向右箭头 `›`，点击完全收起抽屉；\n - **下方按钮 (半收起)**：深铁锈红质感（`#8C4A28`）+ 朝内紧凑标号条图标 `⇥`，点击收窄为 56px 纯数字标号竖条；\n - **收起状态极简呈现**：当抽屉完全收起时，页面右侧中间无任何多余漂浮物，仅保留右上角 `📌 需求打点 (n)` 胶囊把手；\n- **三态无缝切换 (`全展开 400px` ⇄ `半收起标号条 56px` ⇄ `完全收起 0px`)**：\n - **全展开 (400px)**：展示完整需求卡片列表、多版本下拉框、完全模糊搜索栏；\n - **半收起紧凑标号竖条 (56px Mini Rail)**：抽屉收窄为右侧极窄的纯标号竖条 `[①][②][③][④]...`，完全释放底层 95% 页面画布；\n - 点击标号条中任意序号：页面平滑滚动并闪烁定位发光框，且**在目标组件旁精准弹出打点详情气泡 (`Inspect Popover`)**，无缝查看需求；\n - 鼠标悬停标号展示需求标题 Tooltip；\n - **完全收起**：折叠至右侧边缘胶囊 `📌 需求打点 (n)`；\n- **100% 绝对统一卡片高度 (Strict 136px Unified Height)**：\n - 标题单行截断带省略号（`text-overflow: ellipsis`）；\n - 简介使用纯文本摘要提取算法（过滤代码块/表格/标记），锁定标准 2 行（36px）展示，杜绝高度塌陷；\n - 所有卡片高度**严格统一为 136px**，列表排版整齐如一；\n- **纯标题完全模糊搜索与检索系统 (Fuzzy Title Search)**：\n - 支持中英文子串包含、空格多关键词分词（如 `订单 履约`）、以及字符流顺序模糊检索，配有一键清空按钮 `✕`。\n\n---\n\n### Module 6: 🔒 排序管理安全锁与依次顺延瞬移体系 (Sequential Cascade Reordering)\n- **日常安全浏览模式（默认）**：\n - 卡片隐藏排序/删除按钮，禁用拖拽，彻底防止日常查阅和定位误触；\n- **排序与删除管理模式（点击 `⚙️ 排序管理` 开启，需创立人鉴权）**：\n - 抽屉浮现提示条与 `✓ 完成退出` 按钮；\n - **智能连续排序与依次瞬移顺延**：\n - `🔝 置顶`：直接将目标项瞬移至第 1 项，后续所有项目**自动依次向下顺延 (1 -> 2 -> 3...)**；\n - `🔢 移至`：输入目标序号，目标项精准插入，其余项目依次顺延；\n - `▲` / `▼`：单步上移/下移；\n - `⠿`：鼠标按住拖拽排序；\n - **列表滚动高度锁定与平滑高亮**：调整排序后列表滚动位置毫秒级锁定不跳动，瞬移到位的新卡片带有呼吸发光边框，页面大头针数字同步更新。\n\n---\n\n### Module 7: 🏷️ 严格多版本物理隔离与导入冲突控制 (Multi-Version & Import Resolver)\n- **版本数据模型与向后兼容**：\n - 统一由 `versionRegistry` 全局维护：\n ```javascript\n window.PRD_VERSION_REGISTRY = {\n \"activeVersion\": \"v1.0.0\",\n \"versions\": {\n \"v1.0.0\": [ /* pins */ ],\n \"v1.1.0\": [ /* pins */ ]\n }\n };\n ```\n- **严格版本物理隔离 (Strict Version Isolation & Zero Cross-Contamination)**：\n - 页面大头针徽标、右侧抽屉列表、打点详情气泡、以及全文 PRD 文档大屏**仅展示当前所选激活版本的数据**，互相版本的打点**完全物理隔离、互不可见**；\n - **新建版本一律为全新空白版本 (Default Clean Blank Slate)**：\n - 点击「➕」或「➕ 新建空白版本...」时，直接创建一个全新的空打点版本（打点数：0），方便 PM 从零开始标注下一迭代；\n - 若需要派生副本，可选择「📋 复制当前版本副本」；\n- **上传 JS 文件与同版本智能冲突处理 (Conflict Modal)**：\n - 用户上传 `.js` / `.json` 文件时弹出冲突模态框：\n - 🔴 **【覆盖现有版本】**：清空当前版本旧打点，完全替换为上传内容；\n - 🟢 **【追加合并】**：保留旧打点，将上传打点追加至末尾并重新递增编号；\n - 🔵 **【另存为新版本】**：自动命名为 `[版本]_imported`。\n\n---\n\n### Module 8: 📑 全景 PRD 文档大屏与交付导出 (PRD Document Screen & Export)\n- **抽屉常驻入口**：右侧抽屉底部常驻 `📑 查看完整PRD` 按钮；\n- **独立新网页打开 (`↗️ 在新网页打开`)**：\n - 在独立新标签页中打开纯净 PRD 大屏文档，带固定 TOC 目录大纲；\n - 适配打印排版，按 `Ctrl+P / Cmd+P` 一键导出交付级 PDF；\n- **多格式一键导出**：支持 `📥 导出 Markdown`、`💾 导出 JS 数据`、`🖨️ 打印 / 导出 PDF`。\n\n---\n\n### Module 9: ⚛️ Vue & React 现代框架 SPA 兼容与自适应引擎 (Vue & React Framework Adaptation Engine)\n\n针对现代前端 SPA 单页应用与组件化工程，引擎内建了框架自适应技术：\n\n1. **🌐 SPA 客户端路由自动劫持 (`pushState` / `popstate`)**：\n - 自动代理拦截全局 `history.pushState` 与 `history.replaceState`，并监听 `popstate` 与 Hash 变更；\n - 当 Vue Router / React Router / Next.js 执行无刷新路由跳转时，系统毫秒级识别当前页面路由（如 `/mall/detail` -> `mall_detail`），自动热重绘对应路由的打点列表与大头针。\n2. **🔄 虚拟 DOM 动态挂载自愈 (Virtual DOM Dynamic Re-anchoring)**：\n - 结合全局 `MutationObserver` 监听 DOM 树的动态增删；\n - 当 Vue 的 `v-if` 或 React 的条件渲染组件（如弹窗、抽屉、异步表格）动态插入页面时，引擎在 50~100ms 内自动重新计算坐标并贴附大头针。\n3. **🧹 Scoped CSS 与哈希类名清洗过滤 (Scoped CSS & Hash Filtration)**：\n - 自动识别并过滤 Vue 的 `data-v-xxxx` 以及 React CSS-in-JS (Emotion / styled-components) 生成的动态随机哈希类名（如 `.css-178fa9`）；\n - 优先提取稳定的语义结构路径（`nth-of-type`）、组件 ID、表单名称、或业务自定义属性（`data-prd=\"key\"`），保证打包重构后打点永不漂移。\n4. **🛡️ HTTP Header ISO-8859-1 编码清洗与云端校验**：\n - 自动对 SPA 中文路由路径（如 `/预警信息/押品预警信息`）进行 `encodeURIComponent` 清洗，杜绝浏览器原生 `fetch` 因中文字符导致的 `non ISO-8859-1 code point` 校验阻断，确保云端 KV 瞬时秒级同步。\n\n---\n\n## 🛠️ 项目工程结构与文件规范\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A (或 Vue / React 路由页面)\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本 (自动拉起静态服务与持久化接口)\n└── assets/\n ├── vendor/ # 第三方独立组件库\n │ └── vditor/\n │ ├── index.min.js # Vditor 核心引擎 (本地离线支持)\n │ └── index.css # Vditor 核心样式\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (跨框架通用: HTML / Vue / React)\n ├── prd-data-admin.js# admin.html 专属数据底包\n ├── prd-data-mall.js # mall.html 专属数据底包\n ├── prd-data-merchant.js\n ├── prd-data-h5.js\n └── prd-data-merchant-h5.js\n```\n\nFile v1.3.1:README.md\n\n# 📌 PM Prototype PRD Pinning & Multi-Version Specification Engine\n\n
\n\n**The Ultimate Interactive PRD Pinning, Vditor IR Markdown Editor & Tri-Engine Persistence System for HTML Prototypes.**\n\n[![Version](https://img.shields.io/badge/version-1.2.0-blue.svg)](https://github.com/barry0-0/pm-proto-prd-pin/releases/tag/1.2.0)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![i18n](https://img.shields.io/badge/i18n-en%20%7C%20zh--CN%20%7C%20ja%20%7C%20ko-brightgreen.svg)](#-internationalization-i18n)\n[![Zero-Dependency](https://img.shields.io/badge/dependencies-zero--native-orange.svg)](#-quick-start)\n\n[English](#-english-documentation) • [简体中文](#-简体中文文档) • [日本語](#-日本語ドキュメント) • [한국어](#-한국어-문서)\n\n
\n\n---\n\n## 📸 Interface Screenshots\n\n| ✍️ Vditor IR Live Editor & Visual Tables | 🗂️ 3-State Drawer (Full / Semi Rail / Hidden) |\n| :---: | :---: |\n| ![Visual Table Editor](assets/images/screenshot_visual_table_editor.png) | ![Drawer Overview](assets/images/screenshot_drawer_overview.png) |\n| **🔄 Pure-White Mermaid Statecharts** | **📑 Full Page Deliverable PRD Screen** |\n| ![Mermaid Render](assets/images/screenshot_mermaid_render.png) | ![Full PRD Document](assets/images/screenshot_full_prd_document.png) |\n\n---\n\n# 🌐 English Documentation\n\n## ⚛️ Cross-Framework Compatibility (HTML / Vue / React) & Autonomous Detection\n\n- **Autonomous Tech-Stack Inspection**: Automatically analyzes `package.json`, Vite/Webpack configs, or HTML structure to detect if the project is **Pure HTML**, **Vue.js (2/3/Nuxt)**, or **React (18/Next.js)**.\n- **Interactive Clarification Fallback**: If the framework cannot be determined automatically, the agent will prompt the user to confirm the framework and target pages/modules.\n- **SPA Client-Side Route Sync**: Intercepts `history.pushState` / `popstate` to automatically adapt pins across SPA route transitions without page refreshes.\n- **Virtual DOM Dynamic Re-anchoring**: Automatically re-attaches pins when conditional components (`v-if` / React modals) enter or exit the DOM.\n- **Scoped CSS & Hash Filtration**: Automatically filters Vue `data-v-xxxx` and React CSS-in-JS hashes to guarantee robust long-term selector anchoring.\n- **Tailwind CSS Reset Isolation & SPA Resource Hydration**: Full CSS isolation sandbox protecting Vditor toolbar icons from Tailwind Preflight distortion, with ISO-8859-1 safe header sanitization for non-ASCII SPA routes.\n\n---\n\n## 🌟 Tri-Engine Persistence System & Comparison\n\n| Persistence Mode | Underlying Architecture | Read/Write Latency | Use Cases & Key Characteristics |\n| :--- | :--- | :--- | :--- |\n| **🔑 Mode 1: Serverless Cloud KV Storage (JSONBin.io / Custom KV) —— [Recommended / Fastest]** | RESTful KV API (`GET /latest` Public Read, `PUT` Private Write with Master Key) | **Instant (200~300ms)**
Zero build wait, instant cross-browser hydration | **Best for Online Staging**: Zero-server deployment (GitHub Pages, Vercel). Instant synchronization across devices without waiting for Git pipelines. |\n| **☁️ Mode 2: GitHub Contents API Git Commit** | GitHub REST API (`PUT /contents/{filePath}` Base64 encoded Git Commits) | **Slower (1~3s)**
Git tree hashing, commit chaining, and Pages rebuild delay | **Best for Strict Audit Trails**: Automatically generates formal Git commits. **Trade-off: Slower push latency and delayed build updates on GitHub Pages**. |\n| **💻 Mode 3: Local Node.js Disk Storage** | Native Node.js server (`POST /api/save-prd` writing directly to disk via fs) | **Sub-millisecond (10~50ms)**
Direct local filesystem I/O | **Best for Offline Development**: Pure offline local development with zero external network dependency. |\n\n---\n\n## 🔄 1-Click Seamless Data Migration Across Modes\n\nWhen switching between persistence engines (e.g. from Local Node to Cloud JSONBin or GitHub):\n- **🚀 Migrate & Sync Current Data (Recommended)**: Automatically writes all in-memory pins and versions into the newly selected backend, ensuring zero-break transition.\n- **📥 Clean Switch (Pull from New Source)**: Switches configuration only and pulls the latest data directly from the new target storage.\n- **💾 Local Backup Safety**: Includes a 1-click `💾 Download Local Backup (.json)` button for absolute data safety.\n\n---\n\n## 🔒 Creator Authentication & Read-Write Segregation\n\nTo prevent unauthorized tampering on public or hosted prototypes:\n- **👁️ Visitor Read-Only Protection**: Anyone opening the prototype gets instant read access to all pins, rich Markdown specs, Mermaid diagrams, and PDF exports without any login friction.\n- **🔒 Mandatory Creator Auth (100% Interception Matrix)**:\n - 📍 Adding New Pins (`setPRDMode('pick')`)\n - ✏️ Editing Specification Clauses (`openEditorForPin(id)`)\n - 🗑️ Deleting Pins (`deletePin(id)`)\n - 📂 Importing PRD Data (`handlePRDImportFile()`)\n - 🔀 Creating Versions (`createPRDVersion(ver)`)\n - 🗑️ Deleting Versions (`deletePRDVersion(ver)`)\n - ⚙️ Reordering Pins (`toggleDrawerManageMode()`)\n- **Incognito & Session Isolation**: Unauthenticated sessions (incognito mode, fresh browsers) always start in read-only mode and require entering the Master Key to unlock.\n\n---\n\n## 🌟 Key Capabilities & Features\n\n| Capability | Technical Implementation | PM & Engineering Benefit |\n| :--- | :--- | :--- |\n| **✍️ Vditor IR Markdown Workbench** | Integrated Vditor (Instant Rendering mode) with relative vendor loading + CDN auto-fallback | Typora-grade live authoring experience; instantaneous rendering for all components |\n| **⌨️ Multi-Level Tab Indentation** | Native `Tab` and `Shift+Tab` event handlers for unordered/ordered/task lists | Effortlessly organize nested specifications (`1 -> 1.1 -> 1.1.1`) |\n| **📊 Interactive Visual Table Editor** | 2D HTML cell matrix, direct cell typing, `Enter/Tab` navigation, 1-click row/col ops | Completely eliminates markdown pipe `\\| col \\|` syntax friction; feels like Excel/Word |\n| **🔄 Pure-White Mermaid Vector Engine** | Dedicated white container with dynamic bottom viewBox compensation (+28px) | Zero clipped labels or distorted arrows on Statecharts, Sequences, and Flowcharts |\n| **💡 3 Core Business Templates** | Fast-insert buttons for Business Rules, Statechart Diagrams, and Data Dictionary Tables | Rapid authoring of standardized specification clauses |\n| **👀 Single-Entry Stash & Minimize** | Clean close `✕` in header + `👀 Stash & View Page` in bottom bar (`.prd-editor-mini-dock` pill) | Review underlying prototype elements without losing unsaved drafts; 1-click restore |\n| **🌐 Native 4-Language i18n** | Full 115-key dynamic dictionary covering `en`, `zh-CN`, `ja`, `ko`; runtime hot-switching | Seamless multi-lingual team collaboration across global product workflows |\n| **🗂️ 3-State Drawer & Dual Handles** | Full (400px), Semi (56px Mini Rail), Hidden (0px); dual inward-facing edge handles | Frees up 95% of prototype canvas while keeping all pins immediately accessible |\n| **🔒 Reorder Safety Lock & Cascade** | Normal browsing locks order; manage mode unlocks `🔝 Top`, `🔢 Move To`, sequential cascade | Accidental reordering prevention; seamless 1 -> 2 -> 3 cascading when reordering |\n| **🏷️ Multi-Version Physical Isolation** | Isolated `versionRegistry`; new versions start clean (0 pins); upload conflict resolver | No pin cross-contamination across sprint iterations |\n| **📑 Full PRD Document & PDF Export** | Dedicated doc modal + new tab view with TOC outline and print styling | 1-click export to deliverable PDF or Markdown specifications |\n\n---\n\n# 🇨🇳 简体中文文档\n\n## ⚛️ 跨框架兼容架构 (HTML / Vue / React) 与自主工程感知\n\n- **🚫 SPA 工程严禁生成冗余 HTML (Zero-HTML In React/Vue)**：在 React/Vue 现代工程中，绝对禁止生成任何独立的 `.html` 页面，仅在全局入口（`main.tsx` / `main.js`）以一行 `import` 挂载，零 HTML 污染；\n- **工程架构自主嗅探 (Autonomous Inspection)**：自动检查 `package.json`、Vite/Webpack 插件及文件类型，智能识别当前工程是 **HTML 静态原型**、**Vue.js (Vue 2/3/Nuxt)** 还是 **React (React 18/Next.js)**；\n- **未能识别时的前置提问协议**：若无法推断框架，Agent 自动前置发起询问：确认所用技术栈及 PRD 打点需应用的页面/模块；\n- **SPA 客户端路由热感知**：自动代理全局 `history.pushState` / `popstate`，Vue Router / React Router 无刷新切页时自动切换打点数据；\n- **虚拟 DOM 动态挂载自愈**：结合 `MutationObserver`，在 `v-if` / 弹窗动态挂载时毫秒级自动定位并贴附大头针；\n- **Scoped CSS 与随机哈希清洗**：智能剔除 `data-v-xxxx` 与 CSS-in-JS 哈希类名，优先提取语义化结构路径；\n- **Tailwind CSS 样式强隔离与深层 SPA 路由安全**：构建 Vditor 专属样式沙箱，根除 Tailwind Preflight 造成的图标撕裂，并自动对中文 SPA 路由执行 ISO-8859-1 安全编码。\n\n---\n\n## 🌟 三模态持久化体系与云端强确认后置缓存原则\n\n- **云端强确认后置缓存原则 (Post-Cloud Confirmation)**：严禁前置假成功写入，必须经由真实 HTTP 200 强校验后方才同步更新本地离线镜像；若云端同步失败则立即触发原子回滚并弹窗报错；\n- **自包含原生 Toast 反馈引擎**：内建独立的 `#prd-global-toast-container`，杜绝依赖任何外部宿主 UI 库；\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥。\n\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥；\n- **创立人权限写入与实时同步**：创立人输入 Master Key 即可直接向云端 Bin 执行秒级落盘写入。\n\n---\n\n## 🌟 三模态持久化体系与方案实现对比\n\n针对产品经理在不同阶段（本地制作、团队评审、线上发布）的诉求，系统提供了三套严格排他的持久化架构：\n\n```mermaid\ngraph TD\n SaveAction[\"触发 保存/新增/编辑/排序/导入\"] --> ModeCheck{\"当前锁定的持久化模式\"}\n \n ModeCheck -->|🔑 方案 1: Serverless 云端 KV 存储| ModeKV[\"【JSONBin.io / 自建 KV API】
⚡ 200~300ms 秒级直写
无需服务器，免编译等待，跨端即时同步\"]\n ModeCheck -->|☁️ 方案 2: GitHub Contents API| ModeGH[\"【GitHub REST API Git Commit】
⏳ 1~3秒 提交较慢
自动生成 Commit 节点，代码库归档，审计追踪\"]\n ModeCheck -->|💻 方案 3: 本地 Node.js 模式| ModeLocal[\"【本地 Node.js /api/save-prd】
⚡ 10ms 磁盘直写
纯本地脱机运行，修改本地物理 js 文件\"]\n```\n\n### 1. 🔑 方案 1：Serverless 云端 KV 存储打点（JSONBin.io / 自定义 KV）—— 【强烈推荐 / 最快捷】\n- **核心实现原理**：\n - 采用 RESTful KV 读写分离架构：\n - **公开只读**：`GET https://api.jsonbin.io/v3/b/{binId}/latest?_t=${Date.now()}`，访客免密秒级拉取最新规约（添加抗缓存时间戳）；\n - **私密写入**：`PUT https://api.jsonbin.io/v3/b/{binId}`，Header 携带 `X-Master-Key` 鉴权更新；\n- **核心优势与快捷性**：\n - **秒级极速响应 (200~300ms)**：修改后瞬间保存生效，跨电脑、跨浏览器、移动端打开即时同步；\n - **100% 零服务器运维**：无需购买任何云主机或配置数据库，开箱即用；\n - **适用场景**：GitHub Pages 静态托管、在线演示评审、跨设备协同标注。\n\n### 2. ☁️ 方案 2：GitHub Contents API 推送打点（Git Commit 模式）\n- **核心实现原理**：\n - 使用 GitHub Fine-Grained Personal Access Token (PAT)；\n - 调用 `PUT https://api.github.com/repos/{owner}/{repo}/contents/{filePath}`，将打点数据以 Base64 编码自动生成正式 Git Commit 提交入库；\n- **特性与局限性说明 (Trade-offs)**：\n - **版本审计追踪优势**：每一次修改在 GitHub 仓库中均有完整的提交者信息与版本 Diff 历史，便于合规审计；\n - **推送相对较慢 (1~3 秒)**：由于涉及 GitHub API 的 Tree 递归计算与 Commit 链打包，写入耗时相对较长；且若依赖 GitHub Pages 构建重新部署，公网生效存在几分钟流水线延迟。\n\n### 3. 💻 方案 3：本地 Node.js 磁盘直写打点（Local Node 模式）\n- **核心实现原理**：\n - 本地终端运行 `node server.js`；\n - 前端通过 `POST /api/save-prd` 调用 Node 原生 fs 模块直接改写磁盘上的物理 `prd-data-*.js` 文件；\n- **适用场景**：企业内网断网开发、保密原型制作、离线纯本地开发。\n\n---\n\n## 🔄 模式切换与一键无缝数据迁移决策\n\n当产品经理在配置中心切换持久化引擎时（如从本地磁盘模式切至云端 KV 模式）：\n- **🚀 同步迁移当前数据到新方案（推荐）**：自动将当前已编辑的全部打点与多版本（共 N 项规约）即刻整体写入到新的持久化数据源中，实现零断点无缝过渡；\n- **📥 不同步现有数据（从新数据源拉取）**：仅切换底层引擎配置，不覆盖新数据源原有内容，稍后直接从新数据源加载最新或作为独立环境；\n- **🛡️ 一键本地备份安全保障**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n## 🔒 读写权限分离与创立人身份强鉴权\n\n为了防止原型发布到线上后被外部人员随意篡改，系统内建了**企业级权限隔离机制**：\n\n1. **👁️ 访客只读保护（零干扰免密浏览）**：\n - 外部访客、设计或研发人员打开页面，直接只读加载全部打点、Markdown 规约、Mermaid 流程图与数据字典，无任何弹窗打扰；\n2. **🔒 敏感操作 100% 强拦截矩阵**：\n - 在未通过 Master Key 验证的会话中，触发以下任一操作系统**立即前置阻断并弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点** (`setPRDMode('pick')`)\n - ✏️ **编辑需求规约** (`openEditorForPin(id)`)\n - 🗑️ **删除需求点** (`deletePin(id)`)\n - 📂 **导入 PRD 数据** (`handlePRDImportFile()`)\n - 🔀 **新建版本** (`createPRDVersion(ver)`)\n - 🗑️ **删除版本** (`deletePRDVersion(ver)`)\n - ⚙️ **排序管理模式** (`toggleDrawerManageMode()`)\n3. **🔑 无痕模式与会话安全隔离**：\n - 取消了任何本地协议的自动免密特权；\n - 在无痕模式或新浏览器中打开，必须输入专属 Master Key 向云端完成鉴权；\n - 验证通过后写入当前浏览器的 `sessionStorage` 解锁全量工作台，关闭窗口后自动失效，杜绝密钥遗留。\n\n---\n\n## 🛠️ 项目工程结构与集成\n\n```html\n\n\n```\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本\n└── assets/\n ├── vendor/\n │ └── vditor/ # Vditor 离线资源\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (V6 Vditor/Tab缩进/三态抽屉/三模态持久化/多语言)\n ├── prd-data-admin.js\n ├── prd-data-mall.js\n └── prd-data-merchant.js\n```\n\n---\n\n# 🇯🇵 日本語ドキュメント\n\n## 🌟 3 つの永続化モードとアーキテクチャ比較\n\n1. **🔑 モード 1: Serverless クラウド KV ストレージ (JSONBin.io) —— 【推奨・最速】**：\n - RESTful API による高速リアルタイム同期（200〜300ms）。Git のプッシュ待ちやビルド待ちなし。クロスデバイス共同作業に最適。\n2. **☁️ モード 2: GitHub Contents API プッシュモード (Git Commit)**：\n - GitHub REST API を介して正式な Git Commit を自動作成。監査ログに優れるが、**Git のプッシュ処理と Pages 再ビルドのため反映に時間がかかる**特性があります。\n3. **💻 モード 3: ローカル Node.js ディスク直接保存**：\n - ローカルの `node server.js` を介してローカルディスクの `.js` ファイルを直接更新。オフライン開発に最適。\n\n## 🔒 閲覧・編集の権限分離とマスターキー認証\n- **閲覧者モード（デフォルト）**：認証なしでピン、Markdown 仕様書、Mermaid 図、PDF エクスポートを自由に閲覧可能。\n- **作成者認証ガード**：ピン追加、仕様編集、削除、インポート、バージョン作成時にマスターキー認証モーダルを強制表示。\n\n---\n\n# 🇰🇷 한국어 문서\n\n## 🌟 3가지 영속성 모드 및 아키텍처 비교\n\n1. **🔑 모드 1: Serverless 클라우드 KV 스토리지 (JSONBin.io) —— 【강력 추천 / 초고속】**：\n - RESTful API 기반 초고속 실시간 동기화 (200~300ms). Git 푸시 대기 시간 없음. 서버리스 정적 배포 환경에 최적.\n2. **☁️ 모드 2: GitHub Contents API 푸시 모드 (Git Commit)**：\n - GitHub REST API를 통해 정식 Git Commit을 자동 생성. 이력 추적에 유리하지만 **푸시 처리 및 Pages 재빌드로 인해 상대적으로 느림**.\n3. **💻 모드 3: 로컬 Node.js 디스크 직접 저장**：\n - `node server.js`를 통해 로컬 디스크의 `.js` 파일을 직접 수정. 오프라인 개발에 최적.\n\n## 🔒 읽기/쓰기 권한 분리 및 마스터 키 인증\n- **방문자 읽기 전용 (기본)**：인증 없이 핀, 마크다운 명세, Mermaid 다이어그램을 자유롭게 열람.\n- **작성자 인증 가드**：핀 추가, 명세 편집, 삭제, 가져오기, 버전 생성 시 마스터 키 인증 모달 강제 팝업.\n\n---\n\n## 📄 License\nMIT License. Created for Product Managers & UI/UX Engineers.\n\nFile v1.3.1:_meta.json\n\n{\n \"ownerId\": \"kn7b10aee3mw0zzb4d2xy1mn7h820ysv\",\n \"slug\": \"pm-proto-prd-pin\",\n \"version\": \"1.3.1\",\n \"publishedAt\": 1788138473829\n}\n\nFile v1.3.1:skill-card.md\n\n## Description:\n\nPm Proto Prd Pin helps agents add an interactive PRD pinning and multi-version specification layer to HTML, Vue, and React prototypes.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[barry0-0](https://clawhub.ai/user/barry0-0)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers, designers, and frontend engineers use this skill to instrument prototypes with in-page PRD pins, rich Markdown specifications, versioned requirements, and exportable PRD views across HTML, Vue, or React projects.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Hardcoded cloud storage credentials or destinations can expose prototype PRD data or route writes to an unintended backend.\n\nMitigation: Remove bundled Supabase and JSONBin values, make cloud sync opt-in, and require users to provide a backend they control.\n\nRisk: Browser-accessible PATs or master keys can leak repository or storage write access.\n\nMitigation: Avoid storing write credentials in localStorage, prefer session-scoped or backend-brokered credentials, and use least-privilege short-lived tokens.\n\nRisk: The local file-write server can modify files if exposed beyond a trusted local development session.\n\nMitigation: Bind the server to loopback, add authentication and origin checks, and run it only in trusted workspaces.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin)\n- [JSONBin.io](https://jsonbin.io)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with code snippets, shell commands, and generated configuration or injected files.]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May copy assets, inject JavaScript references, configure persistence modes, and guide local or cloud synchronization setup.]\n\n## Skill Version(s):\n\n1.3.1 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.3.0: 10 files, 181087 bytes\n\nFiles: assets/prd-pin-tool.js (288627b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (18664b), scripts/inject.py (4133b), skill-card.md (2117b), SKILL.md (27749b), _meta.json (135b)\n\nFile v1.3.0:SKILL.md\n\n---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、四模态持久化体系 (⚡Supabase Serverless 数据库直读直写 / 🔑JSONBin.io 云端KV存储 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、右侧常驻分体式悬浮胶囊 (独立👁小眼睛打点显隐开关 / 默认纯净视图免干扰)、高雅炭灰与极简白商业设计系统 (Elegant Slate & Crisp White 12px 大圆角与宽间距呼吸感)、读写分离与创立人 Master Key 身份鉴权强拦截矩阵 (无痕与访客只读保护)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V6.2 (v1.3.0 Elegant Slate & Supabase Engine))\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Serverless 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**三模态持久化与权限强鉴权**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 `dependencies.react`、`next.config.*`、`vite.config.*`（含 `@vitejs/plugin-react`）、或 `App.tsx`/`index.jsx`；\n - **HTML 静态原型**：检查根目录下是否存在独立 `.html` 原型文件（如 `admin.html`、`index.html`）且无前端构建依赖；\n2. **Step 2: 无法确定框架时的强制前置确认 (Interactive Clarification Fallback)**：\n - **若项目中无 `package.json` 或无法明确推断框架体系，Agent 必须向用户发起明确提问**：\n > 💬 *“请问当前项目采用的是什么前端框架？（HTML 静态原型 / Vue 2/3 / React / Next.js / Nuxt）以及 PRD 打点标注工具需要应用在哪些页面或模块？（全局所有路由页面 / 仅特定业务端页面）”*\n3. **Step 3: 各框架精准接入指导 (严禁跨形态误生成文件)**：\n - **React 工程 (Vite / Next.js / CRA / React 18)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 资源放置：将 `prd-pin-tool.js` 与 `vendor/vditor` 置于 `public/assets/js/` 和 `public/assets/vendor/`；\n - 入口引入：在 `src/main.tsx` 或 `src/App.tsx` 中写入：\n ```tsx\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - 零修改 `index.html`，零侵入原有业务组件。\n - **Vue 工程 (Vue 2 / Vue 3 / Vite / Nuxt)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 入口引入：在 `src/main.js` 或 `src/main.ts` 中写入：\n ```javascript\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - **纯静态 HTML 原型 (Vanilla Multi-Page HTML)**：\n - 仅在纯静态 HTML 仓库中，才在各 HTML 页面 `` 闭合前引入 ``。\n\n---\n\n### Module 1: 💾 四模态持久化体系 (含 Supabase 企业级数据库)、一键数据迁移与跨浏览器免密直读架构 (Tri-Engine Persistence & Zero-Config Cloud Sync)\n\n> 🌟 **云端强确认后置缓存核心原则 (Post-Cloud Confirmation Cache Principle)**： \n> 1. **严禁前置假保存**：严禁在云端请求返回前静默写入 `localStorage` 假装保存成功； \n> 2. **真实 HTTP 200 强校验**：必须在收到云端 Serverless KV 返回的 `HTTP 200 OK` 且携带合法 `record` / `metadata` 实体后，才允许将数据镜像写入 `localStorage` 作为客户端离线/秒开缓存； \n> 3. **失败原子回滚**：若云端网络超时或鉴权失败，系统立即阻断并自动回滚内存状态，弹出红色错误 Toast，杜绝本地与云端数据不一致； \n> 4. **跨浏览器/多端免密直读**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 固化绑定公开只读 Bin ID，任何同事、评审方在新电脑/新浏览器（含无痕模式）中打开，启动时自动从该 Bin ID 秒级拉取最新规约，实现真正的「全员零配置直读、创立人权限写入」。\n\n> 🌟 **跨浏览器/多端免密实时同步核心架构原理 (Cross-Browser Zero-Config Protocol)**： \n> 1. **创立人写入流程 (Creator Write Flow)**：创立人通过专属 Master Key 向指定的云端 Bin 发送 `PUT` 请求，成功后数据即时在 JSONBin 全球 CDN 上更新； \n> 2. **团队/访客免密直读流程 (Visitor Zero-Config Read Flow)**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 内置该项目或各页面的公开只读 Bin ID。**任何团队成员、评审方、或在任意新电脑、新浏览器（包括无痕模式）打开时，无需输入任何 Key 或进行任何配置，系统在页面启动时自动秒级拉取最新规约并热重绘**，实现真正的「一次配置、全员秒读、权限隔离、云端协同」！\n\n> 🌟 **核心战略价值 (Strategic Significance)**： \n> 彻底解决传统 HTML 原型与 SPA 页面在静态托管平台（GitHub Pages / 纯前端静态服务器 / 预览链接）上**「有展示、无后端、无法在线编辑、无法团队跨端协同」**的致命痛点。 \n> 同时提供了**「一键跨模式数据无缝迁移引擎」**：当产品经理在某一模式（如本地 Node 磁盘开发）制作完成打点后，切换至另一模式（如云端 JSONBin 或 GitHub Pages）时，系统自动弹出迁移决策弹窗，**支持一键将当前全量打点与多版本规约整体同步写入至新目标数据源**，实现零断点无缝过渡！\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **⚡ 方案 0：Supabase Serverless 数据库打点 (PostgREST API) —— 【强烈推荐 / 大容量首选】** | 基于 Supabase RESTful PostgREST 架构：
• 读：`GET /rest/v1/{table}?id=eq.{docId}` 带 `apikey`
• 写：`POST /rest/v1/{table}` 带 `Prefer: resolution=merge-duplicates` | **极速 (100~200ms)**
企业级直连，500MB 大容量与高并发，无单条记录容量限制 | **企业与高频首选**：大型复杂原型、多页面多版本规约、海量流程图。突破 JSONBin 100KB 单条限制与请求上限，支持显式 Doc ID 映射与自动建档。 |\n| **🔑 方案 1：Serverless 云端 KV 存储打点 (JSONBin.io) —— 【免建表即用】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待，抗浏览器缓存 | **轻量备用**：无需建表、开箱即用。适合轻量级原型（免费版限制 100KB/记录及月度调用限制）。 |\n| **☁️ 方案 2：GitHub Contents API 推送打点 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}`，将打点 Base64 编码后生成正式 Git Commit 提交入库 | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。 |\n| **💻 方案 3：本地 Node.js 磁盘直写打点 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n- **🔄 模式切换二次确认与一键数据迁移决策 (`showModeSwitchConfirmModal`)**:\n - 当在配置中心切换持久化引擎时，系统自动弹出模式迁移决策模态框：\n - 🚀 **【同步迁移当前数据到新方案 (推荐)】**：将当前已编辑的全部打点与版本（共 N 项规约）即刻同步写入到新的持久化数据源中（如向新 JSONBin 执行 `PUT` 或向 GitHub 提交 Commit），实现零断点无缝过渡；\n - 📥 **【不同步现有数据 (从新数据源拉取)】**：仅切换底层模式配置，不覆盖新目标存储，切换后直接从新数据源拉取最新规约或保持空白；\n - 🛡️ **【本地防丢安全备份】**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n### Module 2: 🔒 读写权限分离与创立人 Master Key 身份鉴权架构 (Auth & Permission Guard)\n\n为防止外部人员、评审方或访客恶意篡改线上 PRD 原型规约，系统实现了**严格的读写权限物理隔离**：\n\n```mermaid\ngraph TD\n UserAction[\"用户触发敏感操作
(📍 新增打点 / ✏️ 编辑规约 / 🗑️ 删除 / 📂 导入 / 🔀 新建版本 / ⚙️ 排序管理)\"] --> AuthCheck{\"当前会话是否已输入 Master Key 解锁？\"}\n \n AuthCheck -->|❌ 未解锁 (无痕/访客/全新打开)| PopAuthModal[\"【强制弹出 🔒 创立人身份鉴权弹窗】
展示当前项目模式与绑定的云端 Bin ID\"]\n PopAuthModal --> EnterKey[\"输入专属 API Key / Master Key\"]\n EnterKey --> VerifyCloud[\"向云端发起真实鉴权写入验证\"]\n VerifyCloud -->|✅ 验证通过| UnlockSession[\"当前会话解锁 (sessionStorage)
自动执行刚刚点击的操作并开放全量编辑工作台\"]\n \n AuthCheck -->|✅ 已解锁 (当前会话已授权)| Proceed[\"直接执行操作并写入持久化数据\"]\n```\n\n1. **👁️ 访客只读模式（默认免密）**：\n - 任何访客、设计、测试或研发人员打开页面，系统自动从云端或底包加载最新打点、富文本 Markdown、Mermaid 流程图与数据字典；\n - 访客可全功能查阅、检索、定位发光框、查看气泡、全屏浏览 PRD 大屏、导出 PDF，但无权修改；\n2. **🔒 创立人身份强鉴权拦截矩阵（100% 敏感操作拦截）**：\n - 无论在公网环境还是在本地无痕模式下打开，触发以下任一操作时系统**立即前置弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点**（`setPRDMode('pick')`）\n - ✏️ **打开规约编辑窗**（`openEditorForPin(id)`）\n - 🗑️ **删除需求点**（`deletePin(id)`）\n - 📂 **导入 PRD 文件**（`handlePRDImportFile()`）\n - 🔀 **新建版本**（`createPRDVersion(ver)`）\n - 🗑️ **删除版本**（`deletePRDVersion(ver)`）\n - ⚙️ **排序管理模式**（`toggleDrawerManageMode()`）\n3. **🔑 Master Key 云端真实验证与会话保活**：\n - 创立人输入 Key 后，系统向云端发起真实鉴权验证；\n - 验证通过后将授权状态注入当前浏览器的 `sessionStorage`，当前会话即刻解锁全量编辑工作台；\n - 关闭无痕窗口或标签页后会话自动重置，防止 Key 遗留泄露。\n4. **⚡ 绝对单一排他模式（Strict Single Mode Exclusivity）**：\n - 当项目锁定为 `jsonbin` 模式时，哪怕在 `localhost` 打开也绝对禁止调用本地 `/api/save-prd` 写入磁盘，100% 仅向云端 JSONBin 同步；\n - 彻底杜绝多端或本地产生的交叉覆盖与脏数据。\n\n---\n\n### Module 3: 📍 交互式十字准星打点与智能空间锚定 (Pinning & Spatial Anchoring Engine)\n- **十字准星拾取器 (`bindPickListeners`)**：\n - 点击「📍 新增打点」进入打标模式，鼠标指针变为 `crosshair`，底层元素高亮深琥珀色虚线框；\n - **打标时自动收起右侧抽屉**：进入十字准星打标模式时，右侧抽屉**自动完全收起**，折叠为边缘胶囊 `✕ 📍 点击组件打标 (点击或ESC退出)`，彻底杜绝侧边栏遮挡底层页面组件；\n - 拾取完成或按 ESC 后，自动无缝呼出需求规格编辑工作台；\n- **自愈式弹性 CSS 选择器算法 (`getElementSelector`)**：\n - 优先提取精准 `#id`、语义化类名、结构层级路径（`div:nth-of-type(n)`）与表单属性，保证动态重绘后打点依然 100% 准确对齐；\n- **连续帧率发光框追踪算法 (Continuous Frame-Rate Glow Box Tracking)**：\n - 采用 `requestAnimationFrame` 在平滑滚动的 50 帧（约 800ms）全周期内实时调用 `getBoundingClientRect()` 动态重绘红色发光脉冲框（`position: fixed`），彻底解决页面平滑滚动导致的坐标漂移；\n- **智能容器自动展开 (Smart Container Auto-Unfolding)**：\n - 当打点目标位于未激活的 Tab 面板、已关闭的弹窗或折叠面板中时，定位时自动触发父容器的激活事件（如 `click` / Tab 切换），确保目标元素完全可见后再平滑聚焦。\n\n---\n\n### Module 4: ✍️ Vditor IR 即时渲染与多级缩进工作台 (Vditor IR Editor Workbench)\n- **独立自包含原生 Toast 浮动反馈系统 (`#prd-global-toast-container`)**：\n - 彻底解耦外部环境，内建原生浮动 Toast UI 容器（`z-index: 10000099`），不依赖任何第三方 UI 库或 `window.UI`；\n - 在保存、删除、模式切换、鉴权拦截等关键操作节点提供翡翠绿/珊瑚红/深空灰渐变的高可见度即时反馈；\n- **三方组件集成架构 (Vditor Instant Rendering Engine)**：\n - **双通道与 SPA 绝对路径加载机制 (`ensureVditorLoaded`)**：\n - 采用绝对根路径与 CDN 双通道加载，杜绝 React / Vue 深层 SPA 嵌套路由下相对路径 404（HTML 污染）导致 CSS 失效；\n - **Tailwind CSS Preflight 样式强隔离与重置修复**：\n - 强制对 `#prd-vditor-container` 实施严格样式沙箱隔离，重置并锁定工具栏 SVG 图标为标准的 `14px × 14px`，彻底杜绝 Tailwind CSS 全局 `svg { display:block; width:100% }` 造成的工具栏图标撕裂与字母巨大化（H/B/T 字母变形）问题；\n - **IR (Instant Rendering) 即时渲染模式**：\n - Typora 级的流式文档编写手感，输入 `- 列表` 或 `### 标题` 即刻呈现高保真排版；\n- **⌨️ 完整支持 Tab / Shift+Tab 多级层级缩进**：\n - **多级嵌套列表**：在无序列表、有序列表或任务清单中按 **`Tab`** 即可瞬间向右缩进生成下一层级（如 `1 -> 1.1 -> 1.1.1` 或 `• -> ◦ -> ▪`）；\n - **反向缩进 / 升级层级**：按 **`Shift + Tab`** 或行首 `Backspace` 即可瞬间回退层级；\n- **📊 交互式可视化表格直编**：\n - 彻底告别 Markdown 竖线管道符 (`| col |`)，表格直接渲染为可视 HTML 矩阵；\n - 支持鼠标点击任意单元格直接打字输入，按 `Enter/Tab` 顺畅换行换格；\n - 原生工具栏一键插入表格与进行行列扩展；\n- **🔄 纯白底色 Mermaid 矢量图表即时渲染**：\n - 支持即时渲染 Mermaid 状态图、时序图、流程图，纯白背景卡片呈现，杜绝暗色杂乱；\n- **💡 业务规约三大核心预置模板 (3 Core Standard Templates)**：\n 1. **📋 业务规则模版**：触发条件、前置校验、流转逻辑（含多级缩进）、异常分支处理；\n 2. **🔄 状态机流程图**：标准 Mermaid `graph TB` 状态机流转矢量图；\n 3. **📊 字段数据字典表**：字段名、字段类型、是否必填、枚举值/格式、业务口径与默认值表格；\n- **单一入口草稿暂存与最小化机制 (`.prd-editor-mini-dock`)**：\n - **右上角极简**：仅保留右上角关闭按钮 `✕`，彻底去除重复按钮；\n - **底部单一看页面入口**：底部操作栏保留 **「👀 暂存并看页面」** 按钮；\n - **无损暂存与一键恢复**：点击后草稿数据实时自 Vditor 实例读取并无损暂存，弹窗折叠为右下角常驻胶囊（`✏️ 编辑中: 需求名称 · 草稿已暂存`），点击 **「恢复编辑」** 即可无损还原全部内容。\n\n---\n\n### Module 5: 🗂️ 三态抽屉与左边缘双按钮控制体系 (3-State Drawer & Dual Inward Handles)\n- **左边缘双按钮控制把手组 (朝内指向抽屉，颜色与功能清晰区隔)**：\n - **上方按钮 (全收起)**：深色科技质感（`#0f172a`）+ 朝内向右箭头 `›`，点击完全收起抽屉；\n - **下方按钮 (半收起)**：深铁锈红质感（`#8C4A28`）+ 朝内紧凑标号条图标 `⇥`，点击收窄为 56px 纯数字标号竖条；\n - **收起状态极简呈现**：当抽屉完全收起时，页面右侧中间无任何多余漂浮物，仅保留右上角 `📌 需求打点 (n)` 胶囊把手；\n- **三态无缝切换 (`全展开 400px` ⇄ `半收起标号条 56px` ⇄ `完全收起 0px`)**：\n - **全展开 (400px)**：展示完整需求卡片列表、多版本下拉框、完全模糊搜索栏；\n - **半收起紧凑标号竖条 (56px Mini Rail)**：抽屉收窄为右侧极窄的纯标号竖条 `[①][②][③][④]...`，完全释放底层 95% 页面画布；\n - 点击标号条中任意序号：页面平滑滚动并闪烁定位发光框，且**在目标组件旁精准弹出打点详情气泡 (`Inspect Popover`)**，无缝查看需求；\n - 鼠标悬停标号展示需求标题 Tooltip；\n - **完全收起**：折叠至右侧边缘胶囊 `📌 需求打点 (n)`；\n- **100% 绝对统一卡片高度 (Strict 136px Unified Height)**：\n - 标题单行截断带省略号（`text-overflow: ellipsis`）；\n - 简介使用纯文本摘要提取算法（过滤代码块/表格/标记），锁定标准 2 行（36px）展示，杜绝高度塌陷；\n - 所有卡片高度**严格统一为 136px**，列表排版整齐如一；\n- **纯标题完全模糊搜索与检索系统 (Fuzzy Title Search)**：\n - 支持中英文子串包含、空格多关键词分词（如 `订单 履约`）、以及字符流顺序模糊检索，配有一键清空按钮 `✕`。\n\n---\n\n### Module 6: 🔒 排序管理安全锁与依次顺延瞬移体系 (Sequential Cascade Reordering)\n- **日常安全浏览模式（默认）**：\n - 卡片隐藏排序/删除按钮，禁用拖拽，彻底防止日常查阅和定位误触；\n- **排序与删除管理模式（点击 `⚙️ 排序管理` 开启，需创立人鉴权）**：\n - 抽屉浮现提示条与 `✓ 完成退出` 按钮；\n - **智能连续排序与依次瞬移顺延**：\n - `🔝 置顶`：直接将目标项瞬移至第 1 项，后续所有项目**自动依次向下顺延 (1 -> 2 -> 3...)**；\n - `🔢 移至`：输入目标序号，目标项精准插入，其余项目依次顺延；\n - `▲` / `▼`：单步上移/下移；\n - `⠿`：鼠标按住拖拽排序；\n - **列表滚动高度锁定与平滑高亮**：调整排序后列表滚动位置毫秒级锁定不跳动，瞬移到位的新卡片带有呼吸发光边框，页面大头针数字同步更新。\n\n---\n\n### Module 7: 🏷️ 严格多版本物理隔离与导入冲突控制 (Multi-Version & Import Resolver)\n- **版本数据模型与向后兼容**：\n - 统一由 `versionRegistry` 全局维护：\n ```javascript\n window.PRD_VERSION_REGISTRY = {\n \"activeVersion\": \"v1.0.0\",\n \"versions\": {\n \"v1.0.0\": [ /* pins */ ],\n \"v1.1.0\": [ /* pins */ ]\n }\n };\n ```\n- **严格版本物理隔离 (Strict Version Isolation & Zero Cross-Contamination)**：\n - 页面大头针徽标、右侧抽屉列表、打点详情气泡、以及全文 PRD 文档大屏**仅展示当前所选激活版本的数据**，互相版本的打点**完全物理隔离、互不可见**；\n - **新建版本一律为全新空白版本 (Default Clean Blank Slate)**：\n - 点击「➕」或「➕ 新建空白版本...」时，直接创建一个全新的空打点版本（打点数：0），方便 PM 从零开始标注下一迭代；\n - 若需要派生副本，可选择「📋 复制当前版本副本」；\n- **上传 JS 文件与同版本智能冲突处理 (Conflict Modal)**：\n - 用户上传 `.js` / `.json` 文件时弹出冲突模态框：\n - 🔴 **【覆盖现有版本】**：清空当前版本旧打点，完全替换为上传内容；\n - 🟢 **【追加合并】**：保留旧打点，将上传打点追加至末尾并重新递增编号；\n - 🔵 **【另存为新版本】**：自动命名为 `[版本]_imported`。\n\n---\n\n### Module 8: 📑 全景 PRD 文档大屏与交付导出 (PRD Document Screen & Export)\n- **抽屉常驻入口**：右侧抽屉底部常驻 `📑 查看完整PRD` 按钮；\n- **独立新网页打开 (`↗️ 在新网页打开`)**：\n - 在独立新标签页中打开纯净 PRD 大屏文档，带固定 TOC 目录大纲；\n - 适配打印排版，按 `Ctrl+P / Cmd+P` 一键导出交付级 PDF；\n- **多格式一键导出**：支持 `📥 导出 Markdown`、`💾 导出 JS 数据`、`🖨️ 打印 / 导出 PDF`。\n\n---\n\n### Module 9: ⚛️ Vue & React 现代框架 SPA 兼容与自适应引擎 (Vue & React Framework Adaptation Engine)\n\n针对现代前端 SPA 单页应用与组件化工程，引擎内建了框架自适应技术：\n\n1. **🌐 SPA 客户端路由自动劫持 (`pushState` / `popstate`)**：\n - 自动代理拦截全局 `history.pushState` 与 `history.replaceState`，并监听 `popstate` 与 Hash 变更；\n - 当 Vue Router / React Router / Next.js 执行无刷新路由跳转时，系统毫秒级识别当前页面路由（如 `/mall/detail` -> `mall_detail`），自动热重绘对应路由的打点列表与大头针。\n2. **🔄 虚拟 DOM 动态挂载自愈 (Virtual DOM Dynamic Re-anchoring)**：\n - 结合全局 `MutationObserver` 监听 DOM 树的动态增删；\n - 当 Vue 的 `v-if` 或 React 的条件渲染组件（如弹窗、抽屉、异步表格）动态插入页面时，引擎在 50~100ms 内自动重新计算坐标并贴附大头针。\n3. **🧹 Scoped CSS 与哈希类名清洗过滤 (Scoped CSS & Hash Filtration)**：\n - 自动识别并过滤 Vue 的 `data-v-xxxx` 以及 React CSS-in-JS (Emotion / styled-components) 生成的动态随机哈希类名（如 `.css-178fa9`）；\n - 优先提取稳定的语义结构路径（`nth-of-type`）、组件 ID、表单名称、或业务自定义属性（`data-prd=\"key\"`），保证打包重构后打点永不漂移。\n4. **🛡️ HTTP Header ISO-8859-1 编码清洗与云端校验**：\n - 自动对 SPA 中文路由路径（如 `/预警信息/押品预警信息`）进行 `encodeURIComponent` 清洗，杜绝浏览器原生 `fetch` 因中文字符导致的 `non ISO-8859-1 code point` 校验阻断，确保云端 KV 瞬时秒级同步。\n\n---\n\n## 🛠️ 项目工程结构与文件规范\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A (或 Vue / React 路由页面)\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本 (自动拉起静态服务与持久化接口)\n└── assets/\n ├── vendor/ # 第三方独立组件库\n │ └── vditor/\n │ ├── index.min.js # Vditor 核心引擎 (本地离线支持)\n │ └── index.css # Vditor 核心样式\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (跨框架通用: HTML / Vue / React)\n ├── prd-data-admin.js# admin.html 专属数据底包\n ├── prd-data-mall.js # mall.html 专属数据底包\n ├── prd-data-merchant.js\n ├── prd-data-h5.js\n └── prd-data-merchant-h5.js\n```\n\nFile v1.3.0:README.md\n\n# 📌 PM Prototype PRD Pinning & Multi-Version Specification Engine\n\n
\n\n**The Ultimate Interactive PRD Pinning, Vditor IR Markdown Editor & Tri-Engine Persistence System for HTML Prototypes.**\n\n[![Version](https://img.shields.io/badge/version-1.2.0-blue.svg)](https://github.com/barry0-0/pm-proto-prd-pin/releases/tag/1.2.0)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![i18n](https://img.shields.io/badge/i18n-en%20%7C%20zh--CN%20%7C%20ja%20%7C%20ko-brightgreen.svg)](#-internationalization-i18n)\n[![Zero-Dependency](https://img.shields.io/badge/dependencies-zero--native-orange.svg)](#-quick-start)\n\n[English](#-english-documentation) • [简体中文](#-简体中文文档) • [日本語](#-日本語ドキュメント) • [한국어](#-한국어-문서)\n\n
\n\n---\n\n## 📸 Interface Screenshots\n\n| ✍️ Vditor IR Live Editor & Visual Tables | 🗂️ 3-State Drawer (Full / Semi Rail / Hidden) |\n| :---: | :---: |\n| ![Visual Table Editor](assets/images/screenshot_visual_table_editor.png) | ![Drawer Overview](assets/images/screenshot_drawer_overview.png) |\n| **🔄 Pure-White Mermaid Statecharts** | **📑 Full Page Deliverable PRD Screen** |\n| ![Mermaid Render](assets/images/screenshot_mermaid_render.png) | ![Full PRD Document](assets/images/screenshot_full_prd_document.png) |\n\n---\n\n# 🌐 English Documentation\n\n## ⚛️ Cross-Framework Compatibility (HTML / Vue / React) & Autonomous Detection\n\n- **Autonomous Tech-Stack Inspection**: Automatically analyzes `package.json`, Vite/Webpack configs, or HTML structure to detect if the project is **Pure HTML**, **Vue.js (2/3/Nuxt)**, or **React (18/Next.js)**.\n- **Interactive Clarification Fallback**: If the framework cannot be determined automatically, the agent will prompt the user to confirm the framework and target pages/modules.\n- **SPA Client-Side Route Sync**: Intercepts `history.pushState` / `popstate` to automatically adapt pins across SPA route transitions without page refreshes.\n- **Virtual DOM Dynamic Re-anchoring**: Automatically re-attaches pins when conditional components (`v-if` / React modals) enter or exit the DOM.\n- **Scoped CSS & Hash Filtration**: Automatically filters Vue `data-v-xxxx` and React CSS-in-JS hashes to guarantee robust long-term selector anchoring.\n- **Tailwind CSS Reset Isolation & SPA Resource Hydration**: Full CSS isolation sandbox protecting Vditor toolbar icons from Tailwind Preflight distortion, with ISO-8859-1 safe header sanitization for non-ASCII SPA routes.\n\n---\n\n## 🌟 Tri-Engine Persistence System & Comparison\n\n| Persistence Mode | Underlying Architecture | Read/Write Latency | Use Cases & Key Characteristics |\n| :--- | :--- | :--- | :--- |\n| **🔑 Mode 1: Serverless Cloud KV Storage (JSONBin.io / Custom KV) —— [Recommended / Fastest]** | RESTful KV API (`GET /latest` Public Read, `PUT` Private Write with Master Key) | **Instant (200~300ms)**
Zero build wait, instant cross-browser hydration | **Best for Online Staging**: Zero-server deployment (GitHub Pages, Vercel). Instant synchronization across devices without waiting for Git pipelines. |\n| **☁️ Mode 2: GitHub Contents API Git Commit** | GitHub REST API (`PUT /contents/{filePath}` Base64 encoded Git Commits) | **Slower (1~3s)**
Git tree hashing, commit chaining, and Pages rebuild delay | **Best for Strict Audit Trails**: Automatically generates formal Git commits. **Trade-off: Slower push latency and delayed build updates on GitHub Pages**. |\n| **💻 Mode 3: Local Node.js Disk Storage** | Native Node.js server (`POST /api/save-prd` writing directly to disk via fs) | **Sub-millisecond (10~50ms)**
Direct local filesystem I/O | **Best for Offline Development**: Pure offline local development with zero external network dependency. |\n\n---\n\n## 🔄 1-Click Seamless Data Migration Across Modes\n\nWhen switching between persistence engines (e.g. from Local Node to Cloud JSONBin or GitHub):\n- **🚀 Migrate & Sync Current Data (Recommended)**: Automatically writes all in-memory pins and versions into the newly selected backend, ensuring zero-break transition.\n- **📥 Clean Switch (Pull from New Source)**: Switches configuration only and pulls the latest data directly from the new target storage.\n- **💾 Local Backup Safety**: Includes a 1-click `💾 Download Local Backup (.json)` button for absolute data safety.\n\n---\n\n## 🔒 Creator Authentication & Read-Write Segregation\n\nTo prevent unauthorized tampering on public or hosted prototypes:\n- **👁️ Visitor Read-Only Protection**: Anyone opening the prototype gets instant read access to all pins, rich Markdown specs, Mermaid diagrams, and PDF exports without any login friction.\n- **🔒 Mandatory Creator Auth (100% Interception Matrix)**:\n - 📍 Adding New Pins (`setPRDMode('pick')`)\n - ✏️ Editing Specification Clauses (`openEditorForPin(id)`)\n - 🗑️ Deleting Pins (`deletePin(id)`)\n - 📂 Importing PRD Data (`handlePRDImportFile()`)\n - 🔀 Creating Versions (`createPRDVersion(ver)`)\n - 🗑️ Deleting Versions (`deletePRDVersion(ver)`)\n - ⚙️ Reordering Pins (`toggleDrawerManageMode()`)\n- **Incognito & Session Isolation**: Unauthenticated sessions (incognito mode, fresh browsers) always start in read-only mode and require entering the Master Key to unlock.\n\n---\n\n## 🌟 Key Capabilities & Features\n\n| Capability | Technical Implementation | PM & Engineering Benefit |\n| :--- | :--- | :--- |\n| **✍️ Vditor IR Markdown Workbench** | Integrated Vditor (Instant Rendering mode) with relative vendor loading + CDN auto-fallback | Typora-grade live authoring experience; instantaneous rendering for all components |\n| **⌨️ Multi-Level Tab Indentation** | Native `Tab` and `Shift+Tab` event handlers for unordered/ordered/task lists | Effortlessly organize nested specifications (`1 -> 1.1 -> 1.1.1`) |\n| **📊 Interactive Visual Table Editor** | 2D HTML cell matrix, direct cell typing, `Enter/Tab` navigation, 1-click row/col ops | Completely eliminates markdown pipe `\\| col \\|` syntax friction; feels like Excel/Word |\n| **🔄 Pure-White Mermaid Vector Engine** | Dedicated white container with dynamic bottom viewBox compensation (+28px) | Zero clipped labels or distorted arrows on Statecharts, Sequences, and Flowcharts |\n| **💡 3 Core Business Templates** | Fast-insert buttons for Business Rules, Statechart Diagrams, and Data Dictionary Tables | Rapid authoring of standardized specification clauses |\n| **👀 Single-Entry Stash & Minimize** | Clean close `✕` in header + `👀 Stash & View Page` in bottom bar (`.prd-editor-mini-dock` pill) | Review underlying prototype elements without losing unsaved drafts; 1-click restore |\n| **🌐 Native 4-Language i18n** | Full 115-key dynamic dictionary covering `en`, `zh-CN`, `ja`, `ko`; runtime hot-switching | Seamless multi-lingual team collaboration across global product workflows |\n| **🗂️ 3-State Drawer & Dual Handles** | Full (400px), Semi (56px Mini Rail), Hidden (0px); dual inward-facing edge handles | Frees up 95% of prototype canvas while keeping all pins immediately accessible |\n| **🔒 Reorder Safety Lock & Cascade** | Normal browsing locks order; manage mode unlocks `🔝 Top`, `🔢 Move To`, sequential cascade | Accidental reordering prevention; seamless 1 -> 2 -> 3 cascading when reordering |\n| **🏷️ Multi-Version Physical Isolation** | Isolated `versionRegistry`; new versions start clean (0 pins); upload conflict resolver | No pin cross-contamination across sprint iterations |\n| **📑 Full PRD Document & PDF Export** | Dedicated doc modal + new tab view with TOC outline and print styling | 1-click export to deliverable PDF or Markdown specifications |\n\n---\n\n# 🇨🇳 简体中文文档\n\n## ⚛️ 跨框架兼容架构 (HTML / Vue / React) 与自主工程感知\n\n- **🚫 SPA 工程严禁生成冗余 HTML (Zero-HTML In React/Vue)**：在 React/Vue 现代工程中，绝对禁止生成任何独立的 `.html` 页面，仅在全局入口（`main.tsx` / `main.js`）以一行 `import` 挂载，零 HTML 污染；\n- **工程架构自主嗅探 (Autonomous Inspection)**：自动检查 `package.json`、Vite/Webpack 插件及文件类型，智能识别当前工程是 **HTML 静态原型**、**Vue.js (Vue 2/3/Nuxt)** 还是 **React (React 18/Next.js)**；\n- **未能识别时的前置提问协议**：若无法推断框架，Agent 自动前置发起询问：确认所用技术栈及 PRD 打点需应用的页面/模块；\n- **SPA 客户端路由热感知**：自动代理全局 `history.pushState` / `popstate`，Vue Router / React Router 无刷新切页时自动切换打点数据；\n- **虚拟 DOM 动态挂载自愈**：结合 `MutationObserver`，在 `v-if` / 弹窗动态挂载时毫秒级自动定位并贴附大头针；\n- **Scoped CSS 与随机哈希清洗**：智能剔除 `data-v-xxxx` 与 CSS-in-JS 哈希类名，优先提取语义化结构路径；\n- **Tailwind CSS 样式强隔离与深层 SPA 路由安全**：构建 Vditor 专属样式沙箱，根除 Tailwind Preflight 造成的图标撕裂，并自动对中文 SPA 路由执行 ISO-8859-1 安全编码。\n\n---\n\n## 🌟 三模态持久化体系与云端强确认后置缓存原则\n\n- **云端强确认后置缓存原则 (Post-Cloud Confirmation)**：严禁前置假成功写入，必须经由真实 HTTP 200 强校验后方才同步更新本地离线镜像；若云端同步失败则立即触发原子回滚并弹窗报错；\n- **自包含原生 Toast 反馈引擎**：内建独立的 `#prd-global-toast-container`，杜绝依赖任何外部宿主 UI 库；\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥。\n\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥；\n- **创立人权限写入与实时同步**：创立人输入 Master Key 即可直接向云端 Bin 执行秒级落盘写入。\n\n---\n\n## 🌟 三模态持久化体系与方案实现对比\n\n针对产品经理在不同阶段（本地制作、团队评审、线上发布）的诉求，系统提供了三套严格排他的持久化架构：\n\n```mermaid\ngraph TD\n SaveAction[\"触发 保存/新增/编辑/排序/导入\"] --> ModeCheck{\"当前锁定的持久化模式\"}\n \n ModeCheck -->|🔑 方案 1: Serverless 云端 KV 存储| ModeKV[\"【JSONBin.io / 自建 KV API】
⚡ 200~300ms 秒级直写
无需服务器，免编译等待，跨端即时同步\"]\n ModeCheck -->|☁️ 方案 2: GitHub Contents API| ModeGH[\"【GitHub REST API Git Commit】
⏳ 1~3秒 提交较慢
自动生成 Commit 节点，代码库归档，审计追踪\"]\n ModeCheck -->|💻 方案 3: 本地 Node.js 模式| ModeLocal[\"【本地 Node.js /api/save-prd】
⚡ 10ms 磁盘直写
纯本地脱机运行，修改本地物理 js 文件\"]\n```\n\n### 1. 🔑 方案 1：Serverless 云端 KV 存储打点（JSONBin.io / 自定义 KV）—— 【强烈推荐 / 最快捷】\n- **核心实现原理**：\n - 采用 RESTful KV 读写分离架构：\n - **公开只读**：`GET https://api.jsonbin.io/v3/b/{binId}/latest?_t=${Date.now()}`，访客免密秒级拉取最新规约（添加抗缓存时间戳）；\n - **私密写入**：`PUT https://api.jsonbin.io/v3/b/{binId}`，Header 携带 `X-Master-Key` 鉴权更新；\n- **核心优势与快捷性**：\n - **秒级极速响应 (200~300ms)**：修改后瞬间保存生效，跨电脑、跨浏览器、移动端打开即时同步；\n - **100% 零服务器运维**：无需购买任何云主机或配置数据库，开箱即用；\n - **适用场景**：GitHub Pages 静态托管、在线演示评审、跨设备协同标注。\n\n### 2. ☁️ 方案 2：GitHub Contents API 推送打点（Git Commit 模式）\n- **核心实现原理**：\n - 使用 GitHub Fine-Grained Personal Access Token (PAT)；\n - 调用 `PUT https://api.github.com/repos/{owner}/{repo}/contents/{filePath}`，将打点数据以 Base64 编码自动生成正式 Git Commit 提交入库；\n- **特性与局限性说明 (Trade-offs)**：\n - **版本审计追踪优势**：每一次修改在 GitHub 仓库中均有完整的提交者信息与版本 Diff 历史，便于合规审计；\n - **推送相对较慢 (1~3 秒)**：由于涉及 GitHub API 的 Tree 递归计算与 Commit 链打包，写入耗时相对较长；且若依赖 GitHub Pages 构建重新部署，公网生效存在几分钟流水线延迟。\n\n### 3. 💻 方案 3：本地 Node.js 磁盘直写打点（Local Node 模式）\n- **核心实现原理**：\n - 本地终端运行 `node server.js`；\n - 前端通过 `POST /api/save-prd` 调用 Node 原生 fs 模块直接改写磁盘上的物理 `prd-data-*.js` 文件；\n- **适用场景**：企业内网断网开发、保密原型制作、离线纯本地开发。\n\n---\n\n## 🔄 模式切换与一键无缝数据迁移决策\n\n当产品经理在配置中心切换持久化引擎时（如从本地磁盘模式切至云端 KV 模式）：\n- **🚀 同步迁移当前数据到新方案（推荐）**：自动将当前已编辑的全部打点与多版本（共 N 项规约）即刻整体写入到新的持久化数据源中，实现零断点无缝过渡；\n- **📥 不同步现有数据（从新数据源拉取）**：仅切换底层引擎配置，不覆盖新数据源原有内容，稍后直接从新数据源加载最新或作为独立环境；\n- **🛡️ 一键本地备份安全保障**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n## 🔒 读写权限分离与创立人身份强鉴权\n\n为了防止原型发布到线上后被外部人员随意篡改，系统内建了**企业级权限隔离机制**：\n\n1. **👁️ 访客只读保护（零干扰免密浏览）**：\n - 外部访客、设计或研发人员打开页面，直接只读加载全部打点、Markdown 规约、Mermaid 流程图与数据字典，无任何弹窗打扰；\n2. **🔒 敏感操作 100% 强拦截矩阵**：\n - 在未通过 Master Key 验证的会话中，触发以下任一操作系统**立即前置阻断并弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点** (`setPRDMode('pick')`)\n - ✏️ **编辑需求规约** (`openEditorForPin(id)`)\n - 🗑️ **删除需求点** (`deletePin(id)`)\n - 📂 **导入 PRD 数据** (`handlePRDImportFile()`)\n - 🔀 **新建版本** (`createPRDVersion(ver)`)\n - 🗑️ **删除版本** (`deletePRDVersion(ver)`)\n - ⚙️ **排序管理模式** (`toggleDrawerManageMode()`)\n3. **🔑 无痕模式与会话安全隔离**：\n - 取消了任何本地协议的自动免密特权；\n - 在无痕模式或新浏览器中打开，必须输入专属 Master Key 向云端完成鉴权；\n - 验证通过后写入当前浏览器的 `sessionStorage` 解锁全量工作台，关闭窗口后自动失效，杜绝密钥遗留。\n\n---\n\n## 🛠️ 项目工程结构与集成\n\n```html\n\n\n```\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本\n└── assets/\n ├── vendor/\n │ └── vditor/ # Vditor 离线资源\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (V6 Vditor/Tab缩进/三态抽屉/三模态持久化/多语言)\n ├── prd-data-admin.js\n ├── prd-data-mall.js\n └── prd-data-merchant.js\n```\n\n---\n\n# 🇯🇵 日本語ドキュメント\n\n## 🌟 3 つの永続化モードとアーキテクチャ比較\n\n1. **🔑 モード 1: Serverless クラウド KV ストレージ (JSONBin.io) —— 【推奨・最速】**：\n - RESTful API による高速リアルタイム同期（200〜300ms）。Git のプッシュ待ちやビルド待ちなし。クロスデバイス共同作業に最適。\n2. **☁️ モード 2: GitHub Contents API プッシュモード (Git Commit)**：\n - GitHub REST API を介して正式な Git Commit を自動作成。監査ログに優れるが、**Git のプッシュ処理と Pages 再ビルドのため反映に時間がかかる**特性があります。\n3. **💻 モード 3: ローカル Node.js ディスク直接保存**：\n - ローカルの `node server.js` を介してローカルディスクの `.js` ファイルを直接更新。オフライン開発に最適。\n\n## 🔒 閲覧・編集の権限分離とマスターキー認証\n- **閲覧者モード（デフォルト）**：認証なしでピン、Markdown 仕様書、Mermaid 図、PDF エクスポートを自由に閲覧可能。\n- **作成者認証ガード**：ピン追加、仕様編集、削除、インポート、バージョン作成時にマスターキー認証モーダルを強制表示。\n\n---\n\n# 🇰🇷 한국어 문서\n\n## 🌟 3가지 영속성 모드 및 아키텍처 비교\n\n1. **🔑 모드 1: Serverless 클라우드 KV 스토리지 (JSONBin.io) —— 【강력 추천 / 초고속】**：\n - RESTful API 기반 초고속 실시간 동기화 (200~300ms). Git 푸시 대기 시간 없음. 서버리스 정적 배포 환경에 최적.\n2. **☁️ 모드 2: GitHub Contents API 푸시 모드 (Git Commit)**：\n - GitHub REST API를 통해 정식 Git Commit을 자동 생성. 이력 추적에 유리하지만 **푸시 처리 및 Pages 재빌드로 인해 상대적으로 느림**.\n3. **💻 모드 3: 로컬 Node.js 디스크 직접 저장**：\n - `node server.js`를 통해 로컬 디스크의 `.js` 파일을 직접 수정. 오프라인 개발에 최적.\n\n## 🔒 읽기/쓰기 권한 분리 및 마스터 키 인증\n- **방문자 읽기 전용 (기본)**：인증 없이 핀, 마크다운 명세, Mermaid 다이어그램을 자유롭게 열람.\n- **작성자 인증 가드**：핀 추가, 명세 편집, 삭제, 가져오기, 버전 생성 시 마스터 키 인증 모달 강제 팝업.\n\n---\n\n## 📄 License\nMIT License. Created for Product Managers & UI/UX Engineers.\n\nFile v1.3.0:_meta.json\n\n{\n \"ownerId\": \"kn7b10aee3mw0zzb4d2xy1mn7h820ysv\",\n \"slug\": \"pm-proto-prd-pin\",\n \"version\": \"1.3.0\",\n \"publishedAt\": 1787632635217\n}\n\nFile v1.3.0:skill-card.md\n\n## Description:\n\nA zero-dependency, plug-and-play tool that adds interactive PRD pinning, markdown specification editing, multi-version management, and configurable persistence to HTML, Vue, React, and Next.js prototypes.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[barry0-0](https://clawhub.ai/user/barry0-0)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers, designers, and engineers use this skill to add a PRD annotation layer to prototypes so reviewers can pin UI elements, write structured specifications, manage versions, and export PRD documentation.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Off-site PRD synchronization can expose confidential prototype requirements when remote storage is used.\n\nMitigation: Install only in prototypes where off-site sync is acceptable, and avoid confidential PRD content unless the storage endpoints are controlled.\n\nRisk: Install and verify/test flows can make live remote or local changes.\n\nMitigation: Review or modify the injector before running it on important project trees, use narrowly scoped throwaway API keys or PATs, and treat verify/test actions as potentially mutating.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin)\n- [JSONBin.io](https://jsonbin.io)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with inline code snippets and injected JavaScript/CSS assets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May copy files, modify prototype HTML or application entry files, start a local server, and configure cloud or local PRD persistence depending on the target project.]\n\n## Skill Version(s):\n\n1.3.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.2.0: 10 files, 177009 bytes\n\nFiles: assets/prd-pin-tool.js (273673b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (18664b), scripts/inject.py (4133b), skill-card.md (2477b), SKILL.md (27009b), _meta.json (135b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、三模态持久化体系 (🔑Serverless 云端KV存储秒级同步 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、读写分离与创立人 Master Key 身份鉴权强拦截矩阵 (无痕与访客只读保护)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V6.1 (v1.2.0 Business Amber Theme))\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Serverless 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**三模态持久化与权限强鉴权**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 `dependencies.react`、`next.config.*`、`vite.config.*`（含 `@vitejs/plugin-react`）、或 `App.tsx`/`index.jsx`；\n - **HTML 静态原型**：检查根目录下是否存在独立 `.html` 原型文件（如 `admin.html`、`index.html`）且无前端构建依赖；\n2. **Step 2: 无法确定框架时的强制前置确认 (Interactive Clarification Fallback)**：\n - **若项目中无 `package.json` 或无法明确推断框架体系，Agent 必须向用户发起明确提问**：\n > 💬 *“请问当前项目采用的是什么前端框架？（HTML 静态原型 / Vue 2/3 / React / Next.js / Nuxt）以及 PRD 打点标注工具需要应用在哪些页面或模块？（全局所有路由页面 / 仅特定业务端页面）”*\n3. **Step 3: 各框架精准接入指导 (严禁跨形态误生成文件)**：\n - **React 工程 (Vite / Next.js / CRA / React 18)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 资源放置：将 `prd-pin-tool.js` 与 `vendor/vditor` 置于 `public/assets/js/` 和 `public/assets/vendor/`；\n - 入口引入：在 `src/main.tsx` 或 `src/App.tsx` 中写入：\n ```tsx\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - 零修改 `index.html`，零侵入原有业务组件。\n - **Vue 工程 (Vue 2 / Vue 3 / Vite / Nuxt)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 入口引入：在 `src/main.js` 或 `src/main.ts` 中写入：\n ```javascript\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - **纯静态 HTML 原型 (Vanilla Multi-Page HTML)**：\n - 仅在纯静态 HTML 仓库中，才在各 HTML 页面 `` 闭合前引入 ``。\n\n---\n\n### Module 1: 💾 三模态持久化体系、一键数据迁移与跨浏览器免密直读架构 (Tri-Engine Persistence & Zero-Config Cloud Sync)\n\n> 🌟 **云端强确认后置缓存核心原则 (Post-Cloud Confirmation Cache Principle)**： \n> 1. **严禁前置假保存**：严禁在云端请求返回前静默写入 `localStorage` 假装保存成功； \n> 2. **真实 HTTP 200 强校验**：必须在收到云端 Serverless KV 返回的 `HTTP 200 OK` 且携带合法 `record` / `metadata` 实体后，才允许将数据镜像写入 `localStorage` 作为客户端离线/秒开缓存； \n> 3. **失败原子回滚**：若云端网络超时或鉴权失败，系统立即阻断并自动回滚内存状态，弹出红色错误 Toast，杜绝本地与云端数据不一致； \n> 4. **跨浏览器/多端免密直读**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 固化绑定公开只读 Bin ID，任何同事、评审方在新电脑/新浏览器（含无痕模式）中打开，启动时自动从该 Bin ID 秒级拉取最新规约，实现真正的「全员零配置直读、创立人权限写入」。\n\n> 🌟 **跨浏览器/多端免密实时同步核心架构原理 (Cross-Browser Zero-Config Protocol)**： \n> 1. **创立人写入流程 (Creator Write Flow)**：创立人通过专属 Master Key 向指定的云端 Bin 发送 `PUT` 请求，成功后数据即时在 JSONBin 全球 CDN 上更新； \n> 2. **团队/访客免密直读流程 (Visitor Zero-Config Read Flow)**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 内置该项目或各页面的公开只读 Bin ID。**任何团队成员、评审方、或在任意新电脑、新浏览器（包括无痕模式）打开时，无需输入任何 Key 或进行任何配置，系统在页面启动时自动秒级拉取最新规约并热重绘**，实现真正的「一次配置、全员秒读、权限隔离、云端协同」！\n\n> 🌟 **核心战略价值 (Strategic Significance)**： \n> 彻底解决传统 HTML 原型与 SPA 页面在静态托管平台（GitHub Pages / 纯前端静态服务器 / 预览链接）上**「有展示、无后端、无法在线编辑、无法团队跨端协同」**的致命痛点。 \n> 同时提供了**「一键跨模式数据无缝迁移引擎」**：当产品经理在某一模式（如本地 Node 磁盘开发）制作完成打点后，切换至另一模式（如云端 JSONBin 或 GitHub Pages）时，系统自动弹出迁移决策弹窗，**支持一键将当前全量打点与多版本规约整体同步写入至新目标数据源**，实现零断点无缝过渡！\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **🔑 方案 1：Serverless 云端 KV 存储打点 (JSONBin.io / 自建 KV) —— 【强烈推荐 / 最快捷】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待，抗浏览器缓存 | **首选推荐**：静态托管（GitHub Pages / Vercel）、多端协同、移动端测试。零服务器运维成本，天然读写权限分离。 |\n| **☁️ 方案 2：GitHub Contents API 推送打点 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}`，将打点 Base64 编码后生成正式 Git Commit 提交入库 | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。**注意：由于走 Git 推送流程耗时较长，且若依赖 GitHub Pages 重新部署构建生效周期较长**。 |\n| **💻 方案 3：本地 Node.js 磁盘直写打点 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n- **🔄 模式切换二次确认与一键数据迁移决策 (`showModeSwitchConfirmModal`)**:\n - 当在配置中心切换持久化引擎时，系统自动弹出模式迁移决策模态框：\n - 🚀 **【同步迁移当前数据到新方案 (推荐)】**：将当前已编辑的全部打点与版本（共 N 项规约）即刻同步写入到新的持久化数据源中（如向新 JSONBin 执行 `PUT` 或向 GitHub 提交 Commit），实现零断点无缝过渡；\n - 📥 **【不同步现有数据 (从新数据源拉取)】**：仅切换底层模式配置，不覆盖新目标存储，切换后直接从新数据源拉取最新规约或保持空白；\n - 🛡️ **【本地防丢安全备份】**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n### Module 2: 🔒 读写权限分离与创立人 Master Key 身份鉴权架构 (Auth & Permission Guard)\n\n为防止外部人员、评审方或访客恶意篡改线上 PRD 原型规约，系统实现了**严格的读写权限物理隔离**：\n\n```mermaid\ngraph TD\n UserAction[\"用户触发敏感操作
(📍 新增打点 / ✏️ 编辑规约 / 🗑️ 删除 / 📂 导入 / 🔀 新建版本 / ⚙️ 排序管理)\"] --> AuthCheck{\"当前会话是否已输入 Master Key 解锁？\"}\n \n AuthCheck -->|❌ 未解锁 (无痕/访客/全新打开)| PopAuthModal[\"【强制弹出 🔒 创立人身份鉴权弹窗】
展示当前项目模式与绑定的云端 Bin ID\"]\n PopAuthModal --> EnterKey[\"输入专属 API Key / Master Key\"]\n EnterKey --> VerifyCloud[\"向云端发起真实鉴权写入验证\"]\n VerifyCloud -->|✅ 验证通过| UnlockSession[\"当前会话解锁 (sessionStorage)
自动执行刚刚点击的操作并开放全量编辑工作台\"]\n \n AuthCheck -->|✅ 已解锁 (当前会话已授权)| Proceed[\"直接执行操作并写入持久化数据\"]\n```\n\n1. **👁️ 访客只读模式（默认免密）**：\n - 任何访客、设计、测试或研发人员打开页面，系统自动从云端或底包加载最新打点、富文本 Markdown、Mermaid 流程图与数据字典；\n - 访客可全功能查阅、检索、定位发光框、查看气泡、全屏浏览 PRD 大屏、导出 PDF，但无权修改；\n2. **🔒 创立人身份强鉴权拦截矩阵（100% 敏感操作拦截）**：\n - 无论在公网环境还是在本地无痕模式下打开，触发以下任一操作时系统**立即前置弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点**（`setPRDMode('pick')`）\n - ✏️ **打开规约编辑窗**（`openEditorForPin(id)`）\n - 🗑️ **删除需求点**（`deletePin(id)`）\n - 📂 **导入 PRD 文件**（`handlePRDImportFile()`）\n - 🔀 **新建版本**（`createPRDVersion(ver)`）\n - 🗑️ **删除版本**（`deletePRDVersion(ver)`）\n - ⚙️ **排序管理模式**（`toggleDrawerManageMode()`）\n3. **🔑 Master Key 云端真实验证与会话保活**：\n - 创立人输入 Key 后，系统向云端发起真实鉴权验证；\n - 验证通过后将授权状态注入当前浏览器的 `sessionStorage`，当前会话即刻解锁全量编辑工作台；\n - 关闭无痕窗口或标签页后会话自动重置，防止 Key 遗留泄露。\n4. **⚡ 绝对单一排他模式（Strict Single Mode Exclusivity）**：\n - 当项目锁定为 `jsonbin` 模式时，哪怕在 `localhost` 打开也绝对禁止调用本地 `/api/save-prd` 写入磁盘，100% 仅向云端 JSONBin 同步；\n - 彻底杜绝多端或本地产生的交叉覆盖与脏数据。\n\n---\n\n### Module 3: 📍 交互式十字准星打点与智能空间锚定 (Pinning & Spatial Anchoring Engine)\n- **十字准星拾取器 (`bindPickListeners`)**：\n - 点击「📍 新增打点」进入打标模式，鼠标指针变为 `crosshair`，底层元素高亮深琥珀色虚线框；\n - **打标时自动收起右侧抽屉**：进入十字准星打标模式时，右侧抽屉**自动完全收起**，折叠为边缘胶囊 `✕ 📍 点击组件打标 (点击或ESC退出)`，彻底杜绝侧边栏遮挡底层页面组件；\n - 拾取完成或按 ESC 后，自动无缝呼出需求规格编辑工作台；\n- **自愈式弹性 CSS 选择器算法 (`getElementSelector`)**：\n - 优先提取精准 `#id`、语义化类名、结构层级路径（`div:nth-of-type(n)`）与表单属性，保证动态重绘后打点依然 100% 准确对齐；\n- **连续帧率发光框追踪算法 (Continuous Frame-Rate Glow Box Tracking)**：\n - 采用 `requestAnimationFrame` 在平滑滚动的 50 帧（约 800ms）全周期内实时调用 `getBoundingClientRect()` 动态重绘红色发光脉冲框（`position: fixed`），彻底解决页面平滑滚动导致的坐标漂移；\n- **智能容器自动展开 (Smart Container Auto-Unfolding)**：\n - 当打点目标位于未激活的 Tab 面板、已关闭的弹窗或折叠面板中时，定位时自动触发父容器的激活事件（如 `click` / Tab 切换），确保目标元素完全可见后再平滑聚焦。\n\n---\n\n### Module 4: ✍️ Vditor IR 即时渲染与多级缩进工作台 (Vditor IR Editor Workbench)\n- **独立自包含原生 Toast 浮动反馈系统 (`#prd-global-toast-container`)**：\n - 彻底解耦外部环境，内建原生浮动 Toast UI 容器（`z-index: 10000099`），不依赖任何第三方 UI 库或 `window.UI`；\n - 在保存、删除、模式切换、鉴权拦截等关键操作节点提供翡翠绿/珊瑚红/深空灰渐变的高可见度即时反馈；\n- **三方组件集成架构 (Vditor Instant Rendering Engine)**：\n - **双通道与 SPA 绝对路径加载机制 (`ensureVditorLoaded`)**：\n - 采用绝对根路径与 CDN 双通道加载，杜绝 React / Vue 深层 SPA 嵌套路由下相对路径 404（HTML 污染）导致 CSS 失效；\n - **Tailwind CSS Preflight 样式强隔离与重置修复**：\n - 强制对 `#prd-vditor-container` 实施严格样式沙箱隔离，重置并锁定工具栏 SVG 图标为标准的 `14px × 14px`，彻底杜绝 Tailwind CSS 全局 `svg { display:block; width:100% }` 造成的工具栏图标撕裂与字母巨大化（H/B/T 字母变形）问题；\n - **IR (Instant Rendering) 即时渲染模式**：\n - Typora 级的流式文档编写手感，输入 `- 列表` 或 `### 标题` 即刻呈现高保真排版；\n- **⌨️ 完整支持 Tab / Shift+Tab 多级层级缩进**：\n - **多级嵌套列表**：在无序列表、有序列表或任务清单中按 **`Tab`** 即可瞬间向右缩进生成下一层级（如 `1 -> 1.1 -> 1.1.1` 或 `• -> ◦ -> ▪`）；\n - **反向缩进 / 升级层级**：按 **`Shift + Tab`** 或行首 `Backspace` 即可瞬间回退层级；\n- **📊 交互式可视化表格直编**：\n - 彻底告别 Markdown 竖线管道符 (`| col |`)，表格直接渲染为可视 HTML 矩阵；\n - 支持鼠标点击任意单元格直接打字输入，按 `Enter/Tab` 顺畅换行换格；\n - 原生工具栏一键插入表格与进行行列扩展；\n- **🔄 纯白底色 Mermaid 矢量图表即时渲染**：\n - 支持即时渲染 Mermaid 状态图、时序图、流程图，纯白背景卡片呈现，杜绝暗色杂乱；\n- **💡 业务规约三大核心预置模板 (3 Core Standard Templates)**：\n 1. **📋 业务规则模版**：触发条件、前置校验、流转逻辑（含多级缩进）、异常分支处理；\n 2. **🔄 状态机流程图**：标准 Mermaid `graph TB` 状态机流转矢量图；\n 3. **📊 字段数据字典表**：字段名、字段类型、是否必填、枚举值/格式、业务口径与默认值表格；\n- **单一入口草稿暂存与最小化机制 (`.prd-editor-mini-dock`)**：\n - **右上角极简**：仅保留右上角关闭按钮 `✕`，彻底去除重复按钮；\n - **底部单一看页面入口**：底部操作栏保留 **「👀 暂存并看页面」** 按钮；\n - **无损暂存与一键恢复**：点击后草稿数据实时自 Vditor 实例读取并无损暂存，弹窗折叠为右下角常驻胶囊（`✏️ 编辑中: 需求名称 · 草稿已暂存`），点击 **「恢复编辑」** 即可无损还原全部内容。\n\n---\n\n### Module 5: 🗂️ 三态抽屉与左边缘双按钮控制体系 (3-State Drawer & Dual Inward Handles)\n- **左边缘双按钮控制把手组 (朝内指向抽屉，颜色与功能清晰区隔)**：\n - **上方按钮 (全收起)**：深色科技质感（`#0f172a`）+ 朝内向右箭头 `›`，点击完全收起抽屉；\n - **下方按钮 (半收起)**：深铁锈红质感（`#8C4A28`）+ 朝内紧凑标号条图标 `⇥`，点击收窄为 56px 纯数字标号竖条；\n - **收起状态极简呈现**：当抽屉完全收起时，页面右侧中间无任何多余漂浮物，仅保留右上角 `📌 需求打点 (n)` 胶囊把手；\n- **三态无缝切换 (`全展开 400px` ⇄ `半收起标号条 56px` ⇄ `完全收起 0px`)**：\n - **全展开 (400px)**：展示完整需求卡片列表、多版本下拉框、完全模糊搜索栏；\n - **半收起紧凑标号竖条 (56px Mini Rail)**：抽屉收窄为右侧极窄的纯标号竖条 `[①][②][③][④]...`，完全释放底层 95% 页面画布；\n - 点击标号条中任意序号：页面平滑滚动并闪烁定位发光框，且**在目标组件旁精准弹出打点详情气泡 (`Inspect Popover`)**，无缝查看需求；\n - 鼠标悬停标号展示需求标题 Tooltip；\n - **完全收起**：折叠至右侧边缘胶囊 `📌 需求打点 (n)`；\n- **100% 绝对统一卡片高度 (Strict 136px Unified Height)**：\n - 标题单行截断带省略号（`text-overflow: ellipsis`）；\n - 简介使用纯文本摘要提取算法（过滤代码块/表格/标记），锁定标准 2 行（36px）展示，杜绝高度塌陷；\n - 所有卡片高度**严格统一为 136px**，列表排版整齐如一；\n- **纯标题完全模糊搜索与检索系统 (Fuzzy Title Search)**：\n - 支持中英文子串包含、空格多关键词分词（如 `订单 履约`）、以及字符流顺序模糊检索，配有一键清空按钮 `✕`。\n\n---\n\n### Module 6: 🔒 排序管理安全锁与依次顺延瞬移体系 (Sequential Cascade Reordering)\n- **日常安全浏览模式（默认）**：\n - 卡片隐藏排序/删除按钮，禁用拖拽，彻底防止日常查阅和定位误触；\n- **排序与删除管理模式（点击 `⚙️ 排序管理` 开启，需创立人鉴权）**：\n - 抽屉浮现提示条与 `✓ 完成退出` 按钮；\n - **智能连续排序与依次瞬移顺延**：\n - `🔝 置顶`：直接将目标项瞬移至第 1 项，后续所有项目**自动依次向下顺延 (1 -> 2 -> 3...)**；\n - `🔢 移至`：输入目标序号，目标项精准插入，其余项目依次顺延；\n - `▲` / `▼`：单步上移/下移；\n - `⠿`：鼠标按住拖拽排序；\n - **列表滚动高度锁定与平滑高亮**：调整排序后列表滚动位置毫秒级锁定不跳动，瞬移到位的新卡片带有呼吸发光边框，页面大头针数字同步更新。\n\n---\n\n### Module 7: 🏷️ 严格多版本物理隔离与导入冲突控制 (Multi-Version & Import Resolver)\n- **版本数据模型与向后兼容**：\n - 统一由 `versionRegistry` 全局维护：\n ```javascript\n window.PRD_VERSION_REGISTRY = {\n \"activeVersion\": \"v1.0.0\",\n \"versions\": {\n \"v1.0.0\": [ /* pins */ ],\n \"v1.1.0\": [ /* pins */ ]\n }\n };\n ```\n- **严格版本物理隔离 (Strict Version Isolation & Zero Cross-Contamination)**：\n - 页面大头针徽标、右侧抽屉列表、打点详情气泡、以及全文 PRD 文档大屏**仅展示当前所选激活版本的数据**，互相版本的打点**完全物理隔离、互不可见**；\n - **新建版本一律为全新空白版本 (Default Clean Blank Slate)**：\n - 点击「➕」或「➕ 新建空白版本...」时，直接创建一个全新的空打点版本（打点数：0），方便 PM 从零开始标注下一迭代；\n - 若需要派生副本，可选择「📋 复制当前版本副本」；\n- **上传 JS 文件与同版本智能冲突处理 (Conflict Modal)**：\n - 用户上传 `.js` / `.json` 文件时弹出冲突模态框：\n - 🔴 **【覆盖现有版本】**：清空当前版本旧打点，完全替换为上传内容；\n - 🟢 **【追加合并】**：保留旧打点，将上传打点追加至末尾并重新递增编号；\n - 🔵 **【另存为新版本】**：自动命名为 `[版本]_imported`。\n\n---\n\n### Module 8: 📑 全景 PRD 文档大屏与交付导出 (PRD Document Screen & Export)\n- **抽屉常驻入口**：右侧抽屉底部常驻 `📑 查看完整PRD` 按钮；\n- **独立新网页打开 (`↗️ 在新网页打开`)**：\n - 在独立新标签页中打开纯净 PRD 大屏文档，带固定 TOC 目录大纲；\n - 适配打印排版，按 `Ctrl+P / Cmd+P` 一键导出交付级 PDF；\n- **多格式一键导出**：支持 `📥 导出 Markdown`、`💾 导出 JS 数据`、`🖨️ 打印 / 导出 PDF`。\n\n---\n\n### Module 9: ⚛️ Vue & React 现代框架 SPA 兼容与自适应引擎 (Vue & React Framework Adaptation Engine)\n\n针对现代前端 SPA 单页应用与组件化工程，引擎内建了框架自适应技术：\n\n1. **🌐 SPA 客户端路由自动劫持 (`pushState` / `popstate`)**：\n - 自动代理拦截全局 `history.pushState` 与 `history.replaceState`，并监听 `popstate` 与 Hash 变更；\n - 当 Vue Router / React Router / Next.js 执行无刷新路由跳转时，系统毫秒级识别当前页面路由（如 `/mall/detail` -> `mall_detail`），自动热重绘对应路由的打点列表与大头针。\n2. **🔄 虚拟 DOM 动态挂载自愈 (Virtual DOM Dynamic Re-anchoring)**：\n - 结合全局 `MutationObserver` 监听 DOM 树的动态增删；\n - 当 Vue 的 `v-if` 或 React 的条件渲染组件（如弹窗、抽屉、异步表格）动态插入页面时，引擎在 50~100ms 内自动重新计算坐标并贴附大头针。\n3. **🧹 Scoped CSS 与哈希类名清洗过滤 (Scoped CSS & Hash Filtration)**：\n - 自动识别并过滤 Vue 的 `data-v-xxxx` 以及 React CSS-in-JS (Emotion / styled-components) 生成的动态随机哈希类名（如 `.css-178fa9`）；\n - 优先提取稳定的语义结构路径（`nth-of-type`）、组件 ID、表单名称、或业务自定义属性（`data-prd=\"key\"`），保证打包重构后打点永不漂移。\n4. **🛡️ HTTP Header ISO-8859-1 编码清洗与云端校验**：\n - 自动对 SPA 中文路由路径（如 `/预警信息/押品预警信息`）进行 `encodeURIComponent` 清洗，杜绝浏览器原生 `fetch` 因中文字符导致的 `non ISO-8859-1 code point` 校验阻断，确保云端 KV 瞬时秒级同步。\n\n---\n\n## 🛠️ 项目工程结构与文件规范\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A (或 Vue / React 路由页面)\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本 (自动拉起静态服务与持久化接口)\n└── assets/\n ├── vendor/ # 第三方独立组件库\n │ └── vditor/\n │ ├── index.min.js # Vditor 核心引擎 (本地离线支持)\n │ └── index.css # Vditor 核心样式\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (跨框架通用: HTML / Vue / React)\n ├── prd-data-admin.js# admin.html 专属数据底包\n ├── prd-data-mall.js # mall.html 专属数据底包\n ├── prd-data-merchant.js\n ├── prd-data-h5.js\n └── prd-data-merchant-h5.js\n```\n\nFile v1.2.0:README.md\n\n# 📌 PM Prototype PRD Pinning & Multi-Version Specification Engine\n\n
\n\n**The Ultimate Interactive PRD Pinning, Vditor IR Markdown Editor & Tri-Engine Persistence System for HTML Prototypes.**\n\n[![Version](https://img.shields.io/badge/version-1.2.0-blue.svg)](https://github.com/barry0-0/pm-proto-prd-pin/releases/tag/1.2.0)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![i18n](https://img.shields.io/badge/i18n-en%20%7C%20zh--CN%20%7C%20ja%20%7C%20ko-brightgreen.svg)](#-internationalization-i18n)\n[![Zero-Dependency](https://img.shields.io/badge/dependencies-zero--native-orange.svg)](#-quick-start)\n\n[English](#-english-documentation) • [简体中文](#-简体中文文档) • [日本語](#-日本語ドキュメント) • [한국어](#-한국어-문서)\n\n
\n\n---\n\n## 📸 Interface Screenshots\n\n| ✍️ Vditor IR Live Editor & Visual Tables | 🗂️ 3-State Drawer (Full / Semi Rail / Hidden) |\n| :---: | :---: |\n| ![Visual Table Editor](assets/images/screenshot_visual_table_editor.png) | ![Drawer Overview](assets/images/screenshot_drawer_overview.png) |\n| **🔄 Pure-White Mermaid Statecharts** | **📑 Full Page Deliverable PRD Screen** |\n| ![Mermaid Render](assets/images/screenshot_mermaid_render.png) | ![Full PRD Document](assets/images/screenshot_full_prd_document.png) |\n\n---\n\n# 🌐 English Documentation\n\n## ⚛️ Cross-Framework Compatibility (HTML / Vue / React) & Autonomous Detection\n\n- **Autonomous Tech-Stack Inspection**: Automatically analyzes `package.json`, Vite/Webpack configs, or HTML structure to detect if the project is **Pure HTML**, **Vue.js (2/3/Nuxt)**, or **React (18/Next.js)**.\n- **Interactive Clarification Fallback**: If the framework cannot be determined automatically, the agent will prompt the user to confirm the framework and target pages/modules.\n- **SPA Client-Side Route Sync**: Intercepts `history.pushState` / `popstate` to automatically adapt pins across SPA route transitions without page refreshes.\n- **Virtual DOM Dynamic Re-anchoring**: Automatically re-attaches pins when conditional components (`v-if` / React modals) enter or exit the DOM.\n- **Scoped CSS & Hash Filtration**: Automatically filters Vue `data-v-xxxx` and React CSS-in-JS hashes to guarantee robust long-term selector anchoring.\n- **Tailwind CSS Reset Isolation & SPA Resource Hydration**: Full CSS isolation sandbox protecting Vditor toolbar icons from Tailwind Preflight distortion, with ISO-8859-1 safe header sanitization for non-ASCII SPA routes.\n\n---\n\n## 🌟 Tri-Engine Persistence System & Comparison\n\n| Persistence Mode | Underlying Architecture | Read/Write Latency | Use Cases & Key Characteristics |\n| :--- | :--- | :--- | :--- |\n| **🔑 Mode 1: Serverless Cloud KV Storage (JSONBin.io / Custom KV) —— [Recommended / Fastest]** | RESTful KV API (`GET /latest` Public Read, `PUT` Private Write with Master Key) | **Instant (200~300ms)**
Zero build wait, instant cross-browser hydration | **Best for Online Staging**: Zero-server deployment (GitHub Pages, Vercel). Instant synchronization across devices without waiting for Git pipelines. |\n| **☁️ Mode 2: GitHub Contents API Git Commit** | GitHub REST API (`PUT /contents/{filePath}` Base64 encoded Git Commits) | **Slower (1~3s)**
Git tree hashing, commit chaining, and Pages rebuild delay | **Best for Strict Audit Trails**: Automatically generates formal Git commits. **Trade-off: Slower push latency and delayed build updates on GitHub Pages**. |\n| **💻 Mode 3: Local Node.js Disk Storage** | Native Node.js server (`POST /api/save-prd` writing directly to disk via fs) | **Sub-millisecond (10~50ms)**
Direct local filesystem I/O | **Best for Offline Development**: Pure offline local development with zero external network dependency. |\n\n---\n\n## 🔄 1-Click Seamless Data Migration Across Modes\n\nWhen switching between persistence engines (e.g. from Local Node to Cloud JSONBin or GitHub):\n- **🚀 Migrate & Sync Current Data (Recommended)**: Automatically writes all in-memory pins and versions into the newly selected backend, ensuring zero-break transition.\n- **📥 Clean Switch (Pull from New Source)**: Switches configuration only and pulls the latest data directly from the new target storage.\n- **💾 Local Backup Safety**: Includes a 1-click `💾 Download Local Backup (.json)` button for absolute data safety.\n\n---\n\n## 🔒 Creator Authentication & Read-Write Segregation\n\nTo prevent unauthorized tampering on public or hosted prototypes:\n- **👁️ Visitor Read-Only Protection**: Anyone opening the prototype gets instant read access to all pins, rich Markdown specs, Mermaid diagrams, and PDF exports without any login friction.\n- **🔒 Mandatory Creator Auth (100% Interception Matrix)**:\n - 📍 Adding New Pins (`setPRDMode('pick')`)\n - ✏️ Editing Specification Clauses (`openEditorForPin(id)`)\n - 🗑️ Deleting Pins (`deletePin(id)`)\n - 📂 Importing PRD Data (`handlePRDImportFile()`)\n - 🔀 Creating Versions (`createPRDVersion(ver)`)\n - 🗑️ Deleting Versions (`deletePRDVersion(ver)`)\n - ⚙️ Reordering Pins (`toggleDrawerManageMode()`)\n- **Incognito & Session Isolation**: Unauthenticated sessions (incognito mode, fresh browsers) always start in read-only mode and require entering the Master Key to unlock.\n\n---\n\n## 🌟 Key Capabilities & Features\n\n| Capability | Technical Implementation | PM & Engineering Benefit |\n| :--- | :--- | :--- |\n| **✍️ Vditor IR Markdown Workbench** | Integrated Vditor (Instant Rendering mode) with relative vendor loading + CDN auto-fallback | Typora-grade live authoring experience; instantaneous rendering for all components |\n| **⌨️ Multi-Level Tab Indentation** | Native `Tab` and `Shift+Tab` event handlers for unordered/ordered/task lists | Effortlessly organize nested specifications (`1 -> 1.1 -> 1.1.1`) |\n| **📊 Interactive Visual Table Editor** | 2D HTML cell matrix, direct cell typing, `Enter/Tab` navigation, 1-click row/col ops | Completely eliminates markdown pipe `\\| col \\|` syntax friction; feels like Excel/Word |\n| **🔄 Pure-White Mermaid Vector Engine** | Dedicated white container with dynamic bottom viewBox compensation (+28px) | Zero clipped labels or distorted arrows on Statecharts, Sequences, and Flowcharts |\n| **💡 3 Core Business Templates** | Fast-insert buttons for Business Rules, Statechart Diagrams, and Data Dictionary Tables | Rapid authoring of standardized specification clauses |\n| **👀 Single-Entry Stash & Minimize** | Clean close `✕` in header + `👀 Stash & View Page` in bottom bar (`.prd-editor-mini-dock` pill) | Review underlying prototype elements without losing unsaved drafts; 1-click restore |\n| **🌐 Native 4-Language i18n** | Full 115-key dynamic dictionary covering `en`, `zh-CN`, `ja`, `ko`; runtime hot-switching | Seamless multi-lingual team collaboration across global product workflows |\n| **🗂️ 3-State Drawer & Dual Handles** | Full (400px), Semi (56px Mini Rail), Hidden (0px); dual inward-facing edge handles | Frees up 95% of prototype canvas while keeping all pins immediately accessible |\n| **🔒 Reorder Safety Lock & Cascade** | Normal browsing locks order; manage mode unlocks `🔝 Top`, `🔢 Move To`, sequential cascade | Accidental reordering prevention; seamless 1 -> 2 -> 3 cascading when reordering |\n| **🏷️ Multi-Version Physical Isolation** | Isolated `versionRegistry`; new versions start clean (0 pins); upload conflict resolver | No pin cross-contamination across sprint iterations |\n| **📑 Full PRD Document & PDF Export** | Dedicated doc modal + new tab view with TOC outline and print styling | 1-click export to deliverable PDF or Markdown specifications |\n\n---\n\n# 🇨🇳 简体中文文档\n\n## ⚛️ 跨框架兼容架构 (HTML / Vue / React) 与自主工程感知\n\n- **🚫 SPA 工程严禁生成冗余 HTML (Zero-HTML In React/Vue)**：在 React/Vue 现代工程中，绝对禁止生成任何独立的 `.html` 页面，仅在全局入口（`main.tsx` / `main.js`）以一行 `import` 挂载，零 HTML 污染；\n- **工程架构自主嗅探 (Autonomous Inspection)**：自动检查 `package.json`、Vite/Webpack 插件及文件类型，智能识别当前工程是 **HTML 静态原型**、**Vue.js (Vue 2/3/Nuxt)** 还是 **React (React 18/Next.js)**；\n- **未能识别时的前置提问协议**：若无法推断框架，Agent 自动前置发起询问：确认所用技术栈及 PRD 打点需应用的页面/模块；\n- **SPA 客户端路由热感知**：自动代理全局 `history.pushState` / `popstate`，Vue Router / React Router 无刷新切页时自动切换打点数据；\n- **虚拟 DOM 动态挂载自愈**：结合 `MutationObserver`，在 `v-if` / 弹窗动态挂载时毫秒级自动定位并贴附大头针；\n- **Scoped CSS 与随机哈希清洗**：智能剔除 `data-v-xxxx` 与 CSS-in-JS 哈希类名，优先提取语义化结构路径；\n- **Tailwind CSS 样式强隔离与深层 SPA 路由安全**：构建 Vditor 专属样式沙箱，根除 Tailwind Preflight 造成的图标撕裂，并自动对中文 SPA 路由执行 ISO-8859-1 安全编码。\n\n---\n\n## 🌟 三模态持久化体系与云端强确认后置缓存原则\n\n- **云端强确认后置缓存原则 (Post-Cloud Confirmation)**：严禁前置假成功写入，必须经由真实 HTTP 200 强校验后方才同步更新本地离线镜像；若云端同步失败则立即触发原子回滚并弹窗报错；\n- **自包含原生 Toast 反馈引擎**：内建独立的 `#prd-global-toast-container`，杜绝依赖任何外部宿主 UI 库；\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥。\n\n- **跨浏览器全员零配置直读**：通过代码内置的 `DEFAULT_JSONBIN_MAPPING` 绑定云端 Bin ID，任何新浏览器或访客打开页面，启动时自动秒级拉取最新打点规约，无需配置任何密钥；\n- **创立人权限写入与实时同步**：创立人输入 Master Key 即可直接向云端 Bin 执行秒级落盘写入。\n\n---\n\n## 🌟 三模态持久化体系与方案实现对比\n\n针对产品经理在不同阶段（本地制作、团队评审、线上发布）的诉求，系统提供了三套严格排他的持久化架构：\n\n```mermaid\ngraph TD\n SaveAction[\"触发 保存/新增/编辑/排序/导入\"] --> ModeCheck{\"当前锁定的持久化模式\"}\n \n ModeCheck -->|🔑 方案 1: Serverless 云端 KV 存储| ModeKV[\"【JSONBin.io / 自建 KV API】
⚡ 200~300ms 秒级直写
无需服务器，免编译等待，跨端即时同步\"]\n ModeCheck -->|☁️ 方案 2: GitHub Contents API| ModeGH[\"【GitHub REST API Git Commit】
⏳ 1~3秒 提交较慢
自动生成 Commit 节点，代码库归档，审计追踪\"]\n ModeCheck -->|💻 方案 3: 本地 Node.js 模式| ModeLocal[\"【本地 Node.js /api/save-prd】
⚡ 10ms 磁盘直写
纯本地脱机运行，修改本地物理 js 文件\"]\n```\n\n### 1. 🔑 方案 1：Serverless 云端 KV 存储打点（JSONBin.io / 自定义 KV）—— 【强烈推荐 / 最快捷】\n- **核心实现原理**：\n - 采用 RESTful KV 读写分离架构：\n - **公开只读**：`GET https://api.jsonbin.io/v3/b/{binId}/latest?_t=${Date.now()}`，访客免密秒级拉取最新规约（添加抗缓存时间戳）；\n - **私密写入**：`PUT https://api.jsonbin.io/v3/b/{binId}`，Header 携带 `X-Master-Key` 鉴权更新；\n- **核心优势与快捷性**：\n - **秒级极速响应 (200~300ms)**：修改后瞬间保存生效，跨电脑、跨浏览器、移动端打开即时同步；\n - **100% 零服务器运维**：无需购买任何云主机或配置数据库，开箱即用；\n - **适用场景**：GitHub Pages 静态托管、在线演示评审、跨设备协同标注。\n\n### 2. ☁️ 方案 2：GitHub Contents API 推送打点（Git Commit 模式）\n- **核心实现原理**：\n - 使用 GitHub Fine-Grained Personal Access Token (PAT)；\n - 调用 `PUT https://api.github.com/repos/{owner}/{repo}/contents/{filePath}`，将打点数据以 Base64 编码自动生成正式 Git Commit 提交入库；\n- **特性与局限性说明 (Trade-offs)**：\n - **版本审计追踪优势**：每一次修改在 GitHub 仓库中均有完整的提交者信息与版本 Diff 历史，便于合规审计；\n - **推送相对较慢 (1~3 秒)**：由于涉及 GitHub API 的 Tree 递归计算与 Commit 链打包，写入耗时相对较长；且若依赖 GitHub Pages 构建重新部署，公网生效存在几分钟流水线延迟。\n\n### 3. 💻 方案 3：本地 Node.js 磁盘直写打点（Local Node 模式）\n- **核心实现原理**：\n - 本地终端运行 `node server.js`；\n - 前端通过 `POST /api/save-prd` 调用 Node 原生 fs 模块直接改写磁盘上的物理 `prd-data-*.js` 文件；\n- **适用场景**：企业内网断网开发、保密原型制作、离线纯本地开发。\n\n---\n\n## 🔄 模式切换与一键无缝数据迁移决策\n\n当产品经理在配置中心切换持久化引擎时（如从本地磁盘模式切至云端 KV 模式）：\n- **🚀 同步迁移当前数据到新方案（推荐）**：自动将当前已编辑的全部打点与多版本（共 N 项规约）即刻整体写入到新的持久化数据源中，实现零断点无缝过渡；\n- **📥 不同步现有数据（从新数据源拉取）**：仅切换底层引擎配置，不覆盖新数据源原有内容，稍后直接从新数据源加载最新或作为独立环境；\n- **🛡️ 一键本地备份安全保障**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n## 🔒 读写权限分离与创立人身份强鉴权\n\n为了防止原型发布到线上后被外部人员随意篡改，系统内建了**企业级权限隔离机制**：\n\n1. **👁️ 访客只读保护（零干扰免密浏览）**：\n - 外部访客、设计或研发人员打开页面，直接只读加载全部打点、Markdown 规约、Mermaid 流程图与数据字典，无任何弹窗打扰；\n2. **🔒 敏感操作 100% 强拦截矩阵**：\n - 在未通过 Master Key 验证的会话中，触发以下任一操作系统**立即前置阻断并弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点** (`setPRDMode('pick')`)\n - ✏️ **编辑需求规约** (`openEditorForPin(id)`)\n - 🗑️ **删除需求点** (`deletePin(id)`)\n - 📂 **导入 PRD 数据** (`handlePRDImportFile()`)\n - 🔀 **新建版本** (`createPRDVersion(ver)`)\n - 🗑️ **删除版本** (`deletePRDVersion(ver)`)\n - ⚙️ **排序管理模式** (`toggleDrawerManageMode()`)\n3. **🔑 无痕模式与会话安全隔离**：\n - 取消了任何本地协议的自动免密特权；\n - 在无痕模式或新浏览器中打开，必须输入专属 Master Key 向云端完成鉴权；\n - 验证通过后写入当前浏览器的 `sessionStorage` 解锁全量工作台，关闭窗口后自动失效，杜绝密钥遗留。\n\n---\n\n## 🛠️ 项目工程结构与集成\n\n```html\n\n\n```\n\n```text\nmy-prototype/\n├── admin.html # 原型页面 A\n├── mall.html # 原型页面 B\n├── merchant.html # 原型页面 C\n├── h5.html # 原型页面 D\n├── merchant-h5.html # 原型页面 E\n├── server.js # 本地持久化后端服务 (Node.js 原生零依赖，提供 /api/save-prd)\n├── start.sh # 一键启动脚本\n└── assets/\n ├── vendor/\n │ └── vditor/ # Vditor 离线资源\n └── js/\n ├── prd-pin-tool.js # 核心引擎 (V6 Vditor/Tab缩进/三态抽屉/三模态持久化/多语言)\n ├── prd-data-admin.js\n ├── prd-data-mall.js\n └── prd-data-merchant.js\n```\n\n---\n\n# 🇯🇵 日本語ドキュメント\n\n## 🌟 3 つの永続化モードとアーキテクチャ比較\n\n1. **🔑 モード 1: Serverless クラウド KV ストレージ (JSONBin.io) —— 【推奨・最速】**：\n - RESTful API による高速リアルタイム同期（200〜300ms）。Git のプッシュ待ちやビルド待ちなし。クロスデバイス共同作業に最適。\n2. **☁️ モード 2: GitHub Contents API プッシュモード (Git Commit)**：\n - GitHub REST API を介して正式な Git Commit を自動作成。監査ログに優れるが、**Git のプッシュ処理と Pages 再ビルドのため反映に時間がかかる**特性があります。\n3. **💻 モード 3: ローカル Node.js ディスク直接保存**：\n - ローカルの `node server.js` を介してローカルディスクの `.js` ファイルを直接更新。オフライン開発に最適。\n\n## 🔒 閲覧・編集の権限分離とマスターキー認証\n- **閲覧者モード（デフォルト）**：認証なしでピン、Markdown 仕様書、Mermaid 図、PDF エクスポートを自由に閲覧可能。\n- **作成者認証ガード**：ピン追加、仕様編集、削除、インポート、バージョン作成時にマスターキー認証モーダルを強制表示。\n\n---\n\n# 🇰🇷 한국어 문서\n\n## 🌟 3가지 영속성 모드 및 아키텍처 비교\n\n1. **🔑 모드 1: Serverless 클라우드 KV 스토리지 (JSONBin.io) —— 【강력 추천 / 초고속】**：\n - RESTful API 기반 초고속 실시간 동기화 (200~300ms). Git 푸시 대기 시간 없음. 서버리스 정적 배포 환경에 최적.\n2. **☁️ 모드 2: GitHub Contents API 푸시 모드 (Git Commit)**：\n - GitHub REST API를 통해 정식 Git Commit을 자동 생성. 이력 추적에 유리하지만 **푸시 처리 및 Pages 재빌드로 인해 상대적으로 느림**.\n3. **💻 모드 3: 로컬 Node.js 디스크 직접 저장**：\n - `node server.js`를 통해 로컬 디스크의 `.js` 파일을 직접 수정. 오프라인 개발에 최적.\n\n## 🔒 읽기/쓰기 권한 분리 및 마스터 키 인증\n- **방문자 읽기 전용 (기본)**：인증 없이 핀, 마크다운 명세, Mermaid 다이어그램을 자유롭게 열람.\n- **작성자 인증 가드**：핀 추가, 명세 편집, 삭제, 가져오기, 버전 생성 시 마스터 키 인증 모달 강제 팝업.\n\n---\n\n## 📄 License\nMIT License. Created for Product Managers & UI/UX Engineers.\n\nFile v1.2.0:_meta.json\n\n{\n \"ownerId\": \"kn7b10aee3mw0zzb4d2xy1mn7h820ysv\",\n \"slug\": \"pm-proto-prd-pin\",\n \"version\": \"1.2.0\",\n \"publishedAt\": 1787624350652\n}\n\nFile v1.2.0:skill-card.md\n\n## Description:\n\nPm Proto Prd Pin helps agents add an interactive PRD pinning, annotation, multi-version specification, and export layer to HTML, Vue, and React prototypes.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[barry0-0](https://clawhub.ai/user/barry0-0)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers, designers, and engineers use this skill to add searchable PRD annotations, versioned requirements, rich Markdown editing, Mermaid diagrams, and exportable specification views to prototype applications. It is most relevant when teams need prototype-linked requirements review across static HTML, Vue, or React projects.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Unsafe default cloud write credentials can expose PRD data or allow unauthorized writes.\n\nMitigation: Review and change the defaults before installation; remove or rotate embedded JSONBin keys, avoid shared bins, and prefer local-only mode or a backend proxy for secrets.\n\nRisk: Repository tokens handled in the browser can leak or be over-scoped.\n\nMitigation: Use narrowly scoped, short-lived GitHub credentials and avoid using personal tokens in shared or untrusted browser sessions.\n\nRisk: The local helper server writes PRD data to disk and should not be exposed to untrusted networks.\n\nMitigation: Run the local server only on trusted development machines and keep it bound to local workflows unless separately reviewed.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin)\n- [Publisher Profile](https://clawhub.ai/user/barry0-0)\n- [Artifact README](artifact/README.md)\n- [Artifact Skill Definition](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [Guidance, Code, Shell commands, Configuration, Markdown]\n\n**Output Format:** [Markdown guidance with code snippets and generated or modified project files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May add JavaScript, vendor assets, a local Node.js helper, PRD data files, and prototype script tags depending on the target project.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release metadata and target metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.1.1: 10 files, 177969 bytes\n\nFiles: assets/prd-pin-tool.js (276424b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (18664b), scripts/inject.py (4133b), skill-card.md (2808b), SKILL.md (26971b), _meta.json (135b)\n\nFile v1.1.1:SKILL.md\n\n---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、三模态持久化体系 (🔑Serverless 云端KV存储秒级同步 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、读写分离与创立人 Master Key 身份鉴权强拦截矩阵 (无痕与访客只读保护)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V6)\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Serverless 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**三模态持久化与权限强鉴权**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 `dependencies.react`、`next.config.*`、`vite.config.*`（含 `@vitejs/plugin-react`）、或 `App.tsx`/`index.jsx`；\n - **HTML 静态原型**：检查根目录下是否存在独立 `.html` 原型文件（如 `admin.html`、`index.html`）且无前端构建依赖；\n2. **Step 2: 无法确定框架时的强制前置确认 (Interactive Clarification Fallback)**：\n - **若项目中无 `package.json` 或无法明确推断框架体系，Agent 必须向用户发起明确提问**：\n > 💬 *“请问当前项目采用的是什么前端框架？（HTML 静态原型 / Vue 2/3 / React / Next.js / Nuxt）以及 PRD 打点标注工具需要应用在哪些页面或模块？（全局所有路由页面 / 仅特定业务端页面）”*\n3. **Step 3: 各框架精准接入指导 (严禁跨形态误生成文件)**：\n - **React 工程 (Vite / Next.js / CRA / React 18)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 资源放置：将 `prd-pin-tool.js` 与 `vendor/vditor` 置于 `public/assets/js/` 和 `public/assets/vendor/`；\n - 入口引入：在 `src/main.tsx` 或 `src/App.tsx` 中写入：\n ```tsx\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - 零修改 `index.html`，零侵入原有业务组件。\n - **Vue 工程 (Vue 2 / Vue 3 / Vite / Nuxt)**：\n - 🚫 **严禁新建任何 `.html` 页面文件**；\n - 入口引入：在 `src/main.js` 或 `src/main.ts` 中写入：\n ```javascript\n import '../public/assets/js/prd-pin-tool.js';\n ```\n - **纯静态 HTML 原型 (Vanilla Multi-Page HTML)**：\n - 仅在纯静态 HTML 仓库中，才在各 HTML 页面 `` 闭合前引入 ``。\n\n---\n\n### Module 1: 💾 三模态持久化体系、一键数据迁移与跨浏览器免密直读架构 (Tri-Engine Persistence & Zero-Config Cloud Sync)\n\n> 🌟 **云端强确认后置缓存核心原则 (Post-Cloud Confirmation Cache Principle)**： \n> 1. **严禁前置假保存**：严禁在云端请求返回前静默写入 `localStorage` 假装保存成功； \n> 2. **真实 HTTP 200 强校验**：必须在收到云端 Serverless KV 返回的 `HTTP 200 OK` 且携带合法 `record` / `metadata` 实体后，才允许将数据镜像写入 `localStorage` 作为客户端离线/秒开缓存； \n> 3. **失败原子回滚**：若云端网络超时或鉴权失败，系统立即阻断并自动回滚内存状态，弹出红色错误 Toast，杜绝本地与云端数据不一致； \n> 4. **跨浏览器/多端免密直读**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 固化绑定公开只读 Bin ID，任何同事、评审方在新电脑/新浏览器（含无痕模式）中打开，启动时自动从该 Bin ID 秒级拉取最新规约，实现真正的「全员零配置直读、创立人权限写入」。\n\n> 🌟 **跨浏览器/多端免密实时同步核心架构原理 (Cross-Browser Zero-Config Protocol)**： \n> 1. **创立人写入流程 (Creator Write Flow)**：创立人通过专属 Master Key 向指定的云端 Bin 发送 `PUT` 请求，成功后数据即时在 JSONBin 全球 CDN 上更新； \n> 2. **团队/访客免密直读流程 (Visitor Zero-Config Read Flow)**：代码中通过 `DEFAULT_JSONBIN_MAPPING` 内置该项目或各页面的公开只读 Bin ID。**任何团队成员、评审方、或在任意新电脑、新浏览器（包括无痕模式）打开时，无需输入任何 Key 或进行任何配置，系统在页面启动时自动秒级拉取最新规约并热重绘**，实现真正的「一次配置、全员秒读、权限隔离、云端协同」！\n\n> 🌟 **核心战略价值 (Strategic Significance)**： \n> 彻底解决传统 HTML 原型与 SPA 页面在静态托管平台（GitHub Pages / 纯前端静态服务器 / 预览链接）上**「有展示、无后端、无法在线编辑、无法团队跨端协同」**的致命痛点。 \n> 同时提供了**「一键跨模式数据无缝迁移引擎」**：当产品经理在某一模式（如本地 Node 磁盘开发）制作完成打点后，切换至另一模式（如云端 JSONBin 或 GitHub Pages）时，系统自动弹出迁移决策弹窗，**支持一键将当前全量打点与多版本规约整体同步写入至新目标数据源**，实现零断点无缝过渡！\n\n| 方案 | 核心技术实现 | 读写延迟与快捷性 | 适用场景与权衡 (Trade-offs) |\n| :--- | :--- | :--- | :--- |\n| **🔑 方案 1：Serverless 云端 KV 存储打点 (JSONBin.io / 自建 KV) —— 【强烈推荐 / 最快捷】** | 基于 RESTful JSONBin API 架构：
• 读：`GET /v3/b/{binId}/latest?_t=timestamp`
• 写：`PUT /v3/b/{binId}` 带 `X-Master-Key` | **极速 (200~300ms)**
秒级实时直读直写，零构建等待，抗浏览器缓存 | **首选推荐**：静态托管（GitHub Pages / Vercel）、多端协同、移动端测试。零服务器运维成本，天然读写权限分离。 |\n| **☁️ 方案 2：GitHub Contents API 推送打点 (Git Commit 模式)** | 基于 GitHub REST API：
调用 `PUT /repos/{owner}/{repo}/contents/{filePath}`，将打点 Base64 编码后生成正式 Git Commit 提交入库 | **较慢 (1~3 秒)**
需经历 GitHub API 网络调用、生成 Commit 节点与分支推进 | **代码库一体化归档**：需要完整 Git Commit 审计记录与提交历史的场景。**注意：由于走 Git 推送流程耗时较长，且若依赖 GitHub Pages 重新部署构建生效周期较长**。 |\n| **💻 方案 3：本地 Node.js 磁盘直写打点 (Local Node 模式)** | 本地启动 `node server.js` 微服务，前端通过 `POST /api/save-prd` 调用 fs 模块直接修改磁盘上的物理 `prd-data-*.js` 文件 | **极快 (10~50ms)**
本机 localhost 内部直接落盘 | **纯脱机独立开发**：无外网网络、企业保密内网、纯本地研发环境。 |\n\n- **🔄 模式切换二次确认与一键数据迁移决策 (`showModeSwitchConfirmModal`)**:\n - 当在配置中心切换持久化引擎时，系统自动弹出模式迁移决策模态框：\n - 🚀 **【同步迁移当前数据到新方案 (推荐)】**：将当前已编辑的全部打点与版本（共 N 项规约）即刻同步写入到新的持久化数据源中（如向新 JSONBin 执行 `PUT` 或向 GitHub 提交 Commit），实现零断点无缝过渡；\n - 📥 **【不同步现有数据 (从新数据源拉取)】**：仅切换底层模式配置，不覆盖新目标存储，切换后直接从新数据源拉取最新规约或保持空白；\n - 🛡️ **【本地防丢安全备份】**：弹窗内置一键 `💾 下载本地备份 (.json)`，确保跨模式切换 100% 零数据丢失。\n\n---\n\n### Module 2: 🔒 读写权限分离与创立人 Master Key 身份鉴权架构 (Auth & Permission Guard)\n\n为防止外部人员、评审方或访客恶意篡改线上 PRD 原型规约，系统实现了**严格的读写权限物理隔离**：\n\n```mermaid\ngraph TD\n UserAction[\"用户触发敏感操作
(📍 新增打点 / ✏️ 编辑规约 / 🗑️ 删除 / 📂 导入 / 🔀 新建版本 / ⚙️ 排序管理)\"] --> AuthCheck{\"当前会话是否已输入 Master Key 解锁？\"}\n \n AuthCheck -->|❌ 未解锁 (无痕/访客/全新打开)| PopAuthModal[\"【强制弹出 🔒 创立人身份鉴权弹窗】
展示当前项目模式与绑定的云端 Bin ID\"]\n PopAuthModal --> EnterKey[\"输入专属 API Key / Master Key\"]\n EnterKey --> VerifyCloud[\"向云端发起真实鉴权写入验证\"]\n VerifyCloud -->|✅ 验证通过| UnlockSession[\"当前会话解锁 (sessionStorage)
自动执行刚刚点击的操作并开放全量编辑工作台\"]\n \n AuthCheck -->|✅ 已解锁 (当前会话已授权)| Proceed[\"直接执行操作并写入持久化数据\"]\n```\n\n1. **👁️ 访客只读模式（默认免密）**：\n - 任何访客、设计、测试或研发人员打开页面，系统自动从云端或底包加载最新打点、富文本 Markdown、Mermaid 流程图与数据字典；\n - 访客可全功能查阅、检索、定位发光框、查看气泡、全屏浏览 PRD 大屏、导出 PDF，但无权修改；\n2. **🔒 创立人身份强鉴权拦截矩阵（100% 敏感操作拦截）**：\n - 无论在公网环境还是在本地无痕模式下打开，触发以下任一操作时系统**立即前置弹出 `🔒 创立人身份鉴权` 模态框**：\n - 📍 **新增组件打点**（`setPRDMode('pick')`）\n - ✏️ **打开规约编辑窗**（`openEditorForPin(id)`）\n - 🗑️ **删除需求点**（`deletePin(id)`）\n - 📂 **导入 PRD 文件**（`handlePRDImportFile()`）\n - 🔀 **新建版本**（`createPRDVersion(ver)`）\n - 🗑️ **删除版本**（`deletePRDVersion(ver)`）\n - ⚙️ **排序管理模式**（`toggleDrawerManageMode()`）\n3. **🔑 Master Key 云端真实验证与会话保活**：\n - 创立人输入 Key 后，系统向云端发起真实鉴权验证；\n - 验证通过后将授权状态注入当前浏览器的 `sessionStorage`，当前会话即刻解锁全量编辑工作台；\n - 关闭无痕窗口或标签页后会话自动重置，防止 Key 遗留泄露。\n4. **⚡ 绝对单一排他模式（Strict Single Mode Exclusivity）**：\n - 当项目锁定为 `jsonbin` 模式时，哪怕在 `localhost` 打开也绝对禁止调用本地 `/api/save-prd` 写入磁盘，100% 仅向云端 JSONBin 同步；\n - 彻底杜绝多端或本地产生的交叉覆盖与脏数据。\n\n---\n\n### Module 3: 📍 交互式十字准星打点与智能空间锚定 (Pinning & Spatial Anchoring Engine)\n- **十字准星拾取器 (`bindPickListeners`)**：\n - 点击「📍 新增打点」进入打标模式，鼠标指针变为 `crosshair`，底层元素高亮蓝色虚线框；\n - **打标时自动收起右侧抽屉**：进入十字准星打标模式时，右侧抽屉**自动完全收起**，折叠为边缘胶囊 `✕ 📍 点击组件打标 (点击或ESC退出)`，彻底杜绝侧边栏遮挡底层页面组件；\n - 拾取完成或按 ESC 后，自动无缝呼出需求规格编辑工作台；\n- **自愈式弹性 CSS 选择器算法 (`getElementSelector`)**：\n - 优先提取精准 `#id`、语义化类名、结构层级路径（`div:nth-of-type(n)`）与表单属性，保证动态重绘后打点依然 100% 准确对齐；\n- **连续帧率发光框追踪算法 (Continuous Frame-Rate Glow Box Tracking)**：\n - 采用 `requestAnimationFrame` 在平滑滚动的 50 帧（约 800ms）全周期内实时调用 `getBoundingClientRect()` 动态重绘红色发光脉冲框（`position: fixed`），彻底解决页面平滑滚动导致的坐标漂移；\n- **智能容器自动展开 (Smart Container Auto-Unfolding)**：\n - 当打点目标位于未激活的 Tab 面板、已关闭的弹窗或折叠面板中时，定位时自动触发父容器的激活事件（如 `click` / Tab 切换），确保目标元素完全可见后再平滑聚焦。\n\n---\n\n### Module 4: ✍️ Vditor IR 即时渲染与多级缩进工作台 (Vditor IR Editor Workbench)\n- **独立自包含原生 Toast 浮动反馈系统 (`#prd-global-toast-container`)**：\n - 彻底解耦外部环境，内建原生浮动 Toast UI 容器（`z-index: 10000099`），不依赖任何第三方 UI 库或 `window.UI`；\n - 在保存、删除、模式切换、鉴权拦截等关键操作节点提供翡翠绿/珊瑚红/深空灰渐变的高可见度即时反馈；\n- **三方组件集成架构 (Vditor Instant Rendering Engine)**：\n - **双通道与 SPA 绝对路径加载机制 (`ensureVditorLoaded`)**：\n - 采用绝对根路径与 CDN 双通道加载，杜绝 React / Vue 深层 SPA 嵌套路由下相对路径 404（HTML 污染）导致 CSS 失效；\n - **Tailwind CSS Preflight 样式强隔离与重置修复**：\n - 强制对 `#prd-vditor-container` 实施严格样式沙箱隔离，重置并锁定工具栏 SVG 图标为标准的 `14px × 14px`，彻底杜绝 Tailwind CSS 全局 `svg { display:block; width:100% }` 造成的工具栏图标撕裂与字母巨大化（H/B/T 字母变形）问题；\n - **IR (Instant Rendering) 即时渲染模式**：\n - Typora 级的流式文档编写手感，输入 `- 列表` 或 `### 标题` 即刻呈现高保真排版；\n- **⌨️ 完整支持 Tab / Shift+Tab 多级层级缩进**：\n - **多级嵌套列表**：在无序列表、有序列表或任务清单中按 **`Tab`** 即可瞬间向右缩进生成下一层级（如 `1 -> 1.1 -> 1.1.1` 或 `• -> ◦ -> ▪`）；\n - **反向缩进 / 升级层级**：按 **`Shift + Tab`** 或行首 `Backspace` 即可瞬间回退层级；\n- **📊 交互式可视化表格直编**：\n - 彻底告别 Markdown 竖线管道符 (`| col |`)，表格直接渲染为可视 HTML 矩阵；\n - 支持鼠标点击任意单元格直接打字输入，按 `Enter/Tab` 顺畅换行换格；\n - 原生工具栏一键插入表格与进行行列扩展；\n- **🔄 纯白底色 Mermaid 矢量图表即时渲染**：\n - 支持即时渲染 Mermaid 状态图、时序图、流程图，纯白背景卡片呈现，杜绝暗色杂乱；\n- **💡 业务规约三大核心预置模板 (3 Core Standard Templates)**：\n 1. **📋 业务规则模版**：触发条件、前置校验、流转逻辑（含多级缩进）、异常分支处理；\n 2. **🔄 状态机流程图**：标准 Mermaid `graph TB` 状态机流转矢量图；\n 3. **📊 字段数据字典表**：字段名、字段类型、是否必填、枚举值/格式、业务口径与默认值表格；\n- **单一入口草稿暂存与最小化机制 (`.prd-editor-mini-dock`)**：\n - **右上角极简**：仅保留右上角关闭按钮 `✕`，彻底去除重复按钮；\n - **底部单一看页面入口**：底部操作栏保留 **「👀 暂存并看页面」** 按钮；\n - **无损暂存与一键恢复**：点击后草稿数据实时自 Vditor 实例读取并无损暂存，弹窗折叠为右下角常驻胶囊（`✏️ 编辑中: 需求名称 · 草稿已暂存`），点击 **「恢复编辑」** 即可无损还原全部内容。\n\n---\n\n### Module 5: 🗂️ 三态抽屉与左边缘双按钮控制体系 (3-State Drawer & Dual Inward Handles)\n- **左边缘双按钮控制把手组 (朝内指向抽屉，颜色与功能清晰区隔)**：\n - **上方按钮 (全收起)**：深色科技质感（`#0f172a`）+ 朝内向右箭头 `›`，点击完全收起抽屉；\n - **下方按钮 (半收起)**：专业亮蓝质感（`#2563eb`）+ 朝内紧凑标号条图标 `⇥`，点击收窄为 56px 纯数字标号竖条；\n - **收起状态极简呈现**：当抽屉完全收起时，页面右侧中间无任何多余漂浮物，仅保留右上角 `📌 需求打点 (n)` 胶囊把手；\n- **三态无缝切换 (`全展开 400px` ⇄ `半收起标号条 56px` ⇄ `完全收起 0px`)**：\n - **全展开 (400px)**：展示完整需求卡片列表、多版本下拉框、完全模糊搜索栏；\n - **半收起紧凑标号竖条 (56px Mini Rail)**：抽屉收窄为右侧极窄的纯标号竖条 `[①][②][③][④]...`，完全释放底层 95% 页面画布；\n - 点击标号条中任意序号：页面平滑滚动并闪烁定位发光框，且**在目标组件旁精准弹出打点详情气泡 (`Inspect Popover`)**，无缝查看需求；\n - 鼠标悬停标号展示需求标题 Tooltip；\n - **完全收起**：折叠至右侧边缘胶囊 `📌 需求打点 (n)`；\n- **100% 绝对统一卡片高度 (Strict 136px Unified Height)**：\n - 标题单行截断带省略号（`text-overflow: ellipsis`）；\n - 简介使用纯文本摘要提取算法（过滤代码块/表格/标记），锁定标准 2 行（36px）展示，杜绝高度塌陷；\n - 所有卡片高度**严格统一为 136px**，列表排版整齐如一；\n- **纯标题完全模糊搜索与检索系统 (Fuzzy Title Search)**：\n - 支持中英文子串包含、空格多关键词分词（如 `订单 履约`）、以及字符流顺序模糊检索，配有一键清空按钮 `✕`。\n\n---\n\n### Module 6: 🔒 排序管理安全锁与依次顺延瞬移体系 (Sequential Cascade Reordering)\n- **日常安全浏览模式（默认）**：\n - 卡片隐藏排序/删除按钮，禁用拖拽，彻底防止日常查阅和定位误触；\n- **排序与删除管理模式（点击 `⚙️ 排序管理` 开启，需创立人鉴权）**：\n - 抽屉浮现提示条与 `✓ 完成退出` 按钮；\n - **智能连续排序与依次瞬移顺延**：\n - `🔝 置顶`：直接将目标项瞬移至第 1 项，后续所有项目**自动依次向下顺延 (1 -> 2 -> 3...)**；\n - `🔢 移至`：输入目标序号，目标项精准插入，其余项目依次顺延；\n - `▲` / `▼`：单步上移/下移；\n - `⠿`：鼠标按住拖拽排序；\n - **列表滚动高度锁定与平滑高亮**：调整排序后列表滚动位置毫秒级锁定不跳动，瞬移到位的新卡片带有呼吸发光边框，页面大头针数字同步更新。\n\n---\n\n### Module 7: 🏷️ 严格多版本物理隔离与导入冲突控制 (Multi-Version & Import Resolver)\n- **版本数据模型与向后兼容**：\n - 统一由 `versionRegistry` 全局维护：\n ```javascript\n window.PRD_VERSION_REGISTRY = {\n \"activeVersion\": \"v1.0.0\",\n \"versions\": {\n \"v1.0.0\": [ /* pins */ ],\n \"v1.1.0\": [ /* pins */ ]\n }\n };\n ```\n- **严格版本物理隔离 (Strict Version Isolation & Zero Cross-Contamination)**：\n - 页面大头针徽标、右侧抽屉列表、打点详情气泡、以及全文 PRD 文档大屏**仅展示当前所选激活版本的数据**，互相版本的打点**完全物理隔离、互不可见**；\n - **新建版本一律为全新空白版本 (Default Clean Blank Slate)**：\n - 点击「➕」或「➕ 新建空白版本...」时，直接创建一个全新的空打点版本（打点数：0），方便 PM 从零开始标注下一迭代；\n - 若需要派生副本，可选择「📋 复制当前版本副本」；\n- **上传 JS 文件与同版本智能冲突处理 (Conflict Modal)**：\n - 用户上传 `.js` / `.json` 文件时弹出冲突模态框：\n - 🔴 **【覆盖现有版本】**：清空当前版本旧打点，完全替换为上传内容；\n - 🟢 **【追加合并】**：保留旧打点，将上传打点追加至末尾并重新递增编号；\n - 🔵 **【另存为新版本】**：自动命名为 `[版本]_imported`。\n\n---\n\n### Module 8: 📑 全景 PRD 文档大屏与交付导出 (PRD Document Screen & Export)\n- **抽屉常驻入口**：右侧抽屉底部常驻 `📑 查看完整PRD` 按钮；\n- **独立新网页打开 (`↗️ 在新网页打开`)**：\n - 在独立新标签页中打开纯净 PRD 大屏文档，带固定 TOC 目录大纲；\n - 适配打印排版，按 `Ctrl+P / Cmd+P` 一键导出交付级 PDF；\n- **多格式一键导出**：支持 `📥 导出 Markdown`、`💾 导出 JS 数据`、`🖨️ 打印 / 导出 PDF`。\n\n---\n\n### Module 9: ⚛️ Vue & \n\nArchive v1.1.0: 14 files, 8186008 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (272248b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (15076b), scripts/inject.py (4133b), skill-card.md (2450b), SKILL.md (20041b), _meta.json (135b)\n\nArchive v1.0.4: 14 files, 8175662 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (221888b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (13181b), scripts/inject.py (4133b), skill-card.md (2335b), SKILL.md (20301b), _meta.json (135b)\n\nArchive v1.0.3: 14 files, 8165208 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (187946b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (12005b), scripts/inject.py (4133b), skill-card.md (1933b), SKILL.md (16296b), _meta.json (135b)\n\nArchive v1.0.2: 14 files, 8162633 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (179879b), assets/server.js (6264b), assets/start.sh (413b), assets/vendor/vditor/index.css (43284b), assets/vendor/vditor/index.min.js (289157b), README.md (11632b), scripts/inject.py (4133b), skill-card.md (2396b), SKILL.md (15454b), _meta.json (135b)\n\nArchive v1.0.1: 12 files, 8079476 bytes\n\nFiles: assets/images/screenshot_drawer_overview.png (2034149b), assets/images/screenshot_full_prd_document.png (2034149b), assets/images/screenshot_mermaid_render.png (2034149b), assets/images/screenshot_visual_table_editor.png (2034149b), assets/prd-pin-tool.js (183286b), assets/server.js (6264b), assets/start.sh (413b), README.md (12259b), scripts/inject.py (3913b), skill-card.md (2131b), SKILL.md (11244b), _meta.json (135b)","readmeExcerpt":"Skill: Pm Proto Prd Pin Owner: barry0-0 Summary: A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Tags: latest:1.4.0 Version history: v1.4.0 | 2026-09-22T03:17:50.242Z | user **Cloudflare D1 边缘数据库集成与权限隔离升级** - 新增对 Cloudflare D1 边缘数据库及 Pages 反代网关的原生集成，支持全球 CDN 极速直读写及国内免翻墙部署。 - 持久化体系升级为五模态（新增 Cloudflare D1 选项）。 - 权限体系升级：访客只读与创立人密钥鉴权动态显隐所有敏感功能入口","codeSnippets":[],"executableExamples":[{"language":"tsx","snippet":"import '../public/assets/js/prd-pin-tool.js';"},{"language":"javascript","snippet":"import '../public/assets/js/prd-pin-tool.js';"},{"language":"mermaid","snippet":"graph LR\n Browser[\"浏览器 / 访客 (国内直连)\"] -->|HTTPS 请求| PagesGateway[\"Cloudflare Pages 网关
(*.pages.dev 反代)\"]\n PagesGateway -->|内部代理转发| WorkerAPI[\"Cloudflare Worker
(API 鉴权与业务逻辑)\"]\n WorkerAPI -->|D1 驱动查询/写入| D1Database[\"Cloudflare D1 (SQLite)
prd_registry 表\"]"},{"language":"sql","snippet":"CREATE TABLE IF NOT EXISTS prd_registry (\n id TEXT PRIMARY KEY,\n data TEXT NOT NULL,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP\n );"},{"language":"javascript","snippet":"export default {\n async fetch(request, env) {\n const url = new URL(request.url);\n const targetOrigin = 'https://.workers.dev';\n const targetUrl = new URL(url.pathname + url.search, targetOrigin);\n const forwardHeaders = new Headers(request.headers);\n forwardHeaders.set('Host', targetUrl.host);\n return fetch(targetUrl.toString(), {\n method: request.method,\n headers: forwardHeaders,\n body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : null\n });\n }\n };"},{"language":"mermaid","snippet":"graph TD\n UserOpen[\"用户打开原型页面\"] --> CheckAuth{\"是否已持有管理员密钥鉴权？
(isPRDEditAuthorized)\"}\n \n CheckAuth -->|❌ 未解锁 (访客只读模式)| VisitorUI[\"【动态隐藏全部管理与编辑入口】
• 隐藏抽屉顶部「排序管理」按钮
• 隐藏版本栏「新建/导入」按钮与下拉菜单管理项
• 隐藏卡片底部「编辑」与「删除」按钮，禁用拖拽
• 隐藏抽屉底部「新增打点」主按钮
• 隐藏 Mini-rail「+」按钮
• 隐藏大头针气泡「编辑需求」按钮
• 状态徽标显示「🔒 Cloudflare (访客只读)」\"]\n \n CheckAuth -->|✅ 已解锁 (管理员模式)| AdminUI[\"【全量展现完整编辑工作台】
• 展现新增打点、编辑、删除、拖拽排序
• 展现新建版本、导入数据、管理锁
• 状态徽标显示「🟢 Cloudflare (已解锁)」
• 任意修改实时同步至 Cloudflare D1\"]\n \n VisitorUI --> ClickUnlock[\"点击状态徽标 🔒 或触发鉴权\"]\n ClickUnlock --> EnterSecret[\"输入创立人专属 API Key / Secret Key\"]\n EnterSecret --> Verify[\"云端实时校验密钥有效性\"]\n Verify -->|✅ 校验通过| AdminUI"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: pm-proto-prd-pin\ndescription: 为任意 HTML 原型、Vue (2/3)、React (17/18/Next.js) 项目一键植入「交互式 PRD 打点标注器与多版本规约生成系统」。具备跨框架自主识别与前置确认协议 (无法自动识别时前置询问框架与应用范围)、全球 4 语言架构 (中/英/日/韩: zh-CN, en, ja, ko)、五模态持久化体系 (⚡Cloudflare D1 边缘数据库与 Pages 反代网关直读直写 / ⚡Supabase Serverless 数据库 / 🔑JSONBin.io 云端KV存储 / ☁️GitHub Contents API 推送提交 / 💻本地 Node.js 磁盘直写)、右侧常驻分体式悬浮胶囊 (独立👁小眼睛打点显隐开关 / 默认纯净视图免干扰)、shadcn/ui 现代极简设计系统 (Zinc & Slate Theme / Sheet / Dialog / Popover / Card / Tabs / Sonner Toast 组件体系规范)、动态权限隔离与未授权功能全量隐藏保护矩阵 (访客只读模式下彻底隐藏新增打点、编辑需求、删除打点、排序管理、版本新建/导入等入口；输入创立人专属密钥一键校验解锁)、在原型元素上高精度十字准星打点标注 (打标时自动收起右侧抽屉)、智能展开弹窗/Tab精准定位、三态抽屉 (400px全展开 / 56px标号竖条半收起 / 0px全收起)、左侧双按钮控制组 (全收起+半收起朝内区隔)、集成 Vditor IR 即时渲染 Markdown 编辑器与多级 Tab/Shift+Tab 列表缩进、纯白底色 Mermaid 矢量图表引擎与动态防截断渲染、真正交互式可视化表格直编 (零管道符如同 Excel 点击单元格打字并支持快捷增删行列)、业务规约三大核心模板快速插入 (业务规则/状态机流程图/字段数据字典)、136px 绝对统一卡片高度与纯标题模糊搜索、右侧抽屉安全管理锁与置顶/移至依次瞬移顺延排序体系、生成整页可视化 PRD 文档大屏 (带大纲检索与独立新网页大屏/PDF导出)、大头针气泡独立生命周期、编辑器单一入口草稿暂存最小化胶囊 (右下角常驻悬浮保活与一键恢复)、以及多版本严格物理隔离与上传冲突解决模态框 (覆盖/追加/另存)。当用户提到「需求打点」「原型标注」「PRD标记」「元素打标」「交互规约生成」「给原型加上PRD功能」「大头针标注」时使用本 Skill。\nagent_created: true\n---\n\n# 交互式原型 PRD 打点标注与多版本规约生成系统 (PM Prototype PRD Pin Engine V7.0 (Cloudflare D1 Edge Edition))\n\n## 📖 概述\n\n`pm-proto-prd-pin` 是一套**高保真、即插即用、生产就绪、跨框架兼容**的原型交互规约标注引擎（纯原生 Vanilla JS + CSS + Vditor IR 引擎 + Cloudflare D1 边缘数据库 / Cloudflare Pages 免翻墙网关 / Supabase / JSONBin 云端 KV / GitHub REST API / Node.js 本地微服务）。\n它不仅支持传统的静态 HTML 原型（后台管理系统、电商前台、移动端 H5、PC 门户等），还**原生兼容现代 Vue (2/3/Vite/Nuxt) 与 React (17/18/Next.js) SPA 单页应用**，瞬间赋予专业的产品经理（PM）交互式打点标注、多版本管理、**集成 Vditor 即时渲染与 Tab 多级缩进工作台**、纯白 Mermaid 流程图动态防截断渲染、全景文档大屏展示以及**五模态持久化、访客只读与动态权限隐藏矩阵**能力。\n\n---\n\n## 🎯 核心规范与模块功能模板 (1:1 完整实现标准)\n\n### Phase 0: 🌐 原生全球多语言架构体系 (Native Multi-Language i18n Protocol)\n- **四国语言内建覆盖**：\n - 🇨🇳 **简体中文 (`zh-CN` / `zh_CN`)**\n - 🇺🇸 **English (`en` / `en_US`)**\n - 🇯🇵 **日本語 (`ja` / `ja_JP`)**\n - 🇰🇷 **한국어 (`ko` / `ko_KR`)**\n- **全要素动态本地化 (115 个词条字典全覆盖)**：\n - 抽屉左侧控制按钮、顶部操作栏、排序管理模式提示条与操作按钮、搜索占位符、需求卡片脚标、Vditor 编辑器全量语言包、全景 PRD 大屏所有元数据与目录大纲、版本冲突处理对话框等 **100% 字典覆盖**；\n- **运行时无感知热切换与本地记忆**：\n - 抽屉顶部提供多语言切换下拉菜单，切换后即刻热重绘所有组件与徽标，并将偏好持久化至 `localStorage('prd_ui_lang')`；\n- **强制前置语言确认规范 (Mandatory Phase 0 Inception)**：\n - **在使用本 Skill 执行构建时，Agent 必须首先向用户确认期望使用的语言框架（中文 / 英文 / 日文 / 韩文）**；\n - 最终生成出来的原型框架、初始需求规约数据、业务规则模板、以及表头字典，必须严格采用用户指定的对应语言！\n\n---\n\n### Phase 0.5: 🧩 跨框架自主感知与前置确认协议 (Autonomous Framework Detection & Inception)\n\n> 🌟 **核心铁律 (Strict Zero-HTML Generation In Modern Frameworks)**： \n> **当识别到项目为 React (Vite / Next.js / CRA) 或 Vue (Vue 2/3 / Nuxt) 等现代前端 SPA 工程时，严禁生成任何独立的 `.html` 原型文件！** \n> 现代工程已有完整的组件与路由体系，打点工具仅作为全局外挂图层（通过 `main.tsx` / `main.js` 导入），实现零新增 HTML、零模板污染、零业务侵入。\n\n> 🌟 **核心规范 (Core Protocol)**： \n> 本引擎具备跨技术栈自适应能力。在执行打点工具集成前，Agent 必须执行两步感知与确认流程：\n\n1. **Step 1: 自动化工程架构自主嗅探 (Autonomous Inspection)**：\n - Agent 必须首先检查目标项目的目录结构与配置文件：\n - **Vue.js 工程**：检查 `package.json` 中的 `dependencies.vue`、`vue.config.js`、`vite.config.*`（含 `@vitejs/plugin-vue`）、或 `nuxt.config.*`；\n - **React 工程**：检查 `package.json` 中的 "},{"path":"README.md","content":"# 📌 PM Prototype PRD Pinning & Multi-Version Specification Engine\n\n
\n\n**The Ultimate Interactive PRD Pinning, Vditor IR Markdown Editor & Five-Modal Persistence System for HTML / Vue / React Prototypes.**\n\n[![Version](https://img.shields.io/badge/version-7.0.0-blue.svg)](https://github.com/barry0-0/pm-proto-prd-pin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![i18n](https://img.shields.io/badge/i18n-en%20%7C%20zh--CN%20%7C%20ja%20%7C%20ko-brightgreen.svg)](#-internationalization-i18n)\n[![Zero-Dependency](https://img.shields.io/badge/dependencies-zero--native-orange.svg)](#-quick-start)\n\n[English](#-english-documentation) • [简体中文](#-简体中文文档) • [日本語](#-日本語ドキュメント) • [한국어](#-한국어-문서)\n\n
\n\n---\n\n## 📸 Interface Screenshots\n\n| ✍️ Vditor IR Live Editor & Visual Tables | 🗂️ 3-State Drawer (Full / Semi Rail / Hidden) |\n| :---: | :---: |\n| ![Visual Table Editor](assets/images/screenshot_visual_table_editor.png) | ![Drawer Overview](assets/images/screenshot_drawer_overview.png) |\n| **🔄 Pure-White Mermaid Statecharts** | **📑 Full Page Deliverable PRD Screen** |\n| ![Mermaid Render](assets/images/screenshot_mermaid_render.png) | ![Full PRD Document](assets/images/screenshot_full_prd_document.png) |\n\n---\n\n# 🌐 English Documentation\n\n## ⚛️ Cross-Framework Compatibility (HTML / Vue / React) & Autonomous Detection\n\n- **Autonomous Tech-Stack Inspection**: Automatically analyzes `package.json`, Vite/Webpack configs, or HTML structure to detect if the project is **Pure HTML**, **Vue.js (2/3/Nuxt)**, or **React (18/Next.js)**.\n- **Interactive Clarification Fallback**: If the framework cannot be determined automatically, the agent prompts the user to confirm the framework and target pages/modules before proceeding.\n- **SPA Client-Side Route Sync**: Intercepts `history.pushState` / `popstate` to automatically adapt pins across SPA route transitions without page refreshes.\n- **Virtual DOM Dynamic Re-anchoring**: Automatically re-attaches pins when conditional components (`v-if` / React modals) enter or exit the DOM.\n- **Scoped CSS & Hash Filtration**: Automatically filters Vue `data-v-xxxx` and React CSS-in-JS hashes to guarantee robust long-term selector anchoring.\n- **Tailwind CSS Reset Isolation & SPA Resource Hydration**: Full CSS isolation sandbox protecting Vditor toolbar icons from Tailwind Preflight distortion, with ISO-8859-1 safe header sanitization for non-ASCII SPA routes.\n\n---\n\n## 🌟 Five-Modal Persistence System & Comparison\n\n| Persistence Mode | Underlying Architecture | Read/Write Latency | Use Cases & Key Characteristics |\n| :--- | :--- | :--- | :--- |\n| **⚡ Mode 0: Cloudflare D1 Edge Database + Pages Gateway —— [Recommended / Global Speed]** | Cloudflare D1 (SQLite) + Worker + Pages Reverse Proxy Gateway (`GET /api/prd/{docId}` Public Read, `POST` Private Write with Bearer Secret) | **Ultra-Fast (50~150ms)**
Global CDN edge cache, China mainland direct access by"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7b10aee3mw0zzb4d2xy1mn7h820ysv\",\n \"slug\": \"pm-proto-prd-pin\",\n \"version\": \"1.4.0\",\n \"publishedAt\": 1790047070242\n}"},{"path":"skill-card.md","content":"## Description:\n\nA zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for HTML, Vue, and React prototypes.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[barry0-0](https://clawhub.ai/user/barry0-0)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct managers, UX designers, and frontend developers use this skill to add in-page PRD pins, rich Markdown specifications, versioned requirements, and exportable PRD documents to existing prototypes. It supports static HTML prototypes and framework-aware integration guidance for Vue and React projects.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The release stores powerful cloud or GitHub write credentials in browser storage.\n\nMitigation: Use narrowly scoped, disposable credentials; avoid confidential PRD data until credential storage is redesigned; rotate any credentials used during testing.\n\nRisk: The bundled local write server is unauthenticated and uses permissive CORS.\n\nMitigation: Run the server only on localhost or a trusted machine; do not expose it to a network; add authentication and restrictive CORS before team or hosted use.\n\nRisk: The scanner flagged exploitable rendering weaknesses around Markdown rendering.\n\nMitigation: Sanitize rendered Markdown and HTML, and review imported or externally supplied PRD content before displaying it in shared prototypes.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/barry0-0/skills/pm-proto-prd-pin)\n- [Publisher profile](https://clawhub.ai/user/barry0-0)\n- [Artifact README](artifact/README.md)\n- [Artifact skill definition](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown guidance with code snippets, shell commands, and generated or modified project files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce PRD annotation assets, local server commands, persistence configuration, and exportable Markdown, JavaScript data, or PDF-ready PRD documents.]\n\n## Skill Version(s):\n\n1.4.0 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Skill: Pm Proto Prd Pin Owner: barry0-0 Summary: A zero-dependency, plug-and-play interactive PRD annotation and multi-version specification framework for any HTML prototype Tags: latest:1.4.0 Version history: v1.4.0 | 2026-09-22T03:17:50.242Z | user **Cloudflare D1 边缘数据库集成与权限隔离升级** - 新增对 Cloudflare D1 边缘数据库及 Pages 反代网关的原生集成，支持全球 CDN 极速直读写及国内免翻墙部署。 - 持久化体系升级为五模态（新增 Cloudflare D1 选项）。 - 权限体系升级：访客只读与创立人密钥鉴权动态显隐所有敏感功能入口","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1281,"uniquenessScore":53,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T22:45:16.054Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T17:35:03.574Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}