想 vibe 一个 ios app,但是 UI 不知道怎么搞

3 月 26 日
 jijiji

基于已有的残缺认知,能想到的办法:

第一步:figma/pencil/stitch 上用自然语言交互,生成一个 UI 第二部: 直接导出代码(html/react 什么的),然后喂给 claude code ,转化成 swift ui

总感觉这个方法不对,求助各位有没有更合理的方式。。救救孩子😭

4563 次点击
所在节点    程序员
28 条回复
salor
3 月 26 日
figma make 生成 UI ,codex 安装 figma mcp ,链接发给它让它高保真还原。
jijiji
3 月 26 日
@salor 能和 claude code 联动嘛
zdxddt
3 月 26 日
你都用 ai 写代码了,可以先不管逻辑, 直接让 ai 出界面, 跳过 figma 设计这一环。 哪里不好,直接喊 ai 改就是了
jijiji
3 月 26 日
@zdxddt 我尝试过用 claude code 直接生成界面,但是有 2 个痛点:
1. 通过这种方式生成出来的界面,从效果上确实不如直接在 figma 或者 pencil 中生成。毕竟后者是专业的 UI 工具。
2. 效率很差。figma 中生成的不好,我当场就调整了,毕竟直接就呈现了,所见即所得。cc 里太慢,每次还要再构建代码,打开 app 后才能看到。
zdxddt
3 月 26 日
@jijiji 哦,可能我是 flutter 开发的, 没有你的第二个痛点。 不过你的第二步,github 上有工具,可以对接 figma 的 mcp ,ai 可以直接去读写 figma 的内容。 讲起来,第一步和第二步都可以用这个。 不过我只是试过可行性,但是没咋真正用过这种方式,因为我现在省掉了设计图这一步
CodeDaiQin
3 月 26 日
jijiji
3 月 26 日
@CodeDaiQin 谢谢 中午看到了,新版的 stitch 有点东西。。
zhangsimon
3 月 26 日
蹲一下,试了 codex+figma MCP ,还原的也很一般
不知道是不是因为我 figma 免费的,开不了开发模式的原因
CosmicVoyager
3 月 26 日
stitch.withgoogle.com 不让用,怎么办
bestie
3 月 26 日
用 stitch 不要导出 figma ,直接导出 zip ,里面是 html+截图,丢到 AI 里 @就能一比一直接转换成你想要的语言了
freemoon
3 月 26 日
@CosmicVoyager 无痕、日本节点
freemoon
3 月 26 日
stitch 的 app 设计也是一坨,有什么使用技巧吗,我用详细提示词也不太行。
wvitas
3 月 26 日
@freemoon 你可以先用 gpt 或者其他 ai 模型,把你的想法给他,让 ai 给你生成一套相关的 prompt ,然后丢给 stitch 让它生成
freemoon
3 月 26 日
@wvitas 都试过了。要不你给个效果蛮好的提示词甚至效果图?
wvitas
3 月 26 日
@freemoon 无,都是一点点调
usVexMownCzar
3 月 26 日
第三个选项,去各个设计网站抄,找一些自己看的顺眼的 UI 直接截图让 AI 来做。

不要相信自己可以通过自然语言描述,然后 AI 会生成满意的 UI ,如果你不是做设计的,基本不太可能得到满意的结果。
beimenjun
3 月 26 日
你可以先试一下我的 App v2ex.com/t/1199643
silencil
3 月 26 日
目前实践下来,我用的好点的工作流是让 claude 对话式生成每个大页面的框架,一次性生成后功能可能很多,不具备一致性,但是忽略。然后又让 claude 在一张画布上模拟 mobile 展示每个页面,这一轮逐渐调整细节。简单的界面实现之后让 codex 直接执行多几次可以一比一还原设计稿。不直接实现代码有个好处是可以不考虑逻辑,仅仅画 html 不容易出错,也快速可以及时调整。但是后来 ui 稿实现之后,由于我并不是一个真正的产品经理,在开发过程中可能会推翻之前的设计,后来图省事还是直接让 claude 出了整体的设计稿之后直接 codex 执行。然后每一轮修改意见最重要的一点是提 plan 并人工 review,完全交给 codex 不可靠。
jasm
3 月 26 日
对界面个性化需求不是很强的话,觉得还是 aistudio 好用,试过用 stitch 做后端管理界面,不知道是不是我姿势不对,前后界面根本没有任何整体性
abcgoodwei
3 月 26 日
@salor figma 的 MCP 需要充值才能用吧,不然用不了几次就受限了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1201243

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX