无需自己写半行代码:让 AI 编程智能体(Agent)化身神笔马良为我们自动仿制 App 界面

概述

当列位秃头小码农们无意间瞥见一个 UI 美轮美奂的 App 时,是否有种深深"羡慕嫉妒恨"的感觉,"如果我能自己撸出这样美妙的界面就好了",微秃码农们如是说。

你还真别说,借助于当今大红大紫的 AI 编程智能体(Agent)也许真的会让宝子们美梦成真呢?

在本篇博文中,您将学到如下内容:

  1. 照葫芦画瓢:一张原图
  2. 不太给力的 Trea
  3. VSCode + qwen3-coder
  4. Cursor + claude-4-sonneet

想学会类似 Stable Diffusion(SD) 触及灵魂般"风格迁移"的绘画超能力吗?心动不如行动,让我们马上来探究一番吧!

Let's go!!!;)


1. 照葫芦画瓢:一张原图

下图是从网上随机找到的一张 App 界面设计图片,我们想尝试一下众多号称自己"无敌是多么寂寞"的 Coding 智能体到底有没有像它们自己吹的那么厉害。

注意,我们希望 AI 用 SwiftUI 框架给出 iOS 上原生的 Swift 实现,并不是什么所谓的 html + css 概念代码。

2. 不太给力的 Trea

首先,来试一下 Trea。

不幸的是,Trea 好像没有读取和分析图片内容的能力,无论用什么模型都会给出如下错误提示:

一个红绿灯就搞的我们热血沸腾,实在让宝子们觉得有些失望。希望 Trea 能再接再厉早日加入分析图片的功能。

3. VSCode + qwen3-coder

虽然在 VSCode 中也不支持直接上传图片,但是作为变通,我们可以将对应的图片作为引用嵌入到提示词的输入界面中:

然后,选择号称撸码能力仅次于 claude 编程大模型的 qwen3-coder,妥善输入提示词来一窥究竟:

可以看到,qwen3-coder 生成的 SwiftUI 界面虽说与原图从布局上还有一定差距,但基本有模有样,而且视图中的标签卡片是可以实际滚动的。

更令人惊喜的是,qwen3-coder 生成的 SwiftUI 界面默认就很好的支持了暗色主题,非常 Nice!

4. Cursor + claude-4-sonneet

最后,我们来看看被无数秃头码农们捧上神坛的 Cursor,它在输入界面中可以非常方便的上传任意文件来辅助开发,图片自然也是不在话下:

用 Cursor 自然绝对少不了它的"好闺蜜"大模型 claude-4:

在输入完全一样的提示词后,小伙伴们简直不敢相信自己的眼睛:生成的 SwiftUI 界面几乎与原图一毛一样!

这可是正经八百 Swift 代码构建的哦:

但别高兴的太早,这里有一个问题:就是生成的 SwiftUI 界面无法滚动,而且底部标签栏中的元素也无法点击。

不过,我们只需再补充一句提示词给 AI 即可妥妥的解决:

此时,挑剔的宝子们如果将 iOS 设置为黑暗模式(Dark Mode)就会发现上面生成的视图界面却不会有任何变化。

检查 AI 生成的 SwiftUI 代码可以发现:这是因为 AI 太过纠结于完成我们的任务,以至于它将 UI 中所有前景、背景色以及其它元素都用固定颜色和风格限制死了。

幸运的是,通过简单的提示, claude 即可心领神会,灵巧的修复这一问题:

当然,小伙伴们还可以进一步通过提示词让 AI 完善我们的界面。但是,claude 从目前看来已经碾压一切了:要知道,这个还算复杂的 SwiftUI 视图我们还没有手动写过一行代码呢!

由此可见,未来撸码将会是一件多么惬意的事。

Cursor + claude "双剑合璧"组合就像是 SD 中对图片的风格迁移,下次当我们无意看到别人设计精妙绝伦的 App 界面时,我们就可以不费吹灰之力地将其收入囊中了,棒棒哒!💯

总结

在本篇博文中,我们比较了几种 AI IDE + 编程大模型对于 iOS 原生 SwiftUI 界面仿制能力的"孰是孰非",宝子们可以任性选择哦!

感谢观赏,再会啦!8-)

相关推荐
缘友一世15 小时前
基于LangGraph Cli的智能数据分析助手
langchain·llm·agent·langgraph
AI大模型17 小时前
本地AI知识库问答开源技术实现(二)--配置模型和知识库
程序员·llm·agent
全宝19 小时前
⚡我做了一个批量下载 VSCode 插件的小工具
前端·visual studio code·cursor
深度学习机器20 小时前
Gemini CLI源码解析:Agent与上下文管理实现细节
人工智能·llm·agent
云村小威20 小时前
FastGPT本地构建工作流高级编排(最新4.11.0)
语言模型·agent·知识库·fastgpt
福宝plus20 小时前
教你如何使用ChatGPT Agent,Agent使用次数限制,以及实际体验感受
chatgpt·openai·agent
杂雾无尘1 天前
SwiftUI 动画新技能,让你的应用「活」起来!
ios·swiftui·swift
qiyue771 天前
如何选择AI IDE?对比Cursor分析功能差异
ai编程·cursor·trae
老纪的技术唠嗑局1 天前
Vibe Coding 时代的开源社区开发新体验
cursor·mcp·vibecoding