CodeBuddy支持三种高效生成带状态React组件的方式：一是自然语言指令在VS Code中一键生成含useState和TypeScript的组件；二是通过Figma设计稿自动转换为含useEffect和清理逻辑的Hook组件；三是CLI命令批量生成自定义Hook及配套UI组件，并智能适配zustand或jotai等状态库。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速生成一个带状态管理的React组件，而不是从零手写useState、useEffect和JSX结构，CodeBuddy能直接根据自然语言描述输出可运行代码，省去手动推导逻辑和类型定义的时间。
用自然语言指令生成带状态的React组件
这一步适合已有明确交互需求但不想写样板逻辑的场景，比如“点击按钮切换开关状态并显示文字”。
在VS Code中打开项目任意.tsx文件，在空白处输入类似这样的指令：“生成一个带开关状态的Toggle组件，初始关闭，点击后切换on/off，下方显示当前状态文字，使用useState和TypeScript”。
将光标放在该行末尾，按下Ctrl+Enter（Mac为Cmd+Enter），CodeBuddy会立即在下方插入完整组件代码。
生成结果自动包含interface定义、useState初始化、事件处理函数及JSX渲染结构，【无需手动补全return语句或闭合标签】。
通过Figma设计稿生成含状态逻辑的React组件
当你已有视觉稿且交互已标注（如“点击头像弹出编辑浮层”“下拉刷新触发数据重载”），Design-to-Code模式能识别这些行为并注入对应Hook逻辑。
第一步：在CodeBuddy IDE右侧面板点击Design Mode，粘贴具备“可查看”权限的Figma共享链接。
第二步：确保Figma图层启用Auto Layout，并在组件选择面板中勾选目标模块（例如“订单状态卡片”）→右键选择Convert to React Hook Component。
第三步：在配置窗口中，将State Management设为useState + useEffect，勾选Generate TypeScript Interface，点击生成。
CodeBuddy会在src/components/hooks/下创建useOrderStatusCard.ts，其中已封装状态变更、异步加载、错误回退等逻辑，【不会遗漏useEffect清理函数或AbortController取消机制】。
用CLI命令批量生成Hooks与组件组合
方法一：终端进入项目根目录，执行codebuddy generate，然后输入：“生成useCartManager Hook，支持添加商品、更新数量、删除项、计算总价，返回cartItems、total、addItem、updateQty、removeItem”。
方法二：直接运行带参数的单行命令：codebuddy generate --hook "useAuth" --desc "管理登录态，含login/logout/isAuthenticated，token存localStorage"。
确认写入后，CLI自动在src/hooks/生成ts文件，并同步在src/components/创建配套UI组件（如AuthForm.tsx），两者通过props或context连接。
若项目中已存在zustand或jotai，CLI会检测package.json并优先采用对应状态库写法，而非强制useState。
