无需自己写半行代码:让 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-)

相关推荐
GitLqr2 小时前
AI洞察 | 新一代 Agent 框架与 3D 桌面伴侣智能体
agent·ai编程·mcp
大模型教程2 小时前
12天带你速通大模型基础应用(一)Prompt提示词工程
程序员·llm·agent
yaocheng的ai分身2 小时前
Browser MCP扩展
cursor·mcp
coder_pig4 小时前
👦抠腚男孩的AI学习之旅 | 6、玩转 LangChain (二)
langchain·aigc·agent
大模型教程6 小时前
12天带你速通大模型基础应用(二)自动化调优Prompt
程序员·llm·agent
AI大模型7 小时前
无所不能的Embedding(02) - 词向量三巨头之FastText详解
程序员·llm·agent
AI大模型7 小时前
无所不能的Embedding(03) - word2vec->Doc2vec[PV-DM/PV-DBOW]
程序员·llm·agent
悟乙己7 小时前
使用 Python 中的强化学习最大化简单 RAG 性能
开发语言·python·agent·rag·n8n
转转技术团队9 小时前
让AI成为你的编程助手:如何高效使用Cursor
后端·cursor
roshy11 小时前
MCP(模型上下文协议)入门教程1
人工智能·大模型·agent