Claude的Vibe coding雖然能快速生成功能完備的網(wǎng)站，但其默認(rèn)設(shè)計(jì)的'AI味'卻難以掩蓋。本文將分享兩種無需設(shè)計(jì)基礎(chǔ)的方法：通過系統(tǒng)級(jí)提示詞設(shè)定審美底線，以及借助設(shè)計(jì)提示詞網(wǎng)站復(fù)制成熟風(fēng)格，讓你的AI生成網(wǎng)站擺脫廉價(jià)感，輕松達(dá)到80分以上的專業(yè)水準(zhǔn)。

———— / BEGIN / ————

用 Claude 做了半天 Vibe coding，網(wǎng)站跑起來了，功能也對(duì)了，但打開一看——白底的底、漸變紫色的主題、整整齊齊的卡片式布局。

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

也就是說，隨著 AI 能力越來越強(qiáng)，每個(gè)人都可以 Vibe coding，但是想要做出有質(zhì)感的、讓人眼前一亮的網(wǎng)站還是非常困難的。

這個(gè)問題也困擾我挺長(zhǎng)時(shí)間。

在摸索下來后，我找到了兩種比較實(shí)用的方法，可以讓做出來的網(wǎng)站提升幾個(gè)檔次。

這不需要你懂設(shè)計(jì)，更不需要你會(huì)寫代碼，你至少就可以做出領(lǐng)先于同行 80% 水準(zhǔn)的網(wǎng)頁(yè)出來。

方法一：給 Claude 加一段設(shè)計(jì)風(fēng)格系統(tǒng)提示詞

Claude 出過一個(gè)官方指南，當(dāng)中給出了明確的解決方案。他自己也承認(rèn)了，Claude 做的 Vibe coding 效果很丑。

所以他的建議就是：你在做 Vibe coding 之前，先輸入一段系統(tǒng)級(jí)的提示詞。

字體排版：選用獨(dú)特且富有表現(xiàn)力的字體，避免使用 Inter、Roboto、Arial。將展示性字體與精致的正文字體搭配使用。

色彩與主題：通過 CSS 變量構(gòu)建統(tǒng)一的美學(xué)風(fēng)格，采用主色調(diào)搭配鮮明點(diǎn)綴色，避免在白色背景上使用紫色漸變。

動(dòng)態(tài)效果：添加錯(cuò)落有致的入場(chǎng)動(dòng)畫、滾動(dòng)觸發(fā)的呈現(xiàn)效果，以及帶來驚喜的懸停交互狀態(tài)，優(yōu)先采用純 CSS 實(shí)現(xiàn)方案。

空間構(gòu)成：運(yùn)用不對(duì)稱布局、元素疊壓、對(duì)角線流向，搭配充裕的留白或精心控制的密集排版。

背景設(shè)計(jì)：通過漸變網(wǎng)格、噪點(diǎn)紋理、幾何圖案、顆粒疊加層營(yíng)造氛圍感——避免使用純白色背景。

這段提示詞的作用就是覆蓋掉 Claude code 的默認(rèn)設(shè)計(jì)，從而讓它有基本的美感。當(dāng)然這個(gè)方式測(cè)下來，也只能讓原本 50 分的設(shè)計(jì)，差不多做到 60 分，就是看上去過得去，但是遠(yuǎn)達(dá)不到比較有質(zhì)感或者比較讓人眼前一亮。

方法二：直接用設(shè)計(jì)提示詞網(wǎng)站，復(fù)制風(fēng)格

如果你想更穩(wěn)定，更可以做出更好質(zhì)感的 Vibe coding 作品出來，那我更推薦你直接用提示詞網(wǎng)站。

這類提示網(wǎng)站的邏輯也很簡(jiǎn)單：他們匯總市面上各種好看的設(shè)計(jì)，將這些設(shè)計(jì)做成固定的提示詞。你只需要在 Vibe coding 之前，先去這些網(wǎng)站上選擇一個(gè)你覺得比較好看的設(shè)計(jì)風(fēng)格。

然后在 Vibe coding 的時(shí)候，輸入這些提示詞，就可以做出比較好看且有質(zhì)感的設(shè)計(jì)了。這樣就算你完全不懂設(shè)計(jì)，也至少能達(dá)到 80 分左右的設(shè)計(jì)水平。

下面的幾個(gè)我常用到的都超級(jí)簡(jiǎn)單，復(fù)制粘貼即可。

重點(diǎn)推薦第一個(gè)：designprompts.dev

這個(gè)網(wǎng)站提供了大約 30 種常規(guī)的設(shè)計(jì)風(fēng)格。

設(shè)計(jì)覆蓋了目前主流的網(wǎng)站審美，從極簡(jiǎn)主義到賽博朋克、從新擬態(tài)到新粗野設(shè)計(jì)。

你完全不需要懂這些專業(yè)名詞，只需要找一個(gè)你覺得還挺不錯(cuò)的設(shè)計(jì)風(fēng)格，把它的 Prompt 復(fù)制粘貼下來就好了。

另一個(gè)網(wǎng)站是：https://www.uiprompt.site/

它同樣提供 70 多種常規(guī)的設(shè)計(jì)風(fēng)格。

但怎么說呢，有些風(fēng)格好看，有些風(fēng)格看起來也很一般，這個(gè)主要取決于你個(gè)人的審美。

使用方法也同樣很簡(jiǎn)單，找到喜歡的風(fēng)格后，把它的提示詞復(fù)制下來。在你做網(wǎng)站的時(shí)候，告訴 Claude 就行了

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

這個(gè)網(wǎng)站也提供了 20 多種常規(guī)的設(shè)計(jì)風(fēng)格，可供你快速地選擇和粘貼 Prompt。它比較貼心的是，還提供了移動(dòng)端的設(shè)計(jì)，供你參考。

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

這個(gè)網(wǎng)站給到的提示詞中，有幾個(gè)網(wǎng)站的交互效果做的蠻不錯(cuò)的。如果你對(duì)交互要求比較高，可以參考下這個(gè)網(wǎng)站給到的示范。

使用方法也同樣是復(fù)制和粘貼 prompt 即可。

兩個(gè)方法結(jié)合用，效果最好

我自己現(xiàn)在的用法是這樣的：

第一步用方法一——把設(shè)計(jì)美學(xué)系統(tǒng)提示詞加進(jìn) Claude Code，相當(dāng)于給它設(shè)定一個(gè)基本的審美底線，排除掉最「AI 味」的那些默認(rèn)選擇。

第二步用方法二——從上面給到的提示詞網(wǎng)站里挑一個(gè)具體的風(fēng)格，那些網(wǎng)站加起來都上百個(gè)風(fēng)格了，可以從中挑選一個(gè)自己喜歡的風(fēng)格，給 Claude 一個(gè)明確的參考方向。

兩個(gè)方法疊加下來，出來的效果會(huì)穩(wěn)定很多。

不是每次都能做到「驚艷」，但至少能穩(wěn)定在一個(gè)「看起來像人做的」的水準(zhǔn)。

本文來自公眾號(hào)：楊杰出海筆記作者：楊杰出海筆記

想要第一時(shí)間了解行業(yè)動(dòng)態(tài)、面試技巧、商業(yè)知識(shí)等等等？加入產(chǎn)品經(jīng)理進(jìn)化營(yíng)，跟優(yōu)秀的產(chǎn)品人一起交流成長(zhǎng)！