Skip to content

提示詞模板庫 ​

全書用到的提示詞集中在這一頁,方便整段複製。方括號裡的東西換成你自己的。

每條都註明了在哪一步用、在哪做。想知道某條為什麼這麼寫,點回對應的章節。

PPT 工作坊全套 ​

這一套來自 PPT 工作坊,按順序用。

條什麼時候用在哪做
P0需要理清故事和決策邏輯任意 AI 對話
P1需要一張圖對比多個視覺方向「Image Mode」
P1B想讓 AI 幫你選方向OpenDesign 對話或任意 AI 對話
P2需要一頁一頁的內容方案任意 AI 對話
P3可以開始做第一版可編輯 deck 了「Deck Mode」
P4第一版需要向參考圖靠攏OpenDesign 對話
P5需要真實 logo 和產品素材OpenDesign 對話
P6只在有用的地方加 AI 配圖OpenDesign 對話
P7資料密集的頁面需要圖表OpenDesign 對話
P8想加剋制的 3D 效果OpenDesign 對話
P10給整份 PPT 加全域性動效和互動OpenDesign 演示 / 對話

P0 · 先定這份 PPT 要說服誰 ​

text
我要做一份關於 [主題] 的演示。

觀眾:
[描述觀眾——他們是誰,對這件事已經知道多少,有多少時間]

這份演示要讓觀眾理解:
1. [他們必須理解的第一件事]
2. [他們需要的背景或者證據]

這份演示要把觀眾帶到這個判斷或決定:
[你希望他們相信什麼 / 決定什麼 / 去做什麼]

請幫我理清:
1. 這份演示的核心敘事是什麼。
2. 最重要的那個論點是什麼。
3. 建議的頁序。
4. 哪些資訊應該用視覺呈現,而不只是文字。

先不要設計幻燈片。先不要寫 HTML。只談故事、結構和決策邏輯。

→ 第 0 步

P1 · 一張圖裡放多個視覺方向 ​

text
我在準備一份關於 [主題] 的演示。

觀眾是:
[觀眾]

演示的目標是:
[目標 / 要促成的決定 / 核心論點]

請生成一張參考圖,在同一張圖裡展示這份 PPT 可能的多種視覺風格。

要求:
1. 一張圖裡包含 4 到 6 個明顯不同的風格方向。
2. 每個方向都做成同一份演示的封面頁或者關鍵頁的樣子。
3. 各方向在版式、字型、配色、質感、視覺語言上要真的不一樣。
4. 現在不要生成完整的 PPT。
5. 不要分成多張圖。全部放在一張圖裡,方便我對比。
6. 每個方向標一個簡短的風格名。

要體現的內容:
[貼上 5 到 10 條要點]

這張圖的用途是幫我選定最終的 PPT 風格。

→ 第 1 步

P1B · 讓它幫你選方向 ​

text
這是那張包含多個風格方向的參考圖。

我的演示主題是 [主題]。
觀眾是 [觀眾]。
我要觀眾得出的結論是 [結論]。

請對比這些風格方向,推薦最合適的一個。

評估維度:
1. 它是否支撐我的論點。
2. 它是否適合這批觀眾。
3. 它能不能撐得起一整份 deck,而不只是一張封面。
4. 它有沒有給文字、圖表、截圖和 logo 留出足夠空間。

先不要生成 deck。幫我選定一個方向,並說明理由。

→ 第 1 步

P2 · 一頁一頁的內容方案 ​

text
我要做一份關於 [主題] 的 PPT。

觀眾:
[觀眾]

觀眾應該理解:
[他們要理解什麼]

觀眾應該得出的結論或決定:
[他們應該相信什麼 / 決定什麼 / 去做什麼]

原始材料:
[貼上筆記、轉錄、報告或者要點]

請給出一頁一頁的內容方案。

要求:
1. 現在不要設計幻燈片。
2. 現在不要寫最終的 HTML。
3. 一共 [頁數] 頁。
4. 每頁給出:頁標題、一句話核心資訊、主要支撐點、建議的視覺元素、
   這頁需不需要圖表 / logo / 配圖 / 截圖 / 動效。
5. 每頁只講一個想法。
6. 單頁文字不要太多。

大綱給完之後,再做一版簡單的 HTML 預覽,把每頁文字放進一個樸素
版式裡,讓我在視覺設計開始之前先審一遍結構。

→ 第 2 步

P3 · 生成第一版可編輯 deck ​

text
我要做一份 PPT。

請以附上的參考圖作為視覺方向。

重點:
1. 復現參考圖裡我選定的那個風格方向。
2. 做成可編輯的、基於 HTML 的幻燈片。
3. 除非我另外說明,畫幅比例與參考圖保持一致。
4. 儘量保留原有的頁面文字與結構。
5. 不要把整份 deck 變成靜態圖片。
6. 每一頁要有視覺完成度,但必須保持可讀、能拿上臺講。

