@huicai/cli 2026.814.0 → 2026.1019.0

package/skills/tech-doc/trigger-cases.json

@@ -0,0 +1,57 @@
+{
+  "skill": "tech-doc",
+  "purpose": "触发行为规格。CI 按词法跑：正样例须在描述词汇上明显压过近似负样例，且路由到自己。改 description 后必须重跑 skill-lint route。",
+  "intentionalOverlap": [
+    "docx-author",
+    "project-proposal",
+    "meeting-minutes",
+    "eng-docs"
+  ],
+  "cases": [
+    {
+      "id": "pos-task",
+      "prompt": "帮我写一份研发任务书",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-acceptance",
+      "prompt": "项目验收报告和验收申请表怎么写",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-plan",
+      "prompt": "写个项目研发实施计划",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-summary",
+      "prompt": "帮我起草项目技术总结报告",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-proposal",
+      "prompt": "立项申请书要准备哪些内容",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-archive",
+      "prompt": "研发文档归档齐不齐，帮我做个档案体检",
+      "shouldTrigger": true
+    },
+    {
+      "id": "neg-ppt",
+      "prompt": "做一份 PPT 汇报材料",
+      "shouldTrigger": false
+    },
+    {
+      "id": "neg-contract",
+      "prompt": "帮我审一下这份采购合同的条款",
+      "shouldTrigger": false
+    },
+    {
+      "id": "neg-code",
+      "prompt": "帮我重构这个模块的代码",
+      "shouldTrigger": false
+    }
+  ]
+}

package/skills/tech-research/trigger-cases.json

@@ -0,0 +1,31 @@
+{
+  "skill": "tech-research",
+  "cases": [
+    {
+      "id": "pos-1",
+      "prompt": "做个技术调研和综述",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-2",
+      "prompt": "技术选型对比一下方案",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-3",
+      "prompt": "POC 方案和技术报告怎么写",
+      "shouldTrigger": true
+    },
+    {
+      "id": "neg-1",
+      "prompt": "做一次新技术引入的评分卡与退出成本",
+      "shouldTrigger": false,
+      "lexical": false
+    },
+    {
+      "id": "neg-2",
+      "prompt": "写一份市场竞品分析",
+      "shouldTrigger": false
+    }
+  ]
+}

package/skills/tender-bidding/trigger-cases.json

@@ -0,0 +1,31 @@
+{
+  "skill": "tender-bidding",
+  "cases": [
+    {
+      "id": "pos-1",
+      "prompt": "投标，招标文件怎么解读",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-2",
+      "prompt": "评分办法对标和资格审查",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-3",
+      "prompt": "标书编写和废标点自查",
+      "shouldTrigger": true
+    },
+    {
+      "id": "neg-1",
+      "prompt": "写一份项目申报书",
+      "shouldTrigger": false,
+      "lexical": false
+    },
+    {
+      "id": "neg-2",
+      "prompt": "做一次采购询比价",
+      "shouldTrigger": false
+    }
+  ]
+}

package/skills/translation-pro/trigger-cases.json

@@ -0,0 +1,30 @@
+{
+  "skill": "translation-pro",
+  "cases": [
+    {
+      "id": "pos-1",
+      "prompt": "帮我翻译这份文档，中译英",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-2",
+      "prompt": "做个双语对照版，术语表怎么管",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-3",
+      "prompt": "本地化审校流程怎么走",
+      "shouldTrigger": true
+    },
+    {
+      "id": "neg-1",
+      "prompt": "写一封英文商务邮件",
+      "shouldTrigger": false
+    },
+    {
+      "id": "neg-2",
+      "prompt": "做一次外贸单证审单",
+      "shouldTrigger": false
+    }
+  ]
+}

package/skills/treasury-mgmt/trigger-cases.json

