# 策展 · X (Twitter) 🔥

> 作者：Emanuele Di Pietro (@emanueledpt) · 平台：X (Twitter) · 日期：2026-03-23

> 原始來源：https://x.com/emanueledpt/status/2035402224260550921?s=20

## 中文摘要

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

## 標籤

Skills, LLM, GPT, Codex, OpenAI