選定的視覺風格:
[描述你從圖裡選中的那個方向]

頁面內容:
[貼上定稿的一頁一頁內容方案]

請生成第一版完整的 deck。

→ 第 3 步

P4 · 對著參考圖找差距 ​

text
這是最初那張參考圖。

請把當前的 deck 和這張參考圖做對比。

重點看:
1. 版式結構
2. 字型的字號階梯與性格
3. 配色
4. 間距與對齊
5. 視覺層次
6. 質感、縱深與氛圍
7. 每一頁是否像屬於同一套設計系統

不要只告訴我差在哪。請直接把 deck 改好。

呼叫你全部的設計和編碼能力去補上這個差距,同時保持 deck 可讀、
可編輯。

改完之後總結:
1. 你改了什麼。
2. 哪幾頁改善最大。
3. 哪些地方還需要人工複核。

→ 第 4 步

P5 · 換上真的 logo 與素材 ​

text
請通讀整份 deck,找出應該放真實外部素材的位置。

要找的是:
1. 公司 logo  2. 產品 logo  3. 應用圖示
4. 平臺介面截圖  5. 公開的產品圖或介面參考

要求:
1. 去找到合適的官方素材或者高品質版本。
2. 下載並插入到對應的頁面。
3. logo 保持原有品牌配色。
4. 不要對官方 logo 做重新著色、變形或重新設計。
5. 不要每一頁都加素材。只在能提升清晰度、可信度或識別度的地方加。
6. 插入的素材要跟版式協調,不要把頁面塞滿。
7. 如果某個素材找不到官方版本,不要自己畫一個近似的。留一個明確
   的佔位符,並在總結裡告訴我。

更新完之後告訴我:哪些頁加了素材、加了什麼、哪些需要我人工核實。

→ 第 5 步

P6 · 只在有用的地方加配圖 ​

text
請通讀整份 deck,判斷哪些頁面加 AI 生成的配圖會讓演示更清楚或者
更有說服力。

要求:
1. 不要每一頁都加 AI 配圖。
2. 只在圖能幫助解釋一個想法、支撐一個論點,或者讓某個關鍵時刻
   更容易被記住的地方加。
3. 已經有足夠視覺內容的頁面不要再加。
4. 圖的風格要跟選定的 deck 風格保持一致。
5. 如果你能生成影像,就直接生成並插入 deck。
6. 如果不能,就把我應該拿去別的工具用的影像提示詞寫出來。
7. 圖中不要出現任何文字。

對於每一張圖,告訴我:頁碼、這張圖的作用、用的影像提示詞、
為什麼這一頁需要一張圖。

→ 第 6 步

P7 · 加 ECharts 圖表 ​

text
請掃一遍整份 deck,找出哪些頁面加 ECharts 視覺化會更容易理解。

只在真正有用的地方用 ECharts。以下情況可以考慮:對比、趨勢、排名、
市場份額、採納曲線、調研結果、前後指標對比、技術基準。

要求:
1. 不要每一頁都加圖表。
2. 每一處選最合適的圖表型別。
3. 圖表樣式要跟 deck 的視覺系統一致,不要 ECharts 預設配色。
4. 有真實資料就用真實資料。
5. 如果缺少確切資料,用明確標註過的示意資料,並告訴我這裡需要核實。
6. 圖表的位置要能支撐這一頁的核心資訊。
7. Y 軸從 0 開始。

更新完之後總結:哪些頁加了圖表、什麼型別、用的什麼資料、
哪些資料點需要核實。

→ 第 7 步

P8 · 剋制地加 Three.js ​

text
請掃一遍整份 deck,找出哪些地方加一點剋制的 Three.js 效果會更好。

只在 Three.js 能支撐這一頁的資訊時才用。

合適的用法:開場頁一個低調的動態背景;某個核心概念的 3D 隱喻;
不影響可讀性的粒子氛圍;幫助解釋系統、網路或者流程的空間視覺化。

要求:
1. 不要每一頁都加 3D 效果。
2. 避免視覺噪音。
3. 保持文字可讀。
4. 保持效能合理。
5. 效果要跟 deck 的視覺風格一致。

更新完之後告訴我:哪些頁加了、加了什麼、為什麼它支撐這一頁、
有沒有哪個效果為了清晰應該去掉。

→ 第 8 步

P10 · 全域性動效與互動 ​

text
請為整份 deck 加上演示級別的過場動畫和互動。

目標是讓這份 PPT 從頭講到尾時是流暢、完整的。

請加:
1. 頁與頁之間的切換效果。
2. 話題轉換時的章節級轉場。
3. 關鍵標題、卡片、圖表、圖片的入場動畫。
4. 每頁最重要那條資訊的低調強調動效。
5. 只在合理的地方加懸停或點選互動。
6. 圖表、卡片或視覺模組上適度的輕量互動細節。

