前言
付费的模型和工具固然好用，一个月少则几百，高则上千，一个低薪牛马是真用不起
下面在使用免费工具和免费模型下实现真实的业务大屏页，看下多轮调教下AI生成的效果，并附上了对应的提示词 (如果有更好的提问方式，欢迎讨论交流)
这是UI提供的大屏图，里面各种静态图组合后的效果，接下来直接把图扔给AI，让不同的AI工具模型生成这个大屏页
工具模型比拼
为了使AI专注页面效果生成，我提前建好了对应的代码文件，并配置了对应的路由地址，方便运行后浏览效果并对比
直接把图复制到VSCode，Trae CN，Google Antigravity 中分别让它们实现，不同工具把代码实现到对应的位置，
提示词
请根据这个静态图，生成一个大屏页，使用vue2相关代码实现，代码写到 BigScreen/xxx.vue 中
UI静态图如下
VSCode
这是 VSCode 中免费版默认生成的效果
页面有了，该有的似乎都有，整体布局也有点那意思，使用 Agent 模式，模型 Auto，每一个细节方面还差的比较多
Trae CN
这是 Trae CN 中的生成的效果
额......
这是不是哪里出问题了啊，我把这个截图，又问了一次 Trae CN 让它优化一下，然后改出来的还是这个，奇了怪了
Trae 里面的模型似乎对于整个页面内容没有理解，无法实现这么大的页面功能？还是我的使用方式不对
我用的 SOLO 模式，模型无法选择，完全一个黑盒子
Google Antigravity
这是 Google Antigravity 中使用 Gemini3 Pro 生成的代码，原始截图没有了，这是从对话记录里重新打开的
整体来看，这个 Gemini3 pro 模型生成的效果是最好的，相对颜值也在线，各方面偏差也少一点
左侧卡片圆圈的部分还加了自动旋转效果，提供的静态图，模型直接自我发挥了
由于接下来的细节完善就用它了
在 Antigravity 优化调整
去掉旋转
先把AI加上的自动旋转效果去了，实在用不上
提示词
全局概览 中的旋转效果去掉
添加自适应
由于这个大屏需要自适应不同屏幕，先让他加个屏幕自适应
提示词
继续优化，刚才的设计图大小是 1920 x 1080 px，如果屏幕过小或过大，自动适应
在 mounted 中它嗖嗖加上了监听函数和 transform scale() 等函数处理
对齐
由于UI图里面的内容本来就没对齐，图里面有些地方也比较糙，AI生成式也没对齐，把现在的截图效果发给AI，让他把对应的模块对齐
提示词
这是现在的结果，将 安定门街道 和 执法检查情况 两个卡片高度缩小，和 执法办案情况 底部保持水平
调整占比
这时候明显左右两侧内容占比不是很好，优化一下
提示词
将左侧 安定门街道 和 全局概览 卡片宽度减小一点，让右侧的 执法检查情况 和 小循环案件概览 空间更大一点
调整位置
基于实际效果，明显右侧数据放不下了，让两个模块换个位置，全部对齐，这里先不考虑UI图中的参考位置
提示词
将 执法检查情况 和 执法办案情况 两个卡片位置互换
解决报错
在测试页面缩放时，发现控制台大量报错，直接截图让它修复一下
提示词
这个页面运行后，控制台有报错，请分析并解决
优化布局
这里由于实现差距比较大，直接从UI图中截取部分模块图，让AI更精准化修改
提示词
根据这个 执法办案情况 卡片效果截图，优化现在的布局，没有图片，先用空的div占位，类似 安定门街道 里面的效果
修改tab效果
提示词
执法检查情况 中的 检查量、检查单类型、不合格检查事项 改成 全局概览中的 tab 效果
效果预览
这些改完后，起码这个页面看起来整整齐齐的，该有的都有了，看起来是一个大屏了
注意，全程没有在vue文件中改一行代码
由于UI还没提供图，接下来就是根据UI提供的图，再单独一个个模块改了
提示词使用技巧
关于提示词的使用，我的经验是刚开始可以先说一个大概要求，然后再根据细化描述
如果不知道怎么描述，可以看AI的思考和回答分析，它是怎么用词的，然后模仿AI对问题的描述方式
慢慢来，在提示方面就会越来越准确，AI执行的任务也会越来越精准
Google Antigravity 使用问题
如果首次使用，出现下面这种登录不上的情况，可以尝试切换干净的节点，或者开启Tun模式
如果是已经登录成功，之前能用，后来又不能用了，可能是节点的IP被封了，换新的地区节点
我遇到的情况是原来用的日本节点，能用，后来不能用了（切地区也不行），重启电脑后重新连的美区节点才好使的
欢迎大家讨论交流，如果喜欢本文章或感觉文章有用，动动你那发财的小手点赞、收藏、关注再走呗
^_^微信公众号：草帽lufei
