在Qoder中创建React组件需依次完成四步：1. 确认Node.js≥18.17.0且npm≥9.6.7；2. 运行qoder init --template=react-vite-ts初始化项目；3. 配置Figma Personal access token并勾选全部权限；4. 提供Figma链接与结构化提示词，触发AI生成并校验组件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Qoder中创建React组件前，必须确保开发环境、项目结构和基础依赖三者就位，缺一不可。没有提前配置好Figma访问凭证或本地Node.js环境，后续AI生成组件会直接中断报错。
确认本地开发环境已就绪
打开终端执行 node -v 和 npm -v，输出版本号需满足：Node.js ≥ 18.17.0，npm ≥ 9.6.7。若未安装，从Node.js官网下载LTS版本，【不要用nvm安装旧版16.x】，否则Qoder的Vite-TS模板会因ES模块兼容问题启动失败。
这一步操作起来很简单，直接把文件拖进去就行。
初始化标准React项目结构
在空目录中运行命令：
qoder init --template=react-vite-ts
该命令自动拉取Qoder官方维护的React+Vite+TypeScript模板，内置Router 6、Zustand状态管理骨架、Ant Design Mobile按需加载配置，以及预设的src/utils/request.ts Axios封装实例。模板已强制启用postcss-px-to-viewport vw适配方案，无需手动配置。
执行完成后，运行qoder dev，终端显示Listening on http://localhost:5173即表示前端服务已就绪。
配置Figma接入凭证（如需设计稿转代码）
方法一：登录Figma官网 → 左上角头像 → Settings → Security → Personal access tokens → Generate new token。
方法二：在Qoder中进入设置 → MCP服务 → Figma → 点击“安装”，粘贴刚生成的token。
【token仅显示一次，且必须勾选所有权限范围】。若测试连接报403错误，大概率是公司网络屏蔽了Figma API，此时需切换至手机热点重试。
准备设计稿与语义化提示词
第一步：在Figma中选中目标画板 → 右键 → “Copy link to selection”获取唯一链接。
第二步：在Qoder智能会话框中输入结构化提示词，例如：“基于此Figma链接，生成一个带表单验证的用户注册React组件，使用Zustand管理状态，字段包含邮箱、密码、确认密码，提交时调用src/utils/request.ts的POST接口。”
第三步：等待Planners拆解任务、Coders生成文件、Verifiers执行vite build校验。右栏“Changed Files”出现src/components/UserRegister.tsx和src/stores/userStore.ts后，点击“Accept”同步到本地。
