fitten code 插件可将自然语言或截图快速转为 flutter ui 代码：安装后通过 ctrl+i/cmd+i 输入描述生成 widget，支持约束关键词、引用变量、指定组件类型；截图需配合 github copilot，调用 vision 分析生成高还原度代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速把设计稿或文字描述变成可运行的 Flutter UI 代码，而不是手动写 Scaffold、Column、Padding 套娃到头晕。
安装并启用 Fitten Code 插件
打开 VS Code → 左侧扩展面板 → 搜索 “Fitten Code” → 点击安装 → 安装完成后点击“重新加载”按钮使插件生效。
这一步必须完成，否则后续所有命令都无法触发。插件图标会在右下角状态栏出现，【未看到图标说明插件未激活】。
用自然语言生成基础 Widget
在任意 .dart 文件中，将光标放在类内部、build 方法内（比如 Scaffold 的 body 位置），按 Ctrl+I（Windows）或 Cmd+I（Mac）唤出指令框。
输入类似 “一个带标题‘用户资料’、头像圆角、下方三行信息（姓名、邮箱、电话）的卡片” → 回车确认。
插件会自动生成包含 CircleAvatar、Column、Text 等组件的完整代码块，并插入到光标位置。生成结果默认使用 const 构造，避免不必要的重建。
Microsoft Copilot是微软推出的AI助手，整合于Windows、Edge、GitHub及Microsoft 365等产品中。它内置于Word、Excel、PowerPoint、Outlook和Teams等应用，通过大型语言模型与Microsoft Graph中的组织数据（如文件、邮件）相结合，提供文档起草、数据分析、会议总结等上下文感知的智能协助，旨在提升工作效率与创造力。
精准控制生成效果的三种方式
方法一：添加约束关键词
在描述末尾加上 “使用 SizedBox 宽高均为 80” 或 “主色为 Colors.blueAccent”，生成的代码会直接套用对应 widget 或参数。
方法二：引用已有变量名
如果项目里已定义了 final user = User(name: '张三')，可在提示词中写 “显示 user.name 和 user.email”，生成代码会直接读取该变量，【不会新建 dummy 数据】。
方法三：指定 Widget 类型优先级
输入 “用 ListTile 实现，不要用 Column” 可强制跳过默认布局推导，直接生成 ListTile 结构。此方式适合已有明确组件选型的场景。
从截图/图片生成 UI（需配合 Copilot）
第一步：确保系统已登录 GitHub 账号并启用 GitHub Copilot。
第二步：截取 Sketch/Figma 设计图局部（如按钮区域）→ 复制到剪贴板。
第三步：在 Dart 文件中按 Ctrl+Shift+P → 输入 “Fitten: Generate UI from Image” → 回车。
第四步：等待 3～8 秒，插件调用 Copilot Vision 分析图像 → 输出对应 Flutter 代码，含宽高、颜色、字体大小等还原参数。
注意：截图需清晰，文字区域不能模糊，否则生成的 TextStyle.fontSize 可能偏差 ±2px。
