Design System · v6.1.0 · 2026.08 本地 ZIP · 自托管

Folio

Folio 帮 agent 把原始笔记转成稳定的 PDF、PPTX、SVG artifact 和 Web 设计指导。这个页面用来选择输出路径、查看真实样本，并按规则扩展系统。

Classes8 种文档 Artifacts4 个可重建 demo OutputsPDF · PPTX · SVG Guidance阅读网页 · 工作台 UI Languages中文 · English

查看输出安装读 Web 阅读页

00 · Master Index

输出系统

先选择 Folio 要产出什么。目录把用户请求映射到 PDF、PPTX、SVG 或 Web 阅读页；样本矩阵展示真实输出语言。

文档类型

系统目录

每一种类型都把自然语言请求映射到稳定的输出路径和可预测的格式。

序号	类型	功能	格式
01	One-Pager	上线简介、提案、执行摘要	PDF
02	Long Doc	白皮书、复盘、技术报告	PDF
03	Letter	正式说明、声明、治理备忘录	PDF
04	Portfolio	案例集、作品集、编辑型项目叙述	PDF
05	Resume	职业履历与可量化经历记录	PDF
06	Slides	演讲稿、Keynote、内部汇报	PPTX
07	Equity Report	投资备忘录、财报快报、个股研报	PDF
08	Changelog	Release Notes 与版本叙事	PDF
09	图形档案	架构图与 UML 图形样本	SVG · PNG · PDF
10	Web 阅读页	由引擎 Web profile 生成的静态阅读页	HTML

样本矩阵

精选输出

精选样本让你先检查真实输出，再进入更细的参考规则。

One-Pager · 青岚旅图

Long Doc · 运维复盘

Slides · 交付方法

Equity Report · Tesla

Artifact · Agent Runtime

Artifact · Agent Session Model

完整样本集见 README 或 assets/demos/。

01 · Manifesto

文档伦理

Folio 不把文档视为中性的输出，而把它看作思想获得公共形体、可读性与留存性的方式。暖米纸底让页面慢下来，serif 让判断有声音，朱砂色标出真正重要之处，留白则保护读者的注意力。它追求的不是装饰性的精致，而是赋予内容秩序、重音与值得保存的重量。

1
页面应当像被持有，而不是被白光打亮：底色固定为 parchment #F6F0EA，不用纯白
2
强调色承担判断，不承担装饰：只用印章朱红 #B83D2E，不引入第二种彩色
3
所有中性灰必须保持暖意，让文档像档案而不是界面，禁止冷蓝灰
4
默认一页一套 serif，让标题和正文共享同一种编辑口吻
5
权威来自层级，不来自蛮力：Serif 正文 400，标题 500，不用合成 bold
6
阅读需要节奏：保留标题、密排正文、长阅读正文三档行距
7
字距要尊重语言差异：中文印刷正文通常保留 0.3pt，英文正文保持 0
8
Tag 必须保持物质上的干净：背景只用实色 hex，禁用 rgba，避开 WeasyPrint 双层矩形伪影
9
层次只能低声出现，不能表演：阴影只用 ring 或 whisper shadow，不用硬 drop shadow
10
模板与演示页都不用 italic；强调应来自结构、对比和落位，而不是姿态化的斜体

02 · Usage

安装与调用

直接告诉 Claude 你要什么，比如「帮我排版一份白皮书」「做一份简历」「帮我写一份个股研报」「帮我整理更新日志」，skill 会自动触发，无需斜杠命令。

# Claude Code
# 先把仓库发布到你自己的 namespace。

# Codex
bash scripts/package-skill.sh   # 构建 dist/folio.zip 后本地安装

Claude Desktop：先用 scripts/package-skill.sh 构建 dist/folio.zip，再上传到 Customize > Skills > "+" > Create skill。

03 · Color

暖调克制

唯一强调色、纯暖调中性灰、零冷色；印章朱红全文档不超过 5% 面积，超过就从克制变成堆砌。

