flutter-lens

上传截图，直接得到可运行的 Flutter 代码。UI 层面零修改，只需补充交互逻辑。

一个 AI Coding 技能（Skill），将任意 App 截图、设计稿、UI 图片，以像素级精度转换为生产可用的 Flutter 代码。适配 iOS、Android 手机及 iPad、Android Pad。

---

核心优势

零修改交付 拿到代码直接复制进项目，所有可点击区域已预留 GestureDetector，输入框使用真实 TextField，只需填入业务逻辑。

像素级还原 颜色精确到十六进制值，间距精确到 dp，字号精确到 sp。禁止使用 Colors.xxx 近似色，禁止魔法数字，所有视觉参数统一抽取为常量。

工程化输出 代码直接写入文件，文件名根据页面语义自动命名（如 home_page.dart）。包含 AppColors / AppSpacing / AppTextStyles 常量类，私有构造防止误实例化，子组件合理拆分，嵌套不超过 5 层。

全平台适配

• 手机：Safe Area、状态栏样式、iOS/Android 平台差异
• 平板：LayoutBuilder 响应式布局、Master-Detail 分栏、NavigationRail

自动质量评估 每次执行前自动判断截图质量等级（A+/A/B/C）、平台（iOS/Android）、设备类型（手机/平板）、主题模式（浅色/深色），并在使用说明中透明标注所有推断依据。

模型能力检测 自动检测当前模型是否支持图片输入，不支持时立即提示切换，避免无效执行。

---

安装

Claude Code

git clone https://github.com/lockfeel/flutter-lens.git ~/.claude/skills/flutter-lens

Codex

git clone https://github.com/lockfeel/flutter-lens.git ~/.codex/skills/flutter-lens

OpenCode

git clone https://github.com/lockfeel/flutter-lens.git ~/.opencode/skills/flutter-lens

OpenClaw

git clone https://github.com/lockfeel/flutter-lens.git ~/.openclaw/skills/flutter-lens

安装后重启 AI 工具即可生效。

---

使用

上传任意 App 截图，说出以下任意一句话即可触发：

复刻这个页面
按截图生成代码
帮我实现这个
照着这个写
复制这个界面
把图变成代码
写成 Flutter

---

输出示例

📊 质量等级：A+
📱 平台判断：iOS
📐 设备类型：手机
🌓 主题模式：浅色

分析摘要 → 颜色系统 / 间距与尺寸 / 字体排版 / 组件树 / 特殊效果

代码文件：home_page.dart（已写入项目）

使用说明 → pubspec.yaml / 交互接入点 / 推断说明 / 待替换内容

---

依赖包支持

按需自动引入，不引入多余依赖：

包	用途
flutter_svg	SVG 图标/插图
cached_network_image	网络图片缓存
google_fonts	自定义字体

---

License

MIT