廣東
Claude的Vibe coding雖然能快速生成功能完備的網(wǎng)站，但其默認(rèn)設(shè)計的'AI味'卻難以掩蓋。本文將分享兩種無需設(shè)計基礎(chǔ)的方法：通過系統(tǒng)級提示詞設(shè)定審美底線，以及借助設(shè)計提示詞網(wǎng)站復(fù)制成熟風(fēng)格，讓你的AI生成網(wǎng)站擺脫廉價感，輕松達(dá)到80分以上的專業(yè)水準(zhǔn)。
———— / BEGIN / ————
用 Claude 做了半天 Vibe coding，網(wǎng)站跑起來了，功能也對了，但打開一看——白底的底、漸變紫色的主題、整整齊齊的卡片式布局。
一眼就知道這是 AI 做的（如下圖所示）。
也就是說，隨著 AI 能力越來越強(qiáng)，每個人都可以 Vibe coding，但是想要做出有質(zhì)感的、讓人眼前一亮的網(wǎng)站還是非常困難的。
這個問題也困擾我挺長時間。
在摸索下來后，我找到了兩種比較實用的方法，可以讓做出來的網(wǎng)站提升幾個檔次。
這不需要你懂設(shè)計，更不需要你會寫代碼，你至少就可以做出領(lǐng)先于同行 80% 水準(zhǔn)的網(wǎng)頁出來。
方法一：給 Claude 加一段設(shè)計風(fēng)格系統(tǒng)提示詞
Claude 出過一個官方指南，當(dāng)中給出了明確的解決方案。他自己也承認(rèn)了，Claude 做的 Vibe coding 效果很丑。
所以他的建議就是：你在做 Vibe coding 之前，先輸入一段系統(tǒng)級的提示詞。
字體排版：選用獨特且富有表現(xiàn)力的字體，避免使用 Inter、Roboto、Arial。將展示性字體與精致的正文字體搭配使用。
色彩與主題：通過 CSS 變量構(gòu)建統(tǒng)一的美學(xué)風(fēng)格，采用主色調(diào)搭配鮮明點綴色，避免在白色背景上使用紫色漸變。
動態(tài)效果：添加錯落有致的入場動畫、滾動觸發(fā)的呈現(xiàn)效果，以及帶來驚喜的懸停交互狀態(tài)，優(yōu)先采用純 CSS 實現(xiàn)方案。
空間構(gòu)成：運用不對稱布局、元素疊壓、對角線流向，搭配充裕的留白或精心控制的密集排版。
背景設(shè)計：通過漸變網(wǎng)格、噪點紋理、幾何圖案、顆粒疊加層營造氛圍感——避免使用純白色背景。
這段提示詞的作用就是覆蓋掉 Claude code 的默認(rèn)設(shè)計，從而讓它有基本的美感。當(dāng)然這個方式測下來，也只能讓原本 50 分的設(shè)計，差不多做到 60 分，就是看上去過得去，但是遠(yuǎn)達(dá)不到比較有質(zhì)感或者比較讓人眼前一亮。
方法二：直接用設(shè)計提示詞網(wǎng)站，復(fù)制風(fēng)格
如果你想更穩(wěn)定，更可以做出更好質(zhì)感的 Vibe coding 作品出來，那我更推薦你直接用提示詞網(wǎng)站。
這類提示網(wǎng)站的邏輯也很簡單：他們匯總市面上各種好看的設(shè)計，將這些設(shè)計做成固定的提示詞。你只需要在 Vibe coding 之前，先去這些網(wǎng)站上選擇一個你覺得比較好看的設(shè)計風(fēng)格。
然后在 Vibe coding 的時候，輸入這些提示詞，就可以做出比較好看且有質(zhì)感的設(shè)計了。這樣就算你完全不懂設(shè)計，也至少能達(dá)到 80 分左右的設(shè)計水平。
下面的幾個我常用到的都超級簡單，復(fù)制粘貼即可。
重點推薦第一個：designprompts.dev
這個網(wǎng)站提供了大約 30 種常規(guī)的設(shè)計風(fēng)格。
設(shè)計覆蓋了目前主流的網(wǎng)站審美，從極簡主義到賽博朋克、從新擬態(tài)到新粗野設(shè)計。
你完全不需要懂這些專業(yè)名詞，只需要找一個你覺得還挺不錯的設(shè)計風(fēng)格，把它的 Prompt 復(fù)制粘貼下來就好了。
另一個網(wǎng)站是：https://www.uiprompt.site/
它同樣提供 70 多種常規(guī)的設(shè)計風(fēng)格。
但怎么說呢，有些風(fēng)格好看，有些風(fēng)格看起來也很一般，這個主要取決于你個人的審美。
使用方法也同樣很簡單，找到喜歡的風(fēng)格后，把它的提示詞復(fù)制下來。在你做網(wǎng)站的時候，告訴 Claude 就行了
同類型 https://www.uiprompt.dev/
這個網(wǎng)站也提供了 20 多種常規(guī)的設(shè)計風(fēng)格，可供你快速地選擇和粘貼 Prompt。它比較貼心的是，還提供了移動端的設(shè)計，供你參考。
同類型 https://claudekit.github.io/frontend-design-pro-demo/
這個網(wǎng)站給到的提示詞中，有幾個網(wǎng)站的交互效果做的蠻不錯的。如果你對交互要求比較高，可以參考下這個網(wǎng)站給到的示范。
使用方法也同樣是復(fù)制和粘貼 prompt 即可。
兩個方法結(jié)合用，效果最好
我自己現(xiàn)在的用法是這樣的：
第一步用方法一——把設(shè)計美學(xué)系統(tǒng)提示詞加進(jìn) Claude Code，相當(dāng)于給它設(shè)定一個基本的審美底線，排除掉最「AI 味」的那些默認(rèn)選擇。
第二步用方法二——從上面給到的提示詞網(wǎng)站里挑一個具體的風(fēng)格，那些網(wǎng)站加起來都上百個風(fēng)格了，可以從中挑選一個自己喜歡的風(fēng)格，給 Claude 一個明確的參考方向。
兩個方法疊加下來，出來的效果會穩(wěn)定很多。
不是每次都能做到「驚艷」，但至少能穩(wěn)定在一個「看起來像人做的」的水準(zhǔn)。
本文來自公眾號：楊杰出海筆記作者：楊杰出海筆記
想要第一時間了解行業(yè)動態(tài)、面試技巧、商業(yè)知識等等等？加入產(chǎn)品經(jīng)理進(jìn)化營，跟優(yōu)秀的產(chǎn)品人一起交流成長！
特別聲明：以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布，本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
