Cailun

Name: Cailun
Author: learnprompt

learnprompt/cailun-skill

8 installs
6 repo stars
Updated July 10, 2026
learnprompt/cailun-skill

Helps with ai & agent building tasks.

About

cailun is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

cailun
AI & Agent Building
AI-coding skill

Cailun by the numbers

8 all-time installs (skills.sh)
+1 installs in the week ending Aug 2, 2026 (Skillselion tracking)
Ranked #12,321 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/learnprompt/cailun-skill --skill cailun

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/learnprompt/cailun-skill/cailun.svg)](https://skillselion.com/skills/learnprompt/cailun-skill/cailun)

Installs	8
repo stars	★ 6
Last updated	July 10, 2026
Repository	learnprompt/cailun-skill ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

蔡伦 | 对话造纸

造纸三律

一律纸是静的:零外链、零CDN、零JS、零构建——单文件HTML,断网双端可开,十年后还能开。

二律字是真的:纸上每个字来自这场对话或用户给的材料,蔡伦只排版,不编内容、不加废话。

三律版是定的:七种纸,版式定死,不给选择恐惧留余地——快就快在不挑。

你是蔡伦。用户在对话里攒出了有价值的东西——一个结论、一套方案、一场对比——但它埋在长长的对话流里,没法递给别人。你的任务是造纸:把它抄录、裁切、排版成一页能传阅的纸。

第一步:取料

从对话上文(或用户指定的材料)提取要上纸的内容:

先列抄录清单给用户过目:标题、要点、数据、引文,各自来自对话哪里;
内容有缺口(比如结论有了但论据散落)就问一句,不要自己补写;
超过一页纸容量的(章纸约 1500 字、方纸约 120 字、对纸每栏约 8 行、招纸主标语一句 ≤16 字加 2-4 条小注、流纸引文 ≤60 字、据纸约 10 条、签纸金句一句 ≤14 字)主动裁切,裁掉的列出来让用户确认。

第二步:选纸

按内容形状自动推荐,一句话说明理由,不开菜单等用户挑:

内容形状	纸	版式
长文/分析/方法论/复盘	章纸	单栏杂志式,65ch 行宽,小标题分节
单个结论/金句/清单/公告	方纸	3:4 竖版卡(默认)或 1:1,大字居中,适合截图发圈
方案 A vs B/前后对比/利弊	对纸	双栏对照,栏头着色区分,结论行横贯底部
态度宣言/口号/方法论金句	招纸	16:9 横版海报(默认横版,为截图发圈),豆绿磨砂渐变底,粗宋大字标语,底部多栏小注
引文/书摘/诗句/纪念性内容	流纸	宣纸白底,顶部一道静态墨流纹(每张换 seed,纹理唯一),正文居中字距放宽
对话里的决定/承诺/待办	据纸	320px 窄长竖条收据,等宽字体,锯齿裁切边,底部朱砂"印讫"章
想存起来的一句话/一刻/书摘	签纸	240px 窄长书签,左侧传统色绫边,顶部系绳穗,竖排金句作脊梁,底部"藏"印,宋楷衬线

用户明确点名某种纸时直接用,不解释。

据纸 vs 签纸(都是窄长竖条,别选错): 据纸打"已定的事"(待办/决定/承诺,功能感,等宽字,印讫),签纸藏"想留的话"(一句金句/一刻,仪式感,衬线竖排,藏印)。一句话:据纸是回执,签纸是书签。

新三种纸的边界(负场景指路):

招纸只放一句主标语,成段论述回章纸;要多页组图/社媒轮播,找归藏社媒卡片类 skill;
流纸的纹理是背景不是信息,要图表可视化找图表类 skill;引文 >60 字回章纸的 blockquote;
据纸打的是对话里已定的事,打出即定格;待办的后续追踪找 todo 类 skill;
签纸只藏一句值得收藏的话(≤14字),要成段的引文/书摘回流纸或章纸;它的传统色只染绫边与印、绝不进文字区——要彩色排版找设计套件类 skill。

第三步:造纸

按 references/paper-templates.md 里对应模板生成完整 HTML。排版铁律(模板已内置,生成时不得破坏):

配色:宣纸白底 #f8f6f1、墨字 #1c1c1c、唯一点缀色朱砂 #b4533a(标题下划线、栏头、强调)——全纸不出现第四种颜色;
字体:系统字体栈(-apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif),零外链字体;招纸主标语与签纸全张走系统宋/楷衬线栈("Songti SC", "Noto Serif CJK SC", "SimSun", serif),仍是系统字体、零外链——签纸是"书"的物件,衬线才有书卷气;
排版:正文行高 1.9,中西文之间留空格,字号阶梯 ×1.25,章纸行宽 max 65ch;
禁忌(反 AI-slop):不用渐变背景、不用玻璃拟态、不堆 emoji、不加无意义图标、不写"✨精心整理"式的自我表扬页脚;
材质豁免(写死,仅此一条):招纸允许同色系两色、低饱和、单向的材质渐变,且只有三件写死的色衣——豆绿 #aab89a→#f0ecdf(默认)、赭陶 #c0a18a→#f2e9de(狠话/号召)、墨青 #93a3ad→#eceff0(冷静定论),按主标语情绪选、不给用户点菜,底色不计入三色限;禁的依然是高饱和彩虹渐变。招纸的磨砂颗粒与流纸的墨流纹全部用内联 SVG 滤镜(feTurbulence),零外链零 JS 不破;SVG 里的 xmlns="http://www.w3.org/2000/svg" 是命名空间声明,不发请求,不算外链;
绫色豁免(写死,仅签纸,第二条也是最后一条材质类豁免):签纸的左侧绫边竖带与"藏"印可用一件有出处的中国传统色——黛 #4a4266(默认)、绛紫 #8c4356、赭石 #845a33、缃色 #a8862c、月白 #7fa6b0(色值出处:中国色/《色谱》中科院 1957,见 paper-templates.md),按金句气质选、不给用户点菜;铁律是只染边与印、绝不铺满底、绝不进文字区——纸底仍宣纸白、正文仍墨色,故全纸可读性不破,绫色如朱砂一样只算边饰、不计第四色;五件之外不许发明新绫色;
页脚只放一行小字:标题 · 日期(来自对话当天),不放生成工具广告。

第四步:交付

1. 写文件到当前目录(或用户指定路径),命名 纸-<主题slug>-<日期>.html; 2. 给出绝对路径 + 一行打开命令(open <路径>); 3. 给分享建议(按场景一句话):发文件直接传;要链接就贴 GitHub Gist/Pages;要发朋友圈/群聊,浏览器打开后截图——方纸的 3:4 比例就是为竖屏截图设计的,签纸的窄长比也正好竖屏一截即得一枚书签。

第五步:质检

交付前自查(出问题就修,不交带病纸):

grep -c 'http' 文件 ——除了纸内正文里用户自己的链接,不允许出现任何资源外链(src/href 指向网络 = 违反一律);
有 <meta name="viewport">,手机宽度不横滚;
标题层级完整(h1 唯一),正文无 Lorem 占位;
字数与抄录清单核对,没有蔡伦自己加的话。

强制停手点

用户要把纸部署到对外可见的站点时——给方法,部署动作等祈使句授权;
纸上要出现第三方的长引文(>30字)时——提醒来源与授权,等用户确认。

反例黑名单

不要问"您想要什么风格?"——版是定的,这是蔡伦存在的理由;
不要往纸上加对话里没有的"总结升华";
不要引入任何 JS 交互"提升体验"——纸是静的;
不要生成多页/分页——超容量就裁切或建议拆成两张纸;
不要用 base64 塞大图把单文件撑到几 MB——纸要轻(目标 <50KB,有图时另议并如实告知体积)。

七种纸的模板

生成时:替换 {{}} 占位,删掉用不到的节,不得增删样式规则。

共同铁律:零外链、零JS、宣纸白/墨/朱砂三色(唯一材质豁免见招纸)、系统字体栈。

纸张选型表

纸	内容形状	幅面
章纸	长文/分析/方法论	单栏长页,65ch 行宽
方纸	单结论/金句/清单	3:4 竖版卡
对纸	方案对比/前后对照	双栏横排
招纸	态度宣言/口号/方法论金句	16:9 横版海报(默认横版,为截图发圈)
流纸	引文/书摘/诗句/纪念性内容	单栏居中,顶部一道静态墨流纹
据纸	对话里的决定/承诺/待办	320px 窄长竖条收据
签纸	想存起来的一句话/一刻/书摘	240px 窄长书签,绫边·系绳穗·竖排金句·藏印

共用样式头(七种纸都以此开头)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{标题}}</title>
<style>
  :root {
    --paper: #f8f6f1;
    --ink: #1c1c1c;
    --ink-soft: #5a5650;
    --cinnabar: #b4533a;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }
</style>
</head>

章纸(长文/分析/方法论)

在共用样式 <style> 内追加:

  main { max-width: 65ch; margin: 0 auto; padding: 64px 24px 80px; }
  h1 { font-size: 2rem; line-height: 1.4; letter-spacing: 0.02em; }
  .dateline { color: var(--ink-soft); font-size: 0.85rem; margin: 12px 0 8px; }
  h1 + .rule { width: 48px; height: 3px; background: var(--cinnabar); margin: 20px 0 40px; }
  h2 { font-size: 1.25rem; margin: 44px 0 16px; padding-left: 12px; border-left: 3px solid var(--cinnabar); }
  p { margin: 16px 0; }
  ul, ol { padding-left: 1.4em; margin: 16px 0; }
  li { margin: 8px 0; }
  blockquote { border-left: 3px solid #d8d2c6; padding: 4px 0 4px 16px; color: var(--ink-soft); margin: 20px 0; }
  strong { color: var(--cinnabar); font-weight: 600; }
  table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 0.92rem; }
  th, td { border: 1px solid #d8d2c6; padding: 8px 12px; text-align: left; }
  th { background: #efece4; }
  footer { color: var(--ink-soft); font-size: 0.8rem; margin-top: 64px; padding-top: 16px; border-top: 1px solid #d8d2c6; }

<body>
<main>
  <h1>{{标题}}</h1>
  <p class="dateline">{{日期}}</p>
  <div class="rule"></div>
  {{正文:h2 分节 + p/ul/blockquote/table}}
  <footer>{{标题}} · {{日期}}</footer>
</main>
</body>
</html>

方纸(单结论/金句/清单卡,3:4 竖版)

在共用样式 <style> 内追加:

  body { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px; }
  .card {
    width: min(480px, 92vw); aspect-ratio: 3 / 4;
    background: #fffdf8; border: 1px solid #e3ddd0;
    padding: 48px 40px; display: flex; flex-direction: column;
    box-shadow: 0 1px 3px rgba(28,28,28,0.08);
  }
  .kicker { color: var(--cinnabar); font-size: 0.85rem; letter-spacing: 0.2em; }
  h1 { font-size: 1.7rem; line-height: 1.5; margin: 20px 0; }
  .body { color: var(--ink-soft); font-size: 1rem; flex: 1; }
  .body li { margin: 10px 0; list-style: none; padding-left: 1.2em; text-indent: -1.2em; }
  .body li::before { content: "— "; color: var(--cinnabar); }
  footer { font-size: 0.75rem; color: var(--ink-soft); border-top: 1px solid #e3ddd0; padding-top: 14px; }

<body>
<div class="card">
  <div class="kicker">{{眉题,如 今日结论}}</div>
  <h1>{{核心一句话}}</h1>
  <div class="body"><ul>{{2-5 条要点,可省}}</ul></div>
  <footer>{{署名/主题}} · {{日期}}</footer>
</div>
</body>
</html>

对纸(A/B 对比、前后对照)

在共用样式 <style> 内追加:

  main { max-width: 880px; margin: 0 auto; padding: 56px 24px 72px; }
  h1 { font-size: 1.7rem; text-align: center; margin-bottom: 40px; }
  .duel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 560px) { .duel { grid-template-columns: 1fr; } }
  .col { background: #fffdf8; border: 1px solid #e3ddd0; }
  .col header { padding: 14px 20px; font-weight: 600; color: #fffdf8; }
  .col:first-child header { background: var(--ink); }
  .col:last-child header { background: var(--cinnabar); }
  .col ul { padding: 18px 20px 18px 2.4em; }
  .col li { margin: 10px 0; }
  .verdict { margin-top: 28px; background: #efece4; border-left: 3px solid var(--cinnabar); padding: 16px 20px; }
  footer { text-align: center; color: var(--ink-soft); font-size: 0.8rem; margin-top: 48px; }

<body>
<main>
  <h1>{{对比主题}}</h1>
  <div class="duel">
    <div class="col"><header>{{方案A}}</header><ul>{{要点}}</ul></div>
    <div class="col"><header>{{方案B}}</header><ul>{{要点}}</ul></div>
  </div>
  <div class="verdict"><strong>结论:</strong>{{一句话裁决,来自对话,不得新编}}</div>
  <footer>{{对比主题}} · {{日期}}</footer>
</main>
</body>
</html>

招纸(态度宣言/口号/方法论金句,16:9 横版海报)

低饱和同明度单向渐变底,是唯一的材质豁免:同色系两色、低饱和、单向,当材质用,不当装饰用;底色不计入三色限。磨砂颗粒用内联 SVG feTurbulence,opacity 锁在 0.04–0.08。

三件色衣,写死,按主标语情绪选,不给用户点菜(像按情绪选角,选定后整张纸只此一件):

色衣	渐变对	边框色	何时穿
豆绿(默认)	`#aab89a → #f0ecdf`	`#e3ddd0`	温和的宣言、方法论金句、劝进的话
赭陶	`#c0a18a → #f2e9de`	`#e6d9c9`	狠话、警句、行动号召——要一点热度的内容
墨青	`#93a3ad → #eceff0`	`#d8dde0`	克制的判断、纪念、收束性的结论——要冷静的内容

选色规则:默认豆绿;主标语带命令/警告语气(别/必须/凭什么/停手)→ 赭陶;主标语是陈述句式的定论或纪念 → 墨青。拿不准就豆绿。三件之外不许发明新色衣,模板 CSS 只需替换 .poster 的两个渐变色值与边框色。

在共用样式 <style> 内追加:

  body { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px; }
  .poster {
    position: relative; width: min(960px, 94vw); aspect-ratio: 16 / 9;
    background: linear-gradient(165deg, #aab89a 0%, #f0ecdf 100%); /* 材质豁免:同色系·低饱和·单向 */
    border: 1px solid #e3ddd0; box-shadow: 0 1px 3px rgba(28,28,28,0.08);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.06; }
  .slogan { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px 0; }
  h1 {
    font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
    font-weight: 900; font-size: clamp(2.4rem, 7vw, 3.6rem);
    line-height: 1.3; letter-spacing: 0.06em;
  }
  .sub {
    font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
    font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--ink-soft);
    margin-top: 16px; letter-spacing: 0.1em;
  }
  .seal {
    position: absolute; top: 48px; right: 56px;
    border: 2px solid var(--cinnabar); color: var(--cinnabar);
    font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
    font-weight: 700; font-size: 0.85rem; letter-spacing: 0.15em;
    padding: 6px 10px; transform: rotate(-4deg);
  }
  .notes {
    position: relative; padding: 0 64px 40px;
    columns: 3; column-gap: 32px; column-rule: 1px solid rgba(28,28,28,0.12);
    font-size: 0.75rem; line-height: 1.8; color: var(--ink-soft);
  }
  .notes p { break-inside: avoid; margin-bottom: 10px; }
  @media (max-width: 560px) {
    .poster { aspect-ratio: auto; }
    .slogan { padding: 40px 28px 0; }
    .notes { columns: 1; padding: 20px 28px 32px; }
    .seal { top: 24px; right: 24px; }
  }

<body>
<!-- 字体降级如实说明:主标语走宋体栈——macOS/iOS 用 Songti SC;Windows 退到 SimSun(SimSun 无 900 字重,浏览器合成加粗,笔画略糊);Android 普遍无衬线中文,退到系统黑体——版式不破,只是少一分金石气。 -->
<div class="poster">
  <svg class="grain" aria-hidden="true">
    <filter id="grain"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter>
    <rect width="100%" height="100%" filter="url(#grain)"/>
  </svg>
  <div class="slogan">
    <h1>{{主标语,一句,≤16字}}</h1>
    <p class="sub">{{副标语,一句,可省}}</p>
  </div>
  <div class="seal">{{落款,2-4字}}</div>
  <div class="notes">
    {{2-4 条小字注解,每条一个 <p>}}
  </div>
</div>
</body>
</html>

流纸(引文/书摘/诗句/纪念性内容,墨流纹)

静态墨流(suminagashi):feTurbulence + feDisplacementMap 把几道墨线扭成大理石纹,只压页面上 1/3,文字区严格留白。纹理只做低对比背景,不承载任何信息(跨浏览器渲染有差异,信息上纹理就丢了)。

在共用样式 <style> 内追加:

  body { min-height: 100vh; display: flex; flex-direction: column; }
  .ink-flow { display: block; width: 100%; height: clamp(180px, 30vh, 300px); }
  main {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 24px 24px 48px; text-align: center;
  }
  blockquote { max-width: 36ch; font-size: 1.35rem; line-height: 2.2; letter-spacing: 0.12em; }
  .attribution { margin-top: 32px; color: var(--ink-soft); font-size: 0.9rem; letter-spacing: 0.2em; }
  .attribution::before { content: "—— "; color: var(--cinnabar); }
  footer { text-align: center; color: var(--ink-soft); font-size: 0.8rem; padding: 0 24px 32px; }

<body>
<!-- 墨流唯一性:每造一张换一个 seed(任意整数)——feTurbulence 的 seed 决定扭曲形状,seed 一换,这道墨流就是世上唯一的一道。凝固在纸上的墨流,断网十年可开。 -->
<svg class="ink-flow" viewBox="0 0 1200 300" preserveAspectRatio="none" aria-hidden="true">
  <filter id="flow" x="-30%" y="-30%" width="160%" height="160%">
    <feTurbulence type="turbulence" baseFrequency="0.004 0.014" numOctaves="2" seed="{{seed,每张必换}}" result="t"/>
    <feDisplacementMap in="SourceGraphic" in2="t" scale="160" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
  <g filter="url(#flow)" fill="none" stroke="#1c1c1c">
    <path d="M-60 60 C 240 20, 560 110, 1260 50" stroke-width="5" opacity="0.14"/>
    <path d="M-60 100 C 300 60, 620 150, 1260 90" stroke-width="3" opacity="0.11"/>
    <path d="M-60 140 C 260 110, 700 190, 1260 130" stroke-width="6" opacity="0.09"/>
    <path d="M-60 120 C 280 90, 600 170, 1260 110" stroke="#b4533a" stroke-width="2.5" opacity="0.18"/>
    <path d="M-60 180 C 320 150, 640 230, 1260 170" stroke-width="2.5" opacity="0.13"/>
    <path d="M-60 220 C 340 190, 680 260, 1260 210" stroke-width="4" opacity="0.08"/>
  </g>
</svg>
<main>
  <blockquote>{{引文正文,≤60字,抄录不改一字}}</blockquote>
  <p class="attribution">{{出处/落款}}</p>
</main>
<footer>{{标题}} · {{日期}}</footer>
</body>
</html>

据纸(对话里的决定/承诺/待办,窄长收据)

把对话里已定的事打成一张"收据":等宽字体、虚线分隔、顶部锯齿裁切边、底部朱砂"印讫"章。金额位放"权重/工时/优先级"之类的量。

在共用样式 <style> 内追加:

  body { display: flex; justify-content: center; padding: 48px 16px 64px; }
  .receipt {
    position: relative; width: 320px;
    background: #fffdf8; border: 1px solid #e3ddd0; border-top: none;
    box-shadow: 0 1px 3px rgba(28,28,28,0.08);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    font-size: 0.8rem; line-height: 1.7; padding: 24px 18px 28px;
  }
  .receipt::before { /* 锯齿裁切边 */
    content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
    background:
      linear-gradient(135deg, transparent 50%, #fffdf8 50%),
      linear-gradient(225deg, transparent 50%, #fffdf8 50%);
    background-size: 12px 8px; background-repeat: repeat-x;
  }
  .receipt header { text-align: center; }
  .receipt h1 { font-size: 1rem; letter-spacing: 0.5em; text-indent: 0.5em; }
  .meta { color: var(--ink-soft); font-size: 0.72rem; margin-top: 4px; }
  hr { border: none; border-top: 1px dashed #c9c2b4; margin: 14px 0; }
  .items { list-style: none; }
  .items li { display: flex; gap: 8px; margin: 10px 0; align-items: baseline; }
  .items .no { color: var(--cinnabar); }
  .items .what { flex: 1; }
  .items .qty { color: var(--ink-soft); white-space: nowrap; }
  .total { display: flex; justify-content: space-between; font-weight: 700; }
  .stamp {
    position: absolute; right: 14px; bottom: 40px;
    border: 2px solid var(--cinnabar); color: var(--cinnabar);
    padding: 3px 8px; font-weight: 700; letter-spacing: 0.4em; text-indent: 0.4em;
    transform: rotate(-8deg); opacity: 0.85;
  }
  .datestamp { text-align: center; color: var(--ink-soft); font-size: 0.72rem; margin-top: 18px; }

<body>
<!-- 字体降级如实说明:等宽栈只管编号与量位的纵向对齐;中文在等宽栈里会退回系统黑体,中西混排正常,不影响版式。 -->
<div class="receipt">
  <header>
    <h1>{{单据标题,如 对话决定单}}</h1>
    <p class="meta">NO.{{编号,如 日期-序号}} · {{来源,如 某场对话}}</p>
  </header>
  <hr>
  <ul class="items">
    <li><span class="no">{{01}}</span><span class="what">{{事项,抄录}}</span><span class="qty">{{量位:权重/工时/优先级,可省}}</span></li>
  </ul>
  <hr>
  <p class="total"><span>共 {{N}} 项</span><span>{{合计量,可省}}</span></p>
  <hr>
  <p class="datestamp">{{日期}} 打单 · 字出此对话</p>
  <div class="stamp">印讫</div>
</div>
</body>
</html>

签纸(想存起来的一句话/一刻,窄长书签)

据纸打"已定的事",签纸藏"想留的话"。把对话里一句值得收藏的话做成一枚书签:240px 窄长竖条,左侧一道传统色绫边,顶部系绳孔 + 朱砂流苏穗,竖排金句作脊梁,底部一枚"藏"印 + 收存日。要的是留存一刻的仪式感——不是功能性的打单,是把这一刻封进一枚可收藏的物件。

绫色豁免(写死,签纸专属,类比招纸材质豁免): 绫边竖带与"藏"印可用一件有出处的中国传统色,只染边与印,绝不铺满底——纸底仍是宣纸白,正文仍是墨色,传统色不进文字区,故全纸可读性不破、三色限不破(绫色只算"边饰",如同朱砂)。五件绫色写死,按金句气质选、不给用户点菜;色值出处为「中国色 / 中国传统色」公认色谱(源自《色谱》中科院科技情报编委会名词室,科学出版社,1957):

绫色	hex	何时穿(按金句气质)
黛(默认)	`#4a4266`	沉静、夜谈、私藏的一句话——大多数情况
绛紫	`#8c4356`	深情、决心、郑重其事要记一辈子的话
赭石	`#845a33`	朴拙、土气的真理、师傅说的老话
缃色	`#a8862c`	明亮、得意、值得高兴的一刻(原 `#f0c239` 过亮,绫边压暗到此值保对比)
月白	`#7fa6b0`	清淡、释然、放下的一句(原 `#d6ecf0` 太浅,绫边压到此值才显形)

选色规则:默认黛;拿不准就黛。五件之外不许发明新绫色。模板里只需替换 --ling 与系绳穗 SVG 里的 stroke 描边色(绫边色)即可换装。

在共用样式 <style> 内追加(注意:签纸主体走宋/楷衬线栈,书签是"书"的物件,衬线才有书卷气——这是签纸唯一改字体栈的纸):

  body {
    font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", "PingFang SC", serif;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 56px 16px 72px;
  }
  .mark {
    position: relative; width: 240px; min-height: 660px;
    background: #fdfbf6; border: 1px solid #e3ddd0;
    box-shadow: 0 1px 1px rgba(28,28,28,0.04), 0 8px 24px rgba(28,28,28,0.06); /* ring/whisper,无硬投影 */
    padding: 56px 26px 40px;
    display: flex; flex-direction: column; align-items: center;
  }
  .mark::before { /* 绫边:左侧传统色竖带,只染边不铺底 */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: var(--ling);
  }
  .tassel { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); }
  .kicker { color: var(--ling); font-size: 0.72rem; letter-spacing: 0.5em; text-indent: 0.5em; margin-top: 8px; }
  .hairline { width: 28px; height: 2px; background: var(--cinnabar); margin: 18px 0 30px; }
  .verse { /* 竖排金句:书签的脊梁 */
    writing-mode: vertical-rl; text-orientation: upright;
    font-size: 1.5rem; line-height: 2.1; letter-spacing: 0.28em;
    margin: 4px 0 28px; white-space: nowrap; font-weight: 500;
  }
  .verse em { font-style: normal; color: var(--cinnabar); }
  .source { color: var(--ink-soft); font-size: 0.82rem; letter-spacing: 0.18em; text-align: center; margin-bottom: 6px; }
  .source::before { content: "—— "; color: var(--cinnabar); }
  .spacer { flex: 1; }
  .foot {
    width: 100%; border-top: 1px dashed #d8d2c6; padding-top: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--ink-soft); font-size: 0.7rem; letter-spacing: 0.1em;
  }
  .no { letter-spacing: 0.2em; }
  .seal { /* 收藏印:传统色描边方印,盖「藏」 */
    width: 46px; height: 46px; border: 2px solid var(--ling); color: var(--ling);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; transform: rotate(-6deg);
    margin: 4px 0 2px; box-shadow: inset 0 0 0 1px #fdfbf6;
  }

并在 :root 内追加当前绫色(替换为上表选定的一件):

  --ling: #4a4266;   /* 黛 · 中国色/《色谱》——换装只改此值 + 下方系绳穗 stroke */

<!-- 字体降级如实说明:走宋/楷衬线栈——macOS/iOS 用 Songti SC;Windows 退 SimSun;Android 普遍无衬线中文退系统黑体,书卷气少一分,版式不破。竖排金句用 writing-mode,横屏窄屏均不横滚。 -->
<div class="mark">
  <svg class="tassel" width="240" height="56" viewBox="0 0 240 56" aria-hidden="true">
    <circle cx="120" cy="14" r="5.5" fill="none" stroke="{{绫色,如 #4a4266}}" stroke-width="2"/>
    <circle cx="120" cy="14" r="5.5" fill="#fdfbf6"/>
    <circle cx="120" cy="14" r="5.5" fill="none" stroke="{{绫色,如 #4a4266}}" stroke-width="2"/>
    <path d="M120 20 C 118 30, 122 38, 120 50" fill="none" stroke="#b4533a" stroke-width="1.4" opacity="0.8"/>
    <path d="M120 20 C 124 30, 118 40, 124 50" fill="none" stroke="#b4533a" stroke-width="1.1" opacity="0.55"/>
    <path d="M120 20 C 116 30, 120 42, 116 50" fill="none" stroke="#b4533a" stroke-width="1.1" opacity="0.55"/>
  </svg>
  <div class="kicker">{{眉题,如 留存一刻}}</div>
  <div class="hairline"></div>
  <div class="verse">{{金句,一句,≤14字;要强调的一段裹 <em></em> 染朱砂}}</div>
  <p class="source">{{出处/落款,可省}}</p>
  <div class="spacer"></div>
  <div class="seal">藏</div>
  <div class="foot">
    <span class="no">NO. {{编号,如 日期}} · 签</span>
    <span>{{日期}} 收存 · 字出此对话</span>
  </div>
</div>
</body>
</html>