Menü
原型标注替代 PRD 时使用：把页面目录、组件说明、状态说明和补充文档接入可运行原型，供评审、交付和后续需求说明使用。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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/...。