廣東
Claude的Vibe coding雖然能快速生成功能完備的網站，但其默認設計的'AI味'卻難以掩蓋。本文將分享兩種無需設計基礎的方法：通過系統級提示詞設定審美底線，以及借助設計提示詞網站復制成熟風格，讓你的AI生成網站擺脫廉價感，輕松達到80分以上的專業水準。
———— / BEGIN / ————
用 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 一個明確的參考方向。
兩個方法疊加下來，出來的效果會穩定很多。
不是每次都能做到「驚艷」，但至少能穩定在一個「看起來像人做的」的水準。
本文來自公眾號：楊杰出海筆記作者：楊杰出海筆記
想要第一時間了解行業動態、面試技巧、商業知識等等等？加入產品經理進化營，跟優秀的產品人一起交流成長！
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
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.
財聯社
