讓 Claude 做出圖文並茂的網站：UI UX Pro Max Skill 使用技巧（313 讚、475 分享）

title: "讓 Claude 做出圖文並茂的網站：UI UX Pro Max Skill 使用技巧（313 讚、475 分享）" date: 2026-03-29 author: fishtvlove source: https://www.threads.com/@fishtvlove/post/DWdvvTnk5-- category: threads tags:

Claude Code
UI/UX
Skills
網頁設計
Vibe Coding created: 2026-03-30 updated: 2026-03-30

原文摘要

有人問「Claude 弄出的網站要怎麼讓它圖文並茂、不只是文字？」，回覆者分享了一個關鍵技巧，獲得 313 讚、475 分享的超高互動。

方法

開啟 UI UX Pro Max Skill 的展示網站：ui-ux-pro-max-skill.nextlevelbuilder.io
用上面的內容丟給 Claude
跟 Claude 說：「麻煩使用上面的網頁設計。我要的是其中這一個網頁的提示詞，然後你就參照這個方式幫我做出來。」

效果

設計出來的樣式會比你單純叫它做一個網頁看起來好很多。

限制

Claude 不會自己生圖（圖片有版權問題）
所以只會做 icon 跟動畫的設計
不會有真實照片，但視覺效果靠 icon、動畫、排版就已經很好

核心觀點

1. 和之前 Claude Code 必裝技能那篇直接呼應

前面整理的社群推薦清單裡，impeccable + ui ux pro max 就是 87 讚的最高票推薦。這篇是 ui ux pro max 的具體使用教學。

2. 「給 Claude 看範例」比「用文字描述」有效得多

和 Dashboard 模板那篇（Tabler / AdminLTE / shadcn）是同一個技巧：不要用文字描述你要什麼設計，直接給它看你要的設計。 這篇把這個技巧推到極致——直接用 skill 的展示網站當範例。

3. 475 分享代表這是真實痛點

「Claude 做的網站很醜」是大量 vibe coder 的共同問題。這個簡單的方法解決了 80% 的設計問題。