القائمة
原型标注替代 PRD 时使用：把页面目录、组件说明、状态说明和补充文档接入可运行原型，供评审、交付和后续需求说明使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use only when the user explicitly asks to run demand exploration or requirements refinement, invokes $requirements-exploration, or asks to create/update confirmed requirement docs before prototype work. Do not trigger automatically for ordinary prototype generation, vague briefs, local edits, or bug fixes.
Use only when 用户明确要求把本地截图、设计稿或高保真界面图还原成 Axhub Make client 可运行原型；或显式调用 $screenshot-to-prototype。仅提供图片作为素材、参考图、需求图或风格上下文时不要使用。
Use when 为 Axhub Make client 项目生成 UI 设计图、高保真原型视觉、生产风格网站截图、整页界面稿、UI 素材、图标、占位图或参考位图；尤其是请求提到 Image Gen、AI 图片生成、设计图、UI assets、prototype visuals 或需要判断移动端/PC 端画布比例时。
Use when the user explicitly asks to write, draft, create, update, or synthesize a PRD for an Axhub Make client project, especially when the PRD may aggregate multiple prototypes, resources, canvas notes, or existing product context.
仅当任务明确涉及 Axhub 画布、原型草稿、Excalidraw 画布文件、画布节点/批注/截图/图片，或需要把文档、原型页面、图片、流程图等产物落到画布上时使用。
Use when a Make client批注 or user request asks for 多方案探索, 多方案生成, 多方案对比, 方案对比, 设计决策, 比稿, 先出方案, or choosing among 2-3 UI/code modification directions before executing one.
| name | prototype-annotation |
| description | 原型标注替代 PRD 时使用：把页面目录、组件说明、状态说明和补充文档接入可运行原型，供评审、交付和后续需求说明使用。 |
这是 Axhub Make 客户端原型标注的技术使用指南。它面向 src/prototypes/ 下的多原型项目，说明如何把 @axhub/annotation 接到任意原型里，并维护三类标注能力：目录、组件标注、组件状态。
这个技能只约束技术接入方式。不要在这里替用户决定标注文案、设计原则、交付场景或页面风格；这些内容以用户需求、原型资料和项目规范为准。
| 场景 | 使用能力 | 数据位置 |
|---|---|---|
| 目录 | 原型入口、文档入口、链接入口 | directory.nodes |
| 组件标注 | 给页面元素挂 marker 和说明 | data.nodes[] + locator |
| 组件状态 | 给某个组件提供可切换状态 | data.nodes[].controls + useProtoDevState |
src/prototypes/<prototype-id>/。annotation-source.json 和相邻资料。AnnotationSourceDocument wire format 维护 annotation-source.json。AnnotationViewer 静态导入同一份 JSON。currentPageId，或通过 getCurrentPageId 返回。route 节点只会回调宿主；在 onDirectoryRoute 里切换页面、状态、数据源或 URL。npm run typecheck
node scripts/check-app-ready.mjs /prototypes/<prototype-name>
需要字段结构、接入代码或控件示例时，读取 references/axhub-annotation.md。
目录不是页面 marker，不需要 locator。它用于把多原型项目中的原型、文档和链接组织到标注面板里。
folder：分组目录节点。route：交给宿主处理，可切当前原型页面、状态、数据源或路由。markdown：打开内联 Markdown 文档。markdownPath：只用于目录 Markdown 文档，可指向当前原型目录内的 docs/*.md；客户端构建链路会内联为运行时读取的 markdown。link：打开其他原型地址、资源地址或外部链接。多原型入口优先用 link 指向 /prototypes/<prototype-id> 或完整 URL；当前原型内部页面/状态入口再用 route。
这里的相对 link 只用于 annotation 运行时数据。回复用户、请求验收或给预览入口时，必须使用 ready 检查返回的完整 targetUrl，或按项目规则把 /prototypes/<prototype-id> 补齐为当前 dev server 的完整 URL。
组件标注使用 data.nodes[]。每个节点至少需要稳定 id、locator、正文字段和时间字段。
data-annotation-id="<node-id>"。pageId 可省略；省略时该节点在所有当前页面上下文下显示。pageId 可以是字符串或字符串数组，用于限制 marker 出现在哪些页面/状态。hasMarkdown: false 使用 annotationText 和 images。hasMarkdown: true 使用 markdownMap[node.id]，运行时会忽略 annotationText 和 images。组件状态使用节点上的 controls。运行时会把控件值写入 proto dev state，页面通过 useProtoDevState 读取并渲染对应状态。
controls 只写可序列化字段。input、inputNumber、select、segmented、switch、checkbox、slider、textarea、text、button、colorPicker。segmented，让选项直接展示。route 也要切状态，在 onDirectoryRoute 里读取 node.payload 并调用页面自己的状态切换逻辑或 setProtoDevState。AnnotationViewerOptions 以 @axhub/annotation 类型定义为准。controls。showBrandLink、defaultMarkerIndexVisible、renderToolbarActions 这类展示增强选项只有在用户明确要求品牌入口、默认显示序号或工具栏自定义动作时才设置；常规标注接入保持默认配置。assets/ 并用最终可访问 URL；不要用本地路径、/api/markdown-file 或 ../assets/...。