@@ -0,0 +1,31 @@
+{
+  "skill": "treasury-mgmt",
+  "cases": [
+    {
+      "id": "pos-1",
+      "prompt": "做 13 周滚动现金流预测",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-2",
+      "prompt": "资金缺口和头寸怎么管，银承授信怎么用",
+      "shouldTrigger": true
+    },
+    {
+      "id": "pos-3",
+      "prompt": "结售汇和锁汇怎么做",
+      "shouldTrigger": true
+    },
+    {
+      "id": "neg-1",
+      "prompt": "做一次投融资的股权测算",
+      "shouldTrigger": false,
+      "lexical": false
+    },
+    {
+      "id": "neg-2",
+      "prompt": "写一份应收账龄分析",
+      "shouldTrigger": false
+    }
+  ]
+}

package/skills/trim-cot-leakage/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: trim-cot-leakage
+description: 清理注释与文档里的思维过程泄漏：残留的方案编号、设计稿章节号、阶段代号等死引用，「改造前/现在/以前是」这类历史包袱与工作日志口吻，对着评审者的辩解，以及「暂时够用」这类犹豫措辞。当用户说"注释里有历史包袱""这段读起来像工作日志""代码里还引着早就没了的方案编号和设计稿章节号""帮我清理遗留说明"时使用。处置不是一删了之：先把仍成立的事实改写成当下视角的陈述，再删掉叙事外壳。
+version: 1.0.0
+---
+
+# 清理思维链泄漏
+
+思维链泄漏 = 一段文字的**视角是写作现场，而不是代码本身**：
+它引用只有当时那次会话才看得到的东西、叙述改动过程而不是当前状态、或者在跟一个已经离开的评审者争论。
+
+## 唯一判据
+
+对每一处可疑文字问：
+
+> **一个只能看到当前代码、拿不到任何会话记录/评审讨论/未提交草稿的人，
+> 能不能解析其中每一个指代、验证其中每一条断言？**
+
+不能 → 是泄漏。**但处置不是一删了之**：先把其中仍然成立的事实用「当下视角」重述，再把叙事外壳删掉。
+只有完全不含事实的（编号、控制流复述）才整句删除。
+
+## 八类
+
+| # | 类型 | 例子 | 处置 |
+|---|---|---|---|
+| 1 | 死引用 | `（方案 3）` `见设计稿 §4.7` `P2-14 阶段` | 有已提交的落点就按名字与路径引用；没有就删掉引用、把事实留下 |
+| 2 | 提交/评审视角 | 「下个 PR 会补」「上一个 commit 里」 | 写清当前机制或扩展点；待办转 `TODO` |
+| 3 | 变更叙事 | 「以前是 X」「现在改成了 Y」「本次去掉了」 | 见下方**惠彩特例** |
+| 4 | 评审编排 | 「评审时被否了」「评审确认过」「v5 版本的说明」 | 留结论与理由，删掉谁在什么时候说的 |
+| 5 | 对评审者自辩 | 「这个转换是安全的，它只是……」 | 写清让它安全的那条不变式，或删 |
+| 6 | 复述与推导 | 控制流叙述、测试走查、显然分支的证明 | 删，只留非显然契约 |
+| 7 | 犹豫与占位 | 「暂时够用」「应该没问题」 | 升级成 `TODO`/`FIXME` 并写清真实边界 |
+| 8 | 语言串味 | 中文文档里夹着未翻译的英文片段（反之亦然） | 翻译或删除 |
+
+## 惠彩特例：第 3 类要分开判（**最容易误伤的一条**）
+
+本仓大量注释长这样：
+
+> 「改造前 `/sandbox` 只是工具名黑名单——那挡不住已经被批准的命令。」
+
+按字面它是变更叙事，但它真正在做的是**用反例论证当前设计为什么非如此不可**，
+而反例往往是最省字的论证方式。一刀切删掉，等于把设计理由一起删了。
+
+划线规则：
+
+- **删**：只陈述历史、不解释当下。（「这里以前叫 xxx」「v1 的时候用的是轮询」）
+- **留**：以反例形式论证当前不变式，且反例本身就是理由的一部分。
+- **改**：把过去时改成**现在时反事实**——
+  「改造前 X，那挡不住 Y」→「若只做 X，就挡不住 Y」。
+  意思一字不少，视角从「那次改动」挪回「这段代码」。
+
+拿不准时按「改」处理：反事实句式两种情况都成立。
+
+## 用法
+
+1. 要明确范围；审查任务只报不改。
+2. 逐处给出：类型编号 + 处置（删 / 重述 / 改反事实）+ 重述后的文字。
+3. 与 [prose-standard](../prose-standard/SKILL.md) 配合：那条判断该不该写，这条判断写法对不对。

