AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Mat 是frontend-slides技能所附 Bold Template Packselection-index.json中的 34 款高辨识度设计系统之一一套以深森林绿为主环境、右下角木棕色大气辉光为唯一深度信号、奶油色字体直接浮于画布之上、单一暖橙色作结构标点的材料触感material-tactile演示体系。读完本文你将掌握 Mat 的完整设计令牌色彩/字体/间距/组件、其与 frontend-slides 固定 1920×1080 舞台模型的落地关系、CJK 中文排印适配策略以及一套可直接照搬的Do / Dont式设计纪律足以生成既不像AI 模板味也不像科技 demo的高质感幻灯片。系统定位与设计理念Mat 的设计文档位于 templates/mat/design.md对应的预览卡见 templates/mat/preview.md。预览卡给出的选型元数据定义了它的使用边界TaglineDark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones深灰绿画布、骨白纸面与焦橙色点缀带木质底色的中古现代风。Mood / Tonewarm-modern、considered、tactile、mid-centurywarm、design-led、intentional。FormalitymediumDensitymediumSchememixed暗色为主、偶有奶油浅色变体。Best for设计工作室简介、建筑/室内品牌、陶瓷/手工艺/家具、咨询顾问提案也适合想呈现考究的模拟质感而非数码冷淡感的科技、研究或商业演示。Avoid for需要快速科技能量或机构克制感的场合——其低饱和鼠尾草绿与焦橙配色是刻意的暖而慢。Mat 的全部风格围绕一个环境前提展开深森林绿表面从右下角被一层低强度的木棕色辉光加热。在内容落地之前画面已经像午后光线下的工作台。奶油色文字直接浮在绿色画布上——没有卡片、没有面板、没有外框当系统需要打破绿色时只用唯一的奶油色内嵌块info-card它读起来像一张铺在深色表面上温热的纸。三声部字体栈是刻意设计Bricolage Grotesque700/800 字重负责展示级排版厚重、圆润、带一点机械感适合产品类文案又不显科技初创味DM Sans400负责正文中性且给展示字体留足呼吸感DM Mono400负责所有标签、眉题kicker、元数据和 chrome——一切需要读作标记而非句子的结构性文字。展示级字体在本系统中永远使用混合大小写绝不大写大写的工作只留给等宽标签。调色板刻意收窄。深森林绿是主导表面浅一档的绿色备用作分层区域暖奶油色是深色面上的主文字色、也是浅色页的次级表面色暖橙色是唯一点缀色只以小型内联标记出现眉题文字、列表破折号、统计数字内的em、引言起始引号、图表中唯一高亮的柱条。橙色永远不是背景、也永远不是大标题的颜色它是系统的结构性强调点。深度感极简且氛围化不做堆叠没有投影、没有任何结构元素的圆角唯一的深度信号是每张暗色页::before伪元素上的木棕径向辉光。区域分隔完全依靠低透明度奶油的1px 发丝线——用于 chrome 条、页脚条、统计单元格分隔、对比面板分缝和图表基线。密度哲学中等偏疏medium-sparse。Mat 在留白充足时才显得优雅左右各 5.5vw 的慷慨内边距、一个主要的排版焦点、一块辅助说明文字。把三栏要点塞进一页会破坏系统例外是统计页和对比页那里用克制的三列或两列单元格排列才是正确的。单标题 一段 lead 正文是本系统的正确定价一页填满 80% 文字就是在与设计作对。关键特征Key Characteristics深森林绿画布{colors.bg-dark} 锚定在每张暗色页右下角的暖木棕径向辉光{components.atmospheric-glow}。奶油色文字{colors.ink-cream}直接浮在绿场上周围无卡片、无面板、无外框。Bricolage Grotesque 展示字体永远混合大小写大写只属于 DM Mono 标签。单一点缀色暖橙{colors.accent-orange}只用于小型内联强调眉题、列表标记、内联em、引号字形、一根图柱。奶油色info-card{components.info-card}是标志性的材质对比组件——嵌在深场上的暖纸矩形。列表使用暖橙色 DM Mono 的破折号前缀——绝不用圆点或对勾。1px 低透明度奶油发丝线是唯一的分隔语言无粗边框、无阴影。系统只有一个浅色变体奶油背景 深绿文字用作整套演示中的调性反转永不作默认。与 frontend-slides 固定舞台模型的落地约定design.md 开篇的Frontend Slides Fixed-Stage Policy是比文件后文所有viewport-fluid描述更高优先级的约束当该设计系统被frontend-slides技能使用时最终演示必须生成为固定 1920×1080 舞台并整体等比缩放到浏览器视口。这在手机上保持 16:9 画布可加黑边letterbox / pillarbox但不得为移动端重排幻灯片内容。即使源模板原本使用100vw、100vh、vw、vh或clamp()实现视口流式布局也一律把这些值视为设计比例翻译成 1920×1080 舞台坐标而不是在生成物里保留实时响应式规则。这与 SKILL.md 中Fixed 16:9 Stage (NON-NEGOTIABLE)的五条核心原则一致幻灯片隐藏切换必须使用visibility/opacity/pointer-events而非display:none并必须把 viewport-base.css 全文内联进每个演示。落地时使用 deck-stage.js 或等效的内联舞台缩放器以 1920×1080 渲染每页幻灯片用一次transform: scale()缩放整个舞台。从源码看其核心逻辑在_fit()deck-stage.jss Math.min(vw / 1920, vh / 1080)将缩放系数套到.canvas上noscale属性可让 PPTX 导出器捕获未缩放的真实几何。此外脚本内置键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键跳页、R 复位、移动端三分区点击热区、以及media print下每页一张、无多余 chrome 的打印规则——注意这些通用交互能力会覆盖 Mat 设计文档中描述的浏览器自带按键行为细节详见下文响应式行为。生成后必须用真实渲染截图同时检查文字溢出与面板重叠因为scrollHeight检查无法发现网格面板彼此遮罩的问题。设计文档被当作风格配方而非可直接复制的成品要保留所选模板的字体、调色、装饰词汇、间距节奏与组件语法但用户的实际内容永远是主角见 bold-template-pack/README.md 的 Implementation Contract。色彩系统10 个令牌与默认值Mat 的全部颜色集中在 YAML 前置区的colors与color-aliases两节共 10 个令牌令牌值角色与使用规则{colors.bg-dark}#232E26深森林绿主导环境每页默认背景。绿调足够哑光奶油字在上不产生视觉震动{colors.bg-dark-alt}#2E3D30略浅一档的绿为暗页内分层/内凹表面预留的调性台阶有但少用{colors.bg-cream}#EDE6D0暖奶油浅色页背景 info-card 填充色。是暖纸而非纯白暖度是材质身份的关键{colors.bg-cream-alt}#E4DAC4更深一档奶油浅色页上图占位的次级奶油调{colors.ink-cream}#F0E8D2奶油墨一切深色表面上的主文字色。比背景奶油略暖让标题像刻进绿面而非印上去{colors.ink-cream-2}rgba(240,232,210,0.58)深面上的次级文字muted lead copy{colors.ink-cream-3}rgba(240,232,210,0.3)深面上的三级文字几乎不可见的元数据{colors.ink-dark}#1E2820深墨奶油表面上的主文字色info-card 正文、浅色页。极深的森林绿永不是纯黑{colors.ink-dark-2}rgba(30,40,32,0.6)奶油面上的 muted 次级文字{colors.ink-dark-3}rgba(30,40,32,0.3)奶油面上的三级文字{colors.accent-orange}#C07030暖橙唯一点缀色。焦铜橙呼应木、皮革、氧化金属永不做背景、永不做大标题{colors.wood-glow}#7A4E24木辉色只以 0.28 / 0.14 透明度出现在右下角径向渐变中永不作平铺填充{colors.border-on-dark}rgba(240,232,210,0.12)深面上的发丝线/分隔色{colors.border-on-cream}rgba(30,40,32,0.14)奶油面上的发丝线/分隔色默认值Defaults默认表面背景{colors.bg-dark}森林绿。系统暗色优先奶油页是有意的调性断裂而非例行选择。深面上的默认标题色{colors.ink-cream}。标题永远不用橙色。奶油面上的默认标题色{colors.ink-dark}。深面上的默认正文色{colors.ink-cream-2}58% 奶油即.muted辅助类。奶油面上的默认正文色{colors.ink-dark-2}。默认边框/分隔色深面用{colors.border-on-dark}奶油面用{colors.border-on-cream}一律 1px、永不加粗。默认眉题色{colors.accent-orange}。眉题是系统的眉线标签也是橙色最稳定出现的位点。默认内联强调色{colors.accent-orange}。统计值、引言署名或图表标签内的em一律解析为橙色。暗页默认氛围处理木棕径向辉光始终开启——它是暗色表面本身的一部分。橙色 标点色它告诉视线结构性强调在哪里却从不争夺面积。如果同一页上有两个橙色元素相邻其中一个就是错的。字体排印三声部字体栈与完整字阶系统运行在三款 Google Fonts CJK 回退上Bricolage Grotesque承担全部 display、h1、h2、h3、统计数字和引言文字700–800 字重是其定义性声部DM Sans400承担全部段落、lead、说明和列表项DM Mono400承担标签、眉题、chrome 标记、页脚、列表破折号和图表标签。Noto Sans SC是所有无衬线角色的 CJK 回退Noto Serif SC 在拉丁版本中不使用。两条虽细微但承重强的规则列表项前的破折号渲染为暖橙色的 DM Mono而非正文字体——等宽造型让破折号像刻意标记而不是游离的标点残骸。斜体在本系统不做排版装饰。em被重新定义为橙色内联强调统计值或引言署名里的em切换到{colors.accent-orange}并保持直立font-style: normal。全系统不存在任何斜体字形。字阶表Type Scale令牌字号字体字重用途{typography.display}12vwBricolage Grotesque800封面/开场英雄展示——巨大每行断成 1–2 个词{typography.h1}7vwBricolage Grotesque800章节开篇或收尾标题{typography.h2}4vwBricolage Grotesque700内容页主标题{typography.stat-value}5.5vwBricolage Grotesque800统计单元格内的大号数值{typography.quote-mark}8vwBricolage Grotesque800装饰性起始引号字形暖橙{typography.quote-text}3.4vwBricolage Grotesque600摘引正文{typography.h3}2.4vwBricolage Grotesque600小标题或区域标题{typography.lead}1.5vwDM Sans400引导段或大号列表项{typography.body}1.05vwDM Sans400正文段与 info-card 正文{typography.caption}0.82vwDM Sans400图注、标语、小字{typography.label}0.7vwDM Mono400眉题、chrome 标记、页脚标签、元数据、图表标签排版默认值默认主标题{typography.h2}4vw。默认开场/封面展示封面用{typography.display}12vw章节或收尾时刻用{typography.h1}7vw。默认正文字号{typography.body}1.05vw当段落是大标题下唯一的支撑块时升格为{typography.lead}1.5vw。默认标签/眉题字号{typography.label}0.7vw。展示元素默认字重700h2或 800display、h1、stat-value。正文默认字重400。默认标题字距为负display -0.03em、h1 -0.025em、h2 -0.02em。负字距是必需品。拿不准时默认组合是{typography.h2}主文字时刻 一段{typography.lead}支撑文案——这是系统最可靠的节奏。签名处理Signature Treatments不可省略只要对应元素类型被使用以下处理强制生效所有 display、h1、h2、h3 文字混合大小写绝不全部大写。本系统不存在大写展示字。所有标签、眉题、chrome 文字、页脚、元数据使用DM Mono 大写 0.12em 正字距。本系统不存在句子式的 Mono。眉题永远是暖橙色与所在表面无关。列表永远使用暖橙 DM Mono 破折号前缀绝不用圆点、对勾或数字。统计数字内的em渲染为暖橙并保持直立——它是高亮单位后缀或关键数字的机制。深面标题为奶油、奶油面标题为深墨标题永不为橙色。所有 Bricolage 展示字体使用负字距——默认字距读起来像未处理过负字距才是压缩、高端产品感的来源。排版原则系统节奏是重型混排展示字 轻型混排正文 小型大写等宽标签。三者的任何互换如把展示字大写、或让正文与展示字同字重都会打破编辑级位差。Bricolage 700–800 紧邻 DM Sans 400字重差是刻意且宽阔的——不要用中间字重400/500做展示时刻那读起来像犹豫未决。不适用斜体、不使用下划线正文里唯一的强调机制是橙色em内联唯一的结构性强调是眉题和列表破折号。布局画布、间距刻度与 chrome 框架画布系统源模板中 Mat 是按视口流式viewport-fluid设计的所有尺寸用vw/vh单位容器为100vw × 100vh整副 deck 是一条约等于视口宽的横向 flex 带按满视口宽度左右平移。没有固定画布尺寸。但依 Fixed-Stage Policy这些比例要翻译成 1920×1080 舞台坐标再应用见 SKILL.md 的 Phase 3 说明。间距刻度表令牌值用途{spacing.pad-x}5.5vw水平内边距左右边缘的呼吸空间{spacing.pad-y}5.5vh垂直内边距{spacing.gap-lg}4.5vh主要内容区块之间{spacing.gap-md}2.8vh相关元素之间标题→lead、数值→标签{spacing.gap-sm}1.4vh紧密相关元素之间chrome 条内的标签对水平内边距很慷慨——内容大致占据视口中间 89%。把内容推近边缘会破坏系统的编辑式开阔感。Chrome 框架大多数页型在顶部带一条chrome 条、底部带一条foot 条各自是一个flex space-between行包含两个 DM Mono 标签左侧通常是章节名、右侧是页码或章节序号与正文之间用 1px 发丝线隔开。封面页、引言页和结束页完全抑制这两条带——这些时刻按惯例无 chrome。导航 chrome底部居中固定一行导航圆点5px 圆、低透明度白右下角是页码计数器10px DM Mono、rgba(255,255,255,0.25)格式01 / 09。这些属于演示器 chrome不是设计语言本身——在模板库的所有模板家族中保持一致。注意 design.md 的Known Gaps提到这些硬编码白色值不随奶油浅色页自适应浅色页上白点会显得发虚。深度与层次大气辉光、发丝线与零阴影大气辉光唯一深度机制系统唯一的深度处理是每张暗色页::before上的右下角木棕径向辉光{components.atmospheric-glow}。伪元素占 55% 宽 × 70% 高锚定右下角渐变从rgba(122,78,36,0.28)到rgba(80,50,20,0.14)再到透明。辉光在z-index: 0全部内容在z-index: 1。这就是全部深度——没有投影、没有浮起卡片、没有文字辉光。辉光的透明度不是可配置令牌重新定位必须直接改 CSS 规则。发丝线结构分隔分隔区域只用1px 低透明度奶油发丝线深面为{colors.border-on-dark}12% 不透明度奶油面为{colors.border-on-cream}14% 不透明度。它们出现在 chrome 条之下、foot 条之上、统计单元格之间、对比面板之间并作为图表基线。发丝线永不加粗、永不着色。零阴影任何结构元素上都不存在box-shadow。info-card 平放在深场上、无阴影——它的材质对比来自奶油压绿的色调跃迁而非抬升。给任何组件加阴影都会破坏系统扁平的材质摄影美感。形状与装饰元素圆角值用途0px所有结构元素——info-card、图占位、统计单元格、对比面板、柱条50%仅导航圆点系统对任何组合内容没有圆角卡片、面板、图片框都是严格矩形。唯一圆形是导航 UI 圆点。边框粗细1px 实线发丝——通用结构边框用于 chrome 条、foot 条、统计单元格分隔、对比面板分缝、图表基线与图占位外框。不存在其他边框粗细。2px 边框就破坏了系统3px 边框属于另一套设计家族。装饰元素类型共 8 种Kicker眉题——暖橙色、0.12em 正字距的 DM Mono 大写小标签作为眉线置于标题上方。橙色在系统中出现频率最高的位置通常 0.7vw。Rule规则线——32px 宽 × 1px 高的暖橙水平强调线用作眉题与标题之间的小型下划线式分隔或置于章节编号之下。装饰性非结构性。Bullet em-dash列表破折号——每个列表项的标记用 CSS grid 的标记列grid-template-columns: 1.4em 1fr在 DM Mono 中以暖橙色渲染—前置在列表项前。系统的列表声部。Info-card信息卡——嵌在暗页上的奶油内嵌矩形{components.info-card}背景{colors.bg-cream}、文字{colors.ink-dark}、内边距gap-md × pad-x*0.8、最大宽 28vw承载一个 h3 级标题深墨 一段 body 级正文muted 深墨。全系统最具辨识度的组件——用一块暖纸戳破绿场。无边框、无阴影、无圆角仅靠色调跃迁定义边缘。Stat cell统计单元格——纵向分割的单元格上为{typography.stat-value}大数值下为一行{typography.body}muted 奶油标签。三个一组排列1px 右边框分隔最后一格无右边框。数值支持橙色em高亮单位后缀如4.7k的k。Quote mark引号标记——{typography.quote-mark}8vw尺寸的暖橙色超大起始引号置于引言文字上方作排印装饰。只用于引言页型。Compare divider对比分隔——两侧面板之间的 1px 宽垂直 CSS 列不是边框。刻意低调——对比本身由两个面板的差异完成而非分隔条。Image placeholder图占位——1px 发丝边框、6% 奶油背景、居中 DM Mono 标签的虚空矩形用于真实照片就位前。占位色刻意接近背景——图像区域不该自我宣告。Dos 与 DontsDo应当用深森林绿{colors.bg-dark}作为默认页背景系统暗色优先奶油页是有意断裂。给每张暗色页加木棕大气辉光——它是表面的一部分不是可选的装饰。让 Bricolage Grotesque 展示字混合大小写、DM Mono 标签全大写两者的大小写反差就是系统的排印节奏。标题在深面用奶油{colors.ink-cream}、在奶油面用深墨{colors.ink-dark}标题永不带橙色。用暖橙做眉题色、列表破折号色与内联em色橙色是标点不是表面。需要一块铺在绿场上的暖纸时使用奶油 info-card——这是系统标志性的材质对比动作。保持页面中等偏疏一个主标题 一段支撑文案 可选 3–5 条短列表。每个结构分隔都用 1px 低透明度奶油或深墨发丝线边框永不更粗。每个列表都用 DM Mono 破折号前缀绝不换成圆点、对勾或数字。数值内的em用暖橙渲染且font-style: normal——这就是本系统单位后缀与强调数字的读法。Dont禁止不要大写任何 Bricolage 的 display、h1、h2、h3 文字展示字永远混排。大写专属 DM Mono 标签。不要引入第二种点缀色系统只有一个点缀色暖橙且不能共享该角色。不要给任何组件加投影、模糊阴影或浮起效果深度只有大气辉光。不要给结构元素加圆角卡片、面板、图片框、柱条全是严格矩形。只有导航圆点是圆的。不要用三列要点填满页面也不要纵向堆五个区域Mat 拥挤时读起来是坏的。不要用橙色做背景填充橙色仅限内联。任何位置都不要用衬线字体本系统没有衬线圆润的无衬线黑体承担一切编辑时刻。不要给 info-card 加边框奶油与森林绿的色调跃迁定义了边缘边框会破坏扁平的材质解读。不要使用斜体字形em已被重新定义为橙色内联换色并保持直立。不要把边框加重到 1px 以上2px 边框就破坏了系统的发丝线语言。响应式行为与演示交互源文档记录 Mat 面向流式100vw × 100vh视口用vw/vh驱动所有字号、内边距与间距同一构图在 1280×720、1920×1080、2560×1440 上无需断点即可正确渲染视觉密度恒定。在 frontend-slides 固定舞台模型下这些比例被翻译为 1920×1080 坐标缩放行为统一由舞台缩放器接管。演示者行为源模板记录右/下箭头、Space 前进左/上箭头后退。Home 跳首页End 跳末页。移动端横向触摸滑动前进/后退。鼠标滚轮带 1000ms 防抖防止误跳多页。幻灯片作为单一 flex 条横向平移0s过渡--dur-slide令牌为0s即瞬切导航无动画过渡。实际使用 frontend-slides 技能生成时以上能力由 deck-stage.js 统一提供并略有增强它还支持数字键 1–9 直接跳页0 跳第 10 页、按 R 复位到首页、点击底部覆盖条的 prev/next/reset 按钮、以及移动端三分区点按热区左三分之一后退、右三分之一前进。非活动幻灯片以visibility:hidden opacity:0隐藏而非卸载保留视频、iframe、表单状态。打印行为源模板未声明media print规则产出 PDF 需借助浏览器截图或打印工具多页 PDF 需手动逐页触发。而 frontend-slides 最终生成物内联的 viewport-base.css 自带media print规则每页 1920×1080、break-after: pagedeck-stage.js还会向head注入page { size: 1920px 1080px; margin: 0 }因此浏览器打印 → 另存为 PDF即可得到一页一张的干净 PDF也可用 scripts/export-pdf.sh 截图式导出。CJK 与国际内容中文排印适配策略Mat 的设计文档对中文做了系统性的排印规划核心是Mat 的身份不依赖拉丁字体三件套而依赖环境氛围森林绿 木辉、单点缀色纪律、奶油 info-card 与 1px 发丝线语言——这些在中英文间零修改平移。推荐中文配对表角色中文字体字重理由Display / h1 / h2 / h3 / stat-valueBricolage 角色2.4–12vw思源宋体 Noto Serif SC700Mincho 重字重提供 Bricolage 700–800 的结构质量同时保留温暖材质层级Quote text / quote mark3.4vw / 8vw思源宋体 Noto Serif SC600–700编辑时刻沿用同一声部 MinchoLead / body / captionDM Sans 角色0.82–1.5vw思源宋体 Noto Serif SC400Mincho 正文声部——平静而材质化与木辉暖度匹配Info-card 正文 / 标题思源宋体 Noto Serif SC400 / 600中文下保持暖纸压绿的对比Label / kicker / chrome / footerDM Mono 角色0.7vw思源宋体 Noto Serif SC500 0.05em 字距替代 DM Mono——中文没有可作编辑 chrome 的等宽传统混合内容策略Strategy A整体切换到全 Mincho用 Noto Serif SC 覆盖全部角色替换 Bricolage Grotesque展示、DM Sans正文和 DM Mono标签。全 Mincho 能在视口流式系统上干净地保留全部身份标记规避 Strategy C 的基线抖动。字体栈写法/* Bricolage 角色display, h1, h2, h3, stat-value, quote */ font-family: Bricolage Grotesque, Noto Serif SC, sans-serif; /* DM Sans 角色lead, body, caption */ font-family: DM Sans, Noto Serif SC, sans-serif; /* DM Mono 角色label, kicker, chrome, footer */ font-family: DM Mono, Noto Serif SC, monospace;设计文档强调系统源码当前把Noto Sans SC列为 CJK 回退但为了 Mat 的材质触感层级应换成Noto Serif SC——Mincho 字体的暖意字形比几何感、偏现代临床的 Noto Sans SC 更贴合木辉 / 森林绿氛围。字体加载把现有的 Noto Sans SC link 替换为link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSerifSC:wght400;500;600;700displayswap relstylesheet通用 CJK 调整适用于本系统每一个 CJK 块行高放宽 0.05–0.08CJK 是全宽方块字、视觉重量大于拉丁字为拉丁调校的行高展示 0.88–1.1、正文 1.5–1.65在中文里读起来局促。展示字提到 1.0–1.2正文提到 1.7–1.85。去掉 CJK 标题的负字距Bricolage 的 -0.025em~-0.03em 会让汉字互相碰撞CJK 串设letter-spacing: 0若视觉过挤可微调为0.02em。绝不对 CJK 文字做text-transform: uppercase中文无大小写该属性对汉字无效但会静默破坏混排行中本应大写的 DM Mono 标签部分本系统所有 DM Mono 标签、眉题、chrome 条、页脚都依赖text-transform: uppercase。中文句内使用全角标点。「」『』不用拉丁对应符号一句内混用两套标点读起来是排版错误。CJK 标题句末不加句号。与拉丁规则一致标题式行去终标点正文段落保留。CJK 与拉丁混排边界加 Pangu 空格盘古之白汉字与相邻拉丁词或数字之间应有空格或 0.25em 边距如2026 年 5 月而非2026年5月可手打空格或用pangu.js类自动加空器。一句一字重不要在同一个句子内切换 Noto Serif SC 的 400 / 500 / 700按角色选定字重标题 700、正文 400、标签 500并整段坚持。美学要点中文翻译后的系统身份橙色破折号列表在中文中完全等效破折号字符—在任何文字系统里都是同一个字形暖橙色 Noto Serif SC 500 字重前置在中文列表项前与拉丁文一样读作刻意标记。列表标记列用 Noto Serif SC 500替代 DM Mono。Bricolage 永远混排、绝不大写规则在中文里自动满足中文无大小写但DM Mono 标签 0.12em 正字距大写规则不直接平移——中文标签应是Noto Serif SC 500 0.05em 正字距、不做text-transform靠字重与字距承担 chrome 质感。em橙色内联规则在中文同样可用统计数字内的汉字单位如「万」「亿」放在em里会渲染为暖橙并保持直立如4.7em万/em表示4.7 万 (47k)。已知中文缺口Bricolage Grotesque厚重、圆润、带机械感是拉丁版最具辨识度的排印动作工业产品页声部的来源但中文没有完全对应物Noto Serif SC 700 提供结构质量却比 Bricolage 的圆润现代感更传统 / 文学化。中文渲染会损失一部分工业设计气质由木辉氛围与暖橙点缀补偿更多个性。若工业层级至关重要如面向硬件或材料设计的产品发布 deck可考虑在最宏大的展示时刻封面、hero用思源黑体 Noto Sans SC 800补充——其几何厚重感比 Noto Serif SC 更接近 Bricolage 800但需克制使用以保留其余部分的文学-材质层级。迭代指南新增组件时的九条规则任何新组件以奶油文字直接落在深色表面上除非是 info-card 动作奶油压绿的色调对比否则不外包卡片、面板或外框。任何新标题用 Bricolage Grotesque 混排、700h2或 800display/h1字重展示时刻绝不用 500。任何新结构分隔都是 1px 低透明度奶油或深墨发丝线绝不用更粗或彩色的边框。任何新标签、眉线、tag 或元数据用 DM Mono 大写 0.12em 字距混排 Mono 不存在于本系统。任何新列表用暖橙 DM Mono 破折号前缀标记字体与颜色不可协商。任何新强调时刻高亮数字、强调词、眉题用暖橙不要引入第二个点缀色。任何新暗色页都带::before大气辉光若自定幻灯片布局必须复刻该伪元素否则页面读起来是平的。若页面需要一块暖纸锚点CTA、总结、署名块用 info-card不要发明平行卡片样式。调性断裂页奶油背景每套只用于一次强调不作暗色的例行替代系统读作暗色默认。已知缺口Known Gaps从 design.md 与仓库源码交叉核对Mat 当前存在以下实现边界二次开发前值得知晓--c-bg-dark-alt#2E3D30变量已定义但未被任何选择器实际使用预留给未来的分层区域工作。大气辉光硬编码于右下角::before重新定位需直接改 CSS没有辉光位置或强度的令牌。系统加载四款 Google 字体Bricolage Grotesque、DM Sans、DM Mono、Noto Sans SC——渲染一致性依赖这些字体成功加载CJK 回退栈覆盖中文但日文、韩文字形会回退到系统衬线/无衬线。幻灯片过渡时长设为0s瞬切--ease-slide与--dur-slide令牌存在但无效需要动画过渡时须手动提高时长值。垂直柱状图使用内联styleheight: XX%声明每根柱高没有数据绑定层柱高须手工计算。.split-center图片区域固定 52vh 高高竖幅图片可能需要布局级覆盖。导航圆点与页码计数器使用硬编码rgba(255,255,255,...)不随奶油浅色页变体自适应——浅色页上白点发虚。结语把 Mat 当作风格配方而非成品拷贝Mat 的 design.md 是设计系统参考文档而不是可复制的 demo 内容见 bold-template-pack/README.md。正确用法是在 Phase 2 用 preview.md 生成真实标题页预选用户选定后再读取完整 design.md把它的字体、调色、装饰词汇、间距节奏与组件语法翻译到固定 1920×1080 舞台中配合 viewport-base.css 与 deck-stage.js 落地并始终以用户真实内容为主角。把握住深绿 木辉 奶油字 单一橙点 1px 发丝线这五个身份标记以及展示字混排、标签大写、橙色只做标点这三条纪律Mat 就能在任何语言、任何内容上保持它工业设计作品集 × 精品产品发布的独有声部。赞分享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 的 Mat 模板设计系统深林绿底色 × 木褐辉光 × 奶油纸材质的材料触感演示体系frontend slides 的 Mat 模板设计系统深林绿底色 × 木褐辉光 × 奶油纸材质的材料触感演示体系 导读 本文深入解析 frontend slAI 技能AI 插件前端frontend-slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则frontend slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则 Mat 是 frontend slides 项目 BolAI 技能AI 插件前端OpenDesign 设计系统解析Starbucks 风格的暖奶油画布与四层绿色体系实战指南OpenDesign 设计系统解析Starbucks 风格的暖奶油画布与四层绿色体系实战指南 导读 本文以 OpenDesign 仓库内 design sysAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考