qoder支持三种前端项目生成方式：云端对话框一键生成（新手首选，无需本地依赖）、cli命令直出工程骨架（终端用户适用，需空目录执行）、figma设计稿直出语义化代码（需配置personal access token并接入mcp服务）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想用自然语言一句话生成可运行的前端页面，不用配环境、不写配置文件、不手动装依赖，Qoder能直接输出带HTML/CSS/JS的完整前端项目结构。
云端对话框一键生成（新手首选）
这一步操作起来很简单，直接把需求描述输入对话框就行。
打开浏览器访问 https://www.inscode.net，页面加载后定位到中央大型对话输入框。
输入明确功能描述，例如：“创建一个响应式个人主页，包含头像区、自我介绍文字、联系方式板块，底部加一个点击后弹出提示的按钮”。
点击“项目生成”按钮，Qoder自动调用Planner Agent拆解任务→生成目录结构→初始化组件→注入状态管理→添加路由占位，整个过程在云端沙箱完成，【无需本地安装任何依赖】。
右栏“Changed Files”中确认生成了 index.html、style.css、script.js 等关键文件，点击“Accept”同步至本地 Editor。
CLI命令直出工程骨架（终端用户适用）
适合已有终端工作流、需要保留完整控制权的开发者，生成结果可立即 npm run dev 启动。
深入解析 Figma Make AI 功能，教你如何通过简单的文字描述一键生成高品质、可编辑的移动端与网页端 UI 设计。涵盖高效 Prompt 撰写、组件自动化布局及原型连线技巧，助你彻底告别空白画布焦虑，实现设计效率指数级提升。
方法一：快速初始化单页应用
在空目录下执行：qoder init --template vite-react-ts --router react-router --ui antd
【必须在空目录执行，否则可能覆盖已有 package.json】。
方法二：指定 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 IDE → 设置 → Integrations → Figma → 粘贴 token → 点击 Connect。
第三步：上传设计稿并触发生成
在项目根目录右键 → “Import from Figma” → 选择对应文件页 → 点击“Generate Code” → Qoder 自动识别图层命名、组件嵌套关系与交互标注，输出带语义化 class 名和响应式断点的 Vue/React 组件代码。