画布 · Canvas

Parchment

页面底色，也是整套设计的温度来源

#F6F0EA

Ivory

卡片 · 浮起容器

#FBF7F3

Warm Sand

按钮默认背景 · 交互面

#E6DACD

Deep Dark

深色主题页面底，不取纯黑，保留一点炭褐底色

#191514

主调 · Brand

Cinnabar Coral

主色 · CTA · quote 竖线 · 章节标题

#B83D2E

Coral Light

深色底上的链接 · 亮变体

#D06A5E

Dark Surface

深色主题容器 · 暖炭灰

#2E2521

Error

错误，深暖红，不刺眼

#A63A31

中性 · Warm Neutrals

Near Black

#191514

Dark Warm

#3A312D

Olive

#5A4A43

Stone

#756A63

Tag Tints · rgba → 实色对照

这里列的是印章朱红 #B83D2E 叠加在 parchment 上的等效实色；Tag 背景不使用 rgba()，避免 WeasyPrint 的双层矩形问题。

Tag sample

0.08

#F7E6E1

Tag sample

0.14

#F1D2CC

DefaultTag sample

0.18

#F1D2CC

Tag sample

0.22

#EBC7C0

Tag sample

0.30

#E2B3A8

切换色系

内置三套色系，每套一个文件，放在 references/profiles/theme/。FOLIO_THEME 指定其中一套，作用于文档、图表、幻灯片和这些页面。每套色系都过同一套标准：文字在两个底面上都达到 4.5:1，细线保持可见，同族编号跟随明度。

典籍

folio-classic-v1 默认

暖羊皮纸画布，朱砂强调。系统自己的声音。

23 palette entries · 42 roles

林间

folio-forest-v1

暖骨白画布，深林绿强调。适合编辑与长文。

18 palette entries · 42 roles

石板

folio-slate-v1

冷中性画布，深天青强调。适合机构研究。

18 palette entries · 42 roles

FOLIO_THEME=folio-slate-v1 python3 scripts/build.py 用指定色系渲染；python3 scripts/check_theme_schemes.py 校验每套色系是否达标。不设置时使用标记 default 的那一套。

04 · Typography

字体系统

Serif 承担层级，sans 承担功能；serif 正文 400，标题 500。

Serif · 标题

LXGW WenKai / Charter

承担标题、引语与数字强调，中文取仓耳今楷，英文取 Charter。

</>

Mono · 代码

JetBrains Mono

用于代码块、版本号、hex 值与等宽数字，字号较正文低一档。

层级（印刷品 pt · 屏幕 px ≈ pt × 1.33）

Display

高质量文档读起来
清晰、稳定、有余韵

36–48 pt
weight 500
line 1.10

Section H1

色彩系统 · Color

18–22 pt
weight 500
line 1.20

Subsection H2

画布 · Canvas

14–16 pt
weight 500
line 1.25

Item H3

Tag Tints · rgba 对照

12–13 pt
weight 500
line 1.30

Body Lead

面向印刷文档的约束系统，目标是稳定、清晰、易读。

11 pt
weight 400
line 1.55

Body

印章朱红全文档不超过 5% 面积，超过就从克制变成堆砌；所有灰色都有暖黄底色，R ≈ G > B 是基本规律。

9.5–10 pt
weight 400
line 1.55

Body Dense

密排正文用于简历、一页纸、名片、索引卡，中文 pt 字号下 1.4–1.45 的行距最舒服，英文网页的 1.6 放进来会显得松散。

9–9.2 pt
weight 400
line 1.40

Caption

图注、脚注、说明文字，颜色用 olive 或 stone 降一级。

8.5–9 pt
weight 400
line 1.45

Label

Design System · v6.1.0

7.5–8 pt
weight 600
line 1.35

05 · Spacing & Shape

节奏与形

基础单位 4pt，密度越高 margin 越小，场合越正式 margin 越大。

