AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载本指南以 GitHub 加速计划fr/frontend-slides仓库中 Bold Template Pack 的Pin Paper模板bold-template-pack/templates/pin-and-paper/design.md为蓝本系统拆解这套「野外笔记本 / 手账」风格幻灯片的完整设计规范。你将掌握其色彩 token 体系、三声部字体系统、纸面纹理与回形针插图组件、1920×1080 固定舞台渲染模型以及面向中文内容的字体配对与混排策略可直接用于生成风格统一、经得起审查的 HTML 演示文稿。模板定位一套「笔记本页面」而非「演示工具」Pin Paper 的模板索引条目见 bold-template-pack/selection-index.json给出如下定位元数据Slugpin-and-paperTaglineYellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.Moodcrafted、handmade、warm、thoughtful、literaryToneliterary、intimate、warm、groundedFormalitymediumDensitymediumSchemelightBest for一切需要手工质感、温暖与文学性的内容——质性研究结论qualitative research findings、创始人反思、长篇品牌故事、工作坊复盘由于回形针插图与纸纹纹理的存在它同样适合希望以个性与温度取胜的技术或商业演示。Avoid for需要「数字原生化精致感」或「严谨数据驱动感」的演示——手写体 Caveat 刻意非正式。配套的 preview.md 还给出一个精炼的视觉快照每一页都承载 fractal-noise 纸纹覆盖层手绘安全回形针safety-pinSVG 把卡片「钉」在页面上Caveat 手写字体承载个人批注Space Grotesk 重字重承载印刷感标题DM Mono 承载档案标签。整体美学借用模拟野外报告、复古公告板与科学笔记本日记页——更像是钉在软木板上的实验室日志而非打磨光滑的演示文稿。整套设计系统建立在一个单一材质前提上每一页都是黄色便签纸legal pad paper。这个前提贯穿色彩、纹理、卡片、阴影、旋转角度乃至中文适配的每一个环节是全文理解 Pin Paper 的钥匙。渲染模型Fixed-Stage 固定舞台政策原文档在正文之前用专门的章节声明了Frontend Slides Fixed-Stage Policy这是使用本模板的最高优先级约束当该设计系统被frontend-slides技能使用时最终演示必须生成为1920×1080 固定画布并整体等比缩放到浏览器视口。幻灯片在包括手机在内的所有屏幕上都应保持 16:9 画布允许 letterbox 或 pillarbox但不得为移动端重新排版幻灯片内容。这条政策优先于文档内任何源模板的响应式行为描述。即便源模板原本使用100vw、100vh、vw、vh或clamp()这类视口流式 CSS也必须把这些值当作「设计比例」换算为 1920×1080 舞台坐标而不是作为生成文稿中的实时响应式规则。这条政策在仓库中有完整的实现支撑共三层Web Component 层bold-template-pack/deck-stage.js 定义了deck-stage可复用组件。其默认设计尺寸常量为DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080L53-L54。核心缩放逻辑在_fit()方法L527-L540const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale( s )即取视口宽/高与设计尺寸比例中的较小者用单个transform: scale()整体缩放画布。它还支持noscale属性用于 PPTX 导出场景下按原始尺寸渲染。导航方面组件处理键盘←/→、PgUp/PgDn、Space、Home/End、数字键直达、R复位、触摸左/右三分区 tap zones与鼠标滚轮/点击并派发slidechangeCustomEvent 供宿主监听。幻灯片采用「隐藏而非卸载」策略visibility: hiddenopacity: 0保留非活动页的 iframe、表单等状态。强制基础 CSS 层viewport-base.css 是每份文稿必须整体包含的样式。它锁定html, body的满屏视口、定义.deck-viewport、固定.deck-stage为 1920×1080、用.active/.visible类切换幻灯片的可见性明确禁止用display: none/block切换否则会被后续布局类覆盖导致所有页面同时可见并在media print中按设计尺寸一页一页地排版幻灯片。prefers-reduced-motion降级也已内置。HTML 架构层html-template.md 中的SlidePresentation控制器同样执行Math.min(window.innerWidth / 1920, window.innerHeight / 1080)的等比缩放并通过translate(...) scale(...)居中舞台。deck-stage.js的打印支持尤其值得注意_syncPrintPageRule()L393-L405在head注入page { size: 1920px 1080px; margin: 0; }并设置* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }。这对保证纸面纹理的打印效果是有利的但原文档仍谨慎提醒fractal-noise 纸纹在部分 PDF 导出中可能不渲染使用前必须实测不可想当然认为纹理必然保留。色彩系统黄纸、墨蓝、奶油与朱砂红调色板 Tokendesign.md的 YAML 头部以colors段定义了完整的调色板。需要说明的是文档正文中出现的{colors.paper}、{colors.ink}一类写法是该设计系统的token 引用语法指向 YAML 中定义的对应色值生成 HTML 时应展开为实际十六进制值。完整清单如下Token值角色paper#EFE56A主导表面色饱和镉黄页面「纸」的底色paper-2#F5ECA0更浅淡的黄交替卡片填充色打破相邻同色卡片paper-3#E8D85A更深更饱和的黄.deep页面变体用paper-extra#FBE6A4带奶油味的暖黄最具差异化的卡片变体常配轻微旋转cream#F8F1D6卡片背景柔和米白象牙色让卡片从高饱和黄页面上「退后」kraft#C9A66B暖褐色卡夫纸色token 已定义但在源码中未启用ink#1F3A8A深钴蓝系统的结构身份色所有文字、边框、分隔线、回形针插画与阴影ink-soft#2D4FB8稍浅钴蓝变体可用但少用ink-line#3457C4更亮的钴蓝用于线条装饰少用ink-deep#0E1430带蓝调的近黑色.ink页面变体背景red#C2342B朱砂红仅用于印章组件与否定态 pill绝不作为常规强调色olive#6B7A2E已定义但未启用保留的三级色orange#D8702A已定义但未启用保留的三级色颜色别名段color-aliases把语义角色绑定到具体 tokenc-bg: paper页面底色、c-text: ink正文色、c-card: cream卡片色、c-stamp: red印章色。在实现中可直接用别名书写 CSS 变量保证「改了 token 全局生效」的换肤能力。默认规则默认页面表面paper-surface组件黄纸 双层渐变 纸纹始终如此。默认纸纹paper-grain-overlayopacity 0.35、multiply 混合不可省略。默认标题色黄纸面上用ink墨蓝面.ink变体上用paper。默认正文色黄/奶油面上用ink墨蓝面上用paper强调性引导语可用opacity: 0.85弱化。默认卡片表面cream需要打破相邻同色时改用paper-2或paper-extra。默认边框ink1.5px始终如此。默认阴影5px 6px 0 0 ink硬偏移、零模糊紧凑卡片可用4px 5px 0 0最大引文面板用8px 9px 0 0。默认标签/元数据色ink以 0.65–0.75 透明度用于 chrome 与页脚。默认手写批注色inkCaveat 在黄底上永远是墨蓝。默认印章色red这是红色唯一被例行使用的位置。一条贯穿始终的铁律奶油是卡片填充黄色是页面填充。两者混用会破坏层级——黄卡片放在黄页面上会「消失」奶油卡片放在奶油页面上会让「多层纸」的阅读感崩塌。字体系统印刷、手写、档案的三声部编排三款字体与情感声部系统加载三款网络字体声部分工不重叠且每个声部都承载明确的情感定位Space Grotesk400/500/600/700印刷、官方、排字机——「文档本身的声音」承载所有标题与展示级文字。Caveat500/600/700手写、个人、页边注释——「正在读文档的人的声音」承载旁注、批注、步骤数字、pill 文字、超大序数。Caveat 是系统的「个人声音机制」只要脚本体出现语气就从「官方公告」切换到「页边的手写便条」。DM Mono400/500档案、目录卡、索引——「为文档归档的系统的声音」承载所有元数据标签、top-chrome 品牌锁标、页脚、来源署名、坐标轴标签。完整字号量表Token字号字体字重用途scribble-mega360pxCaveat700装饰性超大引号字形display-mega196pxSpace Grotesk700封面大标题display-section168pxSpace Grotesk700章节页大标题墨蓝面display-stat168pxSpace Grotesk700主打统计数字h1-cta130pxSpace Grotesk700结尾 CTA 标题h1-chart110pxSpace Grotesk700图表页标题h296pxSpace Grotesk700标准议程/数据标题h2-md84pxSpace Grotesk700高密度页内章节标题scribble-lg70pxCaveat700流程步骤数字scribble-md60pxCaveat700CTA 步骤数字、大号脚本强调quote-text50pxSpace Grotesk500引文正文h2-sm50pxSpace Grotesk700公告页标题card-row44pxSpace Grotesk600议程行标签card-h338pxSpace Grotesk700卡片标题scribble-sm38pxCaveat600封面页边手写注、公告卡元数据scribble-xs32pxCaveat600卡片内小号手写批注card-h3-sm28pxSpace Grotesk700子卡标题body22pxSpace Grotesk400标准正文段落body-md21pxSpace Grotesk400表格内正文body-sm19pxSpace Grotesk400高密度卡片内紧凑正文body-list18pxSpace Grotesk400卡片内列表项label-top18pxDM Mono500Top-chrome 品牌锁标与元数据label-meta16pxDM Mono500日期条、署名stamp16pxDM Mono500印章文字label-footer15pxDM Mono500页脚 chrome行内混排的两条关键规则Caveat 数字内嵌smallCaveat 数字内的small元素应切换为 60px 的 Caveat用于单位后缀如M、×、%。手写后缀保留了父数字的「手数」感觉。.underline强调Caveat 手写批注文本中的.underlinespan 使用 2px 实线墨蓝下划线模拟手绘强调。默认规则与签名处理默认字号映射正文body22px高密度页降至body-sm19px、标准卡片标题card-h338px、默认封面display-mega196px、默认章节页display-section168px、默认统计数字display-stat168px配 Caveatsmall单位后缀、默认手写批注scribble-sm38px步骤数字用scribble-lg70px。所有展示元素默认字重 700正文默认 400。拿不准时标准卡片的三层结构是38px Space Grotesk 卡片标题 22px Space Grotesk 正文 底部 32px Caveat 手写便条——印刷标题、印刷正文、手写旁注的三层节奏是系统最易识别的内部模式。「签名处理」段落的约束是非可选的只要对应元素出现就必须遵守每一页都必须有paper-grain-overlay纸纹否则纸张美学崩塌——纸纹属于表面的一部分不是装饰。每张卡片必须是「1.5px 实线墨蓝边框 4px 圆角 硬墨蓝偏移阴影5–8px、零模糊」三件套。缺阴影卡片像没被钉住缺边框卡片像没被印刷。Caveat 在黄/奶油面上永远是墨蓝在墨蓝面上永远是纸黄其他颜色的 Caveat 不存在。回形针插图永远偏离轴线旋转典型区间 -14° 到 20°0° 旋转会破坏手工钉住的美感。印章永远旋转 -4°3px 红色实线边框、红色等宽文字、零圆角印章文字永远是 DM Mono 大写。每个 Space Grotesk 展示级标题使用负字距-0.02em 到 -0.04em越大越紧。手写数字Caveat 60–70px是流程示意图与有序 CTA 列表的唯一步骤编号机制不得替换为 Space Grotesk 数字。top-chrome 锁标必须包含行内#markSVG 字形它是品牌身份的一部分。排版原则系统的节奏是「印刷标题 印刷正文 手写旁注 等宽档案标签」四声部、各归其位。把任何一声部调换如用 Space Grotesk 写旁注、用 Caveat 排正文都会让编辑语气坍塌。系统不使用斜体下划线只出现在 Caveat.underlinespan 上2px 实线墨蓝正文中的粗体很罕见强调要么换更大的重字重 Space Grotesk要么在下方补一条 Caveat 手写批注。组件系统从纸面到回形针design.md的components段定义了系统全部的视觉原子组件。以下逐一说明其构造与用途。纸面表面与纸纹paper-surface默认页面表面的背景是三层叠加的径向渐变radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.18), transparent 60%)左上柔光radial-gradient(140% 100% at 80% 95%, rgba(0,0,0,.05), transparent 55%)右下柔影 基础纸黄。这让页面在「侧光」下呈现真实纸张的起伏。paper-grain-overlay纸纹覆盖层挂在.slide::before伪元素上背景是fractalNoise SVGdata URIfeTurbulencebaseFrequency1.4、octaves2opacity 0.35、mix-blend-mode: multiply。在墨蓝页面上 opacity 降至 0.25 并切换为screen混合——这一切换是硬性要求在深色墨蓝页面上继续用 multiply 会把页面弄得发灰浑浊。纸纹不可省略没有它纸面退化成平涂卡通黄。钉住的卡片pinned-card通用卡片模式奶油填充 1.5px 墨蓝边框 4px 微圆角 5px 6px 0 0 ink硬偏移阴影。这是系统的通用卡片语法每张卡片看起来都像被钉在页面上的一张纸。变体pinned-card-altpaper-2填充用于打断相邻同色卡片。pinned-card-alt2paper-extra填充 轻微旋转0.6°–1.5°营造「歪着钉」的效果。回形针插图pin-illustration手绘安全回形针 SVGcolor: currentColor可随上下文染色宽度 110–640px 随用途变化旋转 -14° 到 20°。两个字形变体闭合回形针#pinviewBox 0 0 360 110右侧螺旋弹簧、轴扫向左侧、左端椭圆形锁扣帽与开口回形针#pin-openviewBox 0 0 360 130锁扣抬起、尖头朝左。回形针同时承担装饰与语义信号双重角色——它出现在卡片顶部、封面装饰、章节页超大强调插图可达 640px 宽、以及钉住议程行。凡回形针出现页面即被解读为「钉着的文档」。手写批注scribbleCaveat 手写体文字块常用色ink行高 1.05可整体旋转 -1.5° 到 -3° 增强手写感可含.underlinespan 做手绘强调。用于页边旁注、「我」的批注、大号脚本强调。印章stamp3px 朱砂红实线边框、红字等宽大写文字DM Mono 16px、字距 0.18em、text-transform: uppercase、padding6px 16px、固定旋转 -4°、零圆角。用于状态标记CONFIDENTIAL、RECEIVED 等。红色在本系统中仅此一处加否定态 pill 两处使用。页面 Chrometop-chrome绝对定位top: 44px; left/right: 64pxDM Mono 18px、字距 0.12em、大写。左侧品牌锁标含行内#markSVG 字形右侧元数据标签对。footer-chrome绝对定位left/right: 64px; bottom: 36pxDM Mono 15px、字距 0.14em、大写、opacity 0.65。典型为「左来源 右页码」对。墨蓝页面上两组 chrome 文字色翻转为paper。表格与 Pilltable-cellpadding18px 22px、borderBottom/borderRight: 1.5px solid rgba(31,58,138,.5)半透明墨蓝分隔线、21px 正文。对比表单元格嵌套在「奶油 墨蓝边框 偏移阴影」的卡片语法内。pill-yes肯定态ink实底、纸黄文字、1.5px 墨蓝边框、圆角 999px、Caveat 28px 手写体。手写字形放在 UI pill 形状内是有意为之的错位。pill-no否定态透明底、红字红框1.5px 红边、DM Mono 16px 大写、字距 0.14em。这是红色在印章之外唯一被例行使用的场合。pill-part部分态paper-2浅黄底 Caveat 墨蓝手写文字。number-scriptCaveat 700、60–70px 手写数字用于流程示意图与有序 CTA 步骤。手写数字传达「手工计数」而非「算法计数」。字号与间距实现注意组件内部使用的{spacing.card-pad-md}等也是 token 引用展开值为card-pad-md: 28px 28px 24px、card-pad-lg: 32px 22px 22px、card-pad-xl: 36px 28px 28px、card-pad-quote: 60px 80px。卡片内部距经验值顶部 28–36px、两侧 22–28px、底部 22–28px。布局系统画布、锚点与 Chrome 框架画布系统目标画布为固定 1920×1080渲染在deck-stage内。所有尺寸像素固定等比缩放交给舞台组件处理。绝大多数页面采用绝对定位 边缘锚定内容区left: 64px; right: 64px; top: 110px; bottom: 100px卡片行用定向网格回形针插图作为覆盖层绝对定位在卡片堆叠之上。内边距与网格间距Anchor值用途pad-edge64px每页左右边缘缩进pad-top110px内容顶部缩进位于 44px top chrome 之下pad-bottom90px内容底部缩进位于 36px footer chrome 之上grid-gap-sm22px流程卡间距grid-gap-md28px公告/统计卡间距grid-gap-lg32px便签卡网格间距密度哲学系统是「中等密度、内容充实」的当 3–6 张卡片以清晰布局钉满页面时最具权威感每张卡片含标题、正文块、往往再加一条手写旁注。一页只有一个居中标题、其余留白会被视为坏掉的设计——系统按「充实的手账本页面」设计而大半空白的笔记本页面读起来像没写完。例外是封面与章节页按惯例更稀疏但用超大展示字号196px与大号回形针插图补偿。密度概念与 SKILL.md 中的「低密度/演讲驱动 vs 高密度/阅读优先」二分法一致——Pin Paper 属于阅读友好、卡片化的中等密度形态。深度与层级唯一的深度语言是硬偏移阴影系统唯一的元素级深度手法是硬墨蓝偏移阴影5px 6px 0 0 ink标准、4px 5px 0 0紧凑、6px 7px 0 0 rgba(239,229,106,.25)图表卡黄色调阴影、8px 9px 0 0最大引文面板。阴影永远实心、永远向右下偏移、永远零模糊。系统内不存在模糊投影。深度的三个来源硬偏移阴影实心墨蓝矩形向右下偏移配合 4px 微圆角与 1.5px 边框定义通用卡片卡片看起来被钉住并略微抬离页面。纸面纹理深度纸纹opacity 0.35、multiply制造微观起伏读作纸张纤维。这是表面级深度而非元素级。回形针作为深度叙事回形针 SVG 定位在卡片顶缘position: absolute; top: -14 ~ -22px; left: 28~90px; transform: rotate(-6° ~ -12°)制造「卡片被钉到页面」的错觉。回形针解释了两件事卡片为什么有阴影卡片为什么有旋转。另外pinned-card-alt2的轻微旋转0.6°–1.5°是刻意的「不完美」必须节制使用每页一到两张而非每张卡片都转。形状与处理4px 微圆角与三档边框圆角系统值用途0px印章、回形针字形、页码4px卡片、面板、表格容器、图片包装——系统的微圆角999px仅限 pill4px 微圆角小到读作「印刷纸张的轻微渗边」而非「圆角 UI」。Pill 是唯一圆形形态且 Pill 内是 Caveat 手写字形这种反常组合。边框权重1.5px 实线ink通用卡片边框用于每张奶油卡片、每个表格容器、每个面板。1.5px 虚线rgba(31,58,138,.45)议程行之间、CTA 步骤之间、卡片内来源注记上沿的虚线分隔营造「坐标纸断线」感。3px 实线red仅用于印章组件。2px 实线ink仅用于 Caveat.underlinespan。页面结构与质感清单综合以上规范一张标准 Pin Paper 页面由这些要素构成paper-surface黄纸底 ::before纸纹覆盖顶部 DM Mono top-chrome品牌锁标 元数据1–6 张奶油卡片含三件套1.5px 墨蓝边框、4px 圆角、硬偏移阴影卡片间用paper-2/paper-extra交替并偶加旋转每张卡片顶缘钉一枚偏离轴线的回形针#pin闭合或#pin-open开口底部 Caveat 手写批注需要状态时加盖 -4° 红色印章页脚为「来源 页码」的 65% 透明度 DM Mono。墨蓝章节页则整体翻转明暗纸纹切到 screen 混合。Dos and Donts实践纪律Do每页都应用纸纹覆盖层纹理是纸张阅读感的基础。每张卡片都用通用三件套1.5px 墨蓝边框 4px 圆角 硬墨蓝偏移阴影。所有印刷标题用 Space Grotesk 700、混合大小写、负字距。所有手写/个人声部用 Caveat——旁注、步骤数字、pill 文字。所有档案标签、chrome 标签、页脚字符串用 DM Mono 大写字距 0.12–0.18em。每个回形针插图都偏离轴线旋转典型 -14° 到 20°。让卡片内容充实3–6 张卡片钉满页面各含标题 正文 旁注。状态标记用旋转印章组件-4° 旋转是它的身份。流程与 CTA 列表里把 Caveat 步骤数字与 Space Grotesk 卡标题成对使用。每页最多一张卡片带轻微旋转0.6°–1.5°制造「歪钉」效果别让每张都转。Dont不要省略纸纹否则表面退化为平涂卡通黄。不要用其他列表符号替换 Caveat 手写数字步骤号永远是手写体。不要在本系统的印章与否定态 pill 之外使用红色。不要以 0° 渲染回形针偏离轴线的倾斜才让它像实物回形针。不要用模糊阴影卡片只用硬墨蓝偏移阴影。不要在黄色页面上用黄卡片卡片永远是奶油色奶油卡与黄页的对比就是「多层纸」的信号。不要用 Caveat 排正文手写体只用于旁注与强调绝不用于段落。不要用 DM Mono 排标题等宽是档案声部不是编辑声部。不要给卡片用大于 4px 的圆角微圆角是印刷纸角信号更大的圆角会塌缩成普通 UI。不要排版近乎空白的页面系统按充实的手账本设计稀疏读起来像坏掉。CJK 与国际化内容中文手账的字体配对Pin Paper 是全模板库中最适合中文的模板黄色便签纸、钴蓝墨、回形针插图与田野笔记本语境都能自然迁移在中文里直接读作一页「笔记本 / 手账」。推荐中文字体配对角色拉丁字体中文字体字重展示/标题Space Grotesk 700Space Grotesk龙藏体 Long Cang400唯一可用字重正文Space Grotesk 400Space Grotesk霞鹜文楷 LXGW WenKai400手写/批注CaveatCaveat龙藏体 Long Cang400标签/等宽DM Mono 大写追踪DM Mono霞鹜文楷 LXGW WenKai400中文不要强上等宽混排策略策略 A——扩展 fontFamily在每个 token 的fontFamily末尾追加中文字体。Space Grotesk 展示 token 变为Space Grotesk, Long Cang, Helvetica Neue, Arial, sans-serif正文 token 变为Space Grotesk, LXGW WenKai, Helvetica Neue, Arial, sans-serifCaveat token 变为Caveat, Long Cang, cursive。拉丁字形用原字体渲染CJK 自动回落到中文字体。字体加载link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familySpaceGrotesk:wght400;500;600;700familyCaveat:wght500;600;700familyDMMono:wght400;500familyLongCangdisplayswap relstylesheet link hrefhttps://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-regular/font.css relstylesheet通用 CJK 调整行高正文 1.75–1.85展示 1.15–1.25。字距CJK 一律 0。text-transformCJK 不做大写变换。使用全角标点。「」。展示级标题不加句号中文排版惯例。Pangu 盘古之白中英文之间加空格使用 Claude而非使用Claude。每句话只用一种字体。中文美学说明龙藏体 Long Cang是硬笔手写中文字体——无笔锋的、圆珠笔落在纸上的中文书写是「Space Grotesk Caveat 双角色标题与批注」的最佳中文替身。它在 96–168px 大字号下读作自信的手写田野笔记标题——正是 Pin Paper 想要唤起的情绪。展示标题与 Caveat 等效批注层都用它纯中文里无需叠两套视觉上难区分的手写体Long Cang 一个承担两个角色。霞鹜文楷 LXGW WenKai是楷书衍生、为屏幕阅读设计的正文体保留手写楷书的温度与轻微不规则感同时在 18–22px 正文尺寸下保持易读。它是 Long Cang 手写展示的最佳对应物与系统「田野笔记本个人声部」的调性完全吻合中文正文一律用 LXGW WenKai 400。回形针插图、旋转红印章、奶油卡片 硬偏移阴影——全部原样迁移。Caveat pill 组件手写字形放在圆角 pill 内翻译为「Long Cang 字形的同款 pill」在中文语境下读作可爱的「手数」感。系统最标志性的节奏「印刷标题 印刷正文 手写旁注」在纯中文下变为「Long Cang 标题 LXGW WenKai 正文 略小一号的 Long Cang 旁注」声部差异靠字号、旋转与颜色而非换字体来实现。DM Mono 大写追踪标签不迁移到 CJK中文元数据在 top-chrome 中改用 LXGW WenKai 400 混合大小写、字距 0纯拉丁元数据日期字符串、来源 URL仍用 DM Mono。已知中文缺口Long Cang 与 LXGW WenKai 视觉相邻都带手写楷书 DNA。三声部编辑配对印刷/手写/档案在纯中文中塌缩为两声部手写展示/手写正文/纯拉丁档案。文档明确指出这不是 bug——纯中文 Pin Paper 演示比拉丁版更统一地「被手触碰过」反而更接近系统追求的手账美学。从预览到正式生成的完整工作流结合 preview.md 与 README.md使用该模板的推荐流程是在 selection-index.json 中仅凭元数据mood、tone、best_for、avoid_for、formality、density、scheme筛出候选。对入围候选只读preview.md用它生成三个标题页预览1 个 STYLE_PRESETS 安全选项 至少 1 个 bold 选项 1 个 wildcard。预览必须做成真实的首屏标题页使用用户真实的标题/副标题/语境不得出现preview、generated from、preview.md、template、preset、Option A/B/C、文件名、路径或来源文档标签不得把模板名或 slug 放在幻灯片上chrome 只能使用真实内容演示标题、真实章节名、日期、作者、公司、页码或用户材料中的真实短语。用户选定后读取本 design.md 作为设计配方生成正式整档。正式生成的硬性约束SKILL.md 与 README.md 共同约定输出为单个自包含 HTML 文件包含 viewport-base.css 全文固定 1920×1080 舞台等比缩放保留所选模板的字体、调色板、装饰词汇、间距节奏与组件语法用户真实内容始终是主角生成后必须对渲染截图同时验证文字溢出与面板重叠——scrollHeight通过并不代表网格面板没有相互遮盖。迭代指南新增内容时的十步检查表每个新页面的背景都是paper-surface::before上的纸纹覆盖层不要跳过纹理。每张新卡片都用通用三件套奶油填充、1.5px 墨蓝边框、4px 圆角、硬墨蓝偏移阴影不要自定义。每个新标题都是 Space Grotesk 700 混合大小写 负字距不要换字重。每个新步骤数字或有序列表标记都是 Caveat 手写体 60–70px不要换成数字字体。每个新标签或元数据标签都是 DM Mono 大写、字距 0.12–0.18em。每个新回形针插图都偏离轴线旋转「已固定」感用闭合#pin「已提起」感用开口#pin-open。给卡片加个人声部在底部追加 Caveat 旁注通常配.underlinespan 做手绘强调。给卡片加状态在卡片上部放印章组件保持轻微旋转。打破相邻同色在奶油、paper-2、paper-extra 之间交替填充给一张卡片加轻微旋转。使用墨蓝面变体如章节页文字色翻转为paper纸纹 opacity 降到 0.25 并切screen混合。已知缺口与实现注意事项从源码与设计文档交叉核对以下实现约束需要在生成时特别留意系统依赖deck-stageWeb Component由 deck-stage.js 定义。没有它1920×1080 画布不会缩放幻灯片将以原生像素尺寸渲染。回形针插图是文档顶部的内联 SVG symbol 定义。新页面需要回形针时必须通过use href#pin或use href#pin-open引用且 symbol 定义必须存在于文档中。纸纹覆盖层使用带feTurbulence的>赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Pin Paper 模板实战指南用 frontend-slides 构建黄色便签纸 回形针的田野笔记本式演示Pin Paper 模板实战指南用 frontend slides 构建黄色便签纸 回形针的田野笔记本式演示 本指南围绕 frontend sliAI 技能AI 插件前端frontend-slides Pin Paper 模板全解析黄色便签纸 安全别针插画的田野笔记本式幻灯片设计系统frontend slides Pin Paper 模板全解析黄色便签纸 安全别针插画的田野笔记本式幻灯片设计系统 Pin Paper 是 froAI 技能AI 插件前端Pin Paper 模板设计系统解析用 frontend-slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片Pin Paper 模板设计系统解析用 frontend slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片 导读 Pin AI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Pin Paper 模板深度解析：frontend-slides 固定舞台下的黄色纸面与回形针手账设计系统
AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载本指南以 GitHub 加速计划fr/frontend-slides仓库中 Bold Template Pack 的Pin Paper模板bold-template-pack/templates/pin-and-paper/design.md为蓝本系统拆解这套「野外笔记本 / 手账」风格幻灯片的完整设计规范。你将掌握其色彩 token 体系、三声部字体系统、纸面纹理与回形针插图组件、1920×1080 固定舞台渲染模型以及面向中文内容的字体配对与混排策略可直接用于生成风格统一、经得起审查的 HTML 演示文稿。模板定位一套「笔记本页面」而非「演示工具」Pin Paper 的模板索引条目见 bold-template-pack/selection-index.json给出如下定位元数据Slugpin-and-paperTaglineYellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.Moodcrafted、handmade、warm、thoughtful、literaryToneliterary、intimate、warm、groundedFormalitymediumDensitymediumSchemelightBest for一切需要手工质感、温暖与文学性的内容——质性研究结论qualitative research findings、创始人反思、长篇品牌故事、工作坊复盘由于回形针插图与纸纹纹理的存在它同样适合希望以个性与温度取胜的技术或商业演示。Avoid for需要「数字原生化精致感」或「严谨数据驱动感」的演示——手写体 Caveat 刻意非正式。配套的 preview.md 还给出一个精炼的视觉快照每一页都承载 fractal-noise 纸纹覆盖层手绘安全回形针safety-pinSVG 把卡片「钉」在页面上Caveat 手写字体承载个人批注Space Grotesk 重字重承载印刷感标题DM Mono 承载档案标签。整体美学借用模拟野外报告、复古公告板与科学笔记本日记页——更像是钉在软木板上的实验室日志而非打磨光滑的演示文稿。整套设计系统建立在一个单一材质前提上每一页都是黄色便签纸legal pad paper。这个前提贯穿色彩、纹理、卡片、阴影、旋转角度乃至中文适配的每一个环节是全文理解 Pin Paper 的钥匙。渲染模型Fixed-Stage 固定舞台政策原文档在正文之前用专门的章节声明了Frontend Slides Fixed-Stage Policy这是使用本模板的最高优先级约束当该设计系统被frontend-slides技能使用时最终演示必须生成为1920×1080 固定画布并整体等比缩放到浏览器视口。幻灯片在包括手机在内的所有屏幕上都应保持 16:9 画布允许 letterbox 或 pillarbox但不得为移动端重新排版幻灯片内容。这条政策优先于文档内任何源模板的响应式行为描述。即便源模板原本使用100vw、100vh、vw、vh或clamp()这类视口流式 CSS也必须把这些值当作「设计比例」换算为 1920×1080 舞台坐标而不是作为生成文稿中的实时响应式规则。这条政策在仓库中有完整的实现支撑共三层Web Component 层bold-template-pack/deck-stage.js 定义了deck-stage可复用组件。其默认设计尺寸常量为DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080L53-L54。核心缩放逻辑在_fit()方法L527-L540const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale( s )即取视口宽/高与设计尺寸比例中的较小者用单个transform: scale()整体缩放画布。它还支持noscale属性用于 PPTX 导出场景下按原始尺寸渲染。导航方面组件处理键盘←/→、PgUp/PgDn、Space、Home/End、数字键直达、R复位、触摸左/右三分区 tap zones与鼠标滚轮/点击并派发slidechangeCustomEvent 供宿主监听。幻灯片采用「隐藏而非卸载」策略visibility: hiddenopacity: 0保留非活动页的 iframe、表单等状态。强制基础 CSS 层viewport-base.css 是每份文稿必须整体包含的样式。它锁定html, body的满屏视口、定义.deck-viewport、固定.deck-stage为 1920×1080、用.active/.visible类切换幻灯片的可见性明确禁止用display: none/block切换否则会被后续布局类覆盖导致所有页面同时可见并在media print中按设计尺寸一页一页地排版幻灯片。prefers-reduced-motion降级也已内置。HTML 架构层html-template.md 中的SlidePresentation控制器同样执行Math.min(window.innerWidth / 1920, window.innerHeight / 1080)的等比缩放并通过translate(...) scale(...)居中舞台。deck-stage.js的打印支持尤其值得注意_syncPrintPageRule()L393-L405在head注入page { size: 1920px 1080px; margin: 0; }并设置* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }。这对保证纸面纹理的打印效果是有利的但原文档仍谨慎提醒fractal-noise 纸纹在部分 PDF 导出中可能不渲染使用前必须实测不可想当然认为纹理必然保留。色彩系统黄纸、墨蓝、奶油与朱砂红调色板 Tokendesign.md的 YAML 头部以colors段定义了完整的调色板。需要说明的是文档正文中出现的{colors.paper}、{colors.ink}一类写法是该设计系统的token 引用语法指向 YAML 中定义的对应色值生成 HTML 时应展开为实际十六进制值。完整清单如下Token值角色paper#EFE56A主导表面色饱和镉黄页面「纸」的底色paper-2#F5ECA0更浅淡的黄交替卡片填充色打破相邻同色卡片paper-3#E8D85A更深更饱和的黄.deep页面变体用paper-extra#FBE6A4带奶油味的暖黄最具差异化的卡片变体常配轻微旋转cream#F8F1D6卡片背景柔和米白象牙色让卡片从高饱和黄页面上「退后」kraft#C9A66B暖褐色卡夫纸色token 已定义但在源码中未启用ink#1F3A8A深钴蓝系统的结构身份色所有文字、边框、分隔线、回形针插画与阴影ink-soft#2D4FB8稍浅钴蓝变体可用但少用ink-line#3457C4更亮的钴蓝用于线条装饰少用ink-deep#0E1430带蓝调的近黑色.ink页面变体背景red#C2342B朱砂红仅用于印章组件与否定态 pill绝不作为常规强调色olive#6B7A2E已定义但未启用保留的三级色orange#D8702A已定义但未启用保留的三级色颜色别名段color-aliases把语义角色绑定到具体 tokenc-bg: paper页面底色、c-text: ink正文色、c-card: cream卡片色、c-stamp: red印章色。在实现中可直接用别名书写 CSS 变量保证「改了 token 全局生效」的换肤能力。默认规则默认页面表面paper-surface组件黄纸 双层渐变 纸纹始终如此。默认纸纹paper-grain-overlayopacity 0.35、multiply 混合不可省略。默认标题色黄纸面上用ink墨蓝面.ink变体上用paper。默认正文色黄/奶油面上用ink墨蓝面上用paper强调性引导语可用opacity: 0.85弱化。默认卡片表面cream需要打破相邻同色时改用paper-2或paper-extra。默认边框ink1.5px始终如此。默认阴影5px 6px 0 0 ink硬偏移、零模糊紧凑卡片可用4px 5px 0 0最大引文面板用8px 9px 0 0。默认标签/元数据色ink以 0.65–0.75 透明度用于 chrome 与页脚。默认手写批注色inkCaveat 在黄底上永远是墨蓝。默认印章色red这是红色唯一被例行使用的位置。一条贯穿始终的铁律奶油是卡片填充黄色是页面填充。两者混用会破坏层级——黄卡片放在黄页面上会「消失」奶油卡片放在奶油页面上会让「多层纸」的阅读感崩塌。字体系统印刷、手写、档案的三声部编排三款字体与情感声部系统加载三款网络字体声部分工不重叠且每个声部都承载明确的情感定位Space Grotesk400/500/600/700印刷、官方、排字机——「文档本身的声音」承载所有标题与展示级文字。Caveat500/600/700手写、个人、页边注释——「正在读文档的人的声音」承载旁注、批注、步骤数字、pill 文字、超大序数。Caveat 是系统的「个人声音机制」只要脚本体出现语气就从「官方公告」切换到「页边的手写便条」。DM Mono400/500档案、目录卡、索引——「为文档归档的系统的声音」承载所有元数据标签、top-chrome 品牌锁标、页脚、来源署名、坐标轴标签。完整字号量表Token字号字体字重用途scribble-mega360pxCaveat700装饰性超大引号字形display-mega196pxSpace Grotesk700封面大标题display-section168pxSpace Grotesk700章节页大标题墨蓝面display-stat168pxSpace Grotesk700主打统计数字h1-cta130pxSpace Grotesk700结尾 CTA 标题h1-chart110pxSpace Grotesk700图表页标题h296pxSpace Grotesk700标准议程/数据标题h2-md84pxSpace Grotesk700高密度页内章节标题scribble-lg70pxCaveat700流程步骤数字scribble-md60pxCaveat700CTA 步骤数字、大号脚本强调quote-text50pxSpace Grotesk500引文正文h2-sm50pxSpace Grotesk700公告页标题card-row44pxSpace Grotesk600议程行标签card-h338pxSpace Grotesk700卡片标题scribble-sm38pxCaveat600封面页边手写注、公告卡元数据scribble-xs32pxCaveat600卡片内小号手写批注card-h3-sm28pxSpace Grotesk700子卡标题body22pxSpace Grotesk400标准正文段落body-md21pxSpace Grotesk400表格内正文body-sm19pxSpace Grotesk400高密度卡片内紧凑正文body-list18pxSpace Grotesk400卡片内列表项label-top18pxDM Mono500Top-chrome 品牌锁标与元数据label-meta16pxDM Mono500日期条、署名stamp16pxDM Mono500印章文字label-footer15pxDM Mono500页脚 chrome行内混排的两条关键规则Caveat 数字内嵌smallCaveat 数字内的small元素应切换为 60px 的 Caveat用于单位后缀如M、×、%。手写后缀保留了父数字的「手数」感觉。.underline强调Caveat 手写批注文本中的.underlinespan 使用 2px 实线墨蓝下划线模拟手绘强调。默认规则与签名处理默认字号映射正文body22px高密度页降至body-sm19px、标准卡片标题card-h338px、默认封面display-mega196px、默认章节页display-section168px、默认统计数字display-stat168px配 Caveatsmall单位后缀、默认手写批注scribble-sm38px步骤数字用scribble-lg70px。所有展示元素默认字重 700正文默认 400。拿不准时标准卡片的三层结构是38px Space Grotesk 卡片标题 22px Space Grotesk 正文 底部 32px Caveat 手写便条——印刷标题、印刷正文、手写旁注的三层节奏是系统最易识别的内部模式。「签名处理」段落的约束是非可选的只要对应元素出现就必须遵守每一页都必须有paper-grain-overlay纸纹否则纸张美学崩塌——纸纹属于表面的一部分不是装饰。每张卡片必须是「1.5px 实线墨蓝边框 4px 圆角 硬墨蓝偏移阴影5–8px、零模糊」三件套。缺阴影卡片像没被钉住缺边框卡片像没被印刷。Caveat 在黄/奶油面上永远是墨蓝在墨蓝面上永远是纸黄其他颜色的 Caveat 不存在。回形针插图永远偏离轴线旋转典型区间 -14° 到 20°0° 旋转会破坏手工钉住的美感。印章永远旋转 -4°3px 红色实线边框、红色等宽文字、零圆角印章文字永远是 DM Mono 大写。每个 Space Grotesk 展示级标题使用负字距-0.02em 到 -0.04em越大越紧。手写数字Caveat 60–70px是流程示意图与有序 CTA 列表的唯一步骤编号机制不得替换为 Space Grotesk 数字。top-chrome 锁标必须包含行内#markSVG 字形它是品牌身份的一部分。排版原则系统的节奏是「印刷标题 印刷正文 手写旁注 等宽档案标签」四声部、各归其位。把任何一声部调换如用 Space Grotesk 写旁注、用 Caveat 排正文都会让编辑语气坍塌。系统不使用斜体下划线只出现在 Caveat.underlinespan 上2px 实线墨蓝正文中的粗体很罕见强调要么换更大的重字重 Space Grotesk要么在下方补一条 Caveat 手写批注。组件系统从纸面到回形针design.md的components段定义了系统全部的视觉原子组件。以下逐一说明其构造与用途。纸面表面与纸纹paper-surface默认页面表面的背景是三层叠加的径向渐变radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.18), transparent 60%)左上柔光radial-gradient(140% 100% at 80% 95%, rgba(0,0,0,.05), transparent 55%)右下柔影 基础纸黄。这让页面在「侧光」下呈现真实纸张的起伏。paper-grain-overlay纸纹覆盖层挂在.slide::before伪元素上背景是fractalNoise SVGdata URIfeTurbulencebaseFrequency1.4、octaves2opacity 0.35、mix-blend-mode: multiply。在墨蓝页面上 opacity 降至 0.25 并切换为screen混合——这一切换是硬性要求在深色墨蓝页面上继续用 multiply 会把页面弄得发灰浑浊。纸纹不可省略没有它纸面退化成平涂卡通黄。钉住的卡片pinned-card通用卡片模式奶油填充 1.5px 墨蓝边框 4px 微圆角 5px 6px 0 0 ink硬偏移阴影。这是系统的通用卡片语法每张卡片看起来都像被钉在页面上的一张纸。变体pinned-card-altpaper-2填充用于打断相邻同色卡片。pinned-card-alt2paper-extra填充 轻微旋转0.6°–1.5°营造「歪着钉」的效果。回形针插图pin-illustration手绘安全回形针 SVGcolor: currentColor可随上下文染色宽度 110–640px 随用途变化旋转 -14° 到 20°。两个字形变体闭合回形针#pinviewBox 0 0 360 110右侧螺旋弹簧、轴扫向左侧、左端椭圆形锁扣帽与开口回形针#pin-openviewBox 0 0 360 130锁扣抬起、尖头朝左。回形针同时承担装饰与语义信号双重角色——它出现在卡片顶部、封面装饰、章节页超大强调插图可达 640px 宽、以及钉住议程行。凡回形针出现页面即被解读为「钉着的文档」。手写批注scribbleCaveat 手写体文字块常用色ink行高 1.05可整体旋转 -1.5° 到 -3° 增强手写感可含.underlinespan 做手绘强调。用于页边旁注、「我」的批注、大号脚本强调。印章stamp3px 朱砂红实线边框、红字等宽大写文字DM Mono 16px、字距 0.18em、text-transform: uppercase、padding6px 16px、固定旋转 -4°、零圆角。用于状态标记CONFIDENTIAL、RECEIVED 等。红色在本系统中仅此一处加否定态 pill 两处使用。页面 Chrometop-chrome绝对定位top: 44px; left/right: 64pxDM Mono 18px、字距 0.12em、大写。左侧品牌锁标含行内#markSVG 字形右侧元数据标签对。footer-chrome绝对定位left/right: 64px; bottom: 36pxDM Mono 15px、字距 0.14em、大写、opacity 0.65。典型为「左来源 右页码」对。墨蓝页面上两组 chrome 文字色翻转为paper。表格与 Pilltable-cellpadding18px 22px、borderBottom/borderRight: 1.5px solid rgba(31,58,138,.5)半透明墨蓝分隔线、21px 正文。对比表单元格嵌套在「奶油 墨蓝边框 偏移阴影」的卡片语法内。pill-yes肯定态ink实底、纸黄文字、1.5px 墨蓝边框、圆角 999px、Caveat 28px 手写体。手写字形放在 UI pill 形状内是有意为之的错位。pill-no否定态透明底、红字红框1.5px 红边、DM Mono 16px 大写、字距 0.14em。这是红色在印章之外唯一被例行使用的场合。pill-part部分态paper-2浅黄底 Caveat 墨蓝手写文字。number-scriptCaveat 700、60–70px 手写数字用于流程示意图与有序 CTA 步骤。手写数字传达「手工计数」而非「算法计数」。字号与间距实现注意组件内部使用的{spacing.card-pad-md}等也是 token 引用展开值为card-pad-md: 28px 28px 24px、card-pad-lg: 32px 22px 22px、card-pad-xl: 36px 28px 28px、card-pad-quote: 60px 80px。卡片内部距经验值顶部 28–36px、两侧 22–28px、底部 22–28px。布局系统画布、锚点与 Chrome 框架画布系统目标画布为固定 1920×1080渲染在deck-stage内。所有尺寸像素固定等比缩放交给舞台组件处理。绝大多数页面采用绝对定位 边缘锚定内容区left: 64px; right: 64px; top: 110px; bottom: 100px卡片行用定向网格回形针插图作为覆盖层绝对定位在卡片堆叠之上。内边距与网格间距Anchor值用途pad-edge64px每页左右边缘缩进pad-top110px内容顶部缩进位于 44px top chrome 之下pad-bottom90px内容底部缩进位于 36px footer chrome 之上grid-gap-sm22px流程卡间距grid-gap-md28px公告/统计卡间距grid-gap-lg32px便签卡网格间距密度哲学系统是「中等密度、内容充实」的当 3–6 张卡片以清晰布局钉满页面时最具权威感每张卡片含标题、正文块、往往再加一条手写旁注。一页只有一个居中标题、其余留白会被视为坏掉的设计——系统按「充实的手账本页面」设计而大半空白的笔记本页面读起来像没写完。例外是封面与章节页按惯例更稀疏但用超大展示字号196px与大号回形针插图补偿。密度概念与 SKILL.md 中的「低密度/演讲驱动 vs 高密度/阅读优先」二分法一致——Pin Paper 属于阅读友好、卡片化的中等密度形态。深度与层级唯一的深度语言是硬偏移阴影系统唯一的元素级深度手法是硬墨蓝偏移阴影5px 6px 0 0 ink标准、4px 5px 0 0紧凑、6px 7px 0 0 rgba(239,229,106,.25)图表卡黄色调阴影、8px 9px 0 0最大引文面板。阴影永远实心、永远向右下偏移、永远零模糊。系统内不存在模糊投影。深度的三个来源硬偏移阴影实心墨蓝矩形向右下偏移配合 4px 微圆角与 1.5px 边框定义通用卡片卡片看起来被钉住并略微抬离页面。纸面纹理深度纸纹opacity 0.35、multiply制造微观起伏读作纸张纤维。这是表面级深度而非元素级。回形针作为深度叙事回形针 SVG 定位在卡片顶缘position: absolute; top: -14 ~ -22px; left: 28~90px; transform: rotate(-6° ~ -12°)制造「卡片被钉到页面」的错觉。回形针解释了两件事卡片为什么有阴影卡片为什么有旋转。另外pinned-card-alt2的轻微旋转0.6°–1.5°是刻意的「不完美」必须节制使用每页一到两张而非每张卡片都转。形状与处理4px 微圆角与三档边框圆角系统值用途0px印章、回形针字形、页码4px卡片、面板、表格容器、图片包装——系统的微圆角999px仅限 pill4px 微圆角小到读作「印刷纸张的轻微渗边」而非「圆角 UI」。Pill 是唯一圆形形态且 Pill 内是 Caveat 手写字形这种反常组合。边框权重1.5px 实线ink通用卡片边框用于每张奶油卡片、每个表格容器、每个面板。1.5px 虚线rgba(31,58,138,.45)议程行之间、CTA 步骤之间、卡片内来源注记上沿的虚线分隔营造「坐标纸断线」感。3px 实线red仅用于印章组件。2px 实线ink仅用于 Caveat.underlinespan。页面结构与质感清单综合以上规范一张标准 Pin Paper 页面由这些要素构成paper-surface黄纸底 ::before纸纹覆盖顶部 DM Mono top-chrome品牌锁标 元数据1–6 张奶油卡片含三件套1.5px 墨蓝边框、4px 圆角、硬偏移阴影卡片间用paper-2/paper-extra交替并偶加旋转每张卡片顶缘钉一枚偏离轴线的回形针#pin闭合或#pin-open开口底部 Caveat 手写批注需要状态时加盖 -4° 红色印章页脚为「来源 页码」的 65% 透明度 DM Mono。墨蓝章节页则整体翻转明暗纸纹切到 screen 混合。Dos and Donts实践纪律Do每页都应用纸纹覆盖层纹理是纸张阅读感的基础。每张卡片都用通用三件套1.5px 墨蓝边框 4px 圆角 硬墨蓝偏移阴影。所有印刷标题用 Space Grotesk 700、混合大小写、负字距。所有手写/个人声部用 Caveat——旁注、步骤数字、pill 文字。所有档案标签、chrome 标签、页脚字符串用 DM Mono 大写字距 0.12–0.18em。每个回形针插图都偏离轴线旋转典型 -14° 到 20°。让卡片内容充实3–6 张卡片钉满页面各含标题 正文 旁注。状态标记用旋转印章组件-4° 旋转是它的身份。流程与 CTA 列表里把 Caveat 步骤数字与 Space Grotesk 卡标题成对使用。每页最多一张卡片带轻微旋转0.6°–1.5°制造「歪钉」效果别让每张都转。Dont不要省略纸纹否则表面退化为平涂卡通黄。不要用其他列表符号替换 Caveat 手写数字步骤号永远是手写体。不要在本系统的印章与否定态 pill 之外使用红色。不要以 0° 渲染回形针偏离轴线的倾斜才让它像实物回形针。不要用模糊阴影卡片只用硬墨蓝偏移阴影。不要在黄色页面上用黄卡片卡片永远是奶油色奶油卡与黄页的对比就是「多层纸」的信号。不要用 Caveat 排正文手写体只用于旁注与强调绝不用于段落。不要用 DM Mono 排标题等宽是档案声部不是编辑声部。不要给卡片用大于 4px 的圆角微圆角是印刷纸角信号更大的圆角会塌缩成普通 UI。不要排版近乎空白的页面系统按充实的手账本设计稀疏读起来像坏掉。CJK 与国际化内容中文手账的字体配对Pin Paper 是全模板库中最适合中文的模板黄色便签纸、钴蓝墨、回形针插图与田野笔记本语境都能自然迁移在中文里直接读作一页「笔记本 / 手账」。推荐中文字体配对角色拉丁字体中文字体字重展示/标题Space Grotesk 700Space Grotesk龙藏体 Long Cang400唯一可用字重正文Space Grotesk 400Space Grotesk霞鹜文楷 LXGW WenKai400手写/批注CaveatCaveat龙藏体 Long Cang400标签/等宽DM Mono 大写追踪DM Mono霞鹜文楷 LXGW WenKai400中文不要强上等宽混排策略策略 A——扩展 fontFamily在每个 token 的fontFamily末尾追加中文字体。Space Grotesk 展示 token 变为Space Grotesk, Long Cang, Helvetica Neue, Arial, sans-serif正文 token 变为Space Grotesk, LXGW WenKai, Helvetica Neue, Arial, sans-serifCaveat token 变为Caveat, Long Cang, cursive。拉丁字形用原字体渲染CJK 自动回落到中文字体。字体加载link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familySpaceGrotesk:wght400;500;600;700familyCaveat:wght500;600;700familyDMMono:wght400;500familyLongCangdisplayswap relstylesheet link hrefhttps://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-regular/font.css relstylesheet通用 CJK 调整行高正文 1.75–1.85展示 1.15–1.25。字距CJK 一律 0。text-transformCJK 不做大写变换。使用全角标点。「」。展示级标题不加句号中文排版惯例。Pangu 盘古之白中英文之间加空格使用 Claude而非使用Claude。每句话只用一种字体。中文美学说明龙藏体 Long Cang是硬笔手写中文字体——无笔锋的、圆珠笔落在纸上的中文书写是「Space Grotesk Caveat 双角色标题与批注」的最佳中文替身。它在 96–168px 大字号下读作自信的手写田野笔记标题——正是 Pin Paper 想要唤起的情绪。展示标题与 Caveat 等效批注层都用它纯中文里无需叠两套视觉上难区分的手写体Long Cang 一个承担两个角色。霞鹜文楷 LXGW WenKai是楷书衍生、为屏幕阅读设计的正文体保留手写楷书的温度与轻微不规则感同时在 18–22px 正文尺寸下保持易读。它是 Long Cang 手写展示的最佳对应物与系统「田野笔记本个人声部」的调性完全吻合中文正文一律用 LXGW WenKai 400。回形针插图、旋转红印章、奶油卡片 硬偏移阴影——全部原样迁移。Caveat pill 组件手写字形放在圆角 pill 内翻译为「Long Cang 字形的同款 pill」在中文语境下读作可爱的「手数」感。系统最标志性的节奏「印刷标题 印刷正文 手写旁注」在纯中文下变为「Long Cang 标题 LXGW WenKai 正文 略小一号的 Long Cang 旁注」声部差异靠字号、旋转与颜色而非换字体来实现。DM Mono 大写追踪标签不迁移到 CJK中文元数据在 top-chrome 中改用 LXGW WenKai 400 混合大小写、字距 0纯拉丁元数据日期字符串、来源 URL仍用 DM Mono。已知中文缺口Long Cang 与 LXGW WenKai 视觉相邻都带手写楷书 DNA。三声部编辑配对印刷/手写/档案在纯中文中塌缩为两声部手写展示/手写正文/纯拉丁档案。文档明确指出这不是 bug——纯中文 Pin Paper 演示比拉丁版更统一地「被手触碰过」反而更接近系统追求的手账美学。从预览到正式生成的完整工作流结合 preview.md 与 README.md使用该模板的推荐流程是在 selection-index.json 中仅凭元数据mood、tone、best_for、avoid_for、formality、density、scheme筛出候选。对入围候选只读preview.md用它生成三个标题页预览1 个 STYLE_PRESETS 安全选项 至少 1 个 bold 选项 1 个 wildcard。预览必须做成真实的首屏标题页使用用户真实的标题/副标题/语境不得出现preview、generated from、preview.md、template、preset、Option A/B/C、文件名、路径或来源文档标签不得把模板名或 slug 放在幻灯片上chrome 只能使用真实内容演示标题、真实章节名、日期、作者、公司、页码或用户材料中的真实短语。用户选定后读取本 design.md 作为设计配方生成正式整档。正式生成的硬性约束SKILL.md 与 README.md 共同约定输出为单个自包含 HTML 文件包含 viewport-base.css 全文固定 1920×1080 舞台等比缩放保留所选模板的字体、调色板、装饰词汇、间距节奏与组件语法用户真实内容始终是主角生成后必须对渲染截图同时验证文字溢出与面板重叠——scrollHeight通过并不代表网格面板没有相互遮盖。迭代指南新增内容时的十步检查表每个新页面的背景都是paper-surface::before上的纸纹覆盖层不要跳过纹理。每张新卡片都用通用三件套奶油填充、1.5px 墨蓝边框、4px 圆角、硬墨蓝偏移阴影不要自定义。每个新标题都是 Space Grotesk 700 混合大小写 负字距不要换字重。每个新步骤数字或有序列表标记都是 Caveat 手写体 60–70px不要换成数字字体。每个新标签或元数据标签都是 DM Mono 大写、字距 0.12–0.18em。每个新回形针插图都偏离轴线旋转「已固定」感用闭合#pin「已提起」感用开口#pin-open。给卡片加个人声部在底部追加 Caveat 旁注通常配.underlinespan 做手绘强调。给卡片加状态在卡片上部放印章组件保持轻微旋转。打破相邻同色在奶油、paper-2、paper-extra 之间交替填充给一张卡片加轻微旋转。使用墨蓝面变体如章节页文字色翻转为paper纸纹 opacity 降到 0.25 并切screen混合。已知缺口与实现注意事项从源码与设计文档交叉核对以下实现约束需要在生成时特别留意系统依赖deck-stageWeb Component由 deck-stage.js 定义。没有它1920×1080 画布不会缩放幻灯片将以原生像素尺寸渲染。回形针插图是文档顶部的内联 SVG symbol 定义。新页面需要回形针时必须通过use href#pin或use href#pin-open引用且 symbol 定义必须存在于文档中。纸纹覆盖层使用带feTurbulence的>赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Pin Paper 模板实战指南用 frontend-slides 构建黄色便签纸 回形针的田野笔记本式演示Pin Paper 模板实战指南用 frontend slides 构建黄色便签纸 回形针的田野笔记本式演示 本指南围绕 frontend sliAI 技能AI 插件前端frontend-slides Pin Paper 模板全解析黄色便签纸 安全别针插画的田野笔记本式幻灯片设计系统frontend slides Pin Paper 模板全解析黄色便签纸 安全别针插画的田野笔记本式幻灯片设计系统 Pin Paper 是 froAI 技能AI 插件前端Pin Paper 模板设计系统解析用 frontend-slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片Pin Paper 模板设计系统解析用 frontend slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片 导读 Pin AI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考