太長不看　

揭秘如何在 20 分鐘內(nèi)用 AI 創(chuàng)建專業(yè)級界面，并分享前四大核心技巧，讓你的 AI 生成的應(yīng)用脫胎換骨。　

• 絲滑卡片拖動交互與呼吸效果漸變動畫展示
• 帶視差效果的交互網(wǎng)頁案例分析
• 四個提升 AI 界面設(shè)計質(zhì)量的關(guān)鍵技巧
• 完整提示詞模板與設(shè)計稿轉(zhuǎn)換方法

最近大家可能都發(fā)現(xiàn)了 Claude 3.7 寫出的網(wǎng)頁或者應(yīng)用界面在美觀度上有了非常大的提升。　

可以寫出非常復(fù)雜的交互動畫和軟件邏輯。接下來給大家展示一下 Claude 3.7 在這方面的實力。　

首先是我寫的一個卡片拖動的交互，整個過程的過渡非常絲滑，后面的卡片會自己出現(xiàn)。　

然后是一個樣式比較復(fù)雜的搜索卡片，亮點是輸入框聚焦的時候會有非常漂亮的漸變色動畫，類似呼吸的效果。　

最后是 padphone 老師做的帶視差效果的網(wǎng)頁，鼠標(biāo)劃過的時候會有變形，而且整體的投影會變化，每個組件也有單獨的視差效果，還是可以交互的。　

這些以前設(shè)計師都得用 AE 或者其他動效工具做好久，要是寫成代碼的難度就更別說了。

但現(xiàn)在上面這些案例每一個花費(fèi)的時間都不會超過 20 分鐘。　

話又說回來了，最近我發(fā)了案例和提示詞之后，也有很多朋友說為啥我讓 Claude 3.7 寫出來的東西就丑的很。　

可能很多朋友不知道我在做 AI 之前的本職工作是大廠產(chǎn)品設(shè)計師。　

這篇內(nèi)容里我會教大家一些非常簡單的技巧，用上了以后你也能搞定這么漂亮的界面，而且我還會教你如何把這些網(wǎng)頁變成設(shè)計稿方便后續(xù)的更新和迭代。　

第一個技巧：　

不用非得用語言來描述你想要的界面樣式，可以去一些設(shè)計平臺找一些你喜歡的設(shè)計稿將圖片上傳到圖片讓模型參考。　

如果你不知道去哪找的話，國內(nèi)推薦站酷、海外的話推薦 Dribbble 和 Layers。　

在跟 Claude 說的時候就可以忽略那些不好描述的地方，重點描述靜態(tài)圖片無法表現(xiàn)的部分，比如下面的這個卡片組件。　

我就讓 Claude 注意交互的動畫和輸入框聚焦之后的漸變動畫上，界面內(nèi)容和風(fēng)格就讓他按圖片生成。　

第二個技巧：　

在讓 Claude 生成界面的時候，你會發(fā)現(xiàn) Claude 生成的頁面沒有圖片，本來應(yīng)該是圖片的部分經(jīng)常是空白的，這個就很影響結(jié)果的視覺表現(xiàn)。　

其實我們可以要求他引用一些在線的圖片來填充到頁面需要圖片的部分。　

這里首先推薦 unsplash，他是一個開源圖片網(wǎng)站，里面有世界各地的設(shè)計大神上傳的圖片，而且可以直接引用。　

可以看下面加上圖片之后的卡片是不是就好看很多了。　

第三個技巧：　

另外 claude 在生成頁面的時候本來應(yīng)該是圖標(biāo)的地方，他喜歡用 emoji 來代替，emoji 也很好，但是在一些嚴(yán)肅的頁面上就會顯得格格不入。　

這里可以要求 Claude 在生成頁面的時候引用在線的圖標(biāo)庫，比如Font Awesome或Material Icons，這些開源圖標(biāo)庫可以通過 CDN 直接引用，而且不需要部署。　

可以看到引用了 Font Awesome 圖標(biāo)庫的圖標(biāo)之后我們的界面變得更加簡潔和整齊。　

第四個技巧：　

我們常用的前端樣式代碼是用 CSS 寫的，但是 CSS 本身的一些樣式其實沒有太考慮美觀度的要求。　

這就導(dǎo)致你讓 Claude 寫樣式的時候他就會過渡自己發(fā)揮，美觀度也就沒辦法得到保障，而且你對樣式要求多之后他要從頭寫的 CSS 也就越多浪費(fèi)很多 Token。　

這里我們可以要求 Claude 用 CDN 引用 TailwindCSS 來寫組件樣式，Tailwind CSS 封裝了一套非常美觀和簡潔的樣式，可以讓 Claude 直接調(diào)用，確保在色彩、響應(yīng)式和基礎(chǔ)組件的美觀度不出大問題。　

基本上有這四個技巧你就可以讓 Claude 設(shè)計出非常美觀的界面或者組件了。　

當(dāng)然，我知道大家最需要的是什么，提示詞也是有的，我讓 Claude 根據(jù)這幾個技巧寫了一套提示詞。　

方括號［］的部分就是你需要填寫的部分。　

我需要創(chuàng)建一個[具體描述你的頁面/組件類型]，請幫我生成美觀且響應(yīng)式的HTML+CSS代碼。

## 設(shè)計參考
我希望設(shè)計風(fēng)格類似于以下參考：
[上傳參考圖片或描述設(shè)計靈感來源]

## 技術(shù)要求
- 請使用HTML、TailwindCSS和少量必要的JavaScript
- 引用Tailwind CSS（v3.0+）通過CDN
- 頁面需完全響應(yīng)式，在移動設(shè)備和桌面端都能良好顯示

## 圖片資源
- 請使用Unsplash API提供的圖片作為內(nèi)容圖片 (https://source.unsplash.com/...)
- 根據(jù)內(nèi)容主題選擇合適的關(guān)鍵詞

## 圖標(biāo)要求
- 使用Font Awesome或Material Icons等專業(yè)圖標(biāo)庫 (通過CDN引用)
- 避免使用emoji作為圖標(biāo)替代品

## 交互細(xì)節(jié)
[描述任何需要的交互動畫或效果，例如：]
- 按鈕懸停時有輕微放大效果
- 表單輸入框聚焦時顯示漸變邊框
- 卡片在懸停時有陰影加深效果

## 特別注意
- 確保代碼干凈且有適當(dāng)注釋
- 提供完整可運(yùn)行的HTML文件，包含所有必要引用
- 優(yōu)化視覺層次和間距，確保設(shè)計美觀專業(yè)

如何生成設(shè)計稿：　

昨天群里一個朋友提了一嘴能不能轉(zhuǎn)設(shè)計稿想了一下，居然還真可以，而且可以幫你生成帶自動布局的 Figma 設(shè)計稿和對應(yīng)可復(fù)用的組件。具體的方法也很簡單　

1. 1. 只需要將你生成的代碼部署到線上，如果你用 Claude 或者 POE 都有這個功能，如果你用的軟件沒有發(fā)布能力的話可以用這個 yourware.so 產(chǎn)品。

2. 2. 獲得了線上的鏈接之后，我們只需要使用 html.to.design 這個 Figma 插件就可以很好的將網(wǎng)頁轉(zhuǎn)換為設(shè)計稿，不過每天只免費(fèi)十次，如果你高強(qiáng)度用的話還是付費(fèi)。

好了這就是全部的教程和內(nèi)容，如果你覺得有幫助的話可以幫我點個贊或者喜歡，也可以轉(zhuǎn)發(fā)給需要的朋友。