ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Argent Lens 实测:让 AI 实时生成多套 UI 设计方案,你在窗口里直接挑选

Argent Lens 实测:让 AI 实时生成多套 UI 设计方案,你在窗口里直接挑选 Argent Lens 实测让 AI 实时生成多套 UI 设计方案你在窗口里直接挑选【免费下载链接】argentAn agentic toolkit to control, debug, and profile iOS and Android apps. Made by Software Mansion.项目地址: https://gitcode.com/gh_mirrors/arg/argentArgent 是 Software Mansion 开源的 iOS / Android 应用控制、调试与性能分析工具集而Argent Lens是其中最有意思的AI 设计评审窗口你只需向 AI 说一句重新设计这个头部AI 就会实时渲染出多套 UI 设计方案并截图全部摆在预览窗口的悬浮卡片里你勾选中意的那套、写下批注点击 Complete改动就自动写回源码。Argent Lens 是什么AI 生成的 UI 方案直接摆进窗口传统流程里AI 帮你改 UI 通常是你说一句、它改一版、你再看一遍来回拉扯好几轮。Argent Lens 把这个流程反转了每个元素至少 2 套方案AI 不是直接替你决定而是把候选设计都挂出来让你挑每张缩略图都是真机截图方案不是 mockup是 AI 真的把变体渲染到模拟器上、截图后再提交的一条细线连到真实元素悬浮卡片会锚定到实时画面上对应的按钮、标题栏不会张冠李戴支持逐元素批注 全局方向可以只挑方案也可以这版保留颜色但改圆角这样混合表达官方文档把完整流程写得很清楚见 lens.mdx。实测一轮完整的设计评审是怎么跑的第一步用自然语言提出开放式设计需求在 AI 编码会话里直接说人话例如重新设计 Favourites 页的头部给我三个方案让底部 Tab 栏更现代一些换个主按钮风格其中一个方案保留现有配色注意关键词是开放式需求。如果是把按钮下移 8px这种唯一解AI 会直接改完不会制造多余的方案。第二步AI 逐个构建方案并真机截图这是实测中最惊喜的部分。以 SKILL.md 中定义的工作流为准AI 会按构建变体 → 应用到模拟器 → 截图 → 提交的循环跑完每个方案先在代码里实现方案 A热更新让运行中的 App 显示它驱动 App 导航到目标屏幕调用screenshot截图调用propose_variant工具把这张截图挂到 Lens 窗口工具定义见 propose-variant.ts回滚代码再构建方案 B重复以上步骤所以你在窗口里看到的每张卡片背后都是一次完整的改码 → 运行 → 截图而非画出来的假图。第三步在窗口里挑选、批注、提交窗口中间的悬浮卡片就是选择区对照 lens.mdx 的控件说明一轮评审的交互是控件作用方案卡片为元素选定一个方案或不选以保留现状元素批注给某个元素附加修改意见批注检查器把评论钉到屏幕上任意元素包括没有方案的Show them展开藏在其他屏幕上的选择Overall comment给整轮评审一个总体方向Complete把决定提交给 AIClear清空本轮所有勾选和评论第四步决定自动回传给 AI源码随即更新点击 Complete 后你的选择会以一条[Argent Lens]前缀的消息注入 AI 会话——包含选中的方案名、对应源文件路径、每元素批注和全局方向。AI 据此把选中方案写回代码如果批注里还有开放性问题它会再开一轮新方案。反馈消息的拼装逻辑可以在 lens.ts 的formatLensFeedback里看到。两种启动方式MCP 会话与 argent lens 命令方式一在现有 MCP 会话中AI 调propose_variant挂出方案后调用一次await_user_selection阻塞等待你点 Complete。适合你本来就在用 MCP 跑自动化流程的场景。方式二argent lens独立命令推荐新手argent lens # 在窗口里挑选绑定的 AI 智能体 argent lens --agent codex # 直接指定一个智能体 argent lens --forget # 清除记住的智能体选择这条命令会打开 Lens 窗口并在你当前终端里接管一个全新的 AI 会话Warp、VS Code 终端、tmux 都行若是 iTerm / Terminal.app 之外的环境会另开一个窗口。窗口实时串流正在运行的模拟器你的每次提交都会像打字一样被注入该会话。智能体候选列表和检测逻辑见 lens-agents.ts支持 Claude Code、Codex CLI、Gemini CLI、OpenCode、Cursor CLI 五种SSE 事件流中继实现在 lens-stream.ts。环境要求与上手清单 项目要求功能开关默认关闭需先执行argent enable argent-lens加--scope project可仅限当前项目系统仅 macOSargent lens命令依赖终端控制能力设备支持 iOS 模拟器与 Android 模拟器暂不支持 Chromium / ElectronAI 智能体PATH 上至少装有上述 5 个智能体 CLI 之一仓库如需本地构建git clone https://gitcode.com/gh_mirrors/arg/argent关于隐私官方明确说明遥测只收集评审轮次的聚合计数元素数、方案数不收集评论文本、元素名和方案代码。总结它把AI 写 UI从黑盒变成选择题Argent Lens 实测下来最大的价值是把 AI 设计输出的猜中即中变成了看得见、挑得中、改得回AI 负责穷举候选并真机验证你负责审美决策和方向引导两者通过窗口里的悬浮卡片解耦。对 React Native、Flutter 这类以 UI 迭代为主的团队这套AI 出多方案 → 窗口里挑选 → 自动落码的闭环值得完整体验一遍。【免费下载链接】argentAn agentic toolkit to control, debug, and profile iOS and Android apps. Made by Software Mansion.项目地址: https://gitcode.com/gh_mirrors/arg/argent创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表