Qoder支持三种前端项目生成方式：Quest模式云端一键生成标准项目、CLI命令直出工程骨架、Figma设计稿直出语义化代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想用自然语言一句话生成可运行的前端页面，不用配环境、不写配置文件、不手动装依赖，Qoder能直接输出带HTML/CSS/JS的完整前端项目结构。
用Quest模式一键生成标准前端项目
这是最轻量、最推荐给新手的路径，所有操作在云端沙箱完成，无需本地安装任何依赖。
1、打开 Qoder 桌面端或访问 inscode.net，进入中央对话框。
2、输入明确的技术栈与功能描述，例如：“创建一个 Vue3 + Pinia + Element Plus 的用户管理页，含搜索框、表格展示、分页器和新增按钮，表格列包括姓名、邮箱、状态、操作。”
立即学习“前端免费学习笔记（深入）”；
3、点击“项目生成”后，Qoder 自动调用 Planner Agent 拆解任务：生成目录结构 → 初始化组件 → 封装 API 请求 → 注入状态管理 → 添加路由占位。这一步不经过 CLI 或本地 node_modules 扫描，避免因缓存导致的模板错配。
4、右栏“Changed Files”中确认生成了 src/views/UserList.vue、src/stores/user.ts、src/api/user.ts 等关键文件，点击“Accept”同步至本地 Editor。
用CLI命令直出前端工程骨架
适合已有终端工作流、需要保留完整控制权的开发者，生成结果可立即 npm run dev 启动。
方法一：快速初始化单页应用
在空目录下执行：qoder init --template vite-react-ts --router react-router --ui antd
该命令会拉取官方认证的 Vite-React-TS 模板，并自动注入 React Router 配置与 Ant Design 组件注册逻辑，【注意：必须在空目录执行，否则可能覆盖已有 package.json】。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：指定 CSS 方案与响应式适配
执行：qoder init --template vite-vue3-ts --css css-modules --viewport vw
生成的 vite.config.ts 中已预置 postcss-px-to-viewport 插件，且 src/App.vue 的根元素 class 被设为 vw-layout，确保后续开发中所有 px 单位自动转为 vw。
从Figma设计稿直出语义化前端代码
当你已有高保真UI设计稿，想跳过手写HTML/CSS环节，直接获得结构清晰、语义准确的前端实现。
第一步：获取并配置 Figma Personal Access Token
登录 Figma → Settings → Security → Generate new token → 勾选全部权限 → 复制 token（仅显示一次）。
第二步：在 Qoder 中接入 Figma MCP 服务
打开 Qoder 设置 → MCP服务 → 安装 Figma → 粘贴上一步复制的 token → 点击测试连接，状态变为绿色即成功。
第三步：提交设计链接并触发生成
在 Figma 中打开目标设计页 → 右键 → “Copy link to selection” → 回到 Qoder 对话框，粘贴链接并追加指令：“请严格按此设计稿生成 React 18 + TypeScript 页面，使用 CSS Modules，所有按钮需绑定 onClick 事件占位符，图片用 placeholder.svg 替代。”
Qoder 将调用 Design2Code Agent 解析图层结构，自动识别导航栏、卡片容器、表单域等语义区块，并输出符合 aria-label 与 role 属性规范的 JSX 代码。
