BMAD-METHOD Excalidraw 线框渲染器为 bmad-ux 生成 IA 图与流程线框的完整实战指南【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHOD导读本文围绕 BMAD-METHOD 开源仓库中bmad-ux技能模块的 Excalidraw 线框渲染器skills/bmad-ux/assets/excalidraw-wireframe.md展开讲解如何通过子代理subagent为 UX 工作流产出两种低保真可视化产物——信息架构IA图与流程线框图flow wireframe。你将掌握.excalidraw文件的合法结构、index字段的两字符硬性约束及其背后的坑、两种图式的绘制规范以及产物在bmad-ux全流程Discovery → Finalize → 校验中的定位与去向从而能直接在 Excalidraw 桌面端或 excalidraw.com 中复现这套渲染流程。一、Excalidraw Wireframe Renderer 在 bmad-ux 中的定位bmad-ux是一个UX 引导式协作技能它负责把用户的 UX 愿景沉淀为两份对等契约——DESIGN.md视觉身份管看起来如何与EXPERIENCE.md信息架构、行为、状态、交互、无障碍、旅程管用起来如何。在 Discovery 阶段当看见比多聊两句更有助于决策例如挑选颜色令牌、选定视觉方向、勾勒 IA、mock 棘手流程时技能会按需调用**创意工具creative tools**来渲染可选项。Excalidraw 线框渲染器正是默认注册的四个创意工具之一。在 skills/bmad-ux/customize.toml 的creative_tools注册表中可以看到它的默认入口creative_tools [ file:assets/color-themes.md, file:assets/design-directions.md, file:assets/excalidraw-wireframe.md, file:assets/key-screens.md, ]其中color-themes.mdHTML 色板、design-directions.mdHTML 设计方向、excalidraw-wireframe.mdExcalidraw 线框在Discovery阶段使用而key-screens.md1:1 HTML 关键屏 mock在Finalize阶段使用。团队可以通过 override TOML{project-root}/_bmad/custom/bmad-ux.toml团队级、{project-root}/_bmad/custom/bmad-ux.user.toml个人级追加更多渲染器例如 Figma MCP、自定义 skill、基于提示词的 mood board——这正是该注册表的设计意图。渲染器的协作契约见 skills/bmad-ux/references/creative-tools.md如下父进程传入当前.memlog.md、相关历史.working/捕获物、用户本次意图、输出路径子代理产出将产物写入{doc_workspace}/.working/文件名具有描述性子代理返回仅一份紧凑摘要文件路径、每个变体一行说明、模式覆盖情况绝不在父上下文里倾倒完整 payload。二、产物命名与文件路径约定渲染器作为子代理提示词subagent prompt一次运行只产出一个.excalidraw文件按图式类型落入两个命名模式之一图式输出路径模式说明IA 图.working/ia-{date}.excalidraw信息架构图{date}为当前系统日期流程线框.working/flow-{name}-{date}.excalidraw流程线框图{name}为流程名{date}为日期{date}在技能激活时由resolve_config.py解析--key core.project_name --key modules.bmm.planning_artifacts见 skills/bmad-ux/SKILL.md 的 On Activation 步骤取自当前系统时间。.working/目录位于运行文件夹{doc_workspace}内其中{doc_workspace}绑定到{workflow.ux_output_path}/{workflow.run_folder_pattern}/默认展开为{planning_artifacts}/ux-designs/ux-{project_name}-{date}/见 skills/bmad-ux/customize.toml 的ux_output_path与run_folder_pattern。三、CRITICALindex字段必须恰好两个字符这是本渲染器提示词中唯一被标注为CRITICAL的约束也是最容易踩的坑每个元素的index字段必须恰好是两个字符a0、aZ、b3……。三个字符的 index 会导致静默的Error: invalid file且没有任何诊断输出。所谓静默意味着文件写入成功、语法看似正常但用户用 Excalidraw 打开时只会看到一个笼统的错误提示无法直接定位到具体是哪个元素、哪一行的问题。因此提示词要求顺序分配跨所有元素顺序递增不跳号推进规则当尾随字母数字耗尽时前导字母进位——顺序为a0..a9, aA..aZ然后b0..依此类推写前校验落盘之前必须自查所有index均为两字符。从该约束可以推断结合 Excalidraw 官方文件格式对元素排序字段的解析实现index是 Excalidraw 用于确定元素绘制层级z-order的排序键其内部按字符串比较排序对长度有严格校验超长即整体判定文件非法。实战中建议用一个一次性脚本或正则[a-zA-Z0-9]{2,}扫描全部elements[].index确保无一遗漏。四、合法的 .excalidraw 文件结构提示词给出了文件顶层骨架必须是合法的 Excalidraw 文件{ type: excalidraw, version: 2, source: https://excalidraw.com, elements: [], appState: { gridSize: null, viewBackgroundColor: #ffffff }, files: {} }字段语义type/version/source标识文件类型与格式版本source固定为官方源https://excalidraw.com这是 Excalidraw 官方导出格式的标准签名elements全部图形元素的数组是文件主体appState画布级状态此处规定gridSize: null不强制网格对齐、viewBackgroundColor: #ffffff白色背景files内嵌图片/二进制资源的映射IA 图与流程线框通常为空对象{}。4.1 通用元素字段每个元素必须包含 Excalidraw 标准元素字段字段作用id元素唯一标识type元素类型如rectangle、text、arrow、ellipsex/y元素左上角画布坐标width/height元素尺寸angle旋转角度弧度strokeColor/backgroundColor描边色 / 填充色fillStyle填充风格如hachure、solid、cross-hatchstrokeWidth/strokeStyle描边粗细 / 描边风格实线、虚线等roughness手绘粗糙度Excalidraw 的手绘风格参数opacity透明度groupIds所属分组 ID 数组frameId所属画框 ID无则空roundness圆角设置seed随机种子决定手绘抖动形状version/versionNonce元素版本号与防冲突随机数isDeleted删除标记导出的有效元素通常为falseboundElements绑定到该元素的连线/文本引用updated更新时间戳link外链可为 nulllocked是否锁定index两字符排序键见上文 CRITICAL4.2 文本元素附加字段当元素是文本时还需补充字段作用text文本内容fontSize字号fontFamily字体族textAlign水平对齐verticalAlign垂直对齐baseline基线偏移containerId宿主容器如所在矩形的 IDoriginalText原始文本保留字面内容lineHeight行高五、两种图式的绘制规范渲染器按需产出两种低保真图式二者定位不同绘制规范也不同。5.1 IA 图信息架构图内容盒子与箭头boxes-and-arrows覆盖认证栈auth stack主应用各页面/界面main app surfaces模态路由modal routes设置栈settings stack横切性能力/入口cross-cutting affordances如全局导航、通知等。风格颜色克制使用仅用于区分类别category不做装饰性上色布局以人类可读性为第一目标而非图论意义上的图正确性layout for human legibility, not graph correctness——即允许重叠归类、按阅读顺序摆放不必追求严格的层级树状图。IA 图服务于 Discovery 阶段的surface closure检查每个被陈述的需求都要有承载它的界面每个界面都要有落在其上的旅程。IA 图就是这种闭合关系的可视化载体。5.2 流程线框图Flow Wireframe内容逐屏矩形从左到右排布screen-by-screen rectangles left-to-right屏内用简单形状表达低保真内容块导航栏nav bar、CTA 按钮、内容块content blocks箭头标注触发转场的用户动作Arrows labeled with the user action that causes transition例如点击注册、滑动删除在关键节点与边界用例旁附加批注Annotations alongside for climax and edge-case beats——即流程的高潮节拍与边界情形要在图上有文字说明而不是只在正文里描述。流程线框服务于 EXPERIENCE.md 中命名主角旅程named-protagonist journeys的可视化帮助用户在进入 Finalize 提炼之前先对关键流程的转折点达成共识。六、返回父进程的摘要契约渲染完成后子代理必须向父进程返回紧凑摘要且不得把 JSON 倾倒进父上下文。摘要包含文件路径file path图式类型kindIA 或 flow单行主题one-line subject元素数量element count全部 index 均为两字符的确认confirmation that all indices are two-character。最后还要告知用户去 Excalidraw 桌面端或 excalidraw.com 打开该文件。这一契约与 skills/bmad-ux/references/creative-tools.md 中渲染器契约一致父进程绝不持有完整 payload只消费摘要避免污染对话上下文。七、产物在完整工作流中的去向.working/是整个运行过程的审计轨迹audit trail运行结束仍保留。该产物的生命周期贯穿bmad-ux的三个阶段见 skills/bmad-ux/SKILL.mdDiscoveryExcalidraw 线框渲染器在此阶段被调用注册于creative_tools产物落在.working/FinalizeLayout extracted, artifacts promoted提炼子代理重读.working/与imports/中的每个产物把视觉决策抬升进DESIGN.md、行为决策抬升进EXPERIENCE.md随后.working/中具有持续参考价值的产物被**提升promote**到{doc_workspace}/wireframes/Excalidraw 文件或{doc_workspace}/mockups/HTML mock。提升门槛是未来阅读DESIGN.md或EXPERIENCE.md的人会不会打开它默认留在.working/Mock coverage confirmed逐屏走查每个 IA surface区分mocked与spine-only提升后的线框以行内相对链接inline relative links挂到相关 spine 章节并重申一次spines-win-on-conflict契约胜出原则DESIGN.md与EXPERIENCE.md在冲突时压过任何 mock、线框或 importValidate / Reviewer Gate校验规则中的Pass 1 第 5 项 Visual reference coverage会逐一核对mockups/、wireframes/、imports/中的每个文件要求 spines 在相关章节行内链接到它们并说明其所阐释的内容见 skills/bmad-ux/references/validate.md同时检查是否存在孤儿文件orphans与不具体的引用。因此一张合格的 Excalidraw 线框不仅是 Discovery 阶段的讨论工具还可能在 Finalize 被提升为wireframes/中的正式视觉参考进而成为 spine 的链接锚点与后续校验的检查对象。八、Headless 模式下的行为差异当运行处于 headless 模式调用方设置headless: true、由其他 skill 或非交互 runner 触发、或激活步骤声明时行为有明确差异见 skills/bmad-ux/references/headless.md创意工具默认关闭Excalidraw 线框这类渲染器默认不执行调用方可显式覆盖开启即使产出了产物也只落在.working/除非调用方明确指示否则不提升不问候、不提问、不执行浏览器打开步骤。九、实战核查清单结合全文将本渲染器落地到真实运行中时建议按以下清单自查命名IA 图 →.working/ia-{date}.excalidraw流程线框 →.working/flow-{name}-{date}.excalidrawindex 两字符所有elements[].index均为两字符顺序分配无跳号a0..a9, aA..aZ, b0..文件骨架type/version/source、elements、appStategridSize: null、viewBackgroundColor: #ffffff、files: {}齐全元素字段通用字段完整文本元素补齐text/fontSize/fontFamily/textAlign/verticalAlign/baseline/containerId/originalText/lineHeight图式语义IA 图按类别克制用色、优先人类可读流程线框从左到右逐屏、箭头标注用户动作、关键节拍与边界情形有批注摘要返回只回路径/类型/单行主题/元素数/index 确认五要素不倾倒 JSON打开方式提示用户在 Excalidraw 桌面端或 excalidraw.com 打开。遵循以上步骤即可让 Excalidraw 线框渲染器稳定地产出可被bmad-ux后续 Finalize 提升、被校验规则复查的合法.excalidraw文件把 IA 与关键流程的决策以低保真、高可读的形式固化到 UX 工作流中。【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHOD创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考