Files
market/skills/guizang-ppt/references/themes-swiss.md
Yige b15fce19bf feat: add guizang-ppt market skill (vendored from op7418, AGPL-3.0) (#20)
## 概述 / Summary

新增市场技能 **`guizang-ppt`**(归藏网页 PPT),vendored 自上游开源项目
[op7418/guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)。

Add a new **market skill** `guizang-ppt` — generates single-file HTML
horizontal-swipe slide decks (web PPT) in two visual systems (editorial
"magazine × e-ink" / "Swiss International"). Vendored from the upstream
open-source project.

## 变更内容 / Changes

- `skills/guizang-ppt/`:SKILL.md(DesireCore frontmatter 覆盖层 +
上游正文)、`references/`(10)、`assets/`(2 模板 + motion.min.js + 9 张
webp)、`scripts/validate-swiss-deck.mjs`、`LICENSE`(AGPL-3.0)、`NOTICE.md`(署名与合规)
- `skills/guizang-ppt/_desirecore/`:DesireCore 维护态(不随上游覆盖)
- `frontmatter.yaml`:市场 frontmatter 覆盖层(i18n: zh-CN 源 + en-US 显示串,body
暂回退中文,留给 CI 翻译)
  - `upstream.json`:上游溯源(commit `014c572`、AGPL-3.0、作者 歸藏/op7418)
- `scripts/vendor/guizang-ppt.mjs`:可复用的 vendor 更新脚本(`--src <本地路径>` 或
`--ref <tag>`)
- `manifest.json`:`version` → `1.2.3`,`stats.totalSkills` → 25

## 定位 / Positioning

- **仅市场可选安装**:未加入 `builtin-skills.json`,不随客户端开机自动安装;用户在市场按需安装。
- 分类 `creative`;与已有 `pptx`(生成 .pptx 文件)区分:本技能生成 **HTML deck**。

## 许可与署名 / License & Attribution

上游为 **AGPL-3.0**。本技能保留原 `LICENSE` 与作者署名(`NOTICE.md` + `metadata.author`
+ `market.maintainer`),作为聚合内容分发。

## 校验 / Validation

- `python3 scripts/i18n/validate-i18n.py skills/guizang-ppt` → `OK: no
i18n issues found.`

## 手动更新流程 / Manual update

上游发版时:`node scripts/vendor/guizang-ppt.mjs --ref <tag>` → 核对 diff → 必要时
bump `_desirecore/frontmatter.yaml#version` 与 `manifest.json` → 提交。

---
🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-06-04 11:04:05 +08:00

5.5 KiB
Raw Blame History

瑞士国际主义风格 · 主题色预设Swiss Themes

4 套基于瑞士国际主义风格Swiss Style的高反差配色。每套都遵循"高级灰白底 + 单一高饱和高亮色"的极简原则——这是瑞士风的灵魂,不允许混搭多个高亮色。


使用方法

  1. 问用户选哪套(或基于内容推荐一套)
  2. 打开 assets/template-swiss.html<style>
  3. 找到开头的 :root{
  4. 整体替换标有"主题色"注释的所有变量:--paper / --paper-rgb / --ink / --ink-rgb / --grey-1 / --grey-2 / --grey-3 / --accent / --accent-rgb / --accent-on
  5. 其他 CSS 都走 var(--...),无需任何其他改动

🔵 克莱因蓝 (IKB · International Klein Blue)

适合通用场合、商业发布、AI/科技产品、设计领域分享。最经典的瑞士风配色,绝不出错。 调性:纯白底 + IKB 克莱因蓝,极致冷静、理性、有学术感,像 Helvetica Forever 或 Massimo Vignelli 的作品集。

--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#002FA7;
--accent-rgb:0,47,167;
--accent-on:#ffffff;

使用要点

  • IKB 是高饱和深蓝,在大色块(如 .accent-block)上极有视觉冲击
  • KPI 数字加 .accent 类用蓝色,但不要满屏蓝——IKB 一旦泛滥就掉档
  • 推荐配合 dark 主题页交替使用,黑底高亮 IKB 同样高级

🟡 柠檬黄 (Lemon · Cadmium Yellow)

适合年轻、运动、零售、消费品、活力主题、Y2K 复古设计。 调性:浅米白底 + 柠檬黄,鲜亮、有活力、警示感强,像 IKEA 或 Beck Design 的视觉语言。

--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#FFD500;
--accent-rgb:255,213,0;
--accent-on:#0a0a0a;

使用要点

  • 柠檬黄属于浅色高饱和,.accent-on 必须用纯黑(不是白)才能保证可读性
  • 黄色色块上不要放白字——会糊掉
  • 柠檬黄做单字符高亮(.mark / .underline-accent)效果最强

🟢 柠檬绿 (Lemon Green · Highlighter Green)

适合生态、可持续、健康、新兴科技、Z 世代品牌、AI 创业项目。 调性:浅米白底 + 荧光柠檬绿,有未来感、年轻、当代,像 Acne Studios 或 Off-White 的视觉。

--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#C5E803;
--accent-rgb:197,232,3;
--accent-on:#0a0a0a;

使用要点

  • 荧光绿和黄色一样属于浅色,.accent-on 必须用纯黑
  • 屏幕显色比印刷漂亮,适合演讲投影场景
  • 推荐用于"新兴技术"、"未来"主题

🟠 安全橙 (Safety Orange)

适合:工业、警示、运动、施工、汽车工业、技术发布会的"警告/重点"页。 调性:浅米白底 + 安全橙,工业感、紧迫感、视觉锚点感,像 Saul Bass 海报或 Highway Gothic 标识系统。

--paper:#fafaf8;
--paper-rgb:250,250,248;
--ink:#0a0a0a;
--ink-rgb:10,10,10;
--grey-1:#f0f0ee;
--grey-2:#d4d4d2;
--grey-3:#737373;
--accent:#FF6B35;
--accent-rgb:255,107,53;
--accent-on:#ffffff;

使用要点

  • 橙色介于浅色和深色之间,白字勉强能读但建议加粗font-weight:600 以上)
  • 工业感强,适合涉及"警告"、"决策"、"转折点"的内容
  • 不建议整页 .accent 模式,橙色满屏会过于刺眼,做局部高亮即可

推荐选择参考

如果是... 推荐主题
不知道选啥 / 第一次用 / AI/科技/设计 🔵 克莱因蓝
年轻、活力、消费、零售 🟡 柠檬黄
生态、未来、Z 世代、新兴 🟢 柠檬绿
工业、警示、汽车、紧迫感 🟠 安全橙

切换原则

  • 一份 deck 只用一套主题,不要中途换 accent 色
  • 灰阶变量(--grey-1/2/3)在 4 套主题里完全相同,无需调整
  • WebGL 网格背景会自动读取 --accent 变量,翻页时鼠标附近会偷渡一抹高亮色
  • 选定主题后,可以在 chrome 文案里用一个相关词强化语义(如 IKB 配 International / Helvetica ,柠檬黄配 Active / Living

不要做的事

  • 不允许混搭(例如 IKB 蓝 + 柠檬黄同时出现作高亮)——彻底违反瑞士风"单一锚点色"原则
  • 不允许用户自定义任意 hex 值——委婉拒绝,展示 4 套预设让选
  • 不要改灰阶变量——--paper / --grey-1/2/3 / --ink 跨主题统一,只换 accent
  • 不要用渐变——瑞士风拒绝任何渐变,所有色块必须纯色
  • 不要给 accent 加阴影 / 圆角 / 透明度——直角、纯色、不透明,这是瑞士风的硬规则

关于灰阶(跨主题统一)

变量 用途
--paper #fafaf8 主底色(极浅暖白)
--grey-1 #f0f0ee 浅灰底(用于 .grey-block / 区块底)
--grey-2 #d4d4d2 中灰分割线、border
--grey-3 #737373 暗灰(辅助文字 / meta
--ink #0a0a0a 文字主色(近黑)

这套灰阶是经过校色的"高级灰",在任何 accent 色下都不抢戏。不要改成纯白(#fff)或纯黑(#000)——会损失瑞士风的"克制"质感。


选定主题后,告诉用户:"用 🔵 克莱因蓝 / 🟡 柠檬黄 ..." 并在 deck 项目记录里备注,方便后续迭代时保持一致。