package/skills/trim-cot-leakage/trigger-cases.json

@@ -0,0 +1,23 @@
+{
+  "skill": "trim-cot-leakage",
+  "purpose": "触发行为规格。负样例分两类：不同词汇的近邻走词法层（CI 跑），同词汇不同意图的近邻标 lexical:false 归行为层。",
+  "cases": [
+    { "id": "history-baggage", "prompt": "注释里有一堆历史包袱，「改造前」「以前是」满天飞，清一下", "shouldTrigger": true },
+    { "id": "worklog-tone", "prompt": "这段说明读起来像工作日志，不像在讲代码本身", "shouldTrigger": true },
+    { "id": "dead-refs", "prompt": "代码里还引着方案编号和设计稿章节号，那些东西早没了", "shouldTrigger": true },
+    { "id": "reviewer-defense", "prompt": "这几条注释是在跟评审者辩解，帮我改成陈述不变式", "shouldTrigger": true },
+    {
+      "id": "near-miss-changelog",
+      "prompt": "帮我生成这次发布的变更日志",
+      "shouldTrigger": false,
+      "note": "词汇不重合（变更日志 vs 注释/泄漏/包袱），词法层能分开；而且变更叙事在变更日志里本来就是正确的。"
+    },
+    {
+      "id": "near-miss-git-history",
+      "prompt": "查一下这段代码的历史，看它为什么变成现在这样",
+      "shouldTrigger": false,
+      "lexical": false,
+      "note": "与「清理历史包袱」共用「历史」——同词汇不同意图（考古 vs 清理），词法层分不开，归行为层（应落到 code-archaeology）。"
+    }
+  ]
+}