約束:
1. 不要給每個元素都加動效。
2. 不要做得花哨或者分散注意力。
3. 所有文字保持可讀、穩定。
4. 圖表的標籤和資料始終可見。
5. 互動要簡單到能在現場演示時使用。
6. 整份 deck 的動效節奏要一致。
7. 最佳化效能,演示模式下不能卡。
8. 必要資訊不能藏在互動後面。

加完之後總結:轉場風格、哪些頁加了自定義互動、哪些頁加了特殊
入場或強調動效、哪些頁的動效應該減少或需要人工檢查。

→ 第 10 步

設計系統 ​

從截圖抽一套 DESIGN.md ​

text
這幾張是我們產品的介面截圖。

請抽出一份完整的 DESIGN.md,包含:

1. 調色盤:主色、輔色、語義色(成功/警告/錯誤/資訊)、中性色階,
   每一級給十六進位制值,並標註它在截圖裡出現在什麼位置、佔多大面積
2. 字型:字族、字號階梯(每一級標註用途)、字重、行高、字距
3. 間距系統:基礎單位、常用間距值、圓角、陰影
4. 元件規範:按鈕(主要/次要/文字型,各狀態)、輸入框(預設/聚焦/
   錯誤/停用)、卡片、表格、標籤
5. 動效性格:時長、緩動函式、哪些互動該有動效
6. 語氣:人稱、句長、正式程度

重要:
- 拿不準的地方明確標出來,不要猜一個值填進去
- 截圖裡看不到的(錯誤態、空態、深色模式)列成待補清單,不要編
- 主色的使用比例要寫清楚:它是大面積背景色還是隻用於行動按鈕

→ 案例 04

補深色模式 ​

text
這份 DESIGN.md 目前只有亮色。請補一套深色模式的色值。

要求:
- 不是簡單反轉。中性色階要重新設計,深色下的層次靠亮度差而不是陰影
- 主色在深色背景上的對比度要過 WCAG AA
- 語義色在深色下也要保持可識別
- 標註哪些顏色兩個模式共用,哪些各有一套

品質檢查 ​

五維度自我批判 ​

text
對當前產物跑一次五維度評審:理念、視覺層次、細節、功能、創新,
每項 0 到 10 分。

每個扣分點都要給出具體證據(哪個元素、哪一處),不要泛泛而談。

輸出三欄:
- 保留:做對了的,說明為什麼對
- 要改:必須改的,按嚴重程度排
- 順手能修:五分鐘內能改完的

不要在這一輪直接改,先給我看報告。

→ 進階 · 反 AI 味

反 AI 味自查 ​

text
把當前產物按下面這份清單自查一遍,逐條給出結論和證據:

1. 有沒有漸變背景?有的話是不是設計系統裡定義的?
2. 圖示是不是都對應具體功能?有沒有純裝飾的?
3. 所有數字是真實的還是示意的?示意的有沒有標註?
4. 版式是不是內容決定的,還是預設三欄?
5. 資訊密度有沒有按重要性分配,還是全篇一樣?
6. 每張圖有沒有在解釋某個點?
7. 文案裡有沒有「賦能」「一站式」「無縫」這類沒有資訊量的詞?
8. 狀態覆蓋:空態、載入態、錯誤態、極值,有沒有做全?
9. prefers-reduced-motion 有沒有被尊重?
10. 對比度有沒有過 WCAG AA?

命中的直接改掉,改完告訴我改了哪幾處。

狀態補全 ​

text
這一版按 state coverage 的要求補全:空態、載入態、錯誤態、
單條資料、大量資料,每一種都要有對應的渲染,不要只做填滿的那一版。

錯誤態要說明怎麼恢復,空態要給出下一步動作。

通用約束塊 ​

下面這段可以粘在任何生成類提示詞的末尾:

text
約束:
- 所有數字如果沒有真實來源,寫佔位符並標註,不要編
- 不要漸變背景,用設計系統裡的實色
- 圖示必須對應具體功能,沒有對應的就用文字
- 互動元素要有預設、hover、focus、disabled 狀態
- 手機寬度下不能有橫向滾動
- 對比度過 WCAG AA
- 尊重 prefers-reduced-motion
- 所有文字必須是真實文本節點,不能是圖片

把一次成功固化成技能 ​

text
剛才那次生成的效果我很滿意。請把這次的做法固化成一個 SKILL.md。

要包含:
1. 這個技能適用於什麼場景,不適用於什麼。
2. 生成前必須問清楚的資訊(這部分會驅動需求表單)。
3. 這類產物的標準結構。
4. 這次我們做對的那些具體判斷——把它們寫成規則。
5. 硬約束:什麼絕對不能做。
6. 驗收標準。

寫完之後告訴我,哪些地方你是從這一次的上下文裡推斷的,
可能不適用於下一次。

→ 進階 · 技能

非官方社群教程 · 內容整理自 open-design.ai 公開資料與實測記錄 · 以官方最新說明為準