经常 Vibe Coding 的同学应该都遇到过这种情况。让 AI 写个好看点的页面，非常难，既考验审美，又考验我们和 AI 怎么沟通。

因为默认情况下，AI 输出的卡片、按钮、阴影，甚至配色，全都是一个模子刻出来。

你跟它说想要高级一点、简约一点，它也会改，但改来改去，还是那个路子。改的不成样子。

我曾经以为是提示词的问题，换着写法试了很多次，效果都差不多。一次次的抽卡，抽到人崩溃。

上周我在 Reddit 上看到一个帖子，有个国外的独立开发者总结了他是怎么 Vibe Code 出来漂亮 UI 的。我照着试了一下，才发现问题可能压根不在提示词。

这些方法真的太实用了。大家可以直接用，效果立竿见影。我总结下，也分享给大家。

方法一：先把页面结构画出来

我相信绝大多数的情况下，在开始制作网站之前，我们在脑海里已经有页面结构了，那这时候就别让 AI 去猜。

因为我说做一个首页，或者做一个漂亮的 Dashboard，AI 就得自己决定 Header 区怎么排、按钮怎么放、图片放哪里、内容模块怎么组织。

AI 又不是我们心里的蛔虫，它怎么可能知道我们的想法。所以，这种宽泛约束下的产出必然是一塌糊涂。

我现在的做法是，先把结构画出来。工具的话，推荐 Excalidraw，操作非常简单，画几个框，把标题、按钮的位置先标出来，然后再交给 AI 去实现。

有了页面骨架，AI 至少就不会在结构上跑偏。

很多时候，页面难看其实不是细节问题，而是一开始骨架就错了，然后调骨架就得花很长时间。这真的是方法不对，浪费时间。

怎么才能 Vibe Code 出来漂亮的 UI？

什么高级、简洁、现代，这些词我们自己都未必有统一理解，更别说 AI。

记得之前学写作的时候，老师经常说少用抽象的形容词，多写具体的动作。跟 AI 沟通也类似。

高级、简洁这些词本身就很模糊，人和人之间理解都未必一致，更不用说 AI 了。我们以为自己说得很具体，其实 AI 根本理解不了。

最省事的方法其实很简单，就是直接给截图。

去 Dribbble 或者 Mobbin 这些网站上找一些自己喜欢的参考网站，然后告诉 AI，让它照着这个风格和结构来。这样 AI 一下子就能理解我们的需求。

原文链接：小红书