Cursor 与 Kiro：为何 UI 设计天差地别？解密大模型之外的“幕后推手”！

为了弄清楚这个问题，参考 @Eric技术圈 的实践。进行横向对比，从而来了解不同AI 编程工具对同一个 UI 设计任务的表现。

本轮对决信息：

• 参赛选手：Cursor vs. Kiro

• AI大模型：Claude 3.7 Sonnet

• Prompt：一字不差

• 任务设计：输出同一个 UI 原型

最后效果天差地别！

同一个妈生的，长得却完全不像？🤔”

图片已被安全策略阻止 点个关注，继续往下看...

嘿，大家好呀！👋

今年绝对是 AI 行业发展竞争最为激烈的一年，各种AI Coding IDE（AI编程工具），如雨后春笋一般推出市场，国内外大厂争前恐后发布自己的IDE，而且主流的大模型都支持。那么，作为新手的我们，应该如何选择呢？

获取高清设计原型图，关注我私信：UI

今天，咱们就来扒一扒这背后的“小秘密”！

一、 AI 大脑：只是个开始，不是全部！

你可能会想，既然都是 Claude 3.7 Sonnet 这个大模型，那设计出来的东西不应该都差不多吗？

错！大模型就像一个拥有海量知识和超强逻辑能力的“超级大脑”。但 AI 编程工具呢，它们更像是这个大脑的“美发师”-Tony老师。它负责怎么跟大脑沟通，以及怎么把大脑“想”出来的东西，打扮得漂漂亮亮地呈现给你。所以，都叫“Tony老师”，但理出来的头发也是千差万别！

很明显，Cursor的设计稿更吸引人

• Cursor的设计稿，运用了大量的丰富精美的图片，会更吸引人

• 从风格上来说，Cursor更像一个健身App，而Kiro更像一个工具型App

二、 揭秘：那些塑造 AI 设计的“幕后黑手”

到底是谁在背后“捣鬼”，让这些 AI 工具变得如此有个性呢？

1. 提示词工程：AI 的“潜台词”艺术

你给 AI 工具一个简单的需求，比如“设计一个登录页面”。你以为它就这么傻乎乎地直接转达给大模型了？图样图森破！

工具内部会偷偷地给你输入的提示词加戏：

• 小抄加持：它们自带一本“UI/UX 设计宝典”，里面写满了各种设计原则、常用组件（比如 Tailwind CSS、Material UI）、响应式布局秘籍、无障碍规范等等。这些“小抄”会被工具悄悄地塞进你的提示词里，让大模型收到一个更“复杂”的请求。

• 指令精细度：有的工具像个严谨的导演，会给大模型非常详细的指令。而有的工具就比较佛系：“嗯，随便搞个登录页吧。”指令越具体，结果自然越可控。

• 连环追问：厉害的工具还会跟大模型玩“你问我答”的游戏。先让它出个初稿，然后根据初稿再追问：“这个按钮颜色不对，再改改！”，直到满意为止。

突然有个问题，我们能查看工具的 “提示词工程吗” ？

不能！我还真的去找了工具里的提示词工程，发现这几乎是不可能完成的任务。了解后才知道，这是AI编程工具的核心竞争力，也是商业秘密，当然不能随便开放出来啦~

但我们还是能大概了解，提示词工程的构成：

1. 用户/项目规则：这部分是我们告诉AI项目偏好，可以自定义的部分。

1. 系统指令/工具模式：系统预设的核心指令，告诉大模型它应该如何处理。

1. 实时上下文：这是动态的部分，包括你当前的文件内容、最近查看文件等。

1. 对话历史：之前与 AI 的对话内容，会被裁剪为上下文的一部分。

1. 用户查询：你直接输入给 AI 的问题或指令。

2. 用户界面：AI 的“手把手教学”

AI 编程工具的界面本身就隐藏着“小心机”，它会不动声色地引导你：

• 填空题模式： 有的会给你一堆下拉菜单、复选框，让你选前端框架、主题颜色、目标设备等等。你每选一个，就等于给大模型多加了一条限制，结果自然就被“框”住了。

• 我的地盘我做主： 你在工具里设置的默认字体、图标库、组件库偏好，都会像你的“个人签名”一样，被带到给大模型的请求中，影响最终的设计风格。

• 实时反馈的魔力： 有些工具能让你一边看一边改，你动动鼠标，它就把你的“小心思”立刻传达给大模型，让设计更贴合你的心意。

####

####

3. 后处理逻辑：AI 的“美颜滤镜”

大模型吐出来的“毛坯房”（代码或设计描述），可不能直接交给你。工具还会给它来个“大改造”。

• 代码整容：格式化、语法修正、性能优化，甚至根据“最佳实践”来个大重构，让代码看起来更专业、更规范。

• 组件变身：你说“给我个按钮”，工具可能就会把它多种不同风格按钮。选择不同的组件库，颜值和气质那可是天壤之别！

• 智能修复：工具可能内置了“强迫症”模式，自动帮你修复一些布局冲突、响应式问题，甚至帮你加上一些辅助功能，让你省心不少。

4. 工具的设计理念：AI 的“性格”

每个 AI 编程工具都有自己的“脾气”和“追求”：

• “颜值控” vs. “实用派”： 有的工具就是个“颜值控”，一心只想生成最漂亮的 UI，代码嘛，能跑就行；有的工具则是“实用派”，优先保证代码功能完善、易于集成，颜值可以稍微放放。

• “自由奔放” vs. “循规蹈矩”： 有的工具给你无限自由，想怎么折腾就怎么折腾；有的工具则比较“有主见”，它会帮你快速生成某种特定风格（比如企业级应用、个人博客）的设计，省去你选择的烦恼。

• “专精技术”： 某些工具可能对特定的前端框架（比如 React、Vue）情有独钟，它会更倾向于生成这些框架下最常见、最高效的设计模式。

###

###

给开发者的“小贴士” 💡

所以，下次当你发现不同的 AI 工具生成的设计差异巨大时，别急着怀疑大模型的能力，也别以为自己“打开方式不对”。

其实，你选择一个 AI 编程工具，不仅仅是选择了它背后的大模型，更是选择了一整套独特的工作流程、设计理念和技术栈偏好。

搞清楚这些，你就能更好地“驯服”这些 AI 编程工具，让它们真正成为你的得力助手，加速你的开发进程！

三、全文总结

虽然各大厂商在发布会上吹的天花乱坠，在当前AI编程工具里。从工具易用性、提示词工程、后处理逻辑等方面，Cursor还是处于领先位置。

选择 AI 编程工具不仅仅是选择大模型，更是选择一套特定的工作流程、设计理念和技术栈偏好。理解这些“幕后推手”，能帮助我们更聪明地利用 AI 工具，加速开发进程。

当然，其他厂商也一定会奋力追赶，期待我们国产的AI编程工具能快速进入第一梯队。