OrcGo-Visual-Style 用于生成新瑞士编辑风的图像、封面与视觉资产

orcgo-visual-style

一个 Skill，用于生成 @OrcGo 新瑞士编辑风的图像、封面与视觉资产 —— 克制的新瑞士排印杂志美学：纸面、油墨、单一墨蓝强调色、等宽注释。

这是什么？

orcgo-visual-style 是一个 Skill —— 一个自包含的指令包，教会 AI 代理如何用一种明确、有态度的风格生成视觉资产。这套风格提炼自个人网站 zhaocong.cc（@OrcGo）：克制的新瑞士排印杂志美学，把每张图当作纸上的油墨来对待，而不是屏幕上的滤镜。

这不是一个网站模板。它是一套视觉语言，可以应用到任何需要"看起来像一个安静自信的印刷页面"的东西：文章封面、社交卡片、海报、OpenGraph 分享图、AI 绘图提示词，甚至完整的情绪板。

一句话说清这套风格

克制的新瑞士编辑杂志 —— 铅印纸纹颗粒、发丝线、超轻衬线大标题、等宽大写注释，加上唯一一个饱和强调色（墨蓝），衬在暖灰底色上。

能产出什么？

• 文章封面（默认 16:10，也支持 3:2 / 21:9 / 1:1 / 3:4 / OpenGraph）
• 社交卡片：微信公众号封面（21:9 + 1:1 成对）、小红书 3:4、X/Twitter
• 海报与金句卡：编辑印刷风
• AI 绘图提示词（Midjourney / DALL·E / Stable Diffusion / Flux）—— 可直接复制粘贴
• 背景、纹理、情绪资产：同一套语言
• 编辑风改造：把你提供的照片/截图"印到纸上"（照片作纸面处理）

核心特性

特性	实际意义
自包含	不需要外部设计文件，整套系统随 skill 一起发布
渐进披露	SKILL.md 只放工作流；深层规则在 references/ 里按需加载
双语标题（强制）	封面与海报必须同时给出有出版感的中文主标与英文对照标 —— 一条主衬线大标题配一条平行/从属的英文副题，禁止单语标题
种子 HTML 模板	assets/template-cover.html 可直接复制使用，自带纸纹层、明暗双令牌、6 种尺寸类
校验脚本	scripts/validate-orcgo-image.mjs 在交付前自动检查 PNG 尺寸、模板结构、反风格 token
双主题	明色（纸白）与暗色（羊皮纸）令牌内置 —— 选一个地面，自动配好一对
提示词配方	references/prompt-recipes.md 内含可直接复制的 AI 绘图风格句
QA 检查清单	references/checklist.md 是交付前的风格自检表
标志性母题	10 个可复用视觉模式：点阵纸纹、文字路径地球、城市序列脚注、§ 分区编号、等宽元信息网格 等

三字体系统（字体即视觉）

这套风格是字体驱动的。三个字体承担全部表达：

角色	字体	说话方式
衬线 Serif	Newsreader（或 EB Garamond）	声音 —— 大标题、长文、编辑正文
无衬线 Sans	Inter	界面 —— 安静的 UI 标签、小字正文
等宽 Mono	JetBrains Mono	注释 —— 眉题、日期、编号、坐标

硬性规则：字越大，字重越轻。88px 的标题用 300 字重是对的；用 700 就错了。双语标题按主次梯队排布：中文主标 60–76px、英文对照标 32–48px，错峰而不居中，保持克制的层级。

两条渲染路径

skill 支持两种出图方式：

1. HTML → 截图（默认）。复制 assets/template-cover.html，编辑 POSTERS_HERE 区域，用 Playwright/Puppeteer 按规格尺寸渲染。适合编辑卡片、封面等以文字为主的场景。
2. AI 绘图提示词。当你需要绘画感效果（比如标志性的"文字路径地球"）或要给 Midjourney/DALL·E/Flux 下指令时，用 references/prompt-recipes.md 里现成的风格句。

安装

