-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
309 lines (291 loc) · 19.2 KB
/
Copy pathindex.html
File metadata and controls
309 lines (291 loc) · 19.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CC的密涅瓦思考包 | Minerva Mind</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header-brand">
<div class="logo">M</div>
<div>
<h1>CC的密涅瓦思考包</h1>
<p class="subtitle">Minerva Thinking Toolkit</p>
</div>
</div>
<nav class="header-nav">
<button class="nav-btn" onclick="showSection('app')">開始分析</button>
<button class="nav-btn" onclick="showSection('reference')">思考習慣總覽</button>
<button class="nav-btn" onclick="showSection('about')">關於框架</button>
</nav>
</div>
</header>
<main>
<!-- ==================== WELCOME ==================== -->
<section id="welcome" class="section-welcome">
<div class="container">
<div class="welcome-hero">
<div class="welcome-badge">免費 · 開源 · 無需註冊</div>
<h2>CC的密涅瓦思考包<br>用密涅瓦大學的思考方式拆解你的問題</h2>
<p class="welcome-desc">
密涅瓦大學從過去200年人類決策智慧中，萃取出76個底層思考習慣。
這個工具會引導你用「問對問題」框架定義問題，
再搭配合適的思考習慣進行深度分析，
最後生成可直接貼入任何AI工具的提示詞。
</p>
<div class="welcome-features">
<div class="feature-card">
<div class="feature-icon">1</div>
<h3>問對問題</h3>
<p>用現況、目標、障礙、限制四要素框定問題</p>
</div>
<div class="feature-card">
<div class="feature-icon">2</div>
<h3>選擇思考習慣</h3>
<p>從76個思考習慣中智慧推薦最適合的組合</p>
</div>
<div class="feature-card">
<div class="feature-icon">3</div>
<h3>生成提示詞</h3>
<p>產出結構化提示詞，貼入任何免費AI即可使用</p>
</div>
</div>
<button class="btn btn-primary btn-lg" onclick="startAnalysis()">開始分析問題</button>
</div>
</div>
</section>
<!-- ==================== APP WIZARD ==================== -->
<section id="app" class="section-app" style="display:none;">
<div class="container">
<div class="stepper">
<div class="stepper-track"><div class="stepper-progress" id="stepperProgress"></div></div>
<div class="stepper-steps">
<button class="step active" data-step="0" onclick="goToStep(0)"><span class="step-num">1</span><span class="step-label">描述問題</span></button>
<button class="step" data-step="1" onclick="goToStep(1)"><span class="step-num">2</span><span class="step-label">問對問題</span></button>
<button class="step" data-step="2" onclick="goToStep(2)"><span class="step-num">3</span><span class="step-label">思考習慣</span></button>
<button class="step" data-step="3" onclick="goToStep(3)"><span class="step-num">4</span><span class="step-label">問題規格書</span></button>
<button class="step" data-step="4" onclick="goToStep(4)"><span class="step-num">5</span><span class="step-label">AI 提示詞</span></button>
</div>
</div>
<!-- Step 0: Problem Input -->
<div class="step-content active" id="step-0">
<div class="card">
<h2>描述你遇到的問題</h2>
<p class="card-desc">請盡可能具體地描述你目前面臨的問題或挑戰。越詳細，後續分析越精準。</p>
<div class="sub-q-grid" style="margin-bottom:0.75rem;">
<div class="sub-q-item">
<label>問題類型</label>
<select id="problemType" class="input-select">
<option value="">-- 選擇最接近的 --</option>
<option value="decision">決策選擇（A 還是 B）</option>
<option value="conflict">衝突協調（人際 / 團隊）</option>
<option value="strategy">策略規劃（方向 / 佈局）</option>
<option value="execution">執行卡關（做不出來）</option>
<option value="innovation">創新探索（從 0 到 1）</option>
<option value="optimization">效率優化（做得更好）</option>
<option value="communication">溝通說服（對上 / 對下）</option>
<option value="personal">個人成長（職涯 / 學習）</option>
</select>
</div>
<div class="sub-q-item">
<label>緊急程度</label>
<select id="problemUrgency" class="input-select">
<option value="">-- 選擇 --</option>
<option value="urgent">急迫（一週內需要行動）</option>
<option value="soon">短期（一個月內）</option>
<option value="medium">中期（一季內）</option>
<option value="long">長期（規劃性質）</option>
</select>
</div>
</div>
<textarea id="problemInput" class="input-textarea" rows="8"
placeholder="請描述你遇到的問題，可以參考以下方向： > 具體發生了什麼事？ > 這個問題已經持續多久？ > 為什麼這是個問題（痛點在哪）？ > 你已經嘗試過什麼方法？為什麼沒用？ 例如：我們團隊要在三個月內完成新產品開發，但團隊對技術方向有分歧，預算也有限。之前試過開會討論但沒有結論..."></textarea>
</div>
<div class="step-nav">
<div></div>
<button class="btn btn-primary" onclick="nextStep()">下一步：問對問題</button>
</div>
</div>
<!-- Step 1: Ask the Right Question (ENHANCED) -->
<div class="step-content" id="step-1">
<div class="card">
<h2>問對問題框架</h2>
<p class="card-desc">
密涅瓦大學認為，問對問題需要釐清四個要素。每個要素都附帶引導子問題，幫你想得更深。
</p>
<div class="framework-block">
<div class="framework-header">
<span class="framework-badge badge-blue">現況</span>
<span class="framework-en">Current Situation</span>
</div>
<div class="framework-hints">
<span>正在發生什麼事？</span>
<span>誰受到影響？</span>
<span>已持續多久？造成什麼影響？</span>
</div>
<textarea id="frameSituation" class="input-textarea" rows="4"
placeholder="例如：團隊有8個人，從上個月開始對技術選型出現分歧，前端和後端各有想法。已經開了三次會沒有結論，專案進度落後兩週..."></textarea>
</div>
<div class="framework-block">
<div class="framework-header">
<span class="framework-badge badge-green">目標</span>
<span class="framework-en">Goal</span>
</div>
<div class="framework-hints">
<span>理想結果是什麼？</span>
<span>如何衡量是否成功？</span>
<span>期望在什麼時間內達成？</span>
</div>
<textarea id="frameGoal" class="input-textarea" rows="4"
placeholder="例如：三個月內完成產品MVP上線，團隊對技術方向達成共識，客戶滿意度達到80分以上..."></textarea>
</div>
<div class="framework-block">
<div class="framework-header">
<span class="framework-badge badge-orange">障礙</span>
<span class="framework-en">Obstacles（可以改變的）</span>
</div>
<div class="framework-hints">
<span>什麼阻礙你達成目標？</span>
<span>試過什麼解法？為什麼沒用？</span>
<span>最大的單一障礙是？</span>
</div>
<textarea id="frameObstacles" class="input-textarea" rows="4"
placeholder="例如：團隊缺乏統一的決策流程，每次開會都是各說各話。試過投票但兩邊票數接近，沒有人願意退讓..."></textarea>
</div>
<div class="framework-block">
<div class="framework-header">
<span class="framework-badge badge-red">限制</span>
<span class="framework-en">Constraints（不可改變的）</span>
</div>
<div class="framework-hints">
<span>預算 / 資源限制？</span>
<span>時間限制？</span>
<span>政策、法規或其他硬性條件？</span>
</div>
<textarea id="frameConstraints" class="input-textarea" rows="4"
placeholder="例如：預算上限200萬不能追加、截止日是Q3不能延期、必須使用公司現有的雲端架構..."></textarea>
</div>
<div class="validation-box" id="validationBox">
<h4>自我檢驗（密涅瓦核心驗證）</h4>
<p>問問自己：如果在這些<strong>限制</strong>條件內，把<strong>障礙</strong>移除掉，我是否確實能達到<strong>目標</strong>？</p>
<p class="validation-hint">如果答案是「不確定」，可能代表你的障礙和限制還沒分清楚，或是目標需要調整。</p>
<div class="validation-check">
<label class="checkbox-label">
<input type="checkbox" id="validationCheck">
<span>是的，移除障礙後在限制內可以達成目標</span>
</label>
</div>
</div>
</div>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">上一步</button>
<button class="btn btn-primary" onclick="nextStep()">下一步：選擇思考習慣</button>
</div>
</div>
<!-- Step 2: Thinking Habits -->
<div class="step-content" id="step-2">
<div class="card">
<h2>選擇思考習慣</h2>
<p class="card-desc">
根據你的問題描述，系統推薦了以下思考習慣（已自動勾選）。
點擊任何習慣可以查看詳細說明和使用方式。
</p>
<div class="habits-recommended" id="habitsRecommended"></div>
<details class="habits-all-toggle">
<summary>瀏覽全部 76 個思考習慣（點擊可開啟工具）</summary>
<div class="habits-all" id="habitsAll"></div>
</details>
</div>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">上一步</button>
<button class="btn btn-primary" onclick="nextStep()">下一步：產生問題規格書</button>
</div>
</div>
<!-- Step 3: Problem Specification -->
<div class="step-content" id="step-3">
<div class="card">
<h2>問題規格書</h2>
<p class="card-desc">根據你的所有輸入，自動產生結構化的問題規格書。</p>
<div class="spec-output" id="specOutput"></div>
<button class="btn btn-outline" onclick="copySpec()">複製問題規格書</button>
</div>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">上一步</button>
<button class="btn btn-primary" onclick="nextStep()">下一步：生成 AI 提示詞</button>
</div>
</div>
<!-- Step 4: AI Prompt -->
<div class="step-content" id="step-4">
<div class="card">
<h2>AI 提示詞</h2>
<p class="card-desc">
複製以下提示詞，貼入任何免費AI工具即可獲得基於密涅瓦思考框架的深度分析。
</p>
<div class="prompt-output" id="promptOutput"></div>
<div class="prompt-actions">
<button class="btn btn-primary" onclick="copyPrompt()">複製提示詞</button>
<button class="btn btn-outline" onclick="downloadPrompt()">下載為文字檔</button>
</div>
<div class="copy-toast" id="copyToast">已複製到剪貼簿！</div>
<div class="usage-tips">
<h4>使用方式</h4>
<div class="usage-grid">
<div class="usage-item"><strong>ChatGPT</strong><p>免費版即可，貼入對話框送出</p></div>
<div class="usage-item"><strong>Claude</strong><p>claude.ai 免費版，貼入對話框</p></div>
<div class="usage-item"><strong>Gemini</strong><p>gemini.google.com 免費使用</p></div>
<div class="usage-item"><strong>其他 AI</strong><p>任何支援長文輸入的 AI 皆可</p></div>
</div>
</div>
</div>
<div class="step-nav">
<button class="btn btn-secondary" onclick="prevStep()">上一步</button>
<button class="btn btn-primary" onclick="resetApp()">分析新問題</button>
</div>
</div>
</div>
</section>
<!-- ==================== REFERENCE ==================== -->
<section id="reference" class="section-reference" style="display:none;">
<div class="container">
<h2 class="section-title">密涅瓦大學 76 個思考習慣總覽</h2>
<p class="section-desc">
點擊任何一個思考習慣，即可開啟該工具的互動介面，輸入你的問題並生成專用 AI 提示詞。
</p>
<div class="reference-categories" id="referenceCategories"></div>
<button class="btn btn-outline" onclick="showSection('welcome')" style="margin-top:2rem;">返回首頁</button>
</div>
</section>
<!-- ==================== ABOUT ==================== -->
<section id="about" class="section-about" style="display:none;">
<div class="container">
<h2 class="section-title">關於密涅瓦思考框架</h2>
<div class="about-card"><h3>什麼是思考外部化？</h3><p>密涅瓦大學把人類想事情的方式拆解成約 76 個思考習慣。當你把思考過程「外部化」後，就能像堆積木一樣，清楚看到哪些需要改、哪些需要加。這讓決策變得可檢驗、可複製、可優化。</p></div>
<div class="about-card"><h3>問對問題的四要素</h3><p>密涅瓦認為你要問對問題，需要先釐清：</p><ul><li><strong>現況</strong> - 目前發生了什麼</li><li><strong>目標</strong> - 你想要達成什麼</li><li><strong>障礙</strong> - 阻擋你的（可以改變的）</li><li><strong>限制</strong> - 不能改變的條件</li></ul><p>如果在限制條件內，把障礙拿掉後確實能達到目標，就代表你問對了問題。</p></div>
<div class="about-card"><h3>決策科學三要件</h3><ul><li><strong>可檢驗</strong> - 決策過程可以被攤開來檢視</li><li><strong>可複製</strong> - 成功的方法可以被重複使用</li><li><strong>可優化</strong> - 每次都能根據回饋持續改善</li></ul></div>
<div class="about-card"><h3>附帶學習（Incidental Learning）</h3><p>密涅瓦共同創辦人 Stephen Kosslyn 發現：真正記住的方式是「附帶學習」——帶著真實的痛點去使用思考工具，當問題真的被解決的那一刻，這個思考習慣就永遠不會忘記。</p></div>
<div class="about-card"><h3>Drive Train 模型</h3><ul><li><strong>數據</strong> - 蒐集關鍵資訊</li><li><strong>槓桿</strong> - 找到最有效的介入點</li><li><strong>回饋</strong> - 持續根據結果調整</li></ul></div>
<div class="about-card"><h3>資料來源</h3><p>本工具參考自密涅瓦大學（Minerva University）決策科學課程，以及《全球人才搶著學：密涅瓦的思考習慣訓練》一書。工具為開源免費，不隸屬於密涅瓦大學。</p></div>
<button class="btn btn-outline" onclick="showSection('welcome')" style="margin-top:2rem;">返回首頁</button>
</div>
</section>
</main>
<!-- ==================== HABIT TOOL MODAL ==================== -->
<div class="modal-overlay" id="habitModal">
<div class="modal">
<button class="modal-close" onclick="closeModal()">×</button>
<div class="modal-header" id="modalHeader"></div>
<div class="modal-body" id="modalBody"></div>
<div class="modal-footer" id="modalFooter"></div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>CC的密涅瓦思考包 · 基於密涅瓦大學思考習慣框架 · 開源免費</p>
</div>
</footer>
<script src="js/app.js"></script>
</body>
</html>