GPT-5.4 在前端開發上的能力顯著提升，但如何向模型提出正確的問題，直接決定了輸出品質。泛型卡片網格和平庸設計並非模型的技術限制，而是缺乏明確指引導致的結果。

模型的預設傾向

GPT-5.4 在訓練資料中見過最常見的模式時會自動採用。這導致生成通用的卡片網格、視覺層級薄弱、安全但容易遺忘的排版。儘管模型在前端工作上已大幅進步——包括更視覺化的野心、原生圖像理解和透過 Playwright 自我驗證與精化輸出的能力——但它仍需要方向指引。模型的用心程度完全取決於提示詞的明確性。

四個基礎原則

• 將推理設定為低或中等級別：看似違反直覺，但能產生更強的結果，保持模型速度與專注力
• 事先定義設計系統：排版、色盤、佈局規則必須優先確定
• 提供視覺參考：截圖或情緒板能幫助模型從圖像推斷節奏、間距和比例
• 使用真實內容：真實文案和產品背景會帶來深度思考；佔位符文字只會產生佔位符思維

有效的設計約束

OpenAI 自家的起始提示詞納入以下規則：

• 單一構圖：首屏必須閱讀為一個完整構圖
• Hero 區域禁止卡片設計
• 品牌優先：品牌頁面上產品名稱必須具有 Hero 級別的視覺層級
• Landing 頁面預設採用全寬 Hero
• 最多兩種字體，一種輔助色
• 每個區段一個功能、一個目標、一個重點

檢驗標準：移除 Hero 圖像後頁面仍可運作，說明圖像力度不足。

頁面結構作為敘事

動手建構前，先撰寫三個要素：視覺主題（一句話描述情緒與能量）、內容規劃（Hero、支持素材、細節、最終行動召喚）、互動主題（2-3 個動作概念）。按此順序構建：

1. Hero——確立身份與承諾
2. 輔助圖像——展示脈絡
3. 產品細節——說明產品
4. 社會證明——建立信譽
5. 最終行動召喚——轉換

每個區段一項任務；若某區段試圖完成兩項任務，應移除其中一項。

應用程式與 Landing 頁面的差異

應用程式與儀表板遵循不同規則。預設採用 Linear 風格的簡約設計：平靜的表面層級、強悍的排版與間距、色彩克制、資訊密度高但易讀、卡片僅在卡片本身就是互動時才使用。避免儀表板卡片馬賽克、每個區域都有粗邊框、裝飾性漸層、多個競爭的輔助色。檢驗標準：若操作者只掃描標題、標籤和數字，能立即理解頁面嗎？

動作設計

動作產生存在感與層級，而非噪音。選擇三個有意圖的動作並堅持執行：一個 Hero 區段入場序列、一個捲動連動或粘性效果、一個懸停、揭露或佈局過渡。推薦使用 Framer Motion；純裝飾性動作應移除。

開源技能與總結

OpenAI 發布開源技能，將這些規則編碼為可重複使用的提示層。安裝指令為 $skill-installer frontend-skill，強制模型在接觸任何程式前定義視覺主題、內容規劃和互動主題。

GPT-5.4 能生成真正優秀的前端：關鍵是事先約束佈局系統、提供視覺參考、將頁面結構為敘事而非文件、使用真實內容、保持推理低或中等級別。模型具有能力；提示詞即設計簡報。