Qoder提供三种React组件库搭建路径：一、CLI一键初始化标准模板，含TypeScript、Storybook等预配置；二、现有项目无损增强，自动注入构建与文档能力；三、Figma设计稿直出可运行组件代码及配套文档。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在三天内交付一套可复用、带文档、能按需加载的React组件库，但不想手动配置TypeScript编译、Storybook、Rollup打包链路和MDX文档生成——Qoder提供三种差异化的搭建路径，适配从零启动、已有项目增强、设计稿驱动三种真实场景。
方式一：CLI一键初始化标准组件库模板
这一步操作起来很简单，直接在空目录中运行命令即可，无需提前创建任何配置文件或安装依赖。
执行 qoder init --template=react-component-lib，该命令将自动拉取Qoder官方维护的组件库模板，内置TypeScript 5.5+、Rollup 4.x、Storybook 8.3、VitePress 1.2及MDX支持。
模板已预置：【src/components/Button/Button.tsx + Button.stories.tsx + Button.mdx三件套】、按需加载入口 src/index.ts（自动导出named exports）、构建产物类型声明生成逻辑、以及vitepress/docs目录下的默认文档站点结构。
运行 qoder dev 启动本地文档服务，终端输出 http://localhost:5174 即表示文档环境就绪；运行 qoder build 生成 esm/cjs/types 三端产物，输出至 dist/ 目录。
方式二：在现有React项目中注入组件库能力
适用于已有业务项目需沉淀公共组件，且不希望破坏当前构建流程的场景。
方法一：打开Qoder IDE → 右键点击项目根目录 → 选择「Add Component Library Support」→ 确认注入 rollup.config.js、tsconfig.build.json、.storybook/main.ts 及 vitepress/config.ts。
方法二：在终端进入项目根目录后，执行 qoder enhance --feature=component-library，Qoder将自动识别当前框架（Vite/CRA/Next.js）并注入兼容配置，【不覆盖原有vite.config.ts或webpack.config.js】，仅新增专用构建脚本与文档入口。
注入完成后，新建 src/lib 目录，所有以 .tsx 结尾的文件将被自动纳入组件库构建范围；在任意组件文件顶部添加 /** @component */ 注释，即可被Storybook自动收录为独立演示案例。
方式三：Figma设计稿直出可运行组件代码
适合UI规范已落地、设计师主导组件定义、前端只需“翻译”而非“设计”的协作模式。
第一步：在Figma中选中单个组件画板（如Button Primary），右键 → Copy link to selection。
第二步：在Qoder智能会话面板输入指令：“根据此Figma链接生成React函数组件，使用TypeScript + Tailwind CSS，支持size（sm/md/lg）和variant（primary/outline）两个prop，导出默认组件及命名导出ButtonProps接口”。
第三步：等待Qoder Agent完成视觉解析→CSS提取→JSX生成→类型推导→MDX文档撰写全流程，确认右侧面板显示“Button.tsx、Button.stories.tsx、Button.mdx 已生成”后，点击Accept同步至本地 src/components/Button/ 目录。
第四步：执行 qoder storybook 查看实时渲染效果，Qoder会自动将新组件注册进Storybook索引，无需手动修改 main.ts。
