AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载本篇技术指南基于 bold-template-pack/templates/studio/design.md完整剖析 frontend-slides 技能库中 Studio 模板这一 类型即图形type-as-graphic-mass设计系统的完整规范。你将掌握 Studio 的二进制双表面配色、单一字重的大字排版体系、固定 1920×1080 舞台的实现约束以及中文CJK场景下的字体配对与适配策略足以按此设计配方独立复刻一套高对比度的工作室风格幻灯片。模板定位Bold Template Pack 中的 StudioStudio 是 frontend-slides 技能所携带的 Bold Template Pack 中的 34 个高表现力设计模板之一。在 bold-template-pack/selection-index.json 中它的元数据是SlugstudioTaglineBlack canvas with electric-yellow type; high-voltage design studio aesthetic黑底 电光黄字高压设计工作室美学Moodelectric, bold, graphic, design-led, high-contrastTonegraphic, loud, modern, intentionalFormalitymediumDensitymediumSchemedarkBest for一切需要电光感 设计主导的场合——工作室资历介绍、创意代理 Pitch、品牌展示、美术指导评审、时尚/运动鞋品牌作品。同时也适合希望让演示本身成为品牌宣言的科技、研究或商务场合Avoid for需要安静、机构化语境的场合——黑黄双色是模板库中最响亮的配色按 bold-template-pack/README.md 的工作流模板选择阶段只读取preview.md生成三张风格预览只有用户最终选定 Studio 后才读取完整的design.md作为最终生成的设计配方。预览阶段有一条硬性约束幻灯片上绝不能出现preview、模板名、slug、文件路径等任何内部工作流文本必须呈现真实的首张幻灯片效果详见 bold-template-pack/templates/studio/preview.md。Frontend Slides Fixed-Stage Policy不可违背的舞台约束Studio 的design.md在正文开始前首先声明了一条优先级最高的Fixed-Stage Policy当该设计系统被 frontend-slides 技能使用时最终演示必须渲染为固定 1920×1080 舞台并整体等比缩放到浏览器视口。这条策略的要点演示在包括手机在内的所有屏幕上保持 16:9 画布允许信箱letterbox或柱箱pillarbox但绝不允许为移动端重排幻灯片内容该策略优先级高于源模板的任何响应式行为——即使后续章节提到原模板是视口流式布局也只应视为源历史而非 frontend-slides 的目标生成模型即使源模板使用100vw、100vh、vw、vh或clamp()编写也要把这些值当作设计比例换算成 1920×1080 舞台坐标而不是保留为最终的实时响应式规则最终输出应使用 bold-template-pack/deck-stage.js 或等价的舞台缩放器每张幻灯片按 1920×1080 渲染用一次transform整体缩放并对渲染截图同时检查文本溢出与面板重叠。这条约束与技能层的要求完全一致。SKILL.md 将Fixed 16:9 Stage列为不可协商的第五条核心原则并要求生成时完整引入 viewport-base.css其中.deck-stage被固定为1920px × 1080px.slide以绝对定位堆叠且通过visibility/opacity/pointer-events控制显隐。与之呼应的是 deck-stage.js 的实现其_fit()方法计算Math.min(vw / 1920, vh / 1080)并写入transform: scale(s)同时提供noscale属性PPTX 导出器用它让 DOM 捕获到未经缩放的几何尺寸与media print的一页一页打印支持。设计哲学极端减法与 类型即图形Studio 的完整概念是type-as-graphic-mass——当代设计工作室演示的视觉语域Pentagram、Anti、Order、Boring Studios 事务所美学。其前提是极端到严苛的减法单一字体Barlow、单一字重900、严格大写、超大字号大到文字不再是文字、而是变成图形形状。标题本身就是设计——没有任何装饰元素、强调色或花饰。如果把一张 Studio 幻灯片里其他元素全部删掉只留标题它依然读作 Studio。Key Characteristics核心特征二元调色板近黑底 酸性黄字或酸性黄底 近黑字没有第三种颜色Barlow 900 大写承载所有字号的所有标题Barlow 400/500 用于正文IBM Plex Mono 只用于元数据 chrome标题极巨大——封面 display 12vw1920px 视口下约 230px、陈述 7.5vw、章节标题 4.8vw所有显示级字体紧负字距-0.01 至 -0.03em大写不可协商完全扁平无投影、无圆角、无渐变除黄/黑二元外无任何强调色1px 发丝线用于 chrome2px用于统计卡顶边、图表基线、对比面板分隔线封面页的三列 Mono 元数据页脚是系统签名布局列表项目用**表面强调色的破折号em-dash**标记正文与 chrome 使用同一颜色的不透明度变体黄 58%/32%、近黑 62%/35%——系统从不使用独立的灰色。密度哲学低而刻意Studio 天生稀疏。陈述页就是一句标题占据大部分画布上下面留空章节页是一个小的 Mono 标签加标题封面是一张图片占位图背后压着一个 12vw 的词。边距比 Signal 更紧5vw/5vh 对比 7.5vw/5.5vh因为字体本身几乎顶到边缘——标题就是空间填充物而非靠边距撑出来的内容。一张坏掉的 Studio 幻灯片就是包含多个相互竞争的元素或塞满整画布的正文段落。正确的语域是一件巨大的事只说一次900 字重大写。颜色系统二元加一的完整调色板design.md的 YAML front-matter 定义了完整调色板。下面按颜色语义整理Token值角色near-black#1C1C1C深色表面系统之墨。温暖的黑略偏棕而非冷中性near-black-alt#242422略微抬升的近黑用于图片占位与次级深色表面acid-yellow#F5D200浅色表面同时是深底上的主文字色。镉黄饱和微暖acid-yellow-alt#F0CC00更冷一点的黄用于浅底上的相邻表面区分text-on-dark-2rgba(245,210,0,0.58)深底次级文字——黄 58% 不透明度text-on-dark-3rgba(245,210,0,0.32)深底三级文字——黄 32%text-on-light-2rgba(28,28,28,0.62)黄底次级文字——近黑 62%text-on-light-3rgba(28,28,28,0.35)黄底三级文字——近黑 35%border-dark#2E2E2C深表面的发丝边框色从近黑轻微抬升以读作线条而非空洞border-lightrgba(28,28,28,0.18)黄表面的发丝边框低不透明近黑YAML 中同时提供了color-aliases语义别名层c-bg、c-fg、c-accent、c-bg-alt、c-bg-light等把表面与前景角色解耦——例如c-bg指向 near-black、c-fg指向 acid-yellow、c-bg-light指向 acid-yellow。实现时用 CSS 自定义属性如--c-bg-alt、--c-bg-light-alt暴露。默认值Defaults默认表面在近黑与酸性黄之间跨页交替两种表面同等地位拿不准时封面/引言/陈述页用近黑章节页与结束页用酸性黄深底主文字acid-yellow黄底主文字near-black深底次级文字text-on-dark-2黄 58%黄底次级text-on-light-2近黑 62%三级文字Mono 说明文字、图表坐标轴标签、统计备注表面强调色的 tier-3 不透明度深底边框border-dark黄底边框border-light标题永远使用表面强调色——黄底黑、深底黄绝不用其他颜色图表强调填充表面强调色高亮柱就是主文字色默认柱是 tier-3 变暗。没有语义化颜色角色。黄色不代表警告近黑不代表主要。它们只是两种表面选择它们是节奏问题——交替以改变视觉律动或连续数张深色营造安静段落再用一张黄做标点时刻。字体排印Barlow 内容 IBM Plex Mono 元数据字体族功能二元分离Studio 严格使用两个字体族、角色完全分离Barlow当代 grotesque宽字重轴。承载所有字号的所有标题display 至 h3、所有数字stat-value、所有引言、所有正文与导语。系统使用 900 字重用于全部显示级与标题 tokenh3 用 700lead 与项目符号用 500body 与 caption 用 400IBM Plex Mono精密等宽字体。只用于元数据标签——chrome 栏、页码、章节号、三列封面 lockup、统计备注、cover-meta 内的 Mono 说明。Mono 是系统的规格表之声。情感上的分割是二元的Barlow 是内容响亮、大写、主导IBM Plex Mono 是规格表元数据细小、精确、从属。没有第三个字体面。Barlow 900 在 display 字号下会停止表现为字体、开始表现为图形形状——字重如此之重以致字腔字母内部的孔洞成为结构性负空间标题在被人读出是文字之前先被读作黑色或黄色的几何块。这就是系统的身份。完整字阶Type ScaleToken字号字体族字重用途display12vwBarlow900封面 hero最大字号h17.5vwBarlow900章节标题、整页陈述标题stat-value5.5vwBarlow900统计卡内的数字h24.8vwBarlow900主要幻灯片标题quote-text3.8vwBarlow900拉引文正文大写、无引号h32.8vwBarlow700副标题、面板标题lead1.6vwBarlow500导语段、引言句body1.15vwBarlow400默认正文、项目符号正文caption0.85vwBarlow400说明文字、来源标注label0.72vwIBM Plex Mono500Mono chrome、页码、章节号、统计备注、cover-meta字号默认值主要章节标题 h24.8vw、章节/陈述 h17.5vw、封面 hero display12vw、正文 body1.15vw、导语 lead1.6vw、一切 chrome 标签与计数 label0.72vw、统计数字 stat-value5.5vw 表面强调色。拿不准时选更大的——4.8vw 的 h2 读作 Studio用 2.8vw 的 h3 当主标题就变成了另一个系统。签名处理Signature Treatments只要对应元素类型被使用以下处理不可省略所有 display、h1、h2、h3、quote-text、stat-value必须大写。句首大写形式的 display 文字在系统中不存在连 2.8vw/700 字重的 h3 也大写所有 display 标题字重必须 900——display、h1、h2、quote-text、stat-value 全部 900无例外。在 display 字号用 800 或 700 会破坏类型即图形效果所有 display 元素必须负字距——display –0.02em、h1 –0.02em、h2 –0.01em、stat-value –0.03em。没有负字距的 Barlow 900 看起来未处理负字距正是压缩密度的来源所有 chrome、标签、计数、元数据一律 IBM Plex Mono、0.06em 字距无例外标题永远以表面强调色渲染——深底黄、黄底黑从不用减弱不透明度也从不换色正文列表用表面强调色的破折号前缀从不用圆点、不用其他字形破折号颜色随表面翻转统计卡顶部用2px非 1px强调色规则深底一侧可用减弱强调色。2px 比 chrome 发丝线重因为统计是锚点三列 cover-meta lockup 用 IBM Plex Mono列 1 左对齐、列 2 居中、列 3 右对齐——Boring Studios 签名列结构不可协商。排印原则字面阶梯固定Barlow 承担除元数据外的一切Mono 只在元数据内。Mono 越出元数据角色、或 Barlow 进入元数据角色都会破坏排印分离字重阶梯固定900 / 700 / 500 / 400不使用 600、800 等中间字重。四层字重就是排版的全部表情域行高在显示级收紧display 0.9、h1 0.92正文放开到 1.5–1.6字距在显示级统一为负-0.01 至 -0.03em、正文为 0、Mono 标签为正 0.06em不使用斜体、不使用下划线。系统没有字体样式变化强调完全靠字重对比900 标题对 400 正文实现。布局系统Canvas、间距、Chrome 与封面 LockupCanvas 系统Studio 目标为100vw × 100vh全视口。每张.slideflex 填满视口幻灯片在水平条带中并排、导航时左右平移。所有尺寸用视口相对单位vw/vh实现流式缩放。在 frontend-slides 的固定舞台模型下这些值被换算为 1920×1080 的舞台坐标。间距与间隔刻度SpacingToken值用途pad-x5vw水平幻灯片内边距pad-y5vh垂直幻灯片内边距gap-lg3.5vh主要内容区之间gap-md2vh相关元素之间gap-sm1vh紧耦合元素之间陈述页与章节页会把底部内边距放大到 1.5× pad-y让标题沉到画布偏下、上方留出刻意空白。封面页外层内边距为 0因为图片区填满整个画布。Chrome 框架标准幻灯片带顶部 chrome 栏与底部 foot 栏Chrome bar——左侧 Mono 标签、右侧 Mono 计数、下方 1px 发丝线。padding-bottom 为gap-smmargin-bottom 为gap-mdFoot bar——镜像 chrome bar左侧 Mono 标签、右侧 Mono 计数、上方 1px 发丝线。封面、章节、陈述、引言与结束页省略标准 chrome——它们要么用 cover-meta lockup封面要么什么 chrome 都没有章节/陈述/引言/结束。封面 Lockup系统签名封面页是系统的签名布局一张图片占位填满整个画布、垫在所有元素之下一条 display 级标题通常一个 12vw 的词作为cover-type坐在上方区域底部三列 Mono 元数据页脚——列 1 左对齐studio × client 与日期、列 2 居中演示标题、列 3 右对齐工作室名以一条 25% 不透明度的黄色 1px 发丝线与图片区隔开。深度与层级彻底扁平Studio天生扁平无投影、无圆角卡片浮起、无渐变每个元素与表面齐平。可感知的深度来自三个方面表面对比——两种表面同框出现时对比面板、图片占位发丝线分隔——1px 与 2px 边框划分区域重型字体——900 字重的 display 标题创造出在平面表面上读作前景的视觉质量。系统刻意严苛如果一个布局需要浮起效果才能读清楚那这个布局对 Studio 而言就是错的——应当减少内容或重组让平面 重型字体 发丝线足以提供层级。形状与处理直角、2px 锚线与装饰词汇圆角值用途0系统内的一切元素50%圆形仅导航圆点与页码 UI不属于幻灯片内容Studio 没有任何圆角 chrome。卡片、面板、统计块、图表框、图片占位、对比面板——全部是锐角严格矩形。唯一圆形是导航圆点与底层页码 UI它们是 deck-stage 的 chrome不是幻灯片内容。边框粗细1px solidborder-dark近黑底或border-light黄底——通用发丝线用于 chrome 栏、foot 栏、cover-meta 分隔线2px solid表面强调色深底黄、黄底黑——更重的规则用于统计卡顶边、对比面板垂直分隔线、图表基线、图表柱轨左侧规则无虚线边框——系统内所有边框均为实线。装饰元素类型Decorative Element TypesDisplay 标题即图形质量4.8vw 及以上的 Barlow 900 以黑色或黄色几何块呈现是每张幻灯片的主要装饰元素没有额外花饰发丝线表面边框色的 1px 实线用于分隔 chrome 与正文、正文与 foot、以及对比面板内部——系统唯一的结构性分隔符重规则表面强调色或减弱强调色的 2px 实线用于统计卡顶边、图表基线、对比面板垂直分隔——比 chrome 发丝线重读作锚点而非分隔符统计卡带 2px 顶边的平面区域含 5.5vw Barlow 900 统计数字表面强调色、1.15vw Barlow 500 统计标签、可选 0.85vw IBM Plex Mono tier-3 统计备注。右、下内边距左内边距为 0规则与卡片左缘齐平Cover-meta lockup封面底部三列 Mono 页脚——列 1 第 1 行 studio × client 名、第 2 行日期列 2 居中演示标题列 3 右对齐工作室名。以 25% 不透明度黄色 1px 发丝线与 cover-type 分隔图片占位near-black-alt深底或带发丝边框的acid-yellow-alt黄底的平面矩形内含居中的 tier-3 不透明度 IBM Plex Mono 文字用于未填充的图片槽位图表柱减弱文字色的平面竖矩形默认或表面强调色高亮。无圆角端、无渐变。hi变体用全强调色及其数值标签 900 字重图表基线减弱表面强调色的 2px 实线深底为黄 tier-3、黄底为 border-light横贯图表容器全宽、位于柱顶之下破折号项目符号每个列表项以表面强调色—前缀、0.5em 右间距颜色随表面翻转。Dos 与 Donts 速查Do做所有字号的所有标题一律 Barlow 900 大写负字距至少 -0.01em——类型即图形效果是系统身份自由交替近黑与酸性黄表面两者地位同等明暗交替的律动就是系统的节奏标题一律表面强调色——深底黄、黄底黑永不减弱、永不用第三种色IBM Plex Mono 只用于元数据chrome 标签、页码、章节号、cover-meta lockup、统计备注、Mono 说明——Mono 是规格表之声永远不用它写内容cover-meta 页脚用三列 Mono lockup左/中/右——系统签名图案用不透明度减弱次级文字深底 0.58、黄底 0.62而不是单独的灰色——系统没有灰只有黄与黑的不透明度变体统计卡顶边、图表基线、对比面板分隔线用 2px 规则——2px 区分锚点元素与 chrome 发丝线项目符号用表面强调色破折号——从不圆点、从不圆圈幻灯片边距收紧5vw/5vh让 display 字体贴近边缘——Studio 依赖字体填满画布宽松边距会破坏比例效果陈述页与章节页刻意稀疏——一句巨大标题面对空表面才是正确语域。Dont不不要把标题小写——每个 Barlow 900 元素都必须大写无例外不要在 display 字号用 800 或 700——display 永远 900不要给调色板加第三种颜色——系统是二元加不透明度变体加红、蓝或任何强调色都破坏二元逻辑不要圆化任何角落——处处严格矩形只有导航圆点是圆形不要加投影或渐变——系统极度扁平深度来自对比与字重、而非浮起不要用 Barlow 做 chrome 元数据——Mono 是元数据之声chrome 用 Barlow 会读作内容而非规格不要用 Mono 做标题或正文——Mono 只活在元数据角色不要用斜体、下划线或颜色变体强调——唯一强调机制是字重对比900 vs 400不要引入虚线边框——系统内每条线都是实线典型幻灯片的内容不要超过约 60% 填充——空表面是结构性的Studio 一旦拥挤就坏掉。响应式、演示行为与打印缩放行为Studio 面向 1920×1080 视口全程使用视口相对单位因此在 1280×720 与 2560×1440 之间无需断点即可流畅缩放唯一固定像素尺寸是 deck chrome 圆点与页码display 标题12vw → 1920px 视口约 230px、1280px 约 154px正文1.15vw → 1920px 约 22px、1280px 约 15px内边距pad-x 5vw → 1920px 约 96px、1280px 约 64px。1px 与 2px 边框权重是固定像素、不随缩放变化在大视口下边框显得成比例地更细。演示行为Presenter Behavior源模板为 JS 驱动幻灯片在水平条带中并排导航时左右平移当前幻灯片带is-active触发任何[data-anim]元素的动画。动画比 Signal 更锐利更短0.5s 对比 0.65s切页 0.75s 对比 0.85s——按源码注释是事务所的紧迫感而非编辑式的优雅。动画关键帧包括 fade-up、fade-in、reveal-right、reveal-left、scale-in配合 0–6 的data-delay错峰。在 frontend-slides 的固定舞台实现中这一交互由 deck-stage.js 承担该 Web Component 支持 ←/→、PgUp/PgDn、Space、Home/End、数字键跳页、按 R 复位到首页在移动端提供三分区点按导航左 1/3 后退、右 1/3 前进底部居中显示页码浮层空闲 1.8 秒自动淡出并通过slidechangeCustomEvent 广播当前页码给宿主应用与演讲者备注渲染器。导航圆点与页码固定在视口底部刻意做成小而低调的白底深色 UI。打印行为Print Behaviordesign.md明确指出源模板没有内置打印样式表——水平条带布局需要解绕才能静态导出。这正是 frontend-slides 固定舞台模型要解决的问题deck-stage.js 的media print规则把每一张幻灯片按设计尺寸单独排成一页并注入page { size: 1920px 1080px; margin: 0 }配合break-after: page实现浏览器打印 → 存为 PDF即可得到每页一张的干净 PDFviewport-base.css 也提供了等效的打印基线。导出可直接用 scripts/export-pdf.sh无输出路径时保存到 HTML 同目录。CJK 与国际内容中文场景的完整适配Studio 支持中文内容但其单字体、单字重、大写、负字距公式在 CJK 上需要系统性调整。推荐中文配对角色拉丁默认字体中文字体字重说明Display / h1 / h2 / quote-text / stat-valueBarlow 900 大写思源宋体 / Noto Serif SC700Studio 的类型即图形效果依赖单一字体最大字重。NSC 700 是 CDN 上能在 12vw / 7.5vw / 4.8vw 显示字号下保持视觉质量的宋体最重档h3Barlow 700 大写思源宋体 / Noto Serif SC700副标题字重匹配Lead / Body / CaptionBarlow 500 / 400思源宋体 / Noto Serif SC400极简编辑式正文——NSC 400 在稀疏布局下读来干净Metadata / chrome / label / stat-noteIBM Plex Mono 500IBM Plex Mono Noto Sans Mono CJK 回退400–500中文 chrome 很少见多数元数据是拉丁日期、计数、工作室名如出现则用 Noto Sans Mono CJK SC混排策略Strategy A——整元素替换字体本模板采用Strategy A渲染中文的元素整体用 CJK 字体替换拉丁字体。理由Studio 的身份是类型即图形而 Barlow 900不覆盖 CJK 字形在同一行内用字体栈回退混排 Barlow 拉丁与 NSC 中文字形在 display 字号会产生度量错配破坏单一字体、单一字重语域。因此凡渲染中文内容的元素应整体替换font-familyfont-family: Noto Serif SC, Barlow, sans-serif; /* display / headlines — CJK first */ font-family: Noto Serif SC, Barlow, sans-serif; /* body — CJK first */ font-family: IBM Plex Mono, Noto Sans Mono CJK SC, monospace; /* mono — Latin first, CJK only if needed */注意语域转换全中文演示中大写身份会消失中文无大小写Studio 的气质会从工业事务所宣言转向编辑式中文报纸标题。这是真实的语气转变——中文 Studio 读起来严肃、严苛但不再像 Pentagram/Anti。接受这一取舍或将中文限定在特定幻灯片保持封面与章节分隔页为拉丁 Barlow。字体加载在head中加入Google Fonts 提供 Noto Serif SC 与 Noto Sans SClink relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyBarlow:wght400;500;700;900familyIBMPlexMono:wght400;500familyNotoSerifSC:wght400;500;700;900familyNotoSansSC:wght400;500;700displayswap relstylesheet原 design.md 的 Barlow 字体栈已内置 Noto Sans SC 作为 CJK 回退这里将标题与正文升级为Noto Serif SC因为宋体 900 字重能承载与 Barlow 900 相当的图形质量而 Noto Sans SC 同字重读起来过于顺滑/圆润、失去图形块特征。纯正文演示仍可保留 Noto Sans SC 的干净无衬线观感。通用 CJK 调整清单对任何渲染中文的元素应用通常通过:lang(zh)或span langzh限定作用域行高正文 1.75–1.85Studio 拉丁默认 1.5–1.6 对汉字笔画太紧display 1.15–1.25比拉丁 0.9–0.95 更松因为 12vw 的中文字形需要垂直呼吸字距中文为 0。Studio 显示级的负字距-0.01 至 -0.03em对中文是错的——汉字字形自带间距负字距在 display 字号会让字形相接或重叠text-transform中文不做大写。Studio 显示级 token 的text-transform: uppercase对汉字是无操作但要确保没有父级规则产生意外行为全角标点用。而非半角,.:;!?——全角形式自带周边空白并对齐 CJK em-boxdisplay 标题不加句号中文标题省略句末。——Studio 拉丁标题从不带句号此规则延伸到 CJK盘古之白Pangu spacing在中文与相邻拉丁/数字之间插入细空格。写使用 Claude而非使用Claude2024 年而非2024年。Studio 的 Mono 元数据常与中文标签并排此处盘古之白不可或缺一句话一个字体同一行内不要混排 NSC 与 Noto Sans SC。衬线/无衬线切换应发生在元素边界。中文审美备注Studio 的二元配色酸性黄对近黑、近黑对酸性黄在 CJK 下完全保留——色彩决策不变。NSC 700 以酸性黄渲染、置于 12vw 近黑底上视觉冲击与 Barlow 900 同职等效饱和黄对暖黑表面的组合让汉字读出同样的海报式权威。类型即图形效果在 CJK 下确实改变但以一种有趣的方式改变Barlow 900 大写块读作西方标牌/工业宣言NSC 700 的 display 字号则读作中文木刻或活字海报——同样严苛、同样图形化却是另一套文化语域。对中文受众这读作权威、设计良好对混合受众则把感知语气稍微推向编辑出版物而非设计事务所。可直接翻译的构件破折号项目符号保持表面强调色—三列 Mono cover-meta lockup中文或拉丁任写IBM Plex Mono 都能干净渲染含中文时回退 Noto Sans Mono CJK SC统计卡5.5vw 数字可以是中文数词三百万用 NSC 700、或阿拉伯数字3M用 Barlow2px 顶边与 Mono 统计备注不受影响。已知 CJK 缺口大写 负字距 900 字重这一定义系统的公式无法在 CJK 复现中文只能得到 700 字重NSC 最重档、无大小写变换、零字距。纯中文模式下系统约损失 30% 的拉丁个性IBM Plex Mono 完整功能集仅限拉丁若元数据出现中文字符Studio 中罕见回退到 Noto Sans Mono CJK SC 或系统等宽比例可能与周围 Plex Mono 不一致NSC 900理论上更接近 Barlow 900在 Google Fonts 上存在但在大字号下字腔会开始闭合——12vw display 下 NSC 900 可能把部分字符渲染成近实心块。NSC 700 是推荐上限极端展示时刻逐个测试 900明暗表面交替的节奏不受 CJK 影响但中文读者可能按不同于西方读者的文化阅读惯例来感知这种节奏。迭代指南向系统安全地新增内容design.md给出的 10 条迭代规则可作为生成整套演示时的逐条自检清单任何新标题都用 Barlow 900 大写 负字距。三者字重、大小写、字距缺一字体就失去图形质量任何新幻灯片都从上一张交替表面——通常不要连续超过 2–3 张深色才插一张黄反之亦然。节奏就是设计任何新 chrome、元数据、标签或计数用 IBM Plex Mono。Mono 出现在任何其他角色都会破坏元数据分离任何新颜色都会给二元调色板引入第三种选择——不要。坚持黄与近黑用不透明度变体做减弱任何新列表用表面强调色破折号标记。圆点项目符号破坏系统统计卡用 2px 顶边 5.5vw 900 字重数字。更小的数字、句首大写形式的统计、或圆角统计块都破坏模式封面页底部用三列 Mono lockup。不要省略它——这是系统最易识别的图案章节、陈述、引言与结束页无 chrome标准页带 chrome 与 foot。不要混用——无 chrome 的引言正确带 chrome 的引言读作另一个系统新布局应追求单一主导元素标题 最少支撑元素。多元素布局超过 4–5 个不同区域会挤坏设计2px 规则只预留给锚点统计顶边、基线、对比分隔线。chrome 与结构分隔符保持 1px。已知缺口与实现注意事项design.md明确记录的已知缺口对实际生成有直接指导意义字体依赖Barlow 与 IBM Plex Mono 都从 Google Fonts 加载。加载失败时回退为 Noto Sans SC / system-uiBarlow与 monospacePlex Mono系统会在没有 Barlow 900 时显著退化因为类型即图形依赖特定字形中文回退字重Barlow 栈内置的 Noto Sans SC 只发货 400/500/700/900——h3700与 lead500中文内容渲染干净中间字重会回退到最近档保留 token 用途有限--c-bg-alt、--c-bg-light-alt与若干减弱色 token 已定义但用得少——它们是相邻表面区分的储备导航 JS 内联源模板的幻灯片导航 JS 内嵌负责平移变换与is-active类管理在 frontend-slides 输出中由 deck-stage.js 等价的舞台组件承担封面图片占位使用硬编码的IMAGE PLACEHOLDER标签与平面 near-black-alt 填充真正插入图片需把占位 div 替换为匹配父画布的 background-image 元素窄视口边界5vw/5vh 的内边距刻意紧凑在小视口下标题可能逼近边缘系统针对 1280px 及以上的 16:9 显示调优对比面板不对称左面板仅右边框 2px右面板无左边框——这是刻意的不对称若扩展到三栏对比值得注意。结语从设计配方到可生成模板Studio 的design.md是一份设计系统参考design recipe而非待复制的内容。结合 SKILL.md 与 bold-template-pack/README.md 的实现契约最终输出是一个自包含的单 HTML 文件完整包含 viewport-base.css以固定 1920×1080 舞台整体缩放到视口设计配方中的vw/vh值作为设计比例换算为舞台坐标保留选中模板的字体、调色板、装饰词汇、间距节奏与组件语法用户的真实内容始终优先模板风格只是塑造呈现、而非覆盖信息与结构生成后必须同时验证文本溢出与面板重叠。掌握 Studio 的全部要素——二元双表面、Barlow 900 大写负字距、IBM Plex Mono 元数据、2px 锚线、三列 cover lockup 与 CJK 策略——你就能把它从一份设计文档扩展成一套完整、可验证、风格统一的全演示系统。赞分享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 Studio 模板预览实战用 preview.md 设计规则构建 type-as-graphic-mass 风格标题页frontend slides Studio 模板预览实战用 preview.md 设计规则构建 type as graphic mass 风格标题页 导读AI 技能AI 插件前端AssetRipper 入门与实战Unity 游戏资源解析、导出与源码构建指南AssetRipper 入门与实战Unity 游戏资源解析、导出与源码构建指南 AssetRipper 是一款面向 Unity 游戏文件的分析与导出工具可帮AI 技能AI 插件前端Retro Windows 模板详解用 frontend-slides 打造 Windows 95/98 桌面操作系统风格的演示文稿Retro Windows 模板详解用 frontend slides 打造 Windows 95/98 桌面操作系统风格的演示文稿 导读 本文围绕 fronAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考