bookworm-smart-assistant/docs/brochure-a4.html

557 lines
22 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bookworm Smart Assistant v5.6 — 宣传手册</title>
<style>
@page { size: A4; margin: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
color: #1a1a2e; background: #fff;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.page {
width: 210mm; min-height: 297mm;
padding: 0; position: relative; overflow: hidden;
page-break-after: always;
}
/* ========== PAGE 1: COVER ========== */
.page-1 {
background: linear-gradient(160deg, #0f0c29 0%, #1a1040 35%, #302b63 70%, #24243e 100%);
color: #fff; display: flex; flex-direction: column;
justify-content: center; align-items: center; text-align: center;
}
.page-1::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 75% 20%, rgba(139,92,246,0.25) 0%, transparent 50%),
radial-gradient(circle at 25% 80%, rgba(34,211,238,0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(99,102,241,0.08) 0%, transparent 70%);
}
.page-1 .grid-bg {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.04;
background-image:
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 40px 40px;
}
.cover-content { position: relative; z-index: 1; padding: 0 50px; }
.cover-logo {
width: 80px; height: 80px; border-radius: 20px;
background: linear-gradient(135deg, #8b5cf6, #6366f1);
display: flex; align-items: center; justify-content: center;
font-size: 40px; margin: 0 auto 30px;
box-shadow: 0 8px 30px rgba(139,92,246,0.4);
}
.cover-title {
font-size: 48px; font-weight: 900; letter-spacing: -1px;
line-height: 1.15; margin-bottom: 8px;
}
.cover-title span { color: #a78bfa; }
.cover-sub {
font-size: 20px; color: rgba(255,255,255,0.7);
font-weight: 400; margin-bottom: 40px;
}
.cover-tagline {
font-size: 16px; color: rgba(255,255,255,0.5);
max-width: 480px; margin: 0 auto 50px; line-height: 1.6;
}
.cover-stats {
display: flex; gap: 40px; justify-content: center;
}
.cover-stat-val { font-size: 36px; font-weight: 800; color: #a78bfa; }
.cover-stat-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.cover-version {
position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;
font-size: 13px; color: rgba(255,255,255,0.3);
}
/* ========== PAGE 2: PAIN & SOLUTION ========== */
.page-2 { background: #fff; padding: 45px 50px; }
.page-2 .section-tag {
display: inline-block; background: #6366f1; color: #fff;
padding: 4px 14px; border-radius: 12px; font-size: 11px;
font-weight: 600; letter-spacing: 1px; margin-bottom: 16px;
}
.page-2 h2 {
font-size: 28px; font-weight: 800; color: #1a1a2e;
margin-bottom: 24px; line-height: 1.3;
}
.pain-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 36px;
}
.pain-card {
background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px;
padding: 18px 20px;
}
.pain-card .icon { font-size: 20px; margin-bottom: 8px; }
.pain-card h4 { font-size: 14px; font-weight: 700; color: #dc2626; margin-bottom: 6px; }
.pain-card p { font-size: 12px; color: #7f1d1d; line-height: 1.5; }
.solution-arrow {
text-align: center; font-size: 28px; color: #6366f1;
margin: 8px 0; font-weight: 900;
}
.solution-box {
background: linear-gradient(135deg, #f0f0ff, #e8e8ff); border: 2px solid #c7d2fe;
border-radius: 16px; padding: 24px 28px; margin-bottom: 28px;
}
.solution-box h3 { font-size: 18px; font-weight: 800; color: #4338ca; margin-bottom: 12px; }
.solution-box p { font-size: 13px; color: #3730a3; line-height: 1.7; }
.pipeline {
background: #0f0c29; border-radius: 12px; padding: 22px 26px; color: #fff;
}
.pipeline h4 {
font-size: 13px; font-weight: 700; color: #a78bfa;
margin-bottom: 14px; letter-spacing: 1px;
}
.pipeline-flow {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pipeline-node {
background: rgba(139,92,246,0.2); border: 1px solid rgba(139,92,246,0.4);
border-radius: 8px; padding: 8px 12px; font-size: 11px;
color: #c4b5fd; text-align: center; line-height: 1.3;
}
.pipeline-node strong { display: block; color: #fff; font-size: 12px; }
.pipeline-arrow { color: #6366f1; font-size: 16px; font-weight: 900; }
/* ========== PAGE 3: FEATURES ========== */
.page-3 { background: #fafafa; padding: 45px 50px; }
.page-3 .section-tag {
display: inline-block; background: #059669; color: #fff;
padding: 4px 14px; border-radius: 12px; font-size: 11px;
font-weight: 600; letter-spacing: 1px; margin-bottom: 16px;
}
.page-3 h2 {
font-size: 28px; font-weight: 800; color: #1a1a2e;
margin-bottom: 28px; line-height: 1.3;
}
.feature-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin-bottom: 30px;
}
.feature-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.feature-card .f-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; margin-bottom: 12px;
}
.feature-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; }
.feature-card p { font-size: 12px; color: #6b7280; line-height: 1.6; }
.feature-card .f-metric {
margin-top: 10px; font-size: 20px; font-weight: 800;
}
.feature-card .f-metric-label { font-size: 11px; color: #9ca3af; }
.f-icon-purple { background: #ede9fe; }
.f-icon-cyan { background: #cffafe; }
.f-icon-orange { background: #fff7ed; }
.f-icon-green { background: #dcfce7; }
.health-bar {
background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
padding: 22px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.health-bar h4 {
font-size: 14px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px;
}
.health-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.health-label { font-size: 11px; color: #6b7280; width: 90px; }
.health-track {
flex: 1; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden;
}
.health-fill {
height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8b5cf6, #6366f1);
}
.health-val { font-size: 11px; font-weight: 700; color: #1a1a2e; width: 30px; text-align: right; }
.health-total {
text-align: right; margin-top: 10px;
font-size: 22px; font-weight: 900; color: #6366f1;
}
.health-total span { font-size: 13px; color: #9ca3af; font-weight: 400; }
/* ========== PAGE 4: CTA ========== */
.page-4 { background: #fff; padding: 45px 50px; position: relative; }
.page-4 .section-tag {
display: inline-block; background: #f97316; color: #fff;
padding: 4px 14px; border-radius: 12px; font-size: 11px;
font-weight: 600; letter-spacing: 1px; margin-bottom: 16px;
}
.page-4 h2 {
font-size: 28px; font-weight: 800; color: #1a1a2e;
margin-bottom: 24px; line-height: 1.3;
}
.audience-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 28px;
}
.audience-card {
border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px;
}
.audience-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.audience-card p { font-size: 12px; color: #6b7280; line-height: 1.5; }
.pricing-table {
width: 100%; border-collapse: separate; border-spacing: 0;
margin-bottom: 28px; border-radius: 12px; overflow: hidden;
border: 1px solid #e5e7eb;
}
.pricing-table th {
background: #f9fafb; padding: 12px 16px; text-align: left;
font-size: 12px; font-weight: 700; color: #374151;
border-bottom: 1px solid #e5e7eb;
}
.pricing-table td {
padding: 10px 16px; font-size: 12px; color: #4b5563;
border-bottom: 1px solid #f3f4f6;
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-highlight { background: #f5f3ff !important; }
.pricing-badge {
display: inline-block; background: #6366f1; color: #fff;
font-size: 10px; padding: 2px 6px; border-radius: 4px;
font-weight: 600; margin-left: 6px;
}
.quick-start {
background: #0f0c29; border-radius: 12px; padding: 22px 26px;
color: #fff; margin-bottom: 28px;
}
.quick-start h4 {
font-size: 14px; font-weight: 700; color: #a78bfa;
margin-bottom: 12px;
}
.quick-start pre {
font-family: 'Cascadia Code', 'Fira Code', monospace;
font-size: 12px; color: #c4b5fd; line-height: 1.8;
white-space: pre-wrap;
}
.quick-start .comment { color: #6b7280; }
.cta-footer {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(135deg, #4338ca, #6366f1);
padding: 24px 50px; color: #fff;
display: flex; justify-content: space-between; align-items: center;
}
.cta-footer-left h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.cta-footer-left p { font-size: 12px; color: rgba(255,255,255,0.7); }
.cta-footer-right { text-align: right; }
.cta-footer-right .url {
font-size: 14px; font-weight: 700; color: #fff;
background: rgba(255,255,255,0.15); padding: 8px 16px;
border-radius: 8px; display: inline-block;
}
.cta-footer-right .ver {
font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 6px;
}
/* Print optimization */
@media print {
.page { page-break-after: always; page-break-inside: avoid; }
body { -webkit-print-color-adjust: exact; }
}
</style>
</head>
<body>
<!-- ==================== PAGE 1: COVER ==================== -->
<div class="page page-1">
<div class="grid-bg"></div>
<div class="cover-content">
<div class="cover-logo">&#128218;</div>
<div class="cover-title"><span>Bookworm</span><br>Smart Assistant</div>
<div class="cover-sub">Claude Code 自进化智能路由系统</div>
<div class="cover-tagline">
基于 BM25 + TF-IDF 语义评分引擎,将单一 AI 助手扩展为<br>
50 专家技能 + 10 智能体的协作网络<br>
"说人话,干专家活"
</div>
<div class="cover-stats">
<div>
<div class="cover-stat-val">50</div>
<div class="cover-stat-label">专家技能</div>
</div>
<div>
<div class="cover-stat-val">10</div>
<div class="cover-stat-label">智能体</div>
</div>
<div>
<div class="cover-stat-val">100%</div>
<div class="cover-stat-label">路由准确率</div>
</div>
<div>
<div class="cover-stat-val">99</div>
<div class="cover-stat-label">健康评分</div>
</div>
</div>
</div>
<div class="cover-version">v5.6 | 1,371 Tests All Green | 2026</div>
</div>
<!-- ==================== PAGE 2: PAIN & SOLUTION ==================== -->
<div class="page page-2">
<div class="section-tag">PROBLEM &amp; SOLUTION</div>
<h2>你的 AI 助手,为什么总差点意思?</h2>
<div class="pain-grid">
<div class="pain-card">
<div class="icon">&#128556;</div>
<h4>"万金油"困境</h4>
<p>什么都能答,但什么都不够专业。问 SQL 优化不考虑索引,问安全只给通用建议。</p>
</div>
<div class="pain-card">
<div class="icon">&#128683;</div>
<h4>上下文丢失</h4>
<p>长对话中忘记之前的决策和约定。刚讨论完架构,下一轮就当没发生过。</p>
</div>
<div class="pain-card">
<div class="icon">&#128260;</div>
<h4>无法自我改进</h4>
<p>同样的错误反复出现。每次都要手动纠正AI 没有记忆和学习能力。</p>
</div>
<div class="pain-card">
<div class="icon">&#9888;&#65039;</div>
<h4>质量不可控</h4>
<p>没有门控机制,低质量输出直达用户。危险命令、敏感文件修改无人拦截。</p>
</div>
</div>
<div class="solution-arrow">&#8595;</div>
<div class="solution-box">
<h3>Bookworm 的解法:语义路由 + 专家网络 + 自进化</h3>
<p>
不改变 Claude Code 的底层能力,而是在上层构建一个<strong>智能路由系统</strong>
用户用自然语言描述需求,系统自动识别意图,将请求路由到 50 个领域专家中最合适的一位。
每次交互都在学习,路由准确率持续提升。多层安全门控确保输出质量。
</p>
</div>
<div class="pipeline">
<h4>7 层流水线架构</h4>
<div class="pipeline-flow">
<div class="pipeline-node"><strong>L1 路由</strong>BM25 + TF-IDF<br>语义评分</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L2 门控</strong>文件保护<br>危险拦截</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L3 执行</strong>50 技能<br>10 智能体</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L4 后处理</strong>变更感知<br>构建追踪</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L5 审计</strong>合规检查<br>磁盘清理</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L6 学习</strong>显式纠正<br>隐式反馈</div>
<div class="pipeline-arrow">&#8594;</div>
<div class="pipeline-node"><strong>L7 进化</strong>审计→修复<br>无人值守</div>
</div>
</div>
</div>
<!-- ==================== PAGE 3: FEATURES ==================== -->
<div class="page page-3">
<div class="section-tag">CORE CAPABILITIES</div>
<h2>四大核心能力</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="f-icon f-icon-purple">&#127919;</div>
<h4>语义路由引擎</h4>
<p>
BM25 + TF-IDF + 上下文感知四维融合评分。50 技能 × 2,393 加权关键词索引。
27 条消歧规则处理"测试"等多义词。19 组同义词覆盖中英文混合输入。
</p>
<div class="f-metric" style="color:#6366f1;">100%</div>
<div class="f-metric-label">路由准确率 (455 条反馈)</div>
</div>
<div class="feature-card">
<div class="f-icon f-icon-cyan">&#128737;</div>
<h4>多层安全门控</h4>
<p>
L2 三道防线block-sensitive-files 保护钩子代码不被修改;
block-dangerous-commands 拦截 rm -rf / DROP TABLE
route-compliance-gate 确保 Skill 调用匹配路由指令。
</p>
<div class="f-metric" style="color:#0891b2;">24/24</div>
<div class="f-metric-label">SHA256 + HMAC 完整性校验通过</div>
</div>
<div class="feature-card">
<div class="f-icon f-icon-orange">&#129504;</div>
<h4>自适应学习闭环</h4>
<p>
显式纠正 + 隐式反馈双通道。5 天半衰期指数衰减。
权重限幅 [-0.5, +0.5] 防止暴走。Holdout 验证集评估学习效果。
技能名白名单防止虚构技能。
</p>
<div class="f-metric" style="color:#ea580c;">455</div>
<div class="f-metric-label">累计反馈数据 (0 误路由)</div>
</div>
<div class="feature-card">
<div class="f-icon f-icon-green">&#128296;</div>
<h4>自进化运维</h4>
<p>
drift-detector 实时感知配置变更。self-auditor 8 维审计。
self-healer 自动修复元数据(不碰业务逻辑)。
evolution-log 记录每次自愈轨迹。
</p>
<div class="f-metric" style="color:#059669;">1,371</div>
<div class="f-metric-label">测试用例 (46 文件, 全绿)</div>
</div>
</div>
<div class="health-bar">
<h4>10 维健康评分引擎 (实时)</h4>
<div class="health-row">
<div class="health-label">H1 配置一致性</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H2 行为基线</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H3 磁盘健康</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H4 钩子完整性</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H5 技能索引</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H6 规则缓存</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H7 路由准确率</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H8 学习收敛</div>
<div class="health-track"><div class="health-fill" style="width:90%"></div></div>
<div class="health-val">90</div>
</div>
<div class="health-row">
<div class="health-label">H9 路由合规</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-row">
<div class="health-label">H10 Hook有效性</div>
<div class="health-track"><div class="health-fill" style="width:100%"></div></div>
<div class="health-val">100</div>
</div>
<div class="health-total">99<span> / 100</span></div>
</div>
</div>
<!-- ==================== PAGE 4: AUDIENCE & CTA ==================== -->
<div class="page page-4">
<div class="section-tag">GET STARTED</div>
<h2>谁需要 Bookworm</h2>
<div class="audience-grid">
<div class="audience-card" style="border-color:#c7d2fe;">
<h4 style="color:#4338ca;">&#128187; 全栈独立开发者</h4>
<p>一个人 = 50 个专家。前端、后端、安全、DevOps、产品、商业全覆盖。告别反复切换上下文。</p>
</div>
<div class="audience-card" style="border-color:#bbf7d0;">
<h4 style="color:#059669;">&#128101; 技术团队 Leader</h4>
<p>架构评审、代码审查、技术选型的 AI 副驾驶。10 智能体并行工作,效率提升 10x。</p>
</div>
<div class="audience-card" style="border-color:#fde68a;">
<h4 style="color:#d97706;">&#128640; 创业者</h4>
<p>从 BP 撰写到产品开发到部署上线端到端支持。business-plan、sales-consultant、growth-hacker 商业技能覆盖。</p>
</div>
<div class="audience-card" style="border-color:#fecaca;">
<h4 style="color:#dc2626;">&#9889; Claude Code 深度用户</h4>
<p>将原生能力扩展 10 倍且持续自我进化。Hooks + MCP + Skills + Agents 四大扩展机制深度整合。</p>
</div>
</div>
<table class="pricing-table">
<thead>
<tr>
<th style="width:20%">方案</th>
<th style="width:20%">月费</th>
<th style="width:30%">包含内容</th>
<th style="width:30%">适合人群</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Free</strong></td>
<td>$0</td>
<td>15 核心技能、3 智能体、基础路由</td>
<td>体验用户、学生</td>
</tr>
<tr class="pricing-highlight">
<td><strong>Pro</strong> <span class="pricing-badge">推荐</span></td>
<td>$20/月<br><small style="color:#9ca3af">(Claude Pro)</small></td>
<td>50 技能、10 智能体、完整路由引擎、学习闭环</td>
<td>独立开发者、创业者</td>
</tr>
<tr>
<td><strong>Max</strong></td>
<td>$100-200/月<br><small style="color:#9ca3af">(Claude Max)</small></td>
<td>Pro 全部 + 不限用量 + 优先支持</td>
<td>全栈重度用户、团队 Lead</td>
</tr>
</tbody>
</table>
<div class="quick-start">
<h4>5 分钟快速开始</h4>
<pre><span class="comment"># 1. 克隆仓库</span>
git clone https://github.com/huakoh/bookworm-smart-assistant ~/.claude
<span class="comment"># 2. 安装依赖</span>
cd ~/.claude && pnpm install
<span class="comment"># 3. 验证系统</span>
claude -p "帮我运行 health-check 查看系统健康评分"
<span class="comment"># 4. 体验路由 — 输入任何需求,观察 [BWR] 路由指令</span>
claude</pre>
</div>
<div class="cta-footer">
<div class="cta-footer-left">
<h3>普通 AI 让用户适应 AIBookworm 让 AI 适应用户。</h3>
<p>开源免费 | 持续进化 | 社区驱动</p>
</div>
<div class="cta-footer-right">
<div class="url">github.com/huakoh/bookworm-smart-assistant</div>
<div class="ver">Bookworm Smart Assistant v5.6 | 2026</div>
</div>
</div>
</div>
</body>
</html>