Pink Script（After Hours）夜间高定时装风幻灯片设计系统解析：从预览卡到完整 Deck 的落地指南

AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载导读Pink ScriptAfter Hours是 frontend-slides 项目中 Bold Template Pack 内置的一套夜间高定时装nocturnal couture editorial幻灯片设计系统核心美学是热粉洋红墨水 暗暖黑纸张 胶片颗粒 发丝内框。本文以该模板的 preview.md 为骨架结合其 design.md 与仓库内舞台实现源码完整梳理它的选择元数据、视觉组成、配色与字体 Token、CJK 适配方案以及如何生成一张真实可用的 1920×1080 标题预览卡并最终扩展成完整 Deck。读完后你将能直接按这套规范生成符合模板语法的幻灯片并理解其背后的固定舞台渲染机制。模板定位什么场合该用 Pink ScriptPink Script 在 selection-index.json 中登记的核心选择元数据预览卡首段如下元数据值Slugpink-scriptTaglineBlack canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury黑画布、热粉强调色、珍珠奶油纸张、衬线标题夜间编辑风奢侈感Moodnocturnal, moody, intentional, luxe, expressiveToneliterary, sultry, considered, magazineFormalitymedium-highDensitylowSchemedarkBest for一切需要夜间、刻意、带点奢侈感的内容——时装品牌 Deck、创作者个人品牌、after-hours / 夜生活 / 烈酒品牌发布、奢侈品产品揭晓、编辑特辑。也可以作为技术主题演讲tech keynote、研究综述research synthesis或商业 Pitch 的意外之选用磁吸般的自信气场收尾。Avoid for日间商务职场daytime corporate-professional和传统 B2B 场景——暗画布 热粉强调在这种语境下过于风格化、过于表现主义。按 bold-template-pack/README.md 的工作流Agent 应先在 Phase 2风格探索阶段读取 selection-index 并按mood/tone/best_for/avoid_for/formality/density/scheme圈定候选再只读候选模板的preview.md生成标题预览只有用户最终选定该模板后才读取完整的design.md用于整份 Deck 生成。这就是典型的渐进式披露progressive disclosure流程。视觉快照一个由三层大气结构撑起的编辑系统preview.md 的 Visual Snapshot 描述了一个几乎单凭氛围立住的系统深暖黑表面左上角被一个略暖的 #1A1218 椭圆照亮向右下角渐隐到近黑。偏心的光源读起来就像摄影棚柔光箱打在杂志跨页的一角。在此基础上设计文档明确如果没有发光渐变、胶片颗粒和内框这个系统就会塌缩成普通的深色扁平 UI。三个签名组件缺一不可径向渐变表面{components.slide-surface}radial-gradient(ellipse 90% 70% at 30% 30%, #1A1218 0%, #0A0709 55%, #050306 100%)——左上暖光、右下近黑的偏心光斑是系统的身份标识。胶片颗粒叠层{components.film-grain}通过.slide::before伪元素实现数据 URI 内嵌feTurbulence噪声 SVGbaseFrequency0.9, octaves2opacity: 0.08mix-blend-mode: screen——几乎不可见但让画面从数字扁平变成胶片摄影颗粒感。1px 发丝内框{components.hairline-frame}.slide::after绝对定位inset: 36px1px solid rgba(245, 237, 241, 0.14)——每一页的杂志版心边框无条件存在。这三层共同构成系统的纵深。除此之外任何结构性元素都不使用 box-shadow唯一被允许的阴影是 hero script 标题上的粉色光晕 text-shadow0 0 80px rgba(237,61,140,0.18)超大数字用0 0 120px rgba(237,61,140,0.22)模拟霓虹饱和字体在相纸上的光晕渗漏。纵深是大气与摄影式的不是结构式的。配色系统单色强调纪律palette 是整套系统最严格的约束。design.md 明确定义了九个颜色 TokenToken值用途ink-deep#060507基础表面色带微弱暖调的近黑ink-violet#0F0D11备用深色当前版式基本不使用paper-blush#F5EDF1珍珠奶油白暖白带粉底主要编辑文字色、QR 块底色pink#ED3D8C热粉洋红系统唯一彩色强调pink-light#FF66A8备用当前版式不使用pink-deep#B81D67备用当前版式不使用line-pinkrgba(237, 61, 140, 0.32)表格行分隔线、图表轴线mute-paperrgba(245, 237, 241, 0.55)弱化正文与元数据hair-paperrgba(245, 237, 241, 0.14)内框、弱化 pill 边框、TOC 行分隔线design.md 还提供了 color-aliases 映射c-bg → ink-deep、c-fg → paper-blush、c-accent → pink、c-line → line-pink便于在 CSS 变量层复用。使用纪律不可违背pink 是唯一在用的彩色pink-light / pink-deep / ink-violet 均为预留严禁引入第二种彩色强调——单色化粉色就是 Pink Script 的身份。默认主角hero script标题色是 pink需要读作墨水而非高亮的编辑标题用 paper-blush。kicker 眉题永远 pinkrunner / footer / 元数据用 mute-paper。行分隔默认 pink 45% 透明度的pink-rule弱化分隔用hair-paper。不要把粉洋红文字放在 paper-blush 表面上——明度反转会像排版事故。在 paper-blush 衬线标题内用em把某个词切成 pinkfont-style保持直体——这是系统唯一的标题强调机制。字体系统三声部编辑组合Pink Script 的字体堆栈是一个刻意的三声部编辑组合design.md Typography 章节字体字重角色DM Serif Display400唯一字重所有编辑时刻script 标题、衬线头条、数字、引用。从 32px 一路自由放大到 600pxInter300所有正文段落、lead、描述、说明——超细几何无衬线是平静的散文声部JetBrains Mono400所有标签、kicker、页码、轴标签、runner、footer——一律大写 至少 0.08em 正字距核心内联规则衬线标题里的em字切粉直体统计数字里的sup单位%、×、M渲染成约 36px paper-blush。script 与 serif 的判定标准是颜色DM Serif Display 用 pink 就是script用 paper-blush 就是serif headline。没有第二套展示字面。所有 JetBrains Mono 文本大写、正字距 ≥0.08em大多数 chrome 用 0.12–0.18em封面 preamble 用 0.42em 超宽字距。DM Serif Display 标题一律补padding-bottom: .1em最大号 script 用.12em来补偿衬线下伸笔画的视觉基线。不使用斜体模板未加载 italicem被重新定义为粉色色值开关不使用下划线不用粗体字体本身也没有。最可靠的节奏模式22px pink kicker 132–156px DM Serif Display 标题需要强调时在其中一个词外包em 22–24px Inter 300 的 mute-paper 正文段落。三元素节奏是系统最稳的组合。密度哲学稀疏到中等sparse-medium with one hero moment——一张幻灯片通常由 1 个超大 script 撑场占画布 60–70%其余是慷慨的负空间点缀 2–4 个小编辑碎片runner、kicker、段落、footer。唯一的例外是统计页5 行 stat 并排、对比矩阵页全网格表格和系统页多面板——这些是参考型页面天然更密。布局固定 1920×1080 舞台与页面 chromePink Script 的所有尺寸都是像素固定的 1920×1080 画布渲染在deck-stageweb 组件内由舞台统一缩放前端幻灯片技能的Fixed 16:9 Stage是最高优先级策略见 SKILL.md 的 Fixed Stage Rules。大多数幻灯片用绝对定位锚定边缘标准内容区为inset: 140px 60px 140px 60px。锚点参数表锚点值用途edge-x60px左右内容边距edge-top-chrome60px顶部 runner chrome 内边距edge-bottom-chrome60px底部 footer chrome 内边距content-top140px正文内容顶部内边距runner 之下content-bottom140px正文内容底部内边距footer 之上inner-frame-inset36px发丝内框的边距每页必备的 chrome顶部 runnertop 60px / 左右 60px左侧品牌名永远 pink 右侧章节标签mute-paperJetBrains Mono 大写 24px、0.14em 字距。底部 footerbottom 60px / 左右 60px左侧来源或保密字符串右侧页码标记如em03/em / 09——当前页码用 pink 的em基数是 paper-blush。发丝内框inset: 36px无条件存在于每一页。形状与装饰词汇零圆角、1px 边框纪律design.md 的 Shapes and Treatment 章节对系统的装饰语言做了严格限定border-radius 一律 0px——卡片、面板、表格单元格、QR 块、runner/footer 文字全部是直角矩形pill虽然叫 pill但在这里是 0 圆角矩形。唯一的圆形元素是图表拐点上的 SVGcircle标记。边框只允许 1px1px paper-blush 14%内框、1px pinkpill 描边、1px line-pink 32%表格/图表轴、1px dashed pink 18%图表网格线。全系统不存在 2px 或更粗的边框。常用装饰元素清单全部来自 design.mdHero script title220–600px 粉色 DM Serif Display 光晕任何使用它的幻灯片的核心瞬间。Pink kicker标题上方的 22px 粉色 JetBrains Mono 眉题。Callout rail1px pink 左边框 右对齐内容padding-left: 24px锚定图表旁/章节解释旁的垂直引用容器。Stat row240px 粉色衬线数字 mono 标签 Inter 描述行间用 1px paper 发丝分隔。Pills 三态outline粉描边粉字默认/ solid粉底深墨字强调/ dim弱化。QR tile180×180 paper-blush 方块 12px 白 padding SVG QR是系统里唯一的大块亮面元素注意design.md 明确标注它是手写rect图案不编码真实可扫描码真实 QR 需外部生成。Chart line主系列 3px 实线粉次系列 2px paper-blush 虚线拐点带 9px 粉色实心圆 18px 50% 透明空心环 垂直虚线落轴。Matrix table4 列网格首列 32px paper-blush 衬线标签表头行粉色our column用rgba(237,61,140,0.08)洗色标记。Preview 生成从预览卡到真实第一页preview.md 的 Preview Rules 章节是标题预览生成的最高优先级规范必须逐条遵守只构建一张 1920×1080 标题幻灯片放在 fixed-stage 模型内。保留配色、字体角色、表面节奏与装饰词汇——即上文描述的整个视觉系统。使用用户真实的标题/副标题/语境禁止复制 demo 幻灯片内容渲染结果必须是真实的 Deck 第一页而不是模板选择卡。严禁在幻灯片上放置任何内部流程文案不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。严禁把模板名或 slug 放在幻灯片本身上——只能出现在对话消息里。严禁把用户需求备注如想要的感觉、受众、内部标签写进幻灯片除非用户明确要求这些词出现在 Deck 中。可见 chrome 只能用真实 Deck 内容Deck 标题、真实章节标题、日期、作者、公司、页码或用户素材中的真实短语。不要读取template.html来生成预览不要读取其他模板的design.md。用户选定该模板后生成完整 Deck 前必须读取完整的 design.md。这些规则与 SKILL.md 中 Phase 2 的Preview authenticity rules (NON-NEGOTIABLE)完全一致也写进了 bold-template-pack/README.md 的 Implementation Contract预览必须是用户 Deck 的真实标题页preview.md只是轻量样式卡design.md才是设计系统参照style recipe不是可照抄的内容。CJK / 中文字幕适配preview.md 的 International / CJK Preview Note 给出三个预览阶段要点CJK 字距保持 0、放宽行高、对 CJK 文本禁止 uppercase 变换选定模板后再用 design.md 的完整 CJK 章节做精确字体配对。design.md 的中文方案非常完整推荐配对表角色拉丁字体推荐中文字重备注Script / displayDM Serif Display思源宋体 Noto Serif SC900深色底上保有视觉体量的重衬线默认选择Display 备用纤巧时刻DM Serif Display站酷小薇体 ZCOOL XiaoWei400仅限 400px 超大字号过细不适合常规标题Body对应 Inter 300InterNoto Serif SC400衬线正文保持编辑语域Label / runnerJetBrains MonoNoto Sans SC400CJK 不做等宽强约束混合策略扩展每个 token 的fontFamily让 CJK 回退例如 DM Serif Display token 变成DM Serif Display, Noto Serif SC, serif关键点——中文走 display 角色时必须显式设font-weight: 900因为 DM Serif Display 的单字重靠高对比衬线在视觉上偏重对应 CJK 的重感在 Noto Serif SC 的 900 而不是 400。字体加载示例见 design.md 的 Google Fontslink片段同时加载 DM Serif Display、Inter、JetBrains Mono、Noto Serif SC、Noto Sans SC、ZCOOL XiaoWei。通用 CJK 调整正文行高 1.75–1.85、display 行高 1.15–1.25CJK 字距 0不做大写变换使用全角标点展示标题不加句号遵守盘古之白CJK 与拉丁之间留空格一句话一种字体。design.md 明确径向渐变表面、胶片颗粒、发丝内框、粉色光晕、kicker、callout rail、stat-row、matrix-cell 全部脚本无关对中文原样保留但纯拉丁 chrome 串品牌名、01 / 09页码继续用 JetBrains Mono中文 chrome 文本改用 Noto Sans SC 400、24px、字距归零、无大写。源码级落地固定舞台与输出架构预览与最终 Deck 都依赖 frontend-slides 的固定 16:9 舞台机制deck-stage.js可复用deck-stageweb 组件处理 (a) 演讲者备注postMessage、(b) 键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键、R 复位、(c) 底部计数覆盖层、(d)自动缩放——内部画布默认 1920×1080用transform: scale()整体缩放适配视口源码_fit()Math.min(vw/1920, vh/1080)支持 letterbox(e)media print每页一页的 PDF 输出(f)noscale属性供 PPTX 导出器以 1:1 原始尺寸渲染。非活动幻灯片用visibility/opacity/pointer-events隐藏而非卸载状态得以保留组件还派发slidechangeCustomEventdetail.index/total/reason。Pink Script 的 design.md 明确要求源模板中任何vw、vh、clamp()值都只当作设计比例翻译进 1920×1080 坐标而不是保留为实时响应式规则。viewport-base.css每份演示都必须完整包含的基础样式——锁定视口、.deck-stage固定 1920×1080、.slide切换用visibility/opacity/pointer-events禁用display:none/block切换避免布局类覆盖导致所有页同时可见、打印样式每页一张 1920×1080与prefers-reduced-motion支持。Pink Script 的film-grain.slide::before和hairline-frame.slide::after正是挂在这个结构上的。验证要求生成后必须截图核对文本溢出与面板重叠两件事——design.md 的 Known Gaps 明确指出scrollHeight检查不够网格面板可能相互遮挡。Dos and Donts 速查必须做Do每页都应用径向渐变表面 胶片颗粒 1px paper-blush 内框三者都不可省略。hero script 标题设 pink 光晕 text-shadow80–120px 模糊。所有编辑/展示时刻只用 DM Serif Display不引入第二展示字面。正文永远 Inter 300所有标签、页码、runner、footer 用 JetBrains Mono 大写 ≥0.08em 字距。用em在 paper-blush 标题内切一个粉字每个主标题上方放 pink kicker。用 pink 左栏 callout 锚定图表旁的统计/引用/章节解释。DM Serif Display 标题补padding-bottom: .1em页码用em03/em / 09模式。禁止做Dont不要省略胶片颗粒或内框不要在任何面板/卡片上用 box-shadow纵深只能大气式。不要引入第二种彩色强调不要把粉字放在 paper-blush 上。不要把正文排进 DM Serif Display也不要把展示标题排进 Inter。不要圆角任何元素不要用模糊阴影不要用斜体em是色值开关。不要用多个等权重区域填满一页——系统优雅的前提是一个 hero 时刻主导。已知缺口Known Gapsdesign.md 末尾如实列出了系统边界引用时需知晓依赖deck-stage组件没有它 1920×1080 画布不会缩放幻灯片会按原生像素尺寸渲染。胶片颗粒的feTurbulence数据 URI 在部分老 Safari 或 PDF 导出中表现不一致。DM Serif Display 只有 400 字重系统没有粗细梯度层次全靠字号。粉色光晕是固定 80/120px 模糊值极小/极大视口下会过强或偏弱。pink-light、pink-deep、ink-violet为预留 token当前版式未启用。QR tile 的手写 SVG 不编码真实二维码图表拐点是手算的polyline坐标无数据绑定层封面第二行padding-left: 180px悬挂缩进是硬编码不泛化到任意词长runner/footer 依赖white-space: nowrap超长品牌名可能溢出 60px 边距矩阵 our column 洗色是硬编码rgba(237,61,140,0.08)。迭代指南把预览卡扩展成完整 Deck若用户选定 Pink Script 生成全量 Deckdesign.md 的 Iteration Guide 给出了 10 条逐页迭代规则每页背景必须带发光渐变 颗粒 内框新 hero script 一律 pink 光晕需墨水感的编辑标题用 paper-blush em粉字正文永远 Inter 300标签/runner/footer 用 JetBrains Mono 大写kicker 永远 pinkpill 一律 0 圆角矩形outline/solid/dim 三态表格用 1px pink 32% 行分隔、无竖边框图表主系列 3px 粉实线 次系列 2px paper-blush 虚线不引入第三色runner 左侧品牌字永远 pink、右侧 meta 永远 mute-paper。严格遵守这 10 条即可保证整份 Deck 的编辑语域不塌缩——这正是既有预览卡的详实实操又有源码级规范支撑的完整落地路径。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐frontend-slides 模板详解Pink ScriptAfter Hours夜间高级编辑风幻灯片的预览卡与设计系统frontend slides 模板详解Pink ScriptAfter Hours夜间高级编辑风幻灯片的预览卡与设计系统 导读 本文聚焦 frontenAI 技能AI 插件前端Frontend Slides 设计系统解析Pink ScriptAfter Hours夜间高定时装编辑风模板的配色、字体与组件规范Frontend Slides 设计系统解析Pink ScriptAfter Hours夜间高定时装编辑风模板的配色、字体与组件规范 导读 Pink ScAI 技能AI 插件前端frontend-slides 模板深度解析Pink ScriptAfter Hours夜行高定编辑系设计系统实战指南frontend slides 模板深度解析Pink ScriptAfter Hours夜行高定编辑系设计系统实战指南 导读 本文以 pink scripAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考