|
<!doctype html> |
|
<html lang="zh-Hant"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<title>People Response Adoption Watchdog Console</title> |
|
<style> |
|
:root { |
|
--ink: #17201a; |
|
--muted: #5f6c63; |
|
--line: #d9e0da; |
|
--paper: #f6f7f2; |
|
--panel: #ffffff; |
|
--accent: #246b57; |
|
--gold: #c68b2c; |
|
--danger: #b94338; |
|
--blue: #2c5f8f; |
|
--soft: #e8efe8; |
|
} |
|
* { box-sizing: border-box; } |
|
body { |
|
margin: 0; |
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
|
background: var(--paper); |
|
color: var(--ink); |
|
line-height: 1.45; |
|
} |
|
header { |
|
padding: 28px 36px 22px; |
|
background: #fdfdf9; |
|
border-bottom: 1px solid var(--line); |
|
} |
|
h1, h2, h3 { margin: 0; letter-spacing: 0; } |
|
h1 { font-size: 28px; max-width: 980px; } |
|
h2 { font-size: 17px; margin-bottom: 12px; } |
|
h3 { font-size: 14px; margin-bottom: 8px; } |
|
p { margin: 0; color: var(--muted); } |
|
.eyebrow { |
|
text-transform: uppercase; |
|
color: var(--accent); |
|
font-size: 12px; |
|
font-weight: 700; |
|
margin-bottom: 8px; |
|
} |
|
.wrap { padding: 24px 36px 40px; } |
|
.grid { |
|
display: grid; |
|
grid-template-columns: repeat(12, 1fr); |
|
gap: 16px; |
|
max-width: 1260px; |
|
margin: 0 auto; |
|
} |
|
.panel { |
|
background: var(--panel); |
|
border: 1px solid var(--line); |
|
border-radius: 8px; |
|
padding: 18px; |
|
box-shadow: 0 1px 2px rgba(0,0,0,.03); |
|
} |
|
.span-12 { grid-column: span 12; } |
|
.span-8 { grid-column: span 8; } |
|
.span-6 { grid-column: span 6; } |
|
.span-4 { grid-column: span 4; } |
|
.span-3 { grid-column: span 3; } |
|
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } |
|
.kpi { |
|
border: 1px solid var(--line); |
|
border-radius: 8px; |
|
padding: 14px; |
|
min-height: 94px; |
|
background: #fbfcf8; |
|
} |
|
.kpi strong { display: block; font-size: 28px; margin-bottom: 4px; } |
|
.kpi span { color: var(--muted); font-size: 13px; } |
|
.status { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 6px; |
|
border-radius: 999px; |
|
padding: 4px 9px; |
|
font-size: 12px; |
|
font-weight: 700; |
|
white-space: nowrap; |
|
} |
|
.red { background: #fae7e4; color: var(--danger); } |
|
.gold { background: #f6ecd9; color: #8b5d16; } |
|
.green { background: #e1efe7; color: var(--accent); } |
|
.blue { background: #e4edf6; color: var(--blue); } |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
font-size: 13px; |
|
} |
|
th, td { |
|
text-align: left; |
|
padding: 11px 9px; |
|
border-bottom: 1px solid var(--line); |
|
vertical-align: top; |
|
} |
|
th { |
|
color: var(--muted); |
|
font-size: 12px; |
|
text-transform: uppercase; |
|
background: #fafbf7; |
|
} |
|
.timeline { |
|
display: grid; |
|
grid-template-columns: repeat(4, 1fr); |
|
gap: 12px; |
|
} |
|
.stage { |
|
border-left: 4px solid var(--accent); |
|
background: #fbfcf8; |
|
padding: 12px 12px 14px; |
|
border-radius: 0 8px 8px 0; |
|
min-height: 150px; |
|
} |
|
.stage:nth-child(2) { border-color: var(--gold); } |
|
.stage:nth-child(3) { border-color: var(--blue); } |
|
.stage:nth-child(4) { border-color: var(--danger); } |
|
ul { margin: 8px 0 0 18px; padding: 0; color: var(--muted); } |
|
li { margin: 4px 0; } |
|
.flow { |
|
display: grid; |
|
grid-template-columns: repeat(5, minmax(0, 1fr)); |
|
gap: 10px; |
|
align-items: stretch; |
|
} |
|
.step { |
|
border: 1px solid var(--line); |
|
border-radius: 8px; |
|
padding: 12px; |
|
background: #fbfcf8; |
|
min-height: 112px; |
|
} |
|
.step b { display: block; margin-bottom: 6px; } |
|
.ask { |
|
background: var(--soft); |
|
border-radius: 8px; |
|
padding: 12px; |
|
color: var(--ink); |
|
font-size: 13px; |
|
white-space: pre-wrap; |
|
} |
|
.small { font-size: 12px; color: var(--muted); } |
|
.bar { |
|
height: 8px; |
|
background: #edf0ea; |
|
border-radius: 999px; |
|
overflow: hidden; |
|
margin-top: 8px; |
|
} |
|
.bar > i { display: block; height: 100%; background: var(--accent); } |
|
@media (max-width: 900px) { |
|
header, .wrap { padding-left: 18px; padding-right: 18px; } |
|
.span-8, .span-6, .span-4, .span-3 { grid-column: span 12; } |
|
.kpis, .timeline, .flow { grid-template-columns: 1fr; } |
|
table { font-size: 12px; } |
|
th, td { padding: 9px 6px; } |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<div class="eyebrow">PLS production artifact · people-response-and-sync · 2026-05-24</div> |
|
<h1>People Response Adoption Watchdog Console</h1> |
|
<p>把「董事長反思:客戶對接感受不到競爭優勢」轉成可追蹤的採用治理:誰未回覆、哪個客戶證據缺口未補、何時升級、哪一天要驗收。</p> |
|
</header> |
|
<main class="wrap"> |
|
<section class="grid"> |
|
<div class="panel span-12"> |
|
<div class="kpis"> |
|
<div class="kpi"><strong>3</strong><span>相關 profile 需要同步採用</span></div> |
|
<div class="kpi"><strong>0</strong><span>已驗證回覆資料進入 PLS</span></div> |
|
<div class="kpi"><strong>3</strong><span>source projects 應合併成同一 AI 推進專案</span></div> |
|
<div class="kpi"><strong>D7</strong><span>下一個硬門檻:回覆與客戶 proof 至少各 1 筆</span></div> |
|
</div> |
|
</div> |
|
|
|
<div class="panel span-8"> |
|
<h2>Adoption Gate</h2> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th>Profile</th> |
|
<th>Current Gate</th> |
|
<th>Missing Proof</th> |
|
<th>Owner Ask</th> |
|
<th>Escalation</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td>2a3628b7</td> |
|
<td><span class="status red">no_response</span></td> |
|
<td>客戶對接中「競爭優勢感受」的正/負例</td> |
|
<td>24 小時內回 1 個客戶最近對話片段與下一步</td> |
|
<td>D1 未回:Louis 代發第二句;D3 未回:進週會風險</td> |
|
</tr> |
|
<tr> |
|
<td>45a2dfa3</td> |
|
<td><span class="status gold">missing_proof</span></td> |
|
<td>公司優勢如何被翻成客戶語言的例句</td> |
|
<td>補 3 句可直接在 LINE/會議使用的客戶證據說法</td> |
|
<td>D7 未補:改派 proof librarian</td> |
|
</tr> |
|
<tr> |
|
<td>b89e1674</td> |
|
<td><span class="status blue">rehearsal_pending</span></td> |
|
<td>下次客戶對接前 rehearsal 紀錄</td> |
|
<td>排 15 分鐘 rehearsal,錄下反對意見與回覆版本</td> |
|
<td>D14 未完成:停止新話術,先做能力補強</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
|
|
<div class="panel span-4"> |
|
<h2>Today’s LINE Draft</h2> |
|
<div class="ask">我先把「客戶感受不到我們競爭優勢」收斂成一個 24 小時動作。 |
|
請你今天回覆: |
|
1. 最近一個客戶對接中,對方沒有感受到優勢的句子或情境 |
|
2. 你認為我們應該怎麼講才會更像客戶語言 |
|
3. 下一次對接前你願意補哪一個 proof |
|
|
|
若今晚未回,我會先把此 profile 標成 no_response,明天進 adoption watchdog 的升級清單。</div> |
|
</div> |
|
|
|
<div class="panel span-12"> |
|
<h2>D1 / D7 / D14 / D30 Path</h2> |
|
<div class="timeline"> |
|
<div class="stage"> |
|
<h3>D1 · Close the reply gap</h3> |
|
<ul> |
|
<li>三位 profile 各有一則明確 ask 與 due time。</li> |
|
<li>PLS 記錄 no_response / missing_proof / rehearsal_pending。</li> |
|
<li>Louis 可直接貼出 LINE draft。</li> |
|
</ul> |
|
</div> |
|
<div class="stage"> |
|
<h3>D7 · Build proof library</h3> |
|
<ul> |
|
<li>至少 3 筆客戶語言 proof 進庫。</li> |
|
<li>每筆 proof 綁 source project 與 owner。</li> |
|
<li>週會只看缺口與採用,不重講背景。</li> |
|
</ul> |
|
</div> |
|
<div class="stage"> |
|
<h3>D14 · Rehearsal loop</h3> |
|
<ul> |
|
<li>每個高風險客戶對接前完成 15 分鐘 rehearsal。</li> |
|
<li>把反對意見、回覆句、採用結果寫回 PLS。</li> |
|
<li>watchdog 自動標示 stale proof。</li> |
|
</ul> |
|
</div> |
|
<div class="stage"> |
|
<h3>D30 · Operating system</h3> |
|
<ul> |
|
<li>三個 source projects 合併成 AI 推進專案。</li> |
|
<li>dashboard 接 PLS reply/proof/rehearsal tables。</li> |
|
<li>每週輸出 customer-proof scorecard。</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="panel span-12"> |
|
<h2>Purpose-to-Purpose E2E</h2> |
|
<div class="flow"> |
|
<div class="step"><b>董事長反思</b><span class="small">公司自我認知落後,客戶感受不到競爭優勢。</span></div> |
|
<div class="step"><b>Watchdog gate</b><span class="small">把反思變成回覆、proof、rehearsal 三個可查狀態。</span></div> |
|
<div class="step"><b>People adoption</b><span class="small">profile 回覆真實客戶語言,補 proof,完成演練。</span></div> |
|
<div class="step"><b>Project outcome</b><span class="small">下次客戶對接有可驗證優勢句與反對意見回覆。</span></div> |
|
<div class="step"><b>Money / risk</b><span class="small">降低主管追蹤成本,提高轉換機率,減少客戶信任流失。</span></div> |
|
</div> |
|
</div> |
|
|
|
<div class="panel span-6"> |
|
<h2>Market Maturity Fit</h2> |
|
<p>Prosci ADKAR 強調個人採用旅程;McKinsey transformation research 強調把策略連到日常工作與持續改善。本 console 對應成熟做法:不把轉型停在宣告,而是把個人回覆、能力演練、客戶 proof 與週節奏綁成可觀測系統。</p> |
|
<ul> |
|
<li>Source 1: https://www.prosci.com/methodology/adkar</li> |
|
<li>Source 2: https://www.mckinsey.com/capabilities/people-and-organizational-performance/our-insights/successful-transformations</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="panel span-6"> |
|
<h2>Production Readiness</h2> |
|
<table> |
|
<tbody> |
|
<tr><th>Data</th><td>reply_events, proof_items, rehearsal_sessions, escalation_events</td></tr> |
|
<tr><th>API</th><td>POST reply, POST proof, PATCH gate, GET project adoption score</td></tr> |
|
<tr><th>Permissions</th><td>Louis/admin can escalate; profile owner can submit; reviewer approves proof</td></tr> |
|
<tr><th>Audit</th><td>Every gate change stores actor, source, evidence_url, previous_state</td></tr> |
|
<tr><th>Rollback</th><td>Bad proof can be retired without deleting raw evidence</td></tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
|
|
<div class="panel span-4"> |
|
<h2>Acceptance</h2> |
|
<p><b>Owner:</b> Louis / PLS project runner</p> |
|
<p><b>Due:</b> D7 for first verified replies and proof.</p> |
|
<p><b>Pass:</b> 3/3 profiles have response state, 2+ proof items, 1 rehearsal record, and one customer-facing script adopted.</p> |
|
<div class="bar"><i style="width: 22%"></i></div> |
|
</div> |
|
<div class="panel span-4"> |
|
<h2>Project Merge Rule</h2> |
|
<p>Source projects b3138a2e, bbdb46d5, and 6c12ff6d should merge into one AI-native customer proof adoption project because the bottleneck is shared: people response, customer proof, and repeated synchronization.</p> |
|
</div> |
|
<div class="panel span-4"> |
|
<h2>Next Upgrade</h2> |
|
<p>Connect LINE replies or the PLS reply table to update gate state automatically. Once weekly adoption exceeds 2 cycles, promote this HTML console into a PLS dashboard/workflow app with notifications.</p> |
|
</div> |
|
</section> |
|
</main> |
|
</body> |
|
</html> |