qoder支持三种方式快速生成react通用组件：一、在已打开项目中用智能体模式输入自然语言指令生成；二、通过cli命令批量创建带测试和故事书的组件模板；三、从figma设计稿链接直出响应式react组件，自动映射交互逻辑与tailwind样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速生成一个可复用的 React 通用组件（比如带搜索的下拉选择器、响应式卡片网格、带加载态的按钮），但不想从零写 props 类型、状态逻辑和样式结构——Qoder 支持通过自然语言指令直接生成符合项目上下文的标准化组件，无需手动拼接 hooks 或配置 TypeScript 接口。
在 Qoder IDE 中用智能体模式生成组件
这一步必须在已打开的 React 项目中进行，否则 Qoder 无法感知 tsconfig.json、eslint 配置及已有组件命名规范。
第一步：按 ⌘ L（macOS）或 Ctrl L（Windows）唤出智能会话面板，确保右上角模式切换为智能体（Agent Mode），不是“智能问答”。
第二步：输入明确的自然语言指令，例如：“生成一个支持多选、带搜索过滤、异步加载选项的 Select 组件，使用 TypeScript 编写，props 接口需包含 options、value、onChange、loading 等字段，并默认导出。”
第三步：等待 Qoder 自动执行三阶段流程：先解析语义→匹配项目中已有的 UI 库（如是否用了 Ant Design 或自定义 hooks）→生成 src/components/SelectAsync.tsx 及配套类型定义文件。生成完成后，文件会自动出现在 Explorer 中且已高亮新内容。
注意：若项目中存在同名组件（如已有 Select.tsx），Qoder 默认会在文件名后追加 _async 或 _v2，【不会覆盖原文件】。
用 CLI 快速生成独立组件模板
适合尚未打开项目、或需要批量生成多个基础组件骨架的场景。
方法一：终端中进入项目根目录，执行：
qoder generate component --name=DataCard --type=react-ts --with-hooks
该命令将创建 src/components/DataCard/DataCard.tsx、DataCard.stories.tsx（Storybook 示例）、DataCard.test.tsx（Jest 测试桩）及 DataCard.types.ts，所有文件均预置了 useState + useEffect 基础逻辑和 JSDoc 注释模板。
方法二：若需指定父级目录或继承已有样式体系，追加 --dir=src/ui/atoms：
qoder generate component --name=IconBtn --type=react-ts --dir=src/ui/atoms --with-styles
【--with-styles 参数会强制生成对应的 .module.css 文件，并在组件中 import 使用】，不加则只生成 TSX。
从 Figma 设计稿直出 React 组件
当你已有 Figma 页面链接，且希望像素级还原布局与交互逻辑时，此路径最高效。
第一步：在 Figma 中选中目标画板 → 右键 → Copy link to selection。
第二步：回到 Qoder IDE 的智能会话面板，粘贴链接并追加指令：“将此设计稿转为 React 函数组件，使用 Tailwind CSS 实现响应式布局，按钮点击需触发 onAction 回调，输入框需支持受控模式。”
第三步：Qoder 会调用 Figma MCP 插件解析图层结构，识别文本、容器、交互状态（hover/active），自动映射为 JSX + useState + Tailwind class 字符串。生成结果中所有 className 都经过 purge 优化，无冗余样式。
这一步操作起来很简单，直接把链接粘贴进去就行，但要求 Figma token 已在 Qoder 设置中正确配置，否则会卡在“正在连接设计系统”状态。
