實測 Awesome-design-md – 精準復刻知名產品網頁風格

AI教程9小時前發佈新公告 AI管理員

0 0 0

今天發點適合做網頁設計的東西。

平時我們讓 Cursor、Claude Code、Codex、這些Agent 做頁面，經常會遇到一個問題：跟 AI 說了想要復刻什麼風格的頁面，但是復刻出來總是隻有一點點相似，根本不符合我們的預想。

今天就給大家推薦一個GitHub上的項目叫：Awesome-design-md，專門用來複刻知名產品的網頁風格。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

01. 項目簡介

Awesome-design-md 本質上是一份 AI 可讀的設計規範集合。

項目地址：https://github.com/VoltAgent/awesome-design-md

Awesome-design-md收錄了73 個知名產品網頁的 design languages，如：Claude、xAI、Ollama、Cursor、Notion、Figma、Apple。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

每個品牌 DESIGN.md 通常會覆蓋：

品牌氣質和視覺原則
主色、輔助色、背景色、語義色
字體、字號、字重、行高
間距、圓角、陰影、佈局規則
按鈕、卡片、輸入框、側邊欄等組件寫法
動效、交互反饋、內容語氣
給前端實現的 CSS / Tailwind 參考

02. 項目實測

用法很簡單，倉庫下載下來之後打開 design-md 目錄，選一個你想復刻的目標產品的 DESIGN.md，粘到 Cursor、Claude Code 等工具的規則文件裏就行。

如果你下載到了你的項目文件夾中，你也可以直接在提示詞裏說你想用誰的 DESIGN.md。

case 1 Claude 風格復刻

提示詞：請讀取Awesome-design-md項目中的Claude DESIGN.md，按 Claude 的設計語言做一個 AI 寫作工具首頁。產品名：文稿夥伴。頁面需要包含：1. 首屏：產品名、短標語、文本輸入框、主 CTA、次 CTA。2. 產品預覽：改寫結果、語氣設置、標題候選、版本狀態。3. 功能模塊：文章改寫、標題生成、語氣調整、批量處理。4. 使用流程：粘貼草稿、選擇目標、生成版本、人工確認。5. 適用對象：公衆號作者、產品經理、運營團隊、獨立開發者。6. 開始使用區：輸入示例、提交 CTA。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

Claude 的暖米色、珊瑚色 CTA、安靜排版和深色產品預覽都比較像，但是產品預覽還不如 Claude 有吸引力。

case 2 Notion 風格復刻

提示詞：請讀取Awesome-design-md項目中的Notion DESIGN.md，按 Notion 的設計語言做一個團隊知識庫首頁。產品名：NoteRoom。頁面需要包含： 1. 左側導航：工作區、團隊空間、項目文檔、收藏夾。 2. 頂部區域：搜索框、新建文檔入口、成員入口。 3. 最近編輯文檔：文檔標題、作者、更新時間。 4. 團隊空間：產品、研發、運營、市場。 5. 收藏文檔：常用模板、會議記錄、發佈計劃。 6. 空狀態：還沒有文檔時的提示和新建入口。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

做的真的很像一個成熟的工具首頁了。左側導航、頂部搜索、最近文檔、團隊空間、收藏文檔和空狀態都像真實知識庫首頁。Notion 的灰白界面、輕邊框、低對比、彩色空間塊處理得自然。

case 3 Apple 風格復刻

提示詞：請讀取Awesome-design-md項目中的Apple DESIGN.md，按 Apple 的設計語言做一個高端 AI 硬件產品首頁。產品名：Auralink。頁面需要包含： 1. 首屏：產品名、短標語、主 CTA、次 CTA、產品展示區。 2. 產品亮點：展示 3 到 4 個核心賣點。 3. 性能參數：芯片、續航、連接方式、重量。 4. 使用場景：辦公、通勤、創作、會議。 5. 系統生態：手機、電腦、耳機、雲端同步。 6. 購買區：價格、顏色選擇、購買 CTA。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

這是我覺得最像的一個，我都以爲蘋果出新產品了。Apple 的雙層導航、超大留白、產品攝影優先和購買配置區都做出來了。

case 4 Nike 風格復刻

提示詞：請讀取Awesome-design-md項目中的Nike DESIGN.md，按 Nike 的設計語言做一個運動鞋產品詳情頁。產品名：AeroRun 01。頁面需要包含： 1. 首屏：產品名、短標語、產品大圖、價格、主 CTA、次 CTA。 2. 商品選擇：顏色選擇、尺碼選擇、數量選擇。 3. 產品特點：緩震、透氣、抓地、輕量。 4. 運動場景：跑步、訓練、日常穿搭。 5. 推薦搭配：上衣、短褲、襪子、揹包。 6. 購買區：庫存狀態、配送說明、加入購物車 CTA。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

商品大圖、縮略圖軌、右側購買面板、黑色 pill CTA、Soft Cloud 背景、尺碼顏色數量選擇都很到位。如果想更 Nike，可以再加一張運動場景攝影，強化“商品詳情 + 運動大片”的對比。

case 5 法拉利風格復刻

提示詞：請讀取Awesome-design-md項目中的Ferrari DESIGN.md，按 Ferrari 的設計語言做一個高性能 AI Agent 產品發佈頁。產品名：Rosso Agent。頁面需要包含： 1. 首屏：產品名、短副標題、主 CTA、次 CTA、產品視覺區。 2. 速度能力：展示任務響應、併發處理、自動執行。 3. 自動化任務：郵件、表格、網頁操作、代碼任務。 4. 精密控制：權限設置、任務回放、人工確認。 5. 安全機制：日誌、審批、數據隔離。 6. 發佈 CTA：申請試用、查看演示。

實測 Awesome-design-md – 精準復刻知名產品網頁風格

這是五個裏品牌轉譯最有衝擊力的。近黑畫布、Rosso Corsa、銳角 CTA、電影感首屏、紅色執行線和控制檯視覺都很貼 Ferrari，首屏視覺非常強。