package/skills/web-craft/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: web-craft
+description: 做网页、H5、落地页、官网、活动页/报名页、邀请函请柬（婚礼/生日/满月/年会/开业）、个人主页、作品集、小游戏时载入，尤其要求好看、有设计感、能直接发微信给人用时：先定设计方向与设计令牌，再写零占位、手机优先、兼容微信的完整页面，最后用 web_inspect 在真实浏览器跑手机与桌面视口并走查关键交互；婚礼请柬有现成高质量模板。
+version: 1.0.0
+---
+
+# 作品级网页 / H5
+
+一句话：**先定调再动手，写完真跑一遍，必修清零再交付。**
+访客对一个页面的判断，90% 来自打开后的前三秒（好不好看）和第一次点击（能不能用）。
+这两件事都不能靠「代码读起来没问题」来保证。
+
+## 流程（按序，不跳步）
+
+1. **补全需求**：查 `references/recipes.md` 找到页面类型的配方，列出访客一定会用到的模块。
+   日期、地点、电话这类事实：对话里有就用，没有就先问；实在要先出稿，用一看就是示例的值，并在交付时列成「待确认」。
+   **不编造私人经历**（恋爱故事、成员履历）——用诗词、祝福语或留白代替。
+2. **定调**：写一份五行设计简报放进 todo（写码前完成，别边写边想）：
+   - 方向：一句话风格，从 `references/design-direction.md` 选一个或改一个（如「新中式·朱砂宣纸」）；
+   - 令牌：6–8 个颜色变量 + 字体栈 + 字号阶梯 + 圆角阴影 + 动效时长与缓动；
+   - 记忆点：一个让人记住的设计动作（开门封面、印章落下、签名描边、视差花枝……）；
+   - 节奏：从首屏到尾屏，每屏一个视觉焦点；
+   - 禁忌：这一页刻意不做什么（见下方「反模板味」）。
+3. **工程**：单页 H5 做成一个自包含的 `index.html`（内联 CSS/JS、零外链，发文件、传服务器都能直接用）；
+   多页或复杂交互再上 Vite。内容集中到一个配置对象，渲染一律 `textContent`（不拼 innerHTML，防 XSS）。
+4. **实现**：先搭骨架与令牌，再逐屏精修。每个交互写全状态：默认 / 按下 / 加载中 / 成功 / 失败 / 空。
+5. **体检**：`web_inspect(path)` → 必修清零；再用 actions 把关键流程走一遍（见文末）；建议项逐条评估。
+6. **打磨**：对照 `references/craft-checklist.md` 过一遍。这一步决定「能用」和「惊艳」之间的差距。
+7. **交付说明**：怎么打开与部署、改哪里换内容、验证了什么（体检结论 + 截图路径）、还有哪些待用户确认。
+
+## 现成模板（邀请函类先读这里）
+
+`templates/wedding-invitation.html`：婚礼请柬的完整实现，已过 web_inspect 零必修零建议、20 余步交互走查全通过。
+开门封面（兼作音乐的用户手势）、内置八音盒《卡农》（Web Audio 合成，无需音乐文件）、倒计时（过期自动变「已相守 N 天」）、
+农历与星期自动推算、`?to=张三` 个性化称呼、流程、地点导航（按名称检索，无需坐标与 key）、回执（校验/本机保存/可接接口/可修改）、
+加入日历（.ics，微信内自动改为复制）、分享（系统分享 / 微信右上角引导 / 复制链接）、花瓣、四套主题、减弱动效、桌面端居中卡片。
+
+**用法**：先用 run_bash 把模板复制成项目文件（资源基址见上方 skill_resources），**不要**把模板全文读进来再 write_file 重写——
+66KB 会被单次输出上限截断：
+
+```
+cp "<资源基址>/templates/wedding-invitation.html" index.html     # Windows 用 copy，或 run_python 的 shutil.copy
+```
+
+然后 read_file 看文件开头的 `window.INVITE` 配置（约 55 行），用 edit_file 改成用户的信息，**最后把 `sample` 改为 false**
+（为 true 时页面顶部挂一条 TODO 提醒、web_inspect 报必修——专防复制了模板却忘了换内容）；
+同步改 `<title>` 与 description；按设计简报换 `theme` 或改 `:root` 令牌；`tagline` 按算出来的日子写（碰上节日就点出来）。
+生日、满月、乔迁、开业、年会邀请函同样从它改起：换文案、删掉不需要的区块，比从零写可靠得多。
+
+## 视觉硬规则（违反一条就显廉价）
+
+- **色**：一个主色 + 一个点缀色 + 带主色倾向的中性色阶，全部走 CSS 变量。不用纯黑 #000、不用冷灰配暖底。
+- **字**：标题用有性格的衬线/楷体，正文用无衬线；中文正文 15–17px、行高 1.75–1.9；字号阶梯用 `clamp()`。
+  国内不用 Google Fonts，字体栈见 `references/h5-mobile.md`。
+- **空**：手机区块上下留白 ≥ 72px，元素间距用 4/8 的倍数。宁空勿挤。
+- **层次**：每屏只有一个视觉焦点；标题、正文、注释在字号、字重、颜色三个维度同时拉开。
+- **饰**：装饰用内联 SVG（枝叶、纹样、角花、印章）、CSS 渐变与纹理、细线。**禁止用 emoji 当图标**，禁止外链网图。
+- **动**：入场 = 渐显 + 位移 12–24px，500–900ms，`cubic-bezier(.2,.7,.2,1)`，同屏依次延迟 80–120ms；
+  只动 transform / opacity；必须写 `prefers-reduced-motion` 降级。配方见 `references/motion.md`。
+- **反模板味**：不用紫蓝渐变 + 白卡片的通用 SaaS 皮；不要每个区块都是「居中标题 + 三张卡片」；
+  不写「欢迎来到」「尊敬的用户」式空话；不给访客看空占位框。
+
+## 手机与微信硬规则
+
+- `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">`；
+  整屏区块写 `min-height:100vh; min-height:100dvh;`；贴底元素加 `env(safe-area-inset-bottom)`。
+- 点击区 ≥ 44px；输入框字号 ≥ 16px（否则 iOS 聚焦时整页放大）；任何视口都不许横向溢出。
+- **音乐**：浏览器禁止无手势自动播放——把「点击开启」当作播放时机；`play()` 必须 `.catch()`；
+  微信里再挂一个 `WeixinJSBridgeReady` 兜底；页面切到后台要暂停。
+- **分享**：微信卡片要公众号 JS-SDK 签名，纯前端做不到——写好 `<title>` 与 description，另给「点右上角 ··· 发送给朋友」的引导层。
+- **下载**：微信内置浏览器不能下载文件（.ics 等），要检测 `MicroMessenger` 并改成复制文本或提示在浏览器打开。
+
+## 内容硬规则
+
+- 星期、农历、倒计时**用代码算**，绝不心算（农历写法见 `references/h5-mobile.md`）；时间一律带时区 `+08:00`。
+- 地图导航默认用「按名称检索」链接：不需要 key，也不会因为坐标写错把人导到别处。
+- 页面上不出现给开发者看的话（如 `把照片放到 assets/img`、`此处替换`）——那属于交付说明。
+- 没有素材就不要引用不存在的文件：用 CSS/SVG 画，或者数据为空时整块不渲染。
+
+## web_inspect 用法
+
+```
+web_inspect(path="index.html")                                  # 手机 390 / 小屏 360 / 桌面 1280 三个视口
+web_inspect(path="index.html", actions=[                         # 关键流程走查（每步都查在不在、看不看得见、有没有被挡住）
+  {"click":"text=轻触开启"}, {"wait":"#music"},
+  {"click":"#rsvpSubmit"}, {"expect_text":"请留下您的称呼"},        # 先验证空提交会被拦下
+  {"fill":"#fName","value":"张三"}, {"click":"text=欣然赴约"},
+  {"click":"#rsvpSubmit"}, {"expect_text":"期待与您相见"},
+  {"expect_js":"Object.keys(localStorage).length > 0"}])
+web_inspect(url="http://localhost:5173/")                        # Vite 等工程：先后台起 dev server 再查
+```
+
+必修项清零之前不说「完成」。建议项能改就改；是设计取舍的，在交付说明里讲清楚。
+工具查不了审美——截图路径要告诉用户，并按 `references/craft-checklist.md` 自己过一遍。
+没有 web_inspect（本机没装 Chrome/Edge）时：`node --check` 过一遍脚本、逐条对照清单自查，并在交付说明里**如实写明未经浏览器验证**。
+
+## 参考资料（按需 read_skill_file，不要一次全读）
+
+- `references/design-direction.md` — 十种风格方向，各带现成令牌、字体、装饰与禁忌
+- `references/craft-checklist.md` — 交付前的打磨清单与「AI 模板味」黑名单
+- `references/h5-mobile.md` — 手机与微信兼容、中文字体栈、日期与农历、性能预算
+- `references/motion.md` — 动效配方：入场编排、开门封面、印章、花瓣、整屏翻页、数字滚动
+- `references/recipes.md` — 页面类型配方：邀请函、活动报名、产品落地页、作品集、门店、互动小游戏、工具页

