提示詞模板庫
全書用到的提示詞集中在這一頁,方便整段複製。方括號裡的東西換成你自己的。
每條都註明了在哪一步用、在哪做。想知道某條為什麼這麼寫,點回對應的章節。
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 味自查
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. 驗收標準。
寫完之後告訴我,哪些地方你是從這一次的上下文裡推斷的,
可能不適用於下一次。→ 進階 · 技能