Scale	Value	Use
xs	2–3 pt	同行内元素
sm	4–5 pt	tag padding · 紧凑布局
md	8–10 pt	组件内部
lg	16–20 pt	组件之间 · 卡片 padding
xl	24–32 pt	section 标题 margin
2xl	40–60 pt	大 section 之间
3xl	80–120 pt	长文档章节之间

圆角尺度 · Radii

4 pt

极紧

6 pt

代码块

8 pt

默认卡片

12 pt

容器

16 pt

特色卡片

24 pt

大容器

32 pt

Hero

深度 · 阴影三法

Folio 不用传统硬阴影，深度交给 ring shadow、whisper shadow 与明暗交替。

Ring Shadow

0 0 0 1pt var(--color-border-default)

按钮 · focus ring

Whisper Shadow

0 4pt 24pt rgba(0,0,0,0.05)

极轻浮起 · 特色卡

Light ⇌ Dark

parchment ⇌ deep-dark

section 级别 · 对比最明显

06 · Components

参考模块

用于 PDF 和 artifact 组合的文档原子模块。这里是参考材料，不是 Web 组件展台。

Buttons

ring state · active 下压 1px · 8pt 圆角

Primary CTA Secondary Ghost

Tags · 三档

实色 hex · 从弱到强选

极淡 0.08 标准 0.18 笔刷渐变

Quote

左 2pt 品牌实线 + olive 色

一千个 no 换一个 yes，宁可清淡，不可浓艳。

Metric

serif 数字 + sans 标签 · tabular-nums

8文档类型

1强调色

10条规则

Section Title

serif 500 · 15pt · 纯字号层级，可选品牌色左侧竖线

核心项目 · Selected Works

Dash List

短横线代替圆点 · 更书卷气

暖米纸底，不用纯白
印章朱红点缀，不引第二色
Serif 承担权威

Code Block

ivory 底 + 0.5pt border + 6pt 圆角 + mono 字体

// 暖米纸 · 一种克制的温度
canvas   = parchment; accent = cinnabar_coral
palette  = warm_neutrals − cool_grays
document = serif × hierarchy + generous_space
beauty   = constraints × intention ÷ noise

Featured Card

安静 artifact surface + 16pt 圆角

Tesla 公司介绍 · One-Pager

单页 A4 · 中文版 · 4 张指标卡 + 3 段正文 + 时间线

中文 A4 × 1 Cinnabar Coral

07 · Diagrams

内联图表

二十三种编译器驱动图表覆盖架构、流程、记法与数据场景；首页保留 4 张手绘内联缩略图与 5 张渲染实例作为视觉对照。箭头、节点、图例、网格和标签统一为 Folio 技术插图笔触，生成 artifact 与首页缩略图保持一致。

架构图 · Architecture

系统组件与连接关系，一个焦点节点

流程图 · Flowchart

决策分支，Yes / No 路径，焦点为成功路径

柱状图 · Bar Chart

季度营收对比，可选颜色渐变或单色

环形图 · Donut Chart

营收结构拆解，支持 3–6 个分段

Agent Runtime

请求驱动运行时案例：覆盖网关入口、任务规划、模型执行、工具调用、检索内存和可观测性。

Workflow Engine

工作流编排案例：覆盖入口接入、流程编排、Worker 执行、状态持久化和事件式延续。

Data Platform

策略化布局案例：用一套可复用 grammar 渲染管线主带、仓储服务和支撑读路径。

Agent Session Model

UML 领域模型案例：覆盖接口、枚举生命周期、组合、聚合，以及检索记忆关联。

Drawing Review Flow

Drawing DSL 案例：覆盖类型化决策、分支标签、正交路由和可访问 SVG 元数据。

08 · Web

Web 阅读页

一个系列索引加上每篇文章的模块页，构建为自包含静态 HTML。屏幕字号、间距、行长与图版几何都来自 Web profile；没有组件库、路由或应用外壳。

