Claude的Vibe coding虽然能快速生成功能完备的网站，但其默认设计的'AI味'却难以掩盖。本文将分享两种无需设计基础的方法：通过系统级提示词设定审美底线，以及借助设计提示词网站复制成熟风格，让你的AI生成网站摆脱廉价感，轻松达到80分以上的专业水准。

用 Claude 做了半天 Vibe coding，网站跑起来了，功能也对了，但打开一看——白底的底、渐变紫色的主题、整整齐齐的卡片式布局。

一眼就知道这是 AI 做的（如下图所示）。

也就是说，随着 AI 能力越来越强，每个人都可以 Vibe coding，但是想要做出有质感的、让人眼前一亮的网站还是非常困难的。

这个问题也困扰我挺长时间。

在摸索下来后，我找到了两种比较实用的方法，可以让做出来的网站提升几个档次。

这不需要你懂设计，更不需要你会写代码，你至少就可以做出领先于同行 80% 水准的网页出来。

方法一：给 Claude 加一段设计风格系统提示词

Claude 出过一个官方指南，当中给出了明确的解决方案。他自己也承认了，Claude 做的 Vibe coding 效果很丑。

所以他的建议就是：你在做 Vibe coding 之前，先输入一段系统级的提示词。

字体排版：选用独特且富有表现力的字体，避免使用 Inter、Roboto、Arial。将展示性字体与精致的正文字体搭配使用。

色彩与主题：通过 CSS 变量构建统一的美学风格，采用主色调搭配鲜明点缀色，避免在白色背景上使用紫色渐变。

动态效果：添加错落有致的入场动画、滚动触发的呈现效果，以及带来惊喜的悬停交互状态，优先采用纯 CSS 实现方案。

空间构成：运用不对称布局、元素叠压、对角线流向，搭配充裕的留白或精心控制的密集排版。

背景设计：通过渐变网格、噪点纹理、几何图案、颗粒叠加层营造氛围感——避免使用纯白色背景。

这段提示词的作用就是覆盖掉 Claude code 的默认设计，从而让它有基本的美感。当然这个方式测下来，也只能让原本 50 分的设计，差不多做到 60 分，就是看上去过得去，但是远达不到比较有质感或者比较让人眼前一亮。

方法二：直接用设计提示词网站，复制风格

如果你想更稳定，更可以做出更好质感的 Vibe coding 作品出来，那我更推荐你直接用提示词网站。

这类提示网站的逻辑也很简单：他们汇总市面上各种好看的设计，将这些设计做成固定的提示词。你只需要在 Vibe coding 之前，先去这些网站上选择一个你觉得比较好看的设计风格。

然后在 Vibe coding 的时候，输入这些提示词，就可以做出比较好看且有质感的设计了。这样就算你完全不懂设计，也至少能达到 80 分左右的设计水平。

下面的几个我常用到的都超级简单，复制粘贴即可。

重点推荐第一个：designprompts.dev

这个网站提供了大约 30 种常规的设计风格。

设计覆盖了目前主流的网站审美，从极简主义到赛博朋克、从新拟态到新粗野设计。

你完全不需要懂这些专业名词，只需要找一个你觉得还挺不错的设计风格，把它的 Prompt 复制粘贴下来就好了。

另一个网站是：https://www.uiprompt.site/

它同样提供 70 多种常规的设计风格。

但怎么说呢，有些风格好看，有些风格看起来也很一般，这个主要取决于你个人的审美。

使用方法也同样很简单，找到喜欢的风格后，把它的提示词复制下来。在你做网站的时候，告诉 Claude 就行了

同类型 https://www.uiprompt.dev/

这个网站也提供了 20 多种常规的设计风格，可供你快速地选择和粘贴 Prompt。它比较贴心的是，还提供了移动端的设计，供你参考。

同类型 https://claudekit.github.io/frontend-design-pro-demo/

这个网站给到的提示词中，有几个网站的交互效果做的蛮不错的。如果你对交互要求比较高，可以参考下这个网站给到的示范。

使用方法也同样是复制和粘贴 prompt 即可。

两个方法结合用，效果最好

我自己现在的用法是这样的：

第一步用方法一——把设计美学系统提示词加进 Claude Code，相当于给它设定一个基本的审美底线，排除掉最「AI 味」的那些默认选择。

第二步用方法二——从上面给到的提示词网站里挑一个具体的风格，那些网站加起来都上百个风格了，可以从中挑选一个自己喜欢的风格，给 Claude 一个明确的参考方向。

两个方法叠加下来，出来的效果会稳定很多。

不是每次都能做到「惊艳」，但至少能稳定在一个「看起来像人做的」的水准。