簡報 Prompt 生成器 Pro
:root {
–bg: #0e0f14;
–surface: #16181f;
–surface2: #1e2029;
–border: #2a2d3a;
–border2: #363a4a;
–pink: #f03e7a;
–pink-dim: rgba(240,62,122,0.15);
–pink-glow: rgba(240,62,122,0.3);
–cyan: #3ef0c8;
–text: #e8eaf0;
–muted: #6b7090;
–muted2: #4a4f6a;
–tag-bg: #252835;
–selected-bg: rgba(240,62,122,0.12);
–selected-border: #f03e7a;
–radius: 10px;
–radius-sm: 6px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(–bg);
color: var(–text);
font-family: ‘Noto Sans TC’, sans-serif;
font-size: 14px;
line-height: 1.6;
min-height: 100vh;
padding: 0 0 80px;
}
/* Noise overlay */
body::before {
content: “;
position: fixed;
inset: 0;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’
http://www.w3.org/2000/svg’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23n)’ opacity=’0.04’/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
/* ── Top bar ─────────────────────────────────────── */
.topbar {
background: var(–surface);
border-bottom: 1px solid var(–border);
padding: 16px 32px;
display: flex;
align-items: center;
gap: 12px;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
}
.logo-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(–pink);
box-shadow: 0 0 12px var(–pink-glow);
flex-shrink: 0;
}
.topbar h1 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(–text);
}
.topbar .sub {
font-size: 12px;
color: var(–muted);
margin-left: 4px;
}
.topbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.step-pill {
font-size: 11px;
font-family: ‘JetBrains Mono’, monospace;
color: var(–muted);
background: var(–surface2);
border: 1px solid var(–border);
border-radius: 20px;
padding: 3px 10px;
}
/* ── Main layout ─────────────────────────────────── */
.main {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px;
position: relative;
z-index: 1;
}
/* ── Section card ────────────────────────────────── */
.section-card {
background: var(–surface);
border: 1px solid var(–border);
border-radius: var(–radius);
margin-bottom: 20px;
overflow: hidden;
animation: fadeUp 0.5s ease both;
}
.section-card:nth-child(1) { animation-delay: 0.0s; }
.section-card:nth-child(2) { animation-delay: 0.08s; }
.section-card:nth-child(3) { animation-delay: 0.14s; }
.section-card:nth-child(4) { animation-delay: 0.2s; }
.section-card:nth-child(5) { animation-delay: 0.26s; }
.section-head {
padding: 16px 24px;
border-bottom: 1px solid var(–border);
display: flex;
align-items: center;
gap: 10px;
}
.section-num {
font-family: ‘JetBrains Mono’, monospace;
font-size: 11px;
font-weight: 600;
color: var(–pink);
background: var(–pink-dim);
border: 1px solid rgba(240,62,122,0.25);
border-radius: 4px;
padding: 2px 8px;
letter-spacing: 0.05em;
}
.section-title {
font-size: 13px;
font-weight: 700;
color: var(–text);
letter-spacing: 0.03em;
}
.section-body {
padding: 24px;
}
/* ── Three-column grid for panels 2/3/4 ─────────── */
.panels-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
@media (max-width: 860px) {
.panels-row { grid-template-columns: 1fr; }
}
.panel-card {
background: var(–surface);
border: 1px solid var(–border);
border-radius: var(–radius);
overflow: hidden;
animation: fadeUp 0.5s ease both;
}
.panel-card:nth-child(1) { animation-delay: 0.1s; }
.panel-card:nth-child(2) { animation-delay: 0.16s; }
.panel-card:nth-child(3) { animation-delay: 0.22s; }
/* ── Form grid ───────────────────────────────────── */
.form-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.form-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
.form-grid { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.form-grid, .form-grid.cols2, .form-grid.cols3 { grid-template-columns: 1fr; }
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.span2 { grid-column: span 2; }
.form-group.span4 { grid-column: span 4; }
.form-label {
font-size: 12px;
color: var(–muted);
font-weight: 500;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.form-label .icon { font-size: 13px; opacity: 0.7; }
/* ── Number input ────────────────────────────────── */
.num-input-wrap {
background: var(–surface2);
border: 1px solid var(–border);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
padding: 10px 14px;
gap: 8px;
transition: border-color 0.2s;
}
.num-input-wrap:focus-within { border-color: var(–pink); }
.num-input-wrap .icon { font-size: 14px; color: var(–muted); }
.num-input-wrap input {
background: none;
border: none;
outline: none;
color: var(–text);
font-family: ‘JetBrains Mono’, monospace;
font-size: 14px;
font-weight: 600;
width: 100%;
}
/* ── Select ──────────────────────────────────────── */
.select-wrap {
background: var(–surface2);
border: 1px solid var(–border);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
padding: 10px 14px;
gap: 8px;
transition: border-color 0.2s;
position: relative;
}
.select-wrap:focus-within { border-color: var(–pink); }
.select-wrap .icon { font-size: 14px; color: var(–muted); flex-shrink: 0; }
.select-wrap select {
background: none;
border: none;
outline: none;
color: var(–text);
font-family: ‘Noto Sans TC’, sans-serif;
font-size: 13px;
width: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.select-wrap::after {
content: ‘⌄’;
color: var(–muted);
font-size: 12px;
flex-shrink: 0;
margin-left: auto;
pointer-events: none;
}
.select-wrap select option { background: #1e2029; }
/* ── Textarea ────────────────────────────────────── */
.textarea-wrap {
background: var(–surface2);
border: 1px solid var(–border);
border-radius: var(–radius-sm);
display: flex;
align-items: flex-start;
padding: 10px 14px;
gap: 8px;
transition: border-color 0.2s;
}
.textarea-wrap:focus-within { border-color: var(–pink); }
.textarea-wrap .icon { font-size: 14px; color: var(–muted); margin-top: 2px; }
.textarea-wrap textarea {
background: none;
border: none;
outline: none;
color: var(–text);
font-family: ‘Noto Sans TC’, sans-serif;
font-size: 13px;
width: 100%;
resize: none;
min-height: 60px;
line-height: 1.6;
}
.textarea-wrap textarea::placeholder { color: var(–muted2); }
/* ── Toggle buttons ──────────────────────────────── */
.toggle-group {
display: flex;
gap: 8px;
}
.toggle-btn {
flex: 1;
padding: 10px 16px;
border-radius: var(–radius-sm);
border: 1.5px solid var(–border);
background: var(–surface2);
color: var(–muted);
font-family: ‘Noto Sans TC’, sans-serif;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.18s;
}
.toggle-btn:hover { border-color: var(–border2); color: var(–text); }
.toggle-btn.active-yes {
background: var(–pink-dim);
border-color: var(–pink);
color: var(–pink);
}
.toggle-btn.active-no {
background: rgba(107,112,144,0.1);
border-color: var(–muted2);
color: var(–muted);
}
/* ── Radio list items ────────────────────────────── */
.radio-list { display: flex; flex-direction: column; gap: 4px; }
.radio-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px;
border-radius: var(–radius-sm);
border: 1.5px solid transparent;
background: transparent;
cursor: pointer;
transition: all 0.15s;
gap: 10px;
}
.radio-item:hover {
background: var(–surface2);
border-color: var(–border);
}
.radio-item.selected {
background: var(–selected-bg);
border-color: var(–selected-border);
}
.radio-item.selected .radio-label { color: var(–text); font-weight: 500; }
.radio-icon { font-size: 15px; flex-shrink: 0; }
.radio-label {
font-size: 13px;
color: var(–muted);
flex: 1;
transition: color 0.15s;
}
.radio-tag {
font-family: ‘JetBrains Mono’, monospace;
font-size: 10px;
color: var(–pink);
background: var(–pink-dim);
border: 1px solid rgba(240,62,122,0.3);
padding: 2px 7px;
border-radius: 20px;
flex-shrink: 0;
}
/* ── Divider inside section ──────────────────────── */
.inner-divider {
height: 1px;
background: var(–border);
margin: 20px 0;
}
/* ── Generate button ─────────────────────────────── */
.generate-wrap {
display: flex;
justify-content: center;
margin: 28px 0 8px;
}
.btn-generate {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 48px;
background: var(–pink);
color: #fff;
border: none;
border-radius: var(–radius-sm);
font-family: ‘Noto Sans TC’, sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.05em;
position: relative;
overflow: hidden;
box-shadow: 0 0 32px var(–pink-glow);
transition: transform 0.15s, box-shadow 0.15s;
}
.btn-generate::before {
content: “;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.btn-generate:hover {
transform: translateY(-2px);
box-shadow: 0 0 48px var(–pink-glow), 0 8px 24px rgba(240,62,122,0.25);
}
.btn-generate:active { transform: translateY(1px); }
/* ── Output section ──────────────────────────────── */
.output-section {
display: none;
animation: fadeUp 0.4s ease both;
margin-bottom: 20px;
}
.output-section.visible { display: block; }
.output-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(–border);
}
.output-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(–cyan);
font-weight: 500;
}
.status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(–cyan);
box-shadow: 0 0 8px var(–cyan);
animation: pulse 1.5s infinite;
}
.output-actions {
display: flex;
gap: 8px;
}
.btn-action {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: var(–surface2);
border: 1px solid var(–border);
border-radius: var(–radius-sm);
color: var(–muted);
font-family: ‘JetBrains Mono’, monospace;
font-size: 11px;
cursor: pointer;
transition: all 0.18s;
}
.btn-action:hover { border-color: var(–border2); color: var(–text); }
.btn-action.primary {
background: var(–pink-dim);
border-color: rgba(240,62,122,0.4);
color: var(–pink);
}
.btn-action.primary:hover { background: rgba(240,62,122,0.2); }
.btn-action.success {
background: rgba(62,240,200,0.1);
border-color: rgba(62,240,200,0.4);
color: var(–cyan);
}
.output-body {
padding: 28px 24px;
}
.prompt-block {
background: #0a0b0f;
border: 1px solid var(–border);
border-radius: var(–radius-sm);
padding: 24px 28px;
font-family: ‘JetBrains Mono’, monospace;
font-size: 13px;
line-height: 1.9;
color: #c8cad8;
white-space: pre-wrap;
word-break: break-word;
position: relative;
}
.prompt-block .hl-pink { color: #f88bac; }
.prompt-block .hl-cyan { color: var(–cyan); }
.prompt-block .hl-yellow { color: #f0d03e; }
.prompt-block .hl-green { color: #7ef07a; }
/* ── Char count ──────────────────────────────────── */
.char-count {
margin-top: 10px;
font-family: ‘JetBrains Mono’, monospace;
font-size: 11px;
color: var(–muted2);
text-align: right;
}
/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ── Error ──────────────────────────────────────── */
.error-shake { animation: shake 0.3s ease; }
@keyframes shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.field-error {
font-size: 11px;
color: var(–pink);
font-family: ‘JetBrains Mono’, monospace;
margin-top: 4px;
display: none;
}
.field-error.show { display: block; }
/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(–bg); }
::-webkit-scrollbar-thumb { background: var(–border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(–muted2); }
02
簡報目的 / 類型
⚡
商業提案 (Pitch Deck)
📖
教育與員工培訓
📋
專案與進度報告
✦
產品發表會
📊
數據與成效分析
🎨
行銷企劃與發想
💰
投資人募資簡報
✏️
自訂簡報目的
03
簡報大綱架構
🔗
問題與解決方案
推薦
📖
起承轉合（故事法）
⏰
時間軸演進
🔺
金字塔原則 (SCQA)
📊
結論與數據先行
⚖️
比較與對比框架
🧩
五力分析 / SWOT
✏️
自訂大綱邏輯
04
建議視覺風格
✍️
手繪日記風格＋主角
🖥
專業企業商務風格
推薦
🌸
溫馨插畫風格
◻️
高對比度極簡風格
🎲
2.5D 等距視角風格
🫧
3D 奶油 UI 科技風格
📰
雜誌編輯風格
👾
復古像素風格
// ── Toggle (yes/no buttons) ──────────────────────────────
function setToggle(groupId, val) {
const group = document.getElementById(groupId);
const btns = group.querySelectorAll(‘.toggle-btn’);
btns[0].className = ‘toggle-btn’ + (val === ‘yes’ ? ‘ active-yes’ : “);
btns[1].className = ‘toggle-btn’ + (val === ‘no’ ? ‘ active-no’ : “);
group.dataset.value = val;
}
// Init defaults
setToggle(‘notesToggle’, ‘yes’);
setToggle(‘styleToggle’, ‘yes’);
function getToggle(groupId) {
return document.getElementById(groupId).dataset.value === ‘yes’;
}
// ── Radio list select ────────────────────────────────────
function selectRadio(listId, el) {
document.getElementById(listId).querySelectorAll(‘.radio-item’).forEach(i => i.classList.remove(‘selected’));
el.classList.add(‘selected’);
}
function getSelected(listId) {
const sel = document.getElementById(listId).querySelector(‘.radio-item.selected’);
return sel ? sel.dataset.value : “;
}
// ── Build prompt ─────────────────────────────────────────
function buildPrompt(d) {
const notesPart = d.needNotes
? `\n9. 每頁結尾請加上【講者備註】，包含口語說明要點與轉場語句。`
: “;
const stylePart = d.needStyle
? `\n\n【視覺風格建議】\n請建議採用「${d.style}」，並描述每頁的配色、排版與圖示方向。`
: “;
const extraPart = d.extra
? `\n\n【補充需求】\n${d.extra}`
: “;
const rolePrefix = d.role !== ‘不需要角色’
? `你是一位資深的${d.role}，擅長製作具有說服力的簡報。\n\n`
: “;
return `${rolePrefix}請為我製作一份關於「${d.topic}」的專業簡報大綱。
【基本規格】
– 頁數：共 ${d.pages} 頁（含封面與結語）
– 報告時長：約 ${d.duration} 分鐘
– 發表場景：${d.venue}
– 目標受眾：${d.audience}
– 講者語氣：${d.tone}
– 核心行動呼籲（CTA）：${d.cta}
【簡報類型】
${d.purpose}
【大綱架構方式】
採用「${d.structure}」架構，請依此邏輯安排各頁順序與內容。
【每頁格式要求】
1. 封面頁：標題、副標題、講者姓名欄位
2. 目錄頁（若頁數 ≥ 8 頁）
3. 內容頁（第 3 頁至倒數第 2 頁）：頁碼、頁標題、3–5 個重點條列，每點附 1 句說明
4. 結語頁：核心訊息摘要 + CTA（${d.cta}）${notesPart}${stylePart}${extraPart}
請直接輸出完整的大綱，不需要額外前言或說明。格式要清晰、易讀，適合直接貼入 AI 工具（如 ChatGPT、Claude、Gemini）生成簡報內容。`;
}
// ── Generate ─────────────────────────────────────────────
function generate() {
const topic = document.getElementById(‘topic’).value.trim();
const errEl = document.getElementById(‘topicError’);
const topicWrap = document.getElementById(‘topic’).closest(‘.num-input-wrap’);
if (!topic) {
errEl.classList.add(‘show’);
topicWrap.classList.add(‘error-shake’);
topicWrap.addEventListener(‘animationend’, () => topicWrap.classList.remove(‘error-shake’), { once: true });
document.getElementById(‘topic’).focus();
return;
}
errEl.classList.remove(‘show’);
const data = {
topic,
pages: document.getElementById(‘pages’).value,
duration: document.getElementById(‘duration’).value,
role: document.getElementById(‘role’).value,
venue: document.getElementById(‘venue’).value,
audience: document.getElementById(‘audience’).value,
tone: document.getElementById(‘tone’).value,
cta: document.getElementById(‘cta’).value,
needNotes: getToggle(‘notesToggle’),
extra: document.getElementById(‘extra’).value.trim(),
purpose: getSelected(‘purposeList’),
structure: getSelected(‘structureList’),
needStyle: getToggle(‘styleToggle’),
style: getSelected(‘styleList’),
};
const rawPrompt = buildPrompt(data);
// Syntax highlight
const highlighted = rawPrompt
.replace(/「([^」]+)」/g, ‘「
$1」’)
.replace(/【([^】]+)】/g, ‘
【$1】‘)
.replace(/(\d+\. )/g, ‘
$1‘)
.replace(/^(-\s.+)$/gm, ‘
$1‘);
document.getElementById(‘promptBlock’).innerHTML = highlighted;
document.getElementById(‘charCount’).textContent = `字元數：${rawPrompt.length}`;
const section = document.getElementById(‘outputSection’);
section.classList.add(‘visible’);
// Reset copy btn
const copyBtn = document.getElementById(‘copyBtn’);
copyBtn.className = ‘btn-action primary’;
copyBtn.textContent = ‘⎘ 複製 Prompt’;
setTimeout(() => section.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ }), 80);
}
// ── Copy ─────────────────────────────────────────────────
function copyPrompt() {
const topic = document.getElementById(‘topic’).value.trim();
const data = {
topic,
pages: document.getElementById(‘pages’).value,
duration: document.getElementById(‘duration’).value,
role: document.getElementById(‘role’).value,
venue: document.getElementById(‘venue’).value,
audience: document.getElementById(‘audience’).value,
tone: document.getElementById(‘tone’).value,
cta: document.getElementById(‘cta’).value,
needNotes: getToggle(‘notesToggle’),
extra: document.getElementById(‘extra’).value.trim(),
purpose: getSelected(‘purposeList’),
structure: getSelected(‘structureList’),
needStyle: getToggle(‘styleToggle’),
style: getSelected(‘styleList’),
};
navigator.clipboard.writeText(buildPrompt(data)).then(() => {
const btn = document.getElementById(‘copyBtn’);
btn.className = ‘btn-action success’;
btn.textContent = ‘✓ 已複製！’;
setTimeout(() => {
btn.className = ‘btn-action primary’;
btn.textContent = ‘⎘ 複製 Prompt’;
}, 2000);
});
}
// ── Reset ────────────────────────────────────────────────
function resetForm() {
document.getElementById(‘outputSection’).classList.remove(‘visible’);
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}
// ── Enter key ────────────────────────────────────────────
document.getElementById(‘topic’).addEventListener(‘keydown’, e => {
if (e.key === ‘Enter’) generate();
});
藍博的知識旅程 