Bible Network Crypto DeFi Onchain RWA AI Agent Stablecoin Chain SAFU CryptoTax DeFAI AGI Claude Me Claude Skill Claude Design Claude Cowork
獨立知識媒體
與任何項目無關聯
用 Claude Design,把想法變成可互動的視覺
claudedesign-me.com
最新
AI 生成介面容易忽略的無障礙問題:不只是配色,語意結構才是重災區  ·  案例分析:一個雜亂儀表板的重新設計,問題出在哪、怎麼用 AI 輔助拆解  ·  Figma、Canva、Claude Design 怎麼選:三款工具的定位差異拆解  ·  送出提示詞前的檢查清單:五個問題,用好壞範例對照  ·  產出範例:一頁式作品集網站,從提示詞到成品拆解  ·  五個常見設計任務的提示詞範本,複製改幾個字就能用
output-library

產出範例:一頁式作品集網站,從提示詞到成品拆解

30 秒速讀
配色跟排版 AI 通常處理得不錯,但「你的個人特色是什麼」這件事,AI 沒辦法幫你決定。

完整解析 +
01 · 為什麼發生?

這個案例裡,AI 產出結構完整、卻在「一句話定位」上填入通用文字,這反映了什麼規律?

這反映了 AI 在有明確格式規則(幾個區塊、每個區塊放什麼類型的內容)時表現得比較穩定,但在需要「這是關於你、只有你自己知道答案」的內容時,只能依賴統計上最常見的說法去填補——因為 AI 沒有管道知道使用者實際的個人特色是什麼,除非使用者明確告訴它。

這跟提示詞裡有沒有給資訊直接相關:提示詞裡有明確要求「三張作品卡片、每張有縮圖跟一句話說明」,這是格式規則,AI 能照做;但提示詞裡沒有提供「你的一句話定位該寫什麼」這個具體答案,AI 只能自己猜一個聽起來合理的版本。

02 · 運作原理是什麼?

第二輪調整只改了兩個元素、結構完全沒動,這個結果是巧合,還是可以預期的?

這是可以預期的,因為第二輪的指令本身就只針對這兩個具體元素下達,沒有要求 AI 重新處理整體結構。這正好對應到「逐段調整、範圍越小越可控」的原則——如果第二輪的指令是「幫我重新調整一下整個網站的感覺」這種模糊指令,AI 很可能會連同已經確定的排版一起重新生成,反而增加不必要的變動。

把調整範圍明確限定在「一句話定位」和「強調色」這兩個點,等於是告訴 AI「其他地方不要動」,這個結果不是運氣好,是提示詞本身的精確度換來的可預期結果。

03 · 如何應用

如果使用者一開始就自己寫好一句話定位、直接放進第一版提示詞,能不能省掉第二輪調整?

能,理論上如果第一版提示詞就直接附上「一句話定位:[使用者自己寫的版本]」,而不是留給 AI 自己生成,這個欄位在第一版就會是最終版本,不需要第二輪修正。這個案例會分兩輪調整,某種程度上反映的是提示詞規劃時的順序選擇——先看 AI 會自己填出什麼、再針對填得不夠好的地方補強,跟一開始就把所有已知的具體答案都給齊,是兩種不同的工作方式,各有適合的情境。

如果你已經很清楚自己要什麼(例如定位語句、確切配色數值),一開始就給齊通常更省事;如果你還在摸索、想先看看 AI 會給出什麼版本作為參考,分階段調整反而能提供一個比較基準,兩種做法沒有絕對優劣,取決於你進入這個任務時已經想清楚了多少。

04 · 我該怎麼做?

這個案例是接案設計師的一頁式作品集,如果換成別的產業或用途(例如公司內部工具的原型),這裡的觀察還適用嗎?

核心觀察——「格式規則 AI 處理得穩定,個人化或情境特定的內容需要人工把關」——適用範圍相當廣,不只限於作品集網站。換成公司內部工具原型,AI 同樣能穩定處理「有幾個頁面、每個頁面放哪些元件」這類格式規則,但涉及「這個內部工具具體要解決我們公司哪個流程的哪個痛點」這種只有使用者自己知道的情境資訊,AI 一樣只能猜測,一樣需要使用者明確提供。

