AI Studio 工具生成（5 區塊結構化 Prompt）
用途
用 5 個結構化區塊向 Gemini 描述你要生成的工具，把「AI 跑偏、做出不像樣的東西」的機率從七成壓到兩成以下，第一次生成就能用。
何時用
- 適合：想在 AI Studio 快速生成一個 HTML 工具 demo 或 PoC，用來展示給客戶或主管看，且不想花時間反覆調整方向時。
- 不要用：已有接近的 App Gallery 範本想直接改造——那種情況用「工具 Remix」更快；需要連後端資料庫或 API 的生產級工具，單一 HTML 前端做不到。
Prompt
text
請幫我用 Google AI Studio 生成一個「{{工具名稱}}」的 demo 版工具。
**區塊1：功能需求（動詞句）**
這個工具要能：
- {{功能1，例：輸入員工姓名與部門，查詢該月出勤天數}}
- {{功能2，例：自動計算全勤獎金（出勤 ≥ 22 天加 1500 元）}}
- {{功能3（可省略）}}
**區塊2：技術限制**
- 單一 HTML 檔案，純前端
- 不引用任何外部套件或 CDN（除非我特別允許）
- 不需要後端或資料庫串接
**區塊3：UI 需求**
- {{UI要求，例：一欄輸入表單＋一個計算按鈕＋結果區塊}}
- 版面簡潔，手機也能正常顯示
- 全繁體中文介面
**區塊4：Demo 情境**
- 預填 {{N}} 筆假資料（不需要真實資料）
- 情境說明：{{這個工具是給誰在什麼場景用的}}
**區塊5：輸出規格**
- 輸出完整的單一 HTML 檔案
- 關鍵邏輯加上繁中註解範例 / 變體
- 填好變數：工具名稱填
員工全勤獎金試算器、功能1填輸入員工姓名與出勤天數、功能2填計算全勤獎金（≥22天得1500元）、N填5、情境填HR 在月底核算獎金時使用。 - 變體（加視覺化）：在區塊3 UI 需求加「結果用長條圖顯示各員工獎金比較」，讓工具有圖表更好展示。
- 變體（多人演示版）：在 Demo 情境加「假資料要看起來像真正的企業資料，不要用 A/B/C 佔位」，展示效果更好。
🎯 範例輸出（實測）
在 Gemini 跑這句、把
{{工具名稱}}填成「員工全勤獎金試算器」、功能1填「輸入員工姓名與出勤天數」、功能2填「計算全勤獎金（≥22天得1500元）」、N填「5」、情境填「HR 在月底核算獎金時使用」的結果：
點開看 AI 實際輸出
Gemini 輸出完整的單一 HTML 檔案，以下為核心結構與邏輯示意（繁中標注）：
text
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>員工全勤獎金試算器</title>
<style>
/* 簡潔表格樣式，手機也能正常顯示 */
body { font-family: sans-serif; max-width: 680px; margin: 0 auto; padding: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
.has-bonus { background: #e6f4ea; }
.no-bonus { background: #fce8e6; }
</style>
</head>
<body>
<h1>員工全勤獎金試算器</h1>
<!-- 輸入區塊 -->
<div>
<label>員工姓名：<input id="name" type="text" placeholder="輸入姓名"></label>
<label>出勤天數：<input id="days" type="number" min="0" max="31"></label>
<button onclick="addRecord()">新增</button>
</div>
<!-- 結果表格 -->
<table>
<thead><tr><th>員工姓名</th><th>出勤天數</th><th>全勤獎金</th><th>說明</th></tr></thead>
<tbody id="result-table"></tbody>
</table>
<script>
// 預填 5 筆假資料（模擬真實 HR 情境）
const data = [
{ name: '陳小明', days: 23 },
{ name: '林雅婷', days: 21 },
{ name: '王大偉', days: 22 },
{ name: '張慧如', days: 25 },
{ name: '李志豪', days: 18 },
];
// 計算全勤獎金邏輯（≥22天得1500元）
function calcBonus(days) {
return days >= 22 ? 1500 : 0;
}
function renderTable() {
const tbody = document.getElementById('result-table');
tbody.innerHTML = data.map(row => {
const bonus = calcBonus(row.days);
const cls = bonus > 0 ? 'has-bonus' : 'no-bonus';
return `<tr class="${cls}">
<td>${row.name}</td>
<td>${row.days}</td>
<td>$${bonus}</td>
<td>${bonus > 0 ? '達標（≥22天）' : '未達標（<22天）'}</td>
</tr>`;
}).join('');
}
renderTable();
</script>
</body>
</html>預填資料範例呈現效果：
- 陳小明 23天 → $1,500（達標，綠底）
- 林雅婷 21天 → $0（未達標，紅底）
- 王大偉 22天 → $1,500（達標，綠底）
- 張慧如 25天 → $1,500（達標）
- 李志豪 18天 → $0（未達標）
💡 實測心得：「區塊2：技術限制」明確寫「不引用外部套件」是防止 AI 偷用 React 或 Chart.js 的關鍵一句——省略這行，Gemini 有很高機率會帶進外部依賴讓工具無法離線展示。
延伸
簡單來說，5 區塊的核心邏輯是：把你腦中「這個工具是什麼」切成「它能做什麼（功能）/ 它不能做什麼（技術限制）/ 它長什麼樣（UI）/ 它給誰用（情境）/ 它輸出什麼（規格）」，AI 跑偏通常是因為其中一個區塊沒說清楚。生成完如果想加 AI 分析功能，可以接著用「職場小工具加 AI 功能」升級。