package/skills/web-craft/references/craft-checklist.md

@@ -0,0 +1,75 @@
+# 交付前打磨清单
+
+web_inspect 管「算得出来的事实」（报错、缺文件、溢出、被切、对比度、点不到）。
+这份清单管机器判不了的——它们决定页面是「能用」还是「让人想转发」。逐项过，不要默念「应该没问题」。
+
+## 首屏三秒
+- [ ] 不滚动就知道：这是什么、给谁的、什么时间地点/核心卖点
+- [ ] 只有一个视觉焦点（名字 / 标题 / 主视觉），其余元素明显让位
+- [ ] 有一个记忆点动作（封面开启、印章、描边、视差），且只有一个
+- [ ] 首屏没有空洞：内容垂直居中偏上，底部有「向下」引导
+
+## 版式
+- [ ] 所有文字左右留白一致（手机 20–28px），没有贴边的
+- [ ] 区块之间的留白一致且足够（手机 ≥72px），区块内元素间距用同一套 4/8 倍数
+- [ ] 对齐：同一屏里的元素要么居中、要么左对齐，不混用
+- [ ] 标题行不断在奇怪的位置（两三个字的尾巴单独一行 → 调字距或用 `text-wrap: balance`）
+- [ ] 长名字、长地址、四位数天数都试过，不溢出不换行错乱
+
+## 字体
+- [ ] 字号阶梯不超过 5 级；正文 15–17px，注释 ≥12px
+- [ ] 中文不用斜体（系统会伪斜体，很难看）；英文小标签才用大字距
+- [ ] 数字用等宽（`font-variant-numeric: tabular-nums`），倒计时跳动不抖
+- [ ] 标点：中文全角、成对引号用「」或“”，不混英文半角逗号
+
+## 色彩与质感
+- [ ] 全页颜色都来自令牌，没有散落的十六进制色值
+- [ ] 大面积底色有一点质感（极淡噪点/纸纹/渐变），不是死白或死灰
+- [ ] 阴影用带主色倾向的半透明色，不用 `rgba(0,0,0,.5)` 这种灰黑
+- [ ] 深浅对比：按钮、输入框、卡片边界在强光下的手机上看得清
+
+## 交互状态（每个可点的东西都要有）
+- [ ] 按下态（`:active` 缩放 .97 或变色）、键盘焦点态（`:focus-visible`）
+- [ ] 提交类：加载中（按钮禁用 + 文案变化）、成功（明确的结果页/卡片）、失败（原因 + 怎么办，已填内容不丢）
+- [ ] 空状态：没有数据时显示什么（或整块不出现），而不是空框
+- [ ] 重复进入：已提交过的表单再打开时，显示已提交状态并允许修改
+- [ ] 外链跳转（地图、电话）有明确文字说明会发生什么
+
+## 文案
+- [ ] 语气符合场合（请柬要典雅得体、活动页要有号召力、工具页要简洁准确）
+- [ ] 没有「欢迎来到」「尊敬的用户」「一站式解决方案」这类空话
+- [ ] 没有占位符、Lorem、「示例文字」、给开发者看的说明
+- [ ] 事实信息（日期/星期/农历/地址/电话）全部核对过，拿不准的列进交付说明的「待确认」
+
+## 动效
+- [ ] 入场有编排（同屏依次出现），不是所有东西同时淡入
+- [ ] 没有「一直在动」的干扰（循环动画只给音乐按钮、提示箭头这种小元素）
+- [ ] `prefers-reduced-motion` 下所有动画关闭、内容直接可见
+- [ ] 切到后台时停掉画布动画与音乐
+
+## 手机
+- [ ] 360px 宽也不挤、不溢出（web_inspect 默认会跑 360）
+- [ ] 按钮 ≥44px、输入框字号 ≥16px、贴底元素避让安全区
+- [ ] 横屏打开不崩（至少内容可读）
+- [ ] 在微信里：音乐需要一次点击才响、下载改为复制、分享有引导
+
+## 交付说明
+- [ ] 怎么打开 / 怎么部署（国内分享建议已备案域名的静态托管）
+- [ ] 怎么改内容（改哪个配置对象的哪几项）
+- [ ] 验证了什么（web_inspect 结论、走过哪些交互）、截图在哪
+- [ ] 待确认清单（流程时间、地址、电话等）
+
+---
+
+## 「AI 模板味」黑名单（出现即返工）
+
+1. 紫蓝/粉紫大渐变背景 + 白色圆角卡片
+2. 每个区块都是「居中大标题 + 一行灰色副标题 + 三张图标卡片」
+3. 用 emoji 当图标（🎉💍📍⏰）
+4. 满屏玻璃拟态、满屏发光描边
+5. Inter / Roboto / Arial 做中文页面的标题字体
+6. 所有元素同一个圆角、同一个阴影、同一个间距，没有层次
+7. 按钮文字「了解更多」「立即体验」出现三次以上
+8. 空洞口号：「开启美好未来」「匠心打造」「极致体验」
+9. 虚构的数据与评价（「10000+ 用户的选择」「★★★★★ 张女士」）
+10. 页脚一长串假链接（关于我们 / 隐私政策 / 联系我们，全部 href="#"）

