CodeBuddy提供四步前端组件文档自动生成方案：一、IDE插件提取元信息生成Markdown；二、CLI增强自然语言场景示例；三、MCP模板统一结构与无障碍规范；四、Chat多轮校验修正语义与技术细节。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您已使用CodeBuddy完成多个前端组件的AI辅助开发，但尚未为这些组件建立统一、结构化、可维护的文档体系，则可能因缺乏标准化描述导致团队协作低效、新成员上手困难或组件复用率下降。以下是实现前端组件库文档自动生成的具体路径：
一、通过CodeBuddy IDE内置DocGen插件一键提取组件元信息
该方式基于AST静态分析与JSDoc注释识别，自动从.vue或.tsx源文件中抽取props、events、slots、类型定义及示例代码片段，生成符合VuePress或Docusaurus兼容格式的Markdown文档。
1、在CodeBuddy IDE中打开项目根目录，确保src/components/下存在至少一个已标注完整JSDoc的组件文件（如Button.vue）。
2、点击顶部菜单栏「Tools」→「Generate Component Docs」，触发DocGen扫描任务。
立即学习“前端免费学习笔记（深入）”；
3、在弹出配置面板中，勾选「Include TypeScript Interface Definitions」与「Auto-generate Live Demo Snippets」选项。
4、指定输出路径为docs/api/components/，点击「Run」后，系统将生成button.md、index.md及components.json元数据清单。
5、检查生成的button.md中是否包含@param {string} size - 按钮尺寸，支持 'small' | 'medium' | 'large'等带类型标注的参数说明。
二、使用CodeBuddy CLI执行自然语言驱动的文档增强指令
该方式适用于已有基础文档但内容简略、缺乏场景化用例或交互说明的组件，CLI会结合组件源码上下文补全用户视角的使用指南与边界条件说明。
1、在终端进入项目根目录，执行codebuddy doc enhance命令启动文档增强会话。
2、输入增强指令：“为Select组件补充三类真实业务场景的使用示例：搜索型下拉（含防抖）、远程加载选项（含loading状态处理）、多选回填（含标签删除交互）”。
3、等待AI解析组件逻辑后，确认插入位置为docs/api/select.md的「Usage Examples」章节末尾。
4、查看新增内容中是否包含当options为空且searchable为true时，输入框应显示‘暂无匹配项’提示而非空白列表等关键行为约束。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
三、在.codebuddy/doc-templates/目录下配置MCP文档模板规则
该方式面向中大型组件库，通过预设MCP（Model Control Protocol）模板定义字段映射关系与渲染逻辑，实现跨组件一致的文档结构输出，支持自定义文档区块与版本标记。
1、在项目根目录创建.codebuddy/doc-templates/目录，并新建select.mcp.yaml文件。
2、在该文件中声明requiredFields: [props, events, slots, accessibility]与exampleSections: [basic, advanced, a11y]。
3、为accessibility区块添加rule: “若组件含focus管理逻辑，必须列出keyboard navigation sequence（Tab/Shift+Tab/Enter/Escape）”。
4、运行codebuddy doc generate --template select.mcp.yaml --target src/components/Select.vue。
5、验证生成文档中是否强制包含支持屏幕阅读器读取当前选中项数量与索引位置（aria-live=polite + aria-activedescendant）等无障碍合规说明。
四、借助CodeBuddy Chat进行多轮对话式文档校验与迭代
该方式用于人工介入关键文档质量控制环节，通过自然语言问答实时修正AI生成文档中的语义偏差、技术错误或表述模糊问题。
1、在CodeBuddy IDE右侧打开Chat面板，上传刚生成的tabs.md文档全文。
2、发送提问：“该文档中‘activeKey prop默认值为undefined’是否准确？请比对Tabs组件源码中setup()内provide(‘tabsContext’, { activeKey: ref(props.defaultActiveKey || ‘0’) })逻辑。”
3、接收AI返回的比对结论后，点击「Fix in Doc」按钮，自动修正为activeKey prop默认值由defaultActiveKey prop决定，未传入时默认为'0'。
4、继续追问：“请为该组件补充SSR兼容性说明，指出服务端渲染时是否支持动态activeKey变更。”
5、确认AI补充段落中是否明确写出不支持服务端动态更新activeKey；首次渲染后activeKey变更需在客户端hydrate完成后生效。