两种页面

案例与夹具

案例是内容：注明所读的作品，不描述排版它的引擎。夹具是引擎的一致性页面：带交付状态与包路径，用来测试规则。

部分	承载什么	归属	规则集
系列索引	系列标题、导语、每个模块一张卡片	`build_web.py`	`W-DLV`、`W-STR`
模块页	页头、目录、章节、图版、来源	`build_web.py`	`W-CNT`、`W-FIG`
实测页面	计算后的字号、列宽、图版、图注	`web_verify.py`	`V-*`

构建

一条构建，一条检查

folio.py web --series <dir> 写出系列；check_web.py --level 3 检查结构、密度、颜色与图版几何。浏览器实测在每夜任务里跑。

层	来源	规则	限制
字号与行长	`profiles/web/folio-v1.yaml`	`W-DEN`、`V-TYPE`	`base.css` 不允许字面量
颜色	`profiles/theme/*.yaml`	`W-COL`、`V-COL-01`	模板里不允许 hex
图表	Drawing DSL	`W-FIG`、`V-FIG`	页面不手写 SVG

09 · 生图提示词

生图提示词

Folio 也可以反向作为图片模型的视觉 brief。下面这 3 张图沿用了同一套暖纸底色、朱红克制和 serif 注释逻辑，但主题切到旅行图册、路线海报和酒店 field guide。

高山夜行列车旅行图册

卧铺列车路线、站点批注、时刻卡片与暖调编辑式注释。

海岸周末路线海报

潮汐时间窗、咖啡停靠点、步行段与路线图例整合在一张横版海报里。

沙漠设计酒店旅行手账

到达地图、打包提示、物件特写与酒店 field guide 式版面组合。

10 · Decision Lookup

决策速查

遇到“该用什么”时先看这张表，不在表里就回到基础原则。

要做什么	怎么做
大标题	serif `500`，字号按层级，line-height `1.10–1.30`
正文阅读	serif `400`，`9.5–10 pt`，line-height `1.55`
强调一个数字	`color: var(--color-accent-brand)`，不要粗体
分隔两段内容	`2.5pt` 品牌色左侧竖线，或 `0.5pt` 暖灰虚线
引用某人的话	左 `2pt` 品牌色实线 + olive 色
展示代码	ivory 底 + `0.5pt` border + `6pt` 圆角 + mono 字体
区分主次按钮	Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal
标注某张特殊卡片	`border: 0.5pt solid var(--color-accent-brand)` 或 `border-left: 3pt`
章节开始	serif `500` · `15pt` · 纯字号层级，必要时可加品牌色左侧竖线
文档封面	单页 Display 字号 + 右对齐作者/日期 + 大量留白
数据卡	ivory 底 + `8pt` 圆角 + serif 大数字（印章朱红） + sans 小标签

11 · Anti-Patterns

反面示例

破例可以，但理由要足够清楚。

Don't

页面背景用 #FFFFFF 纯白或 #f3f4f6 冷灰，会让版面变硬，也削弱 Folio 的暖米纸气质。

Do

始终使用 #F6F0EA parchment，打印时把 @page background 也设为同色，避免白边。

Don't

Tag 用 rgba(184,61,46,0.18)，WeasyPrint 会让 padding 区与字形区透明度叠加，形成双层矩形。

Do

查 tint 对照表，改用等效实色 #F1D2CC，颜色稳定，PDF 也干净。

Don't

标题用 font-weight: 600 或更粗的合成 bold，笔画容易变糊，版面也会显得粗重。

Do

正文 400，标题 500（真实 Medium 字重）；需要更强存在感时，用字号或品牌色左侧竖线，不靠合成粗体。

Don't

box-shadow 硬投影 0 2px 8px rgba(0,0,0,0.3) 观感偏硬，印刷时也容易发黑。

Do

用 ring shadow (0 0 0 1pt)、whisper (rgba 0.05)，或直接用明暗交替建立层次。