docs(design): 新增品牌策略、视觉方向对比与设计文档索引

- 品牌策略:定位「投前审校员」、性格、语气,口号「标博士,你的AI投标专家」
- 三个视觉方向对比(A 校样 / B 卷宗 / C 检验单),已选 A
- docs/design/README.md:设计文档索引与品牌速查

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
2026-11-02 20:28:18 +08:00
parent 9df8d69a71
commit a437b09568
3 changed files with 510 additions and 0 deletions

38
docs/design/README.md Normal file
View File

@@ -0,0 +1,38 @@
# 品牌与设计
| 文档 | 内容 | 状态 |
|---|---|---|
| [brand-strategy.md](brand-strategy.md) | 品牌策略:定位「投前审校员」、性格、口号、语气、命名 | 定稿 |
| [brand-directions.html](brand-directions.html) | 三个视觉方向对比(A 校样 / B 卷宗 / C 检验单) | 已选 A |
| [logo/](logo/) | Logo 正式资产、使用规范、构建脚本、历史版本 | v5.1 定稿 |
| [vi/](vi/) | VI 视觉识别规范 PDF 与 HTML 源文件 | v1.1 |
| design-system.md | 产品界面设计规范:组件、设计 token、问题级别配色 | 下一步 |
## 速查
- **口号**:标博士,你的AI投标专家(固定写法:AI 两侧不加空格,结尾不加标点)
- **英文名**:BIAOBOSHI;代码仓库名 `bid-doctor`
- **官网**:www.biaoboshi.cn
- **地址**:南京市江宁区双龙大道3333号,邮编 211100
- **标准色**:印章红 #D9291C(只用于 logo)、藏青 #1C2554(字标);界面校样色系:墨 #1D2733、蓝铅笔 #2F5BD3、校样纸 #F5F6F3、致命红 #C4122F、赭 #A66300、定稿绿 #2E6B4F
- **字体**(均为 SIL OFL 1.1):思源宋体、思源黑体、Libre Caslon Text、Barlow Semi Condensed
## Logo 目录说明(`logo/`)
| 路径 | 内容 |
|---|---|
| `svg/`、`png/`、`favicon.svg` | 正式资产,由脚本生成,不要手改 |
| `logo-spec.md`、`logo-sheet.html` | 使用规范与预览页 |
| `scripts/` | 构建脚本:`process_seal.py`(处理印章原图)、`logo_lib.py`(排版参数)、`build_logo.py` + `build_assets.sh`(生成资产)、`wordmark_compare.py`(方案对比页)、`vi_diagrams.py`(VI 标注图) |
| `v5/` | 印章原图处理后的中间文件,`build_assets.sh` 从这里取印章 |
| `image-gen/` | 印章原图(AI 生成)、提示词与参考图 |
| `licenses/` | 字体许可证 |
| `drafts/` | 用户最初的 logo 草稿 |
| `seal-research.md` | 真实印章调研笔记 |
| `archive/` | v1–v4 的探索稿与设计说明 |
不进 git 的目录:`.work/`(Python 虚拟环境与字体文件)、`compare/`(方案对比页,可由脚本重新生成)。
## 相关决策
`docs/decisions.md` 中的 B1–B5:视觉方向、16px 图标与英文名、logo v5、比例与字体、口号。

View File

