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

相关推荐
大模型教程44 分钟前
Cursor 快速入门指南:从安装到核心功能
程序员·llm·cursor
jifei1 小时前
有了Cursor,为什么还要买摸着Cursor过河的Trae?
cursor·trae
AI大模型2 小时前
从AI调用到AI智能体:全面解析三种AI应用的技术架构
程序员·llm·agent
大熊猫侯佩7 小时前
「内力探查术」:用 Instruments 勘破 SwiftUI 卡顿迷局
swiftui·debug·xcode
用户84913717547167 小时前
joyagent智能体学习(第3期)工具系统设计与实现
llm·agent
mCell7 小时前
Claude Code Sub-agent 模式的详解和实践
agent·ai编程·claude
老顾聊技术7 小时前
老顾深度解析【字节跳动的AI项目DeerFlow】源码之执行者(五)
llm·agent
HarderCoder9 小时前
深入理解 SwiftUI 的 ViewBuilder:从隐式语法到自定义容器
swiftui·swift
东坡肘子10 小时前
我差点失去了巴顿(我的狗狗) | 肘子的 Swift 周报 #098
swiftui·swift·apple
老顾聊技术1 天前
老顾深度解析【字节跳动的AI项目DeerFlow】源码之人工中断(四)
llm·agent