探索AI的魔法：PDFDAO網站UI優化的革命性步驟
整理版優先睇
用 AI 系統性優化網站 UI：PDFDAO 嘅實戰經驗，提示詞策略係關鍵
呢篇文章係一位獨立開發者分享佢用 AI 幫手優化自己網站 UI 嘅實戰經驗。佢做咗個叫 PDFDAO 嘅在線 PDF 工具平台，功能好多，但用戶反映唔好用、界面亂、資訊太密。佢唔想自己慢慢改，決定藉助 AI 嚟一次系統性嘅 UI 體驗優化。
佢嘅做法係先用 GPT Thinking 去優化提示詞，再用 Claude 執行，結果出一份超過一萬字嘅詳細規劃書，涵蓋診斷、改版方向、交互流程同視覺品牌建議。最終效果明顯改善咗視覺層級同用戶體驗。
整體結論係：AI 唔只係寫 code 或者生成內容咁簡單，只要提示詞結構得宜，佢可以扮演專業設計總監，幫你做完整嘅 UX 修復方案。呢種方法比起自己盲目調整更高效、更有系統，適合所有面對 UI 問題嘅創業者同開發者。
- AI 可以系統性優化網站 UI，關鍵在於提示詞要夠清晰，包含背景、問題同具體步驟。
- 先讓 GPT Thinking 優化提示詞結構，再交俾 Claude 執行，可以大幅提升輸出質素。
- 相比自己左改右改，AI 能從專業設計角度提供多層次建議，覆蓋診斷、改版、交互同品牌。
- 提示詞入面要明確要求「輕度、中度、重度」三種改版方向，先叫 AI 比較再揀最適合方案。
- 直接套用文中提供嘅提示詞模板，就可以即刻開始優化自己嘅網站，唔使由零開始摸索。
UI/UX 優化提示詞模板
用於要求 AI 分析並優化網站 UI 嘅詳細 Prompt，包含網站背景、當前問題同六大步驟（診斷分析、改版思路、交互流程優化、UI重構建議、視覺品牌建議、總結輸出）。直接複製用就得。
內容片段
你現在是一位有20年經驗的UI/UX設計總監，請你詳細分析並優化我的網站界面。網站名稱：PDFDAO（https://www.pdfdao.com）網站定位：一個在線PDF工具集合平台，提供多種功能如PDF轉Word、合併、壓縮、加密等。當前問題：
- 首頁功能堆疊過多，信息密度高；- 缺少主次視覺層級；- 功能入口按鈕過小、排列緊湊；- 缺乏品牌視覺一致性；- 用戶容易迷失，不知道該點擊哪裏開始。請按以下步驟生成方案：1️⃣ 【診斷分析】 根據常見的SaaS工具和PDF類網站（如 SmallPDF、iLovePDF、TinyWow）的優秀案例，對PDFDAO首頁進行交互和信息架構分析，指出界面密集、功能佈局混亂、層級不清等問題根源。2️⃣ 【改版思路】 給出三種不同層次的改版方向：
- A：輕度優化（保留現有佈局結構，改進留白與分區）- B：中度優化（重構信息層級，聚焦主流程）- C：重度重構（重新設計用戶路徑和視覺風格）3️⃣ 【交互流程優化】 描述理想的用戶使用路徑，例如從首頁進入“PDF轉Word”的流暢步驟，並指出當前交互中的障礙。4️⃣ 【UI重構建議】 從以下維度給出設計語言與組件層面的優化建議：
- 視覺節奏與留白比例- 按鈕與圖標統一規範- 色彩與字體層次- 響應式佈局（桌面端 + 移動端）5️⃣ 【視覺與品牌風格建議】 提供符合PDFDAO定位的視覺風格建議（如簡約、科技感、信任感），可參考Google Drive、Canva、Adobe Express的視覺語言。6️⃣ 【總結輸出】 輸出最終建議表格，包含每個頁面（首頁、工具頁、結果頁）的：
- 問題診斷- 改進方向- 推薦設計模式- 可參考案例（附示例網站）請生成一份詳細、可執行的UI/UX修復方案文檔。問題背景：功能多但難用，係好多開發者嘅痛
好多創業者、獨立開發者或設計師都有個共同痛點：自己整嘅網站功能好多，但就係唔好用，睇落亂、㩒落難。呢位作者做嘅 PDFDAO 網站就係咁，佢係一個集合咗 PDF 轉換、壓縮、合併、加密等功能嘅在線工具平台。
作者本身唔係 UI/UX 專家，佢想用 AI 嚟一次過系統性改善，而唔係靠直覺逐個位執。佢嘅目標係要令網站 主次分明、用戶唔使諗就知點用。
AI 提示詞策略：先優化問題，再揾 AI 執行
作者嘅做法唔係就咁掉句「幫我優化UI」俾 AI，而係先用 GPT Thinking 去分析點樣先可以問得更好。呢一步好關鍵，因為提示詞嘅質素直接決定 AI 輸出嘅價值。
優化完之後嘅提示詞，主角係一個 20年經驗嘅UI/UX設計總監，要求佢按六大步驟產出方案：診斷分析、改版思路、交互流程、UI重構、視覺品牌、總結輸出。呢個結構令 AI 嘅回應好清晰、好有條理。
然後作者將呢個提示詞交俾 Claude 執行，結果生成咗一份超過 一萬字 嘅詳細規劃書，內容非常扎實。
最終效果同反思：AI 係一個系統化嘅設計助手
作者展示咗優化前後嘅對比，明顯見到 功能區塊更分明、留白更充足、按鈕大小統一，整體用戶體驗提升唔少。佢認為呢個方法比起自己慢慢試錯快好多倍。
佢亦提醒，AI 嘅建議始終要 用人嘅判斷去篩選，唔係全部照單全收。但呢個流程（診斷 → 改版方向 → 交互細節 → 視覺規範）本身就係一個好實用嘅 UI 優化框架，值得其他開發者參考。
- AI 可以快速產出多個改版方案（輕度、中度、重度），方便你揀最適合嘅方向。
- 唔使靠直覺亂改，AI 會基於 SmallPDF、iLovePDF 等競品分析俾出具體建議。
- 整個過程只需要幾個小時，成本極低，效果顯著。
💡 一、問題背景
好多創業者、獨立開發者或者設計師都有一個共同嘅痛點：
「我做嘅網站功能幾多，但係就唔好用，睇起嚟亂、撳起嚟難。」
呢個正係我整緊 PDFDAO 網站時遇到嘅問題。
佢係一個線上 PDF 工具平台，集齊咗 PDF 轉換、壓縮、合併、加密等功能。
於是，我決定藉助 AI，做一次系統性嘅 UI 體驗優化實驗。
🧠 二、AI 提示詞嘅思路流程
先用咗 GPT Thinking 優化提示詞
Claude 根據提示詞嚟執行
下面係 gpt tinking 嘅輸出
然後將提示詞畀 claude code
結果如下：
計劃書大概有1萬字啦，非常詳細，如果想睇具體內容嘅朋友，可以私信：
最終效果如下：
💡 一、問題背景
很多創業者、獨立開發者或設計師都有一個共同的痛點：
“我做的網站功能挺多，但就是不好用，看起來亂、點起來難。”
這正是我在做 PDFDAO 網站時遇到的問題。
它是一個在線 PDF 工具平台，集成了 PDF 轉換、壓縮、合併、加密等功能。
於是，我決定藉助 AI，做一次系統的 UI 體驗優化實驗。
🧠 二、AI 提示詞的思路流程
先使用了 GPT Thinking 優化提示詞
Claude 根據提示詞來執行
下面是gpt tinking的輸出
然後把提示詞給到claude code
結果如下：
規劃書大概有1萬字吧，非常詳細，如果想看具體內容的夥伴，可以私信：
最終效果如下：