package/skills/web-craft/references/design-direction.md

@@ -0,0 +1,122 @@
+# 十种风格方向（选一个，或在它上面改）
+
+每个方向都给了能直接粘进 `:root` 的令牌。**文字色在各自底色上的对比度都已算过**：
+正文色 ≥ 7:1、次要文字 ≥ 4.5:1、强调色做小字 ≥ 4.5:1（`--accent` 当底色时配 `--on-accent`）。
+改色之后用 web_inspect 复检——对比度不是凭感觉调的。
+
+选方向的判据只有一条：**这一页是给谁、在什么场合看的**。婚礼请柬选暗黑科技、发布会选童趣糖果，都是错位。
+
+---
+
+## 1. 新中式 · 朱砂宣纸
+适用：中式婚礼、寿宴、春节活动、国潮品牌、茶与文化活动。
+```css
+--paper:#F7F1E6; --paper-2:#EFE5D3; --card:#FBF7EF;
+--ink:#2B2420; --ink-2:#554840; --ink-3:#6F6053;
+--accent:#B3302A; --accent-deep:#8C1F18; --on-accent:#FBEFD9;
+--gold:#9A7438; --gold-text:#7D5E2B; --gold-soft:#D8BF8C;
+```
+字体：标题楷体/宋体（`--font-display` 见 h5-mobile.md），数字用 Didot/Bodoni 类高对比衬线。
+装饰：回纹、祥云、梅枝、印章、双线边框、角花。记忆点：开门封面、印章落下。
+禁忌：大面积纯红（只做封面/点缀）、金色小字（对比度不够，用 `--gold-text`）、繁复的描金渐变。
+
+## 2. 法式香槟
+适用：西式婚礼、订婚、珠宝、下午茶、花艺。
+```css
+--paper:#FBF7F2; --paper-2:#F3EBE1; --card:#FFFDFA;
+--ink:#2E2A28; --ink-2:#57504B; --ink-3:#6E6560;
+--accent:#9A5A60; --accent-deep:#7E4349; --on-accent:#FFF8F2;
+--gold:#8F7348; --gold-text:#77603B; --gold-soft:#D9C6A3;
+```
+字体：英文标题 Didot/Bodoni 斜体，中文宋体；正文细一号。
+装饰：细线花环、拱门框、蜡封、手写体签名（SVG 描边动画）。记忆点：蜡封被「揭开」。
+
+## 3. 森系 · 鼠尾草
+适用：户外草坪婚礼、民宿、有机/自然品牌、花艺工作室。
+```css
+--paper:#F5F4EE; --paper-2:#E9EBE0; --card:#FBFBF7;
+--ink:#232923; --ink-2:#4A5248; --ink-3:#606A5E;
+--accent:#5E7461; --accent-deep:#3F5243; --on-accent:#F6F5EE;
+--gold:#8A7A4E; --gold-text:#6E6139; --gold-soft:#CFC6A2;
+```
+装饰：叶片剪影、手绘线稿、不规则圆角卡片、纸张撕边。记忆点：藤蔓随滚动生长（SVG 描边）。
+
+## 4. 水墨极简
+适用：艺术展、高端品牌、茶道、书法与文化活动、极简个人主页。
+```css
+--paper:#F6F4EF; --paper-2:#ECE9E2; --card:#FBFAF7;
+--ink:#1F1E1C; --ink-2:#46443F; --ink-3:#5F5C56;
+--accent:#A3312B; --accent-deep:#7D211C; --on-accent:#FAF6EE;   /* 朱印：全页只出现两三次 */
+```
+版式：大留白、竖排标题（`writing-mode: vertical-rl`）、不对称构图、极细分隔线。
+记忆点：墨迹晕开（径向渐变 + 缩放入场）。禁忌：任何圆角大卡片、阴影、渐变按钮。
+
+## 5. 暗夜鎏金
+适用：晚宴、颁奖礼、年会、会员之夜、奢华品牌。
+```css
+--paper:#14110D; --paper-2:#1E1A15; --card:#1E1A15;
+--ink:#F3EAD7; --ink-2:#C9BBA0; --ink-3:#A89A80;
+--accent:#D4B06A; --accent-deep:#B8924A; --on-accent:#1A150E;
+```
+装饰：金色细线网格、光斑（径向渐变 + 模糊）、星点、Art Deco 扇形纹。
+记忆点：标题金属光泽扫过（`background-clip:text` + 移动渐变，要有纯色回退）。
+禁忌：金色大面积平涂（像劣质奖状）、纯黑 #000 底（发闷，用带暖意的深棕黑）。
+
+## 6. 清透科技
+适用：产品发布会、SaaS、开发者工具、AI 产品。
+```css
+--paper:#0B1020; --paper-2:#121A33; --card:#121A33;
+--ink:#E8ECF7; --ink-2:#AEB7CE; --ink-3:#8A93AD;
+--accent:#6B97FF; --accent-2:#22D3EE; --on-accent:#0B1020;
+```
+装饰：细网格线、发光描边卡片、代码/终端窗口样式、数字滚动。
+禁忌：**紫蓝大渐变 + 白色圆角卡片 + 三列特性图标**（最典型的 AI 模板味）；满屏玻璃拟态。
+
+## 7. 暖阳生活
+适用：餐厅门店、亲子活动、社区活动、生日会、烘焙咖啡。
+```css
+--paper:#FFF8EE; --paper-2:#FCEBD5; --card:#FFFFFF;
+--ink:#3A2A1E; --ink-2:#6B5646; --ink-3:#7E6A5A;
+--accent:#C8431F; --accent-2:#F3B33D; --green:#2F7A5B; --on-accent:#FFF8EE;
+```
+装饰：手绘感插画（SVG）、贴纸式标签、波浪分隔、大圆角。记忆点：营业状态实时显示（按当前时间算「营业中/已打烊」）。
+
+## 8. 杂志编辑
+适用：个人主页、作品集、品牌故事、长文专题。
+```css
+--paper:#F4F1EA; --paper-2:#EAE5DA; --card:#FBFAF6;
+--ink:#16140F; --ink-2:#4A463E; --ink-3:#6A655B;
+--accent:#C23A2A; --on-accent:#FBFAF6;
+```
+版式：12 栏网格、超大衬线标题（clamp 到 9–12vw）、编号（01/02/03）、图文错位、细线分栏。
+记忆点：标题逐字/逐行揭开（`clip-path` 或 overflow 遮罩 + translateY）。
+
+## 9. 童趣糖果
+适用：儿童生日、满月百日、亲子活动、游乐主题。
+```css
+--paper:#FFF6F2; --paper-2:#FFE9E1; --card:#FFFFFF;
+--ink:#3B2F48; --ink-2:#5E5270; --ink-3:#716684;
+--accent:#B8364B; --accent-2:#6EC6CA; --accent-3:#FFD166; --on-accent:#FFFFFF;
+```
+装饰：气球/彩旗/波点（SVG）、圆胖字形、弹性动效（`cubic-bezier(.34,1.56,.64,1)`）。
+禁忌：荧光色大面积平涂、到处都在动（动效集中在首屏与按钮反馈）。
+
+## 10. 复古胶片
+适用：纪念日、旅行回忆、周年、老照片故事。
+```css
+--paper:#EFE6D8; --paper-2:#E4D8C4; --card:#F7F1E7;
+--ink:#2F2A24; --ink-2:#574F45; --ink-3:#6B6256;
+--accent:#A64B28; --teal:#3F6E6A; --on-accent:#F7F1E7;
+```
+装饰：胶片颗粒（SVG feTurbulence 噪点）、拍立得相框、日期戳（等宽数字 + 橙色）、轻微倾斜的照片。
+记忆点：照片像冲洗一样由白变清（`filter: brightness(2) → 1` + 渐显）。
+
+---
+
+## 自定义方向的做法
+
+1. 先定「场合 + 情绪」两个词（如「户外婚礼 + 轻松」）；
+2. 主色从场合里找（婚礼的喜红、海边的青、秋天的焦糖），不从色轮上随手挑；
+3. 中性色全部往主色方向偏一点（暖主色配暖灰）；
+4. 点缀色只用在一两个地方（关键按钮、一个装饰），用多了就不是点缀；
+5. 写完令牌先做一屏样稿跑 web_inspect，对比度过了再铺开。