@@ -0,0 +1,417 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标博士 品牌方向</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--frame-bg:#ECEDEA; --frame-ink:#22252A; --frame-sub:#5E636B; --frame-line:#D3D6D2;
--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
--serif:"Noto Serif SC","Songti SC","SimSun",serif;
--fangsong:"STFangsong","FangSong","FangSong_GB2312","Noto Serif SC",serif;
--figures:"Barlow Semi Condensed","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--frame-bg);color:var(--frame-ink);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid #2B59C3;outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* ---------- 封面 ---------- */
.intro{padding-top:72px;padding-bottom:40px}
.intro h1{font:900 clamp(40px,7vw,76px)/1.05 var(--serif);letter-spacing:.02em;margin:0 0 20px}
.intro .lede{max-width:40em;font-size:17px;color:var(--frame-sub);margin:0}
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--frame-line);border:1px solid var(--frame-line);margin-top:40px}
.brief div{background:#F7F7F5;padding:18px 20px}
.brief h3{font:700 14px/1.4 var(--sans);margin:0 0 6px;color:var(--frame-sub)}
.brief p{margin:0;font-size:15px}
.brief strong{font-family:var(--serif);font-size:20px;display:block;margin-bottom:2px}
.section-title{font:700 22px/1.4 var(--sans);margin:64px 0 8px}
.section-sub{color:var(--frame-sub);margin:0 0 24px;max-width:46em}
/* ---------- 方向通用骨架 ---------- */
.dir{margin:28px 0 56px;border-radius:2px;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.dir-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:end;padding:36px 40px 28px;border-bottom:1px solid var(--rule)}
.dir-letter{font:900 72px/0.9 var(--serif);color:var(--accent);grid-row:span 2}
.dir-name{font:700 30px/1.2 var(--display);margin:0}
.dir-idea{margin:0;color:var(--sub);max-width:46em}
.dir-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
.dir-ids{padding:32px 40px;border-right:1px solid var(--rule)}
.dir-ui{padding:32px 40px;background:var(--panel)}
.block-title{font:700 13px/1.4 var(--sans);color:var(--sub);margin:0 0 14px}
.block + .block{margin-top:32px}
.logo{display:flex;align-items:center;gap:18px}
.logo svg{flex:none}
.logo .wordmark{font:900 36px/1 var(--display);letter-spacing:.06em}
.logo .en{display:block;font:600 13px/1 var(--figures);letter-spacing:.12em;color:var(--sub);margin-top:8px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw{font-size:12.5px;line-height:1.45}
.sw i{display:block;height:46px;border-radius:2px;margin-bottom:6px;border:1px solid rgba(0,0,0,.08)}
.sw b{display:block;font-weight:700;font-size:13px}
.sw span{color:var(--sub);font-family:var(--figures);font-size:13px;letter-spacing:.02em}
.type-spec .t1{font:700 26px/1.3 var(--display);margin:0 0 6px}
.type-spec .t2{margin:0 0 6px;font-size:15px}
.type-spec .t3{margin:0;font:600 22px/1 var(--figures);letter-spacing:.01em}
.type-spec small{display:block;color:var(--sub);font-size:12.5px;margin-top:10px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 40px 32px;border-top:1px solid var(--rule);font-size:14px}
.fit h4{margin:0 0 6px;font-size:14px}
.fit p{margin:0;color:var(--sub)}
/* 迷你界面通用 */
.ui-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ui-bar h3{margin:0;font:700 17px/1.4 var(--sans)}
.ui-bar .proj{font-size:13px;color:var(--sub)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{font:500 13px/1 var(--sans);padding:8px 12px;border-radius:var(--radius);border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sample-note{font-size:12px;color:var(--sub);margin-top:14px}
/* ---------- 方向 A · 校样 ---------- */
.dir-a{
--paper:#F5F6F3; --panel:#FFFFFF; --ink:#1D2733; --sub:#5C6670; --rule:#D9DDD8;
--accent:#C4122F; --pencil:#2F5BD3; --pencil-soft:#E7EDFB; --ok:#2E6B4F; --amber:#A66300;
--display:var(--serif); --radius:2px; --btn-line:#C9CEC9; --btn-bg:#fff;
}
.dir-a .finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
.dir-a .finding:first-of-type{border-top:0;padding-top:4px}
.dir-a .sev{display:inline-block;font:700 12px/1 var(--sans);padding:4px 7px;border:1.5px solid currentColor;border-radius:2px;margin-right:8px;vertical-align:2px}
.dir-a .sev.fatal{color:var(--accent)}
.dir-a .sev.major{color:var(--amber)}
.dir-a .f-title{font-weight:700;font-size:15px}
.dir-a .f-text{margin:6px 0 0;font-size:14px;color:var(--sub)}
.dir-a .margin-note{position:relative;font:500 13px/1.55 var(--sans);color:var(--pencil);border-left:2px solid var(--pencil);padding:2px 0 2px 12px}
.dir-a .margin-note::before{content:"";position:absolute;left:-22px;top:12px;width:20px;border-top:1.5px dashed var(--pencil)}
.dir-a .margin-note q{display:block;color:var(--ink);quotes:none;background:linear-gradient(transparent 62%,var(--pencil-soft) 62%);margin-top:4px}
.dir-a .cite{font:600 13px/1 var(--figures);letter-spacing:.02em}
.dir-a .confirmed{margin-top:10px;font-size:13px;color:var(--ok)}
.dir-a .confirmed b{font-family:var(--serif)}
.dir-a .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.dir-a .legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px}
/* ---------- 方向 B · 卷宗 ---------- */
.dir-b{
--paper:#FFFFFF; --panel:#F4EFE6; --ink:#22304A; --sub:#636B78; --rule:#E2DBCF;
--accent:#B98B52; --kraft:#B98B52; --cinnabar:#B3261E; --moss:#4F7A55; --amber:#9A6A12;
--display:var(--serif); --radius:3px; --btn-line:#CDBFA8; --btn-bg:#FFFDF8;
}
.dir-b .dossier{display:grid;grid-template-columns:44px minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:3px}
.dir-b .binding{background:var(--kraft);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:18px 0}
.dir-b .binding i{width:12px;height:12px;border-radius:50%;background:var(--panel);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.dir-b .tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--rule);overflow-x:auto}
.dir-b .tab{font-size:13px;padding:10px 12px 8px;color:var(--sub);border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;white-space:nowrap;position:relative;top:1px}
.dir-b .tab.on{color:var(--ink);background:#fff;border-color:var(--rule);font-weight:700}
.dir-b .rows{padding:6px 18px 16px}
.dir-b .row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px dashed var(--rule);align-items:start}
.dir-b .row:last-child{border-bottom:0}
.dir-b .no{font:600 22px/1 var(--figures);color:var(--kraft)}
.dir-b .r-title{font-weight:700}
.dir-b .r-text{font:15px/1.75 var(--fangsong);margin:4px 0 0;color:#3A4352}
.dir-b .tag{font-size:12px;padding:3px 8px;border-radius:3px;white-space:nowrap;font-weight:700}
.dir-b .tag.fatal{background:#F6E1DE;color:var(--cinnabar)}
.dir-b .tag.major{background:#F4EAD3;color:var(--amber)}
.dir-b .cite{font:600 13px/1 var(--figures);color:var(--sub)}
/* ---------- 方向 C · 检验单 ---------- */
.dir-c{
--paper:#FFFFFF; --panel:#F3F6F6; --ink:#20262C; --sub:#5D6870; --rule:#DCE3E5;
--accent:#0B7A75; --teal:#0B7A75; --flag:#C9262F; --amber:#A8650A; --ok:#2F7A45;
--display:var(--sans); --radius:4px; --btn-line:#C8D2D5; --btn-bg:#fff;
}
.dir-c .dir-name{font-weight:700}
.dir-c .labsheet{background:#fff;border:1px solid var(--rule);border-radius:4px;overflow-x:auto}
.dir-c table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.dir-c th{font-weight:700;text-align:left;color:var(--sub);font-size:12.5px;padding:10px 12px;border-bottom:2px solid var(--ink)}
.dir-c td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
.dir-c tr:last-child td{border-bottom:0}
.dir-c .num{font:600 15px/1.2 var(--figures);letter-spacing:.01em;white-space:nowrap}
.dir-c .flag{font:700 15px/1 var(--figures);white-space:nowrap}
.dir-c .flag.low{color:var(--flag)}
.dir-c .flag.miss{color:var(--amber)}
.dir-c .flag.high{color:var(--flag)}
.dir-c .item b{display:block}
.dir-c .item small{color:var(--sub)}
.dir-c .cite{font:600 13px/1 var(--figures);color:var(--teal);white-space:nowrap}
.dir-c .sheet-head{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--sub);gap:12px;flex-wrap:wrap}
.dir-c .sheet-head b{color:var(--ink)}
/* ---------- 对比与推荐 ---------- */
.compare{width:100%;border-collapse:collapse;background:#F7F7F5;font-size:14px}
.compare th,.compare td{padding:12px 14px;border:1px solid var(--frame-line);text-align:left;vertical-align:top}
.compare th{background:#E4E6E2;font-weight:700}
.recommend{margin:28px 0 80px;padding:28px 32px;background:#1D2733;color:#F5F6F3;border-radius:2px}
.recommend h3{font:700 22px/1.4 var(--serif);margin:0 0 10px}
.recommend p{margin:0 0 10px;max-width:52em;color:#D5DAE0}
.recommend p:last-child{margin-bottom:0}
footer{padding:0 0 48px;color:var(--frame-sub);font-size:13px}
@media (max-width:860px){
.dir-body{grid-template-columns:1fr}
.dir-ids{border-right:0;border-bottom:1px solid var(--rule)}
.dir-head,.dir-ids,.dir-ui,.fit{padding-left:20px;padding-right:20px}
.dir-a .finding{grid-template-columns:1fr}
.dir-a .margin-note::before{display:none}
.fit{grid-template-columns:1fr}
.dir-letter{font-size:52px}
.wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
</style>
</head>
<body>
<header class="wrap intro">
<h1>标博士</h1>
<p class="lede">品牌方向提案(v0.1,2026-11-02)。三个方向都基于同一套品牌策略,区别只在视觉上的比喻。每个方向都用真实样本里的条款做了一屏「检查结果」示意,请对比着看,选一个继续细化。</p>
<div class="brief">
<div><h3>定位</h3><strong>投前审校员</strong><p>把招标文件的每一条要求和投标文件逐条对上,指明出处,由人确认。</p></div>
<div><h3>性格</h3><strong>较真、有据、沉着</strong><p>逐条不跳过;说什么都带出处;截止前不添乱、不吓人。</p></div>
<div><h3>口号(定稿)</h3><strong>标博士,你的AI投标专家</strong><p>点明身份:懂投标、会查标的 AI 助手。2026-11-02 定稿,见决策 B5。</p></div>
</div>
</header>
<main class="wrap">
<h2 class="section-title">三个视觉方向</h2>
<p class="section-sub">示意界面里的条款文字取自苏采云样本(S02、S10);页码和投标响应值是虚构的示意数据。</p>
<!-- ============ A 校样 ============ -->
<section class="dir dir-a" aria-labelledby="a-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">A</div>
<h3 class="dir-name" id="a-name">校样</h3>
<p class="dir-idea">借用出版社的校对传统:<b>蓝铅笔</b>是机器的批注和待确认的内容,<b>墨笔</b>是人确认后的定稿,<b>红笔</b>只用来标问题。颜色本身就说明了「谁说的、说完没有」。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:带校对圈的标字">
<rect x="1" y="1" width="62" height="62" fill="#1D2733"/>
<text x="32" y="43" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#F5F6F3">标</text>
<path d="M47.5 12.5 C40 6 20 6.5 12 17 C4.5 27 8 47 22 53 C35 58.5 53 53 55.5 38 C57 28 54 20 45 15" fill="none" stroke="#6F93F0" stroke-width="2.4" stroke-linecap="round"/>
</svg>
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#1D2733"></i><b>墨</b><span>#1D2733</span><br>正文、已确认</div>
<div class="sw"><i style="background:#2F5BD3"></i><b>蓝铅笔</b><span>#2F5BD3</span><br>AI 标注、出处</div>
<div class="sw"><i style="background:#C4122F"></i><b>校对红</b><span>#C4122F</span><br>只用于致命问题</div>
<div class="sw"><i style="background:#F5F6F3"></i><b>校样纸</b><span>#F5F6F3</span><br>冷灰白,非米色</div>
<div class="sw"><i style="background:#A66300"></i><b>赭</b><span>#A66300</span><br>重要问题</div>
<div class="sw"><i style="background:#2E6B4F"></i><b>定稿绿</b><span>#2E6B4F</span><br>确认署名</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1">思源宋体,用于标题与标志</p>
<p class="t2">正文用系统黑体(苹方 / 微软雅黑),保证清单密集时也好读。</p>
<p class="t3">第 38 页 ≥512G 132.00 万元</p>
<small>数字用 Barlow Semi Condensed:窄、等宽数字,页码和金额对得齐。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>采购包 2 的检查结果</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
<div class="finding">
<div>
<span class="sev fatal">致命</span><span class="f-title">报价超过采购包 2 的最高限价</span>
<p class="f-text">开标一览表报价 133.60 万元,最高限价 132.00 万元,超出 1.60 万元。这一项会导致投标无效。</p>
<div class="btns"><button class="btn primary">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button></div>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 2 页</span><q>最高限价:184 万元(采购包 1:14 万元,采购包 2:132 万元,采购包 3:38 万元)</q></aside>
</div>
<div class="finding">
<div>
<span class="sev fatal">致命</span><span class="f-title">★ 条款疑似不满足:服务器内存</span>
<p class="f-text">技术偏离表第 12 行响应「内存 256G」,要求「≥512G」。</p>
<p class="confirmed"><b>王敏</b> 于 11 月 2 日 14:20 标记为已修改</p>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 41 页</span><q>★ 2U 机架式服务器,CPU:配置 ≥2 颗海光架构 32C 2.7GHz,内存:≥512G DDR4</q></aside>
</div>
<div class="finding">
<div>
<span class="sev major">重要</span><span class="f-title">缺少 ★ 参数的证明材料</span>
<p class="f-text">已响应「支持硬件 BFD」,但没有找到官网参数截图等证明材料。</p>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 44 页</span><q>★ 支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料</q></aside>
</div>
<div class="legend"><span><i style="background:#2F5BD3"></i>蓝铅笔:系统找到的出处</span><span><i style="background:#1D2733"></i>墨:人工确认后</span><span><i style="background:#C4122F"></i>红:只标致命问题</span></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>颜色规则和「AI 初稿 → 人工确认 → 留痕」是同一件事,用户不需要额外学习。页边批注把「出处」变成界面上最显眼的元素,正好对应我们的核心差异。</p></div>
<div><h4>风险</h4><p>纸张 + 衬线容易让人觉得「文艺」。办法:衬线只用在标题和标志上,界面主体用黑体;纸色用冷灰白。页边批注在窄屏上要改成折叠展开。</p></div>
</div>
</section>
<!-- ============ B 卷宗 ============ -->
<section class="dir dir-b" aria-labelledby="b-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">B</div>
<h3 class="dir-name" id="b-name">卷宗</h3>
<p class="dir-idea">借用标书装订和档案管理:每个投标项目是一份<b>卷宗</b>,左边是装订线,资格、无效条款、评分等是档案夹的分隔页。报告正文用系统自带的仿宋,投标人一看就熟悉。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:卷宗页签上的标字">
<path d="M4 14 h20 l5 -8 h31 v54 h-56 z" fill="#22304A"/>
<rect x="4" y="14" width="9" height="46" fill="#B98B52"/>
<circle cx="8.5" cy="25" r="2.2" fill="#22304A"/><circle cx="8.5" cy="49" r="2.2" fill="#22304A"/>
<text x="37" y="48" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#FFFFFF">标</text>
</svg>
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#22304A"></i><b>深靛</b><span>#22304A</span><br>品牌主色、正文</div>
<div class="sw"><i style="background:#B98B52"></i><b>牛皮纸</b><span>#B98B52</span><br>装订线、编号</div>
<div class="sw"><i style="background:#F4EFE6"></i><b>档案底</b><span>#F4EFE6</span><br>背景层</div>
<div class="sw"><i style="background:#B3261E"></i><b>朱砂</b><span>#B3261E</span><br>致命问题</div>
<div class="sw"><i style="background:#9A6A12"></i><b>赭黄</b><span>#9A6A12</span><br>重要问题</div>
<div class="sw"><i style="background:#4F7A55"></i><b>苔绿</b><span>#4F7A55</span><br>已确认</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1">思源宋体,用于标题</p>
<p class="t2" style="font-family:var(--fangsong);font-size:16px">仿宋用于报告与原文引用,与招标文件的阅读习惯一致。</p>
<p class="t3">第 03 项 第 41 页</p>
<small>仿宋直接用系统字体(macOS 华文仿宋 / Windows 仿宋),不需要额外加载字体文件。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>检查结果</h3><span class="proj">智慧规划资源 2025 标段三 · 采购包 2</span></div>
<div class="dossier">
<div class="binding" aria-hidden="true"><i></i><i></i><i></i></div>
<div>
<div class="tabs" role="tablist" aria-label="清单分类">
<span class="tab on" role="tab" aria-selected="true">全部问题 3</span><span class="tab" role="tab">资格</span><span class="tab" role="tab">无效条款</span><span class="tab" role="tab">技术参数</span><span class="tab" role="tab">报价</span>
</div>
<div class="rows">
<div class="row"><span class="no">01</span><div><span class="r-title">报价超过采购包 2 的最高限价</span><p class="r-text">开标一览表报价 133.60 万元,最高限价 132.00 万元。</p><span class="cite">招标文件 第 2 页</span></div><span class="tag fatal">致命</span></div>
<div class="row"><span class="no">02</span><div><span class="r-title">★ 条款疑似不满足:服务器内存</span><p class="r-text">要求「≥512G DDR4」,偏离表响应「256G」。</p><span class="cite">招标文件 第 41 页 ↔ 投标文件 技术册 第 12 页</span></div><span class="tag fatal">致命</span></div>
<div class="row"><span class="no">03</span><div><span class="r-title">缺少 ★ 参数的证明材料</span><p class="r-text">「支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料」</p><span class="cite">招标文件 第 44 页</span></div><span class="tag major">重要</span></div>
</div>
</div>
</div>
<div class="btns"><button class="btn primary">导出检查报告</button><button class="btn">按卷宗归档</button></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>「项目 = 卷宗」和全程留痕、归档、保存的诉求一致,对政企客户显得稳重可靠。仿宋报告拿给老板或归档都很自然。</p></div>
<div><h4>风险</h4><p>容易显得老气、偏后台系统风格;装订线和页签如果做得太具体,会显得像拟物设计。仿宋在小字号下不好读,只能用在报告和引用上。</p></div>
</div>
</section>
<!-- ============ C 检验单 ============ -->
<section class="dir dir-c" aria-labelledby="c-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">C</div>
<h3 class="dir-name" id="c-name">检验单</h3>
<p class="dir-idea">从「博士」引申到体检报告:每条要求是一个<b>检验项目</b>,招标要求是参考值,投标响应是检测结果,偏离用 ↑ ↓ 标出来。数字一目了然,技术参数核对尤其直观。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:刻度环绕的标字">
<circle cx="32" cy="32" r="30" fill="#0B7A75"/>
<g stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">
<line x1="32" y1="5" x2="32" y2="10"/><line x1="51.1" y1="12.9" x2="47.6" y2="16.4"/><line x1="59" y1="32" x2="54" y2="32"/><line x1="12.9" y1="12.9" x2="16.4" y2="16.4"/><line x1="5" y1="32" x2="10" y2="32"/>
</g>
<text x="32" y="44" text-anchor="middle" font-family="Noto Sans SC, sans-serif" font-weight="700" font-size="28" fill="#FFFFFF">标</text>
</svg>
<div><span class="wordmark" style="font-family:var(--sans);font-weight:700">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#0B7A75"></i><b>检验青</b><span>#0B7A75</span><br>品牌主色、出处</div>
<div class="sw"><i style="background:#20262C"></i><b>石墨</b><span>#20262C</span><br>正文</div>
<div class="sw"><i style="background:#F3F6F6"></i><b>化验单底</b><span>#F3F6F6</span><br>背景层</div>
<div class="sw"><i style="background:#C9262F"></i><b>异常红</b><span>#C9262F</span><br>致命、↑↓</div>
<div class="sw"><i style="background:#A8650A"></i><b>琥珀</b><span>#A8650A</span><br>重要、缺项</div>
<div class="sw"><i style="background:#2F7A45"></i><b>正常绿</b><span>#2F7A45</span><br>已确认</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1" style="font-family:var(--sans)">思源黑体,用于全部界面</p>
<p class="t2">只用一套无衬线字体,强调精确、干净。</p>
<p class="t3">≥512G ↓ 256G</p>
<small>数字用 Barlow Semi Condensed,表格里的数值、单位和判定符号对齐。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>检查结果 · 采购包 2</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
<div class="labsheet">
<div class="sheet-head"><span>投标文件 <b>v3</b>,11 月 2 日 14:05 检查</span><span>致命 <b>2</b> 重要 <b>1</b></span></div>
<table>
<thead><tr><th>检查项目</th><th>招标要求</th><th>投标响应</th><th>判定</th><th>出处</th></tr></thead>
<tbody>
<tr><td class="item"><b>报价(采购包 2)</b><small>最高限价</small></td><td class="num">≤132.00 万元</td><td class="num">133.60 万元</td><td class="flag high">↑ 超限</td><td class="cite">第 2 页</td></tr>
<tr><td class="item"><b>★ 服务器内存</b><small>2U 机架式服务器</small></td><td class="num">≥512G</td><td class="num">256G</td><td class="flag low">↓ 不满足</td><td class="cite">第 41 页</td></tr>
<tr><td class="item"><b>★ 硬件 BFD</b><small>证明材料</small></td><td class="num">≤50ms,附证明</td><td class="num">已响应</td><td class="flag miss">缺证明</td><td class="cite">第 44 页</td></tr>
</tbody>
</table>
</div>
<div class="btns"><button class="btn primary">逐项确认</button><button class="btn">导出检查报告</button></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>技术参数类问题(IT 集成占比最高)用「要求 / 响应 / 判定」三列表达非常直观,和「博士」的名字也呼应。界面现代、干净,容易做好响应式。</p></div>
<div><h4>风险</h4><p>青色 + 表格是常见的 SaaS 面孔,辨识度最低;医疗比喻容易让人联想到「诊断结论」,暗示的确定性比我们承诺的更强。资格、形式类问题不适合放进数值表格。</p></div>
</div>
</section>
<h2 class="section-title">对比</h2>
<div style="overflow-x:auto">
<table class="compare">
<thead><tr><th></th><th>A 校样</th><th>B 卷宗</th><th>C 检验单</th></tr></thead>
<tbody>
<tr><th>和核心差异「可复核」的关系</th><td>最强:出处是界面主角</td><td>中:出处是附注</td><td>中:出处是一列</td></tr>
<tr><th>和「AI 初稿 → 人工确认」的关系</th><td>最强:颜色即状态</td><td>弱</td><td>弱</td></tr>
<tr><th>辨识度</th><td>高</td><td>中高</td><td>低</td></tr>
<tr><th>政企客户的信任感</th><td>中高</td><td>最高</td><td>中</td></tr>
<tr><th>技术参数类问题的表达</th><td>中(可以借用 C 的三列)</td><td>中</td><td>最强</td></tr>
<tr><th>红线风险</th><td>低</td><td>低(避开了红头样式)</td><td>中:诊断暗示确定性</td></tr>
</tbody>
</table>
</div>
<div class="recommend">
<h3>推荐 A「校样」,借用 C 的参数对照表</h3>
<p>标博士和同类产品的根本区别是「每一条都查得到出处、AI 说的和人确认的分得清」。只有 A 把这件事做成了视觉语言本身:蓝铅笔、墨、红笔三种笔迹分别就是机器标注、人工确认和问题。</p>
<p>技术参数核对是 IT 集成项目里数量最多的问题,这一块借用 C 的「要求 / 响应 / 判定」三列表,放在 A 的视觉体系里。B 的「卷宗」可以留作检查报告 PDF 的版式参考:仿宋正文,便于归档。</p>
</div>
</main>
<footer class="wrap">标博士品牌方向 v0.1 · 配套文字说明见 brand-strategy.md</footer>
</body>
</html>

View File

@@ -0,0 +1,55 @@
# 品牌策略 · 标博士(草案 v0.1)
> 阶段:主题 / 品牌设计 · 2026-11-02。本文定「说什么、怎么说」;视觉方向的对比见 `brand-directions.html`,选定后再出完整设计规范(`design-system.md`)。
## 1. 定位
**标博士是投标方的「投前审校员」**:把招标文件里的每一条要求,跟你的投标文件逐条对上,指出哪里没对上、依据在原文哪一页,最后由你来确认。
| | |
|---|---|
| 给谁用 | IT 集成企业的投标专员(每天用),投标主管 / 老板(看报告、决定续费) |
| 解决什么 | 读标漏项、递交前查不全、新人没有经验清单 |
| 跟别人有什么不同 | 不比谁「生成」得快,比的是**每条判断都能回到原文** |
| 品牌承诺 | 不替你打包票,但让每一条判断都查得到依据 |
承诺必须守住产品红线(AGENTS.md):不出现「保证」「零废标」「100%」这类说法,只说「辅助检查」「风险提示」。
## 2. 性格
| 性格 | 意思 | 表现在哪里 |
|---|---|---|
| **较真** | 逐条、不跳过、不含糊 | 清单逐项列出;「未找到」也要说清楚找过哪些地方 |
| **有据** | 说什么都带出处 | 出处标注是每条结论的固定组成部分,不是附加信息 |
| **沉着** | 截止前不添乱、不吓人 | 致命问题说清楚后果和改法,不用惊叹号、不闪烁 |
不是什么:不是「黑科技」,不是「AI 全自动」,不卖萌。
## 3. 口号
**标博士,你的AI投标专家**(2026-11-02 定稿,见 decisions.md B5)
- 固定写法:「AI」两侧不加空格,结尾不加标点。
- 含义:点明身份,懂投标、会查标的 AI 助手。「专家」指懂行、查得细,不代表替用户做决定或担保结果。在产品和报告里,具体结论仍用「辅助检查」「风险提示」来表述(见第 4 节)。
- 不用:「告别废标」「一键搞定」「零风险」(越过红线,也没有说清楚产品做什么)。
原先的推荐口号「每一条,都有出处」保留为**产品原则**(「出处看得见」:每条结论都能回到原文),不再作为口号使用。
## 4. 语气
| 原则 | 这样写 | 不这样写 |
|---|---|---|
| 说依据,不说保证 | 「未找到对 ★ 条款的响应(招标文件第 38 页)」 | 「您的标书存在严重问题!」 |
| 说投标人的话 | ★ 条款、无效投标、开标一览表、采购包 | 「要素」「实体」「规则命中」 |
| 结论在前,出处在后 | 「报价超过采购包 2 的最高限价 1.6 万元。依据:第一章 第 4 条」 | 先长篇解释规则再给结论 |
| 后果和改法一起说 | 「这一项会导致投标无效。请在技术偏离表第 12 行补充响应。」 | 「请注意!」 |
| AI 产出明确标出来 | 「AI 摘要」「AI 初稿」,确认后由人署名 | 把 AI 结论写得像定论 |
| 术语跟着采购方式走 | 公开招标说「投标文件」,竞争性磋商说「响应文件」 | 两种混用 |
按钮和状态用同一个词贯穿:按钮写「确认无误」,状态就显示「已确认无误」;按钮写「导出报告」,提示就说「报告已导出」。
## 5. 命名
- 中文名:**标博士**。「博士」带来专业、可信的联想;配合「审校员」的定位,用法上偏向「帮你查」,不往「帮你治」引申。
- 英文名:统一用拼音 **BIAOBOSHI**(2026-11-02 决定,见 decisions.md B2)。代码仓库名继续用 `bid-doctor`。界面上以中文为主,拼音只出现在 logo、域名等地方。
- 功能命名用投标人的话:「读标」(M2)、「查标」(M3),不用「智能解析引擎」这类说法。