软件开发 --- AI开发 之 手机UI设计图比较

直接说结论就是

不同的编程工具生成的效果有明显不同，但是不同的api接口提供商提供的同一个模型的不同api效果基本相同。最强的仍然是claude，其次是chatgpt，kimi。最强编程工具是claduecode，其次是codex，workbuddy，trae

 claude opus 5.5

 

 

 

claude3.7

最近谷歌疯狂更新gemini3pro

antigrairy  gemini 3.1 pro

 

 codex

 

 

 

 

windsurf工具的claude3.7

 

doubao-coder，设计的中规中矩，国内大模型编写成这样已经很不错了

doubao-coder solo模式

 

 doubao1.8

 

 

 

 

GLM4.7 色彩单调，页面功能齐全

 

 GLM4.6 有错误

gemini2.5

 gpt4.1

 

deepseekv3-0324

 trae doubao code 功能齐全，ui差点，排版混乱，结果中

 doubao code2  功能齐全，ui差点，排版混乱，结果中

 

trae doubao code 1.8

 

 

 trae minimax m2.7   除了有段混乱排版，效果中

trae  GLM5.1  效果好

 trae deepseek v4 pro  效果好

 trae k2.6

trae qwen3.6 plus

 antigrairy  gemini3.5 flash high

 

TLAgent

 codebuddy

 codex+deepseekv4pro

 tlagent+deepseekv4pro

 tlagent+三方deepseekv4pro

 trae+官方deepseekv4pro

 kimi3 可以理解什么场景风格

 workbuddy+dsv4p

 DSH+DSV4PH

 

 

 openrouter + OX

 

 GPT5.6

 

 

比较明显是gemini3pro 和 claude3.7最强，工具是windsurf

其次

 trae deepseek v4 pro

trae  GLM5.1  

 

我的提示词

我想开发一个{类似小宇宙的播客app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

0、如果有ui截图，请严格按照截图去设计ui每个细节。

1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。

2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。

3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。

4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：

5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。

- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。

- 真实感增强：

- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。

- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。

- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。

请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

 

生成的代码参考

https://gitee.com/null_465_7266/model/tree/master/