可以把這個規律當成一個通用的判斷依據:任務裡凡是「換了任何一個客戶或情境,答案都不會變」的部分,適合讓 AI 處理;凡是「只有這個情境下才成立」的部分,通常就是需要親自把關、不能完全交給 AI 猜測的地方。

完整內容 +

這篇文章拆解一個實際的產出案例:一位接案設計師需要一份能快速上線的一頁式作品集網站。不是單純展示成品長什麼樣,而是把「提示詞給了什麼、AI 產出了什麼、哪裡需要手動調整」這整個過程攤開來看,讓你知道類似任務可以怎麼安排。

需求背景

使用者是一位剛開始接案的介面設計師,需要一個能放三到五個代表作品、附上簡短自我介紹跟聯絡方式的網站,時間有限,不需要複雜的多頁式架構,目標是先有一個能放進履歷或提案裡的連結。

第一版提示詞

「幫我做一個一頁式作品集網站,我是一位介面設計師,主要做行動應用程式介面設計。網站需要:頂部一個簡短的自我介紹區塊(姓名、一句話定位、大頭照位置);一個精選作品區塊,三張作品卡片,每張卡片有縮圖、專案名稱、一句話說明這個專案解決了什麼問題;一個關於我區塊,簡短說明背景跟擅長領域;底部聯絡方式(email、LinkedIn、履歷下載連結)。風格:簡潔留白、黑白搭配一個強調色、字體現代但不要太冷酷,希望有點溫度。」

第一版產出與觀察

第一版的整體版面結構符合要求,四個區塊都到位,作品卡片的排版也合理。但有幾個地方需要調整:自我介紹的「一句話定位」欄位,AI 填入的是通用樣板文字(類似「打造直覺又美觀的使用者體驗」),這種話術幾乎可以套用在任何一位介面設計師身上,缺乏個人辨識度;強調色 AI 選了一個偏冷的藍色,跟提示詞裡「希望有點溫度」的描述不完全吻合。

第二輪調整

針對這兩個問題分別下了具體指令:「一句話定位」直接提供了使用者自己寫的版本,不讓 AI 重新生成;強調色的部分明確要求換成「暖橘色,但不要太亮、偏向陶土色調」,並且說明原因是希望呈現手作感而不是科技感。這一輪修改只針對兩個具體元素,其餘結構跟排版沒有再次變動,這也是先前提過的「逐段生成、範圍越小越可控」的原則在實際案例裡的體現。

最終版差異

調整後的版本跟第一版相比,版面結構完全沒變,變動的只是強調色跟自我介紹文字這兩個內容層面的細節——這也印證了一個實務觀察:AI 生成的第一版通常結構是可用的,真正需要人工介入的地方往往是內容的個人化程度跟視覺調性的微調,而不是整個版面重來一次。

這跟你的設計工作有什麼關係

這個案例值得留意的地方,是「一句話定位」這種看起來很小的欄位,反而是最容易被 AI 填入通用樣板文字、也最需要使用者親自把關的地方——AI 沒有辦法幫你決定「你的個人特色是什麼」,這件事本質上需要你自己想清楚,再明確提供給 AI,而不是指望 AI 幫你生成出獨特性。視覺層面(配色、排版)AI 通常能處理得不錯,但涉及「這是關於你自己」的內容,親自把關這一步不能省。

圖解
Portfolio Output: Draft to Final對照圖:第一版(通用定位語、冷色調)與最終版(使用者自寫定位語、暖色調),結構完全不變只調整兩個內容元素Portfolio Output: Draft to FinalFirst DraftBio + generic taglineAbout sectionContact (cool blue accent)2 targetededits onlyFinal VersionBio + user's own taglineAbout section (unchanged)Contact (terracotta accent)Claude Design Me · claudedesign-me.com
歡迎截圖分享,轉載請註明來源
提問
請至少輸入 10 個字
相關文章
AI 生成介面容易忽略的無障礙問題:不只是配色,語意結構才是重災區
advanced · 08/15
案例分析:一個雜亂儀表板的重新設計,問題出在哪、怎麼用 AI 輔助拆解
cases · 08/15
Figma、Canva、Claude Design 怎麼選:三款工具的定位差異拆解
comparisons · 08/15
送出提示詞前的檢查清單:五個問題,用好壞範例對照
prompt-examples · 08/14