orcgo-visual-style 是一个标准的 agent skill —— 一个 SKILL.md 入口，外加 references/、assets/、scripts/ 目录。把它克隆或复制到你的代理运行时的任一 skill 发现目录，然后重启会话即可生效。请把 <你的-skills-目录> 替换为你运行时的约定路径：

# 个人级（全项目可用，推荐）
git clone https://github.com/SummerDogg/orcgo-visual-style.git <你的-skills-目录>/orcgo-visual-style

# 或项目级
git clone https://github.com/SummerDogg/orcgo-visual-style.git <项目>/.agents/skills/orcgo-visual-style

使用

装好后用自然语言直接说：

帮我用 OrcGo 风格画一张文章封面，标题是 "A life-long learner"

Generate a social card in OrcGo style for WeChat, 21:9 + 1:1 pair,
title "Ink on paper"

给我一段 Midjourney 提示词，OrcGo 风格，主题是 AI 学习者

/orcgo-visual-style 把这张截图改造成 OrcGo 编辑风封面

skill 会：

1. 读取 references/style-system.md 锁定视觉语言
2. 选择地面（明色纸白 / 暗色羊皮纸）+ 单一强调色
3. 用标志性母题构图（眉题 → 双语大标题 → 强调线 → 脚注）
4. 通过 HTML 模板渲染，或写一段可直接用的 AI 提示词
5. （可选）跑 scripts/validate-orcgo-image.mjs 自动核查
6. 交付前按 references/checklist.md 自检

效果示例

本 README 里的两张配图就是用这个 skill 生成的：

主视觉 —— 风格定义卡。展示核心系统：错峰衬线大标题、三栏等宽注释（说明字体分工）、纸纹底、眉题里的 § 编号。

双主题 —— 同一构图，两种地面。明色 "Ink on paper" vs 暗色 "Night vellum"，演示强调色系如何切换（墨蓝 → 亮靛蓝，#8a6d1e → #c8a45e）而不破坏识别度。

仓库结构

orcgo-visual-style/
├── SKILL.md                          # 入口：能力边界、工作流、非协商项
├── references/
│   ├── style-system.md               # 视觉系统（先读这份）
│   ├── prompt-recipes.md             # AI 绘图提示词配方 + 构图公式
│   ├── format-specs.md               # 所有支持比例的尺寸规格
│   ├── font-spec.md                  # 三字体系统、字号、字距、规则
│   └── checklist.md                  # 交付前 QA 清单
├── assets/
│   ├── template-cover.html           # 种子 HTML 模板（每次任务复制一份）
│   └── readme/                       # 本 README 用到的配图
│       ├── hero.png
│       └── dual-theme.png
└── scripts/
    └── validate-orcgo-image.mjs      # 渲染结果自动校验器

设计原则（精简版）

• 纸优先。读起来不像印刷品就是错的。
• 一个焦点。整张画围绕唯一一个想法转。
• 双语默认。中文标题与英文对照标题成对出现，绝不单独留一个。
• 做减法。犹豫就删。
• 发丝线 > 色块。用 1px 线分区，不用大色块。
• 哑光。无渐变、无发光、无塑料、无厚阴影。
• 字体即装饰。图标、贴纸、emoji 一律禁止。
• 克制即奢华。留白才是最贵的部分。

非协商项

• 不要霓虹渐变、玻璃拟态、塑料 3D
• 不要粗黑大标题（只能用超轻衬线）
• 封面与海报不要单语标题 —— 必须中英文对照成对
• 不要堆 icon / emoji / 贴纸 / 装饰性 SVG 团块
• 暗色模式不要用纯黑（要用深蓝灰）
• 不要把画面填满 —— 密度是天敌

来源与署名

本 Skill 编码了 zhaocong.cc 的视觉识别系统，这是 @OrcGo（赵聪 / Zhao Cong）的个人网站。设计系统以可复用风格包的形式在此发布。如果你用它产出了公开引用 OrcGo 身份的作品（比如封面写"in the style of @OrcGo"），欢迎署名但非强制。

许可证

MIT —— 随便用、随便改、随便发布。