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 技能内 bold-template-pack 中的Mat 模板预览卡preview.md展开讲解它在先出 3 张标题页预览、用户选定后再生成完整 deck的工作流中扮演的角色、它定义的视觉配方深森林绿画布、木棕色辉光、奶油色文字、单一暖橙强调以及预览生成时必须遵守的硬性规则。读完本文你将掌握 Mat 模板的预览 Ingredients、Selection Metadata、CJK 处理要点与完整生成衔接流程并理解背后 1920×1080 固定舞台fixed-stage模型如何由 deck-stage.js 落地实现。一、preview.md 在模板库中的定位轻量样式卡不是完整设计文档在 frontend-slides 技能的分层文档体系中每个 bold 模板都配有一对文件预览卡与完整设计文档。Mat 模板的这两个文件位于预览卡标题页预览专用preview.md完整设计文档选定后生成最终 deck 用design.md预览卡开头就明确划定了使用边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本小文件仅用于标题页预览最终 deck 生成时请阅读下方列出的完整设计文档。这一渐进式披露progressive disclosure设计与技能工作流的执行顺序严格对应。根据 SKILL.md 的 Phase 2 规则Agent 先读取精简索引 selection-index.json仅凭mood、tone、best_for、avoid_for、formality、density、scheme等元数据圈定候选模板对短名单模板只读各自的preview.md用于生成 3 张标题页风格预览用户选定某一模板后进入 Phase 3 时才读取该模板完整的design.md生成整份 deck。preview.md末尾的Preview Rules也明确禁止在此阶段阅读template.html或其它模板的design.md这正是渐进式披露的约束体现。二、Selection Metadata模板的快速画像Mat 在 selection-index.json 中登记的核心元数据preview.md内亦有同源摘要字段值说明slugmat模板唯一标识用于索引与路径寻址taglineDark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones一句可视摘要深鼠尾草色画布 骨白色纸感 焦橙强调带木质底色的 mid-century 现代风moodwarm-modern, considered, tactile, mid-century情绪标签温暖现代、克制考量、触感、世纪中期tonewarm, design-led, intentional, considered语调温暖、设计主导、有意图、克制formalitymedium正式度中等densitymedium信息密度中等schememixed色彩方案混合深色为主、奶油色反转变体best_for设计工作室作品集、建筑/室内品牌、陶瓷/手工艺/家具、咨询 deck也适合希望走有考量感的模拟质感而非数字冷酷感的技术、研究或商务 deck适用场景avoid_for需要快速科技能量或机构性克制感的场景——灰绿焦橙的静默暖色盘天生偏暖、偏慢应避免场景这段元数据的作用不只是给人看它让 Agent 在 Phase 2 中凭元数据即可完成初筛无需打开完整文档即可判断 Mat 是否符合用户的场合与气质。best_for中的场景列举属于软信号而非严格的行业过滤条件。三、Visual Snapshot一个环境前提撑起整套系统preview.md的 Visual Snapshot 用两段话浓缩了 Mat 的完整视觉哲学理解它就能理解之后所有 Ingredients 与 Rules 的来源一套温暖、材质触感型的演示系统灵感来自高端产品落地页。深森林绿是主导环境每张深色幻灯片右下角被一层低强度的木棕色氛围辉光加温。奶油色字体直接浮在画布上暖橙色是唯一强调色。字体栈用 Bricolage Grotesque重型、圆润的 grotesque作 display、DM Sans 作正文、DM Mono 作标签——读感是工业设计作品集 × 精品产品发布绝不是科技 demo。Mat 是一个 material-tactile 演示系统围绕单一环境前提构建一个深森林绿表面右下角被一层低强度木棕色辉光加温。氛围本身承担了绝大部分视觉工作——任何内容落地之前幻灯片已经像午后阳光下的工作台。奶油色文字直接浮在绿色画布上没有卡片、没有面板、没有边框。系统需要打破绿色时只用一块奶油色内嵌盒info-card读感就像铺在深色表面上的一张温暖纸张。氛围先行、内容后置是这套系统的核心差异点。与之配套的完整设计文档 design.md 中这一环境前提被进一步物化为三个不可省略的视觉锚点环境辉光每张深色幻灯片都经由.slide.dark::before伪元素挂载一个右下角木棕色径向辉光椭圆尺寸约 55% 宽 × 70% 高渐变从rgba(122, 78, 36, 0.28)经rgba(80, 50, 20, 0.14)过渡到透明单一强调色纪律暖橙只出现在 kicker、项目符号、行内em、引言引号、图表中唯一高亮柱上永远不做背景、不做大标题色奶油信息卡info-card是签名级材质对比组件——一块铺在深绿场上的暖纸矩形无边框、无阴影、无圆角仅靠奶油与森林绿之间的色调跳变定义边缘。四、Preview Ingredients调色板、字体栈与五个 Signature Movespreview.md的 Preview Ingredients 给出了预览阶段必须保真的最小视觉集合4.1 调色板Palette令牌色值角色bg-dark#232E26深森林绿默认主导表面bg-dark-alt#2E3D30略浅的绿色深色页内分层/内凹表面用使用克制bg-cream#EDE6D0暖奶油浅色页背景与 info-card 填充bg-cream-alt#E4DAC4更深的奶油浅色页图片占位底色ink-cream#F0E8D2深色表面上的主文字色ink-dark#1E2820奶油表面上的主文字色近黑的深森林绿绝非纯黑accent-orange#C07030唯一强调色铜焦橙wood-glow#7A4E24木棕色辉光色仅用于右下角渐变0.28/0.14 透明度绝不作为平铺填充design.md 中还有配套的半透明次级令牌ink-cream-258%、ink-cream-330%、ink-dark-260%、ink-dark-330%、border-on-dark奶油 12%、border-on-cream深墨 14%分别服务于深色/奶油表面的次级文字与 1px 细线分隔。4.2 字体栈Typography预览卡列出三套字体Bricolage Grotesquedisplay 系、DM Sans正文系、DM Mono标签系并补充{typography.label.fontFamily}指向 DM Mono。design.md 给出了逐角色的完整字阶令牌字号字重用途display12vw800封面/开场巨型 display一行 1–2 词断行h17vw800章节开场/收束标题h24vw700内容页主标题默认主标题stat-value5.5vw800stat 格内大数字quote-mark8vw800暖橙超大引号装饰字形quote-text3.4vw600引文正文h32.4vw600小标题/区域标题lead1.5vw400DM Sans大段导语/大号列表项body1.05vw400DM Sans正文与 info-card 正文caption0.82vw400DM Sans图片说明、tagline、小字label0.7vw400DM Monokicker、chrome 标签、页脚、元数据、图表标签display 系全部使用负字距display -0.03em、h1 -0.025em、h2 -0.02em这是产生压缩、精品感的关键label 系则用 0.12em 正字距 uppercase。4.3 五个 Signature Moves预览必须保真深森林绿画布 右下角木棕色径向辉光{colors.bg-dark}打底{components.atmospheric-glow}经.slide.dark::before挂在每张深色页上位置固定为右下角椭圆55% × 70%辉光属非可选non-optional——没有它深色表面会显得平。奶油文字无框漂浮{colors.ink-cream}直接落在绿色场地上外层不包卡片、面板或边框。Bricolage display 永远 mixed case任何 display/h1/h2/h3 绝不转大写大写只留给 DM Mono 标签。单一暖橙强调{colors.accent-orange}只用于小尺寸行内强调——kicker、项目符号、行内em、引号字形、单根图表柱。橙色是标点不是表面。奶油信息卡{components.info-card}是签名级材质对比组件——深绿场上内嵌的暖纸矩形承载标题 正文块无边框无阴影。五、International / CJK Preview Note中文预览的注意事项预览卡明确要求若预览使用中文或其它 CJK 文本CJK 字距保持 0放宽行高line-height避免对 CJK 文本应用 uppercase 变换。并指引选定后使用完整design.md的 CJK 章节获取精确的字体配对与脚本级调整。design.md 的相关章节给出了这份精确字体配对的完整答案——即Strategy A全角色切换到思源宋体 Noto Serif SC/* Bricolage roles (display, h1, h2, h3, stat-value, quote) */ font-family: Bricolage Grotesque, Noto Serif SC, sans-serif; /* DM Sans roles (lead, body, caption) */ font-family: DM Sans, Noto Serif SC, sans-serif; /* DM Mono roles (label, kicker, chrome, footer) */ font-family: DM Mono, Noto Serif SC, monospace;配套的通用 CJK 调整还包括行高在 0.05–0.08 区间放宽display 至 1.0–1.2、body 至 1.7–1.85、CJK 标题去掉负字距置 0必要时 0.02em、绝不text-transform: uppercase、中文句内使用全角标点。「」『』、CJK 标题行尾不加句号、CJK 与拉丁/数字之间施加盘古之白Pangu spacing如2026 年 5 月、同一句内只用单一字重。加载字体时将原 Noto Sans SC 链接替换为 Noto Serif SClink relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSerifSC:wght400;500;600;700displayswap relstylesheetdesign.md 也坦诚记录了 CJK 的已知差距Bricolage 的重型圆润 grotesque 工业感在中文中无精确对应Noto Serif SC 700 提供结构重量但气质偏文雅若工业感是关键如硬件产品发布 deck可在最大 display 时刻封面/hero补充思源黑体 Noto Sans SC 800。六、Preview Rules生成预览页时必须遵守的硬性约束preview.md的 Preview Rules 是整套规范的执行清单预览生成务必逐条满足只构建一张 1920×1080 的标题页且必须在 fixed-stage 模型内。保留调色板、字体角色、表面节奏与装饰词汇即 Preview Ingredients 所述内容。使用用户真实的标题/副标题/上下文不得照抄 demo 内容。渲染结果必须像真实的第一张幻灯片而不是模板选择卡。绝不在页面上放置内部工作流文字preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签等一律禁止。绝不在页面上放置模板名或 slug如 mat只能在聊天消息里提及。绝不放用户需求笔记如想要的氛围目标受众等内部标签除非用户明确要求这些词出现在 deck 中。可见 chrome 只用真实 deck 内容deck 标题、真实章节名、日期、作者、公司、页码或用户素材中的真实语句。不读取template.html来生成预览。不读取其它模板的design.md。用户选定该模板生成完整 deck 后先读完整设计文档再生成最终幻灯片。第 5、6、7 条在 SKILL.md 中被升级为非协商一致NON-NEGOTIABLE的 Preview authenticity rules并在 bold-template-pack/README.md 的 Implementation Contract 中重申预览页必须是用户 deck 的真实标题页绝不允许出现模板名、选项标签、文件名、路径或需求笔记。七、固定舞台模型1920×1080 预览页如何落地Preview Rules 第 1 条要求的fixed-stage 模型在 frontend-slides 中是全局不可让步的规范NON-NEGOTIABLE。design.md 开篇的 Frontend Slides Fixed-Stage Policy 说明了关键点即便 Mat 源模板本身是 viewport-fluid 设计字号、留白、间距全部使用vw/vh单位被 frontend-slides 技能采用时必须生成为固定 1920×1080 舞台、整体等比缩放适配浏览器视口移动端允许 letterbox/pillarbox 但不得为手机重排内容。design.md 中的vw/vh值只作为设计比例proportion翻译进 1920×1080 舞台坐标即可。技术落地可参考 deck-stage.js该自定义元素deck-stage以默认 1920×1080 设计尺寸渲染画布通过const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale(${s});实现整幅画布等比缩放与居中letterbox/pillarbox并支持键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键跳页、触摸三分区点按、media print下每页一张幻灯片导出 PDF。对于仅需标题页预览的场景核心约束是画布按 1920×1080 设计、内容不得溢出、整幅等比缩放。八、预览 → 完整 deck 的衔接design.md 是最终的设计菜谱预览通过用户选定后生成完整 deck 的流程SKILL.md Phase 3会读取 Mat 的完整 design.md把它当作设计菜谱而非可复制内容。此时需要继承的深度细节包括默认排版节奏默认主标题用h24vw 一段lead1.5vw导语——这是系统最可靠的组合分隔语言所有结构分隔只用 1px 细线hairline深色面用奶油 12% 透明度、浅色面用深墨 14%绝不加厚无阴影、无圆角结构元素一律 0px 圆角仅导航圆点 50%全系统无box-shadow列表标记每项列表以暖橙 DM Mono 的 em-dash—前缀标记网格grid-template-columns: 1.4em 1fr实现绝不改用圆点、对勾或数字em语义重定义系统内不使用斜体em被重定义为暖橙行内强调font-style: normal用于数字中的单位后缀如4.7k的k或引文署名装饰组件kicker暖橙 DM Mono uppercase 眉标、rule32×1px 暖橙短线、stat cell三列竖分格大数字 单行标签、quote mark8vw 暖橙引号字形、compare divider1px 竖向列而非边框、image placeholder1px 细线框 6% 奶油底的毛玻璃式空洞迭代指南新组件直接以奶油文字落于深色表面、新标题只用 Bricolage 700/800 mixed case、新分隔只用 1px 细线、新标签只用 DM Mono uppercase 0.12em、任何新深色页必须复制::before辉光伪元素、深色默认奶油反转页每套 deck 只作一次强调。design.md 的 Known Gaps 也值得在生成时留意以下表述均为文档自述的事实而非评测结论--c-bg-dark-alt#2E3D30已定义但当前没有选择器使用辉光位置硬编码右下角无参数化令牌渲染依赖四个 Google Fonts 加载成功幻灯片过渡时长设为0s瞬时--ease-slide/--dur-slide令牌处于闲置柱状图柱高用行内styleheight: XX%手动计算无数据绑定层.split-center图片区固定 52vh 高导航圆点与页码计数器使用硬编码白色值在奶油反转页上会显得发白。九、把 Mat 预览卡用进真实工作流综合以上Mat 预览卡在 frontend-slides 中的完整使用路径是初筛Phase 2 读取 selection-index.json 的 mat 条目比对mood/tone/best_for/avoid_for判断是否适配用户场合预览若 Mat 入选短名单仅读 preview.md按其 Ingredients 生成一张 1920×1080 fixed-stage 的真实标题页用户真实标题/副标题深森林绿 右下角木棕辉光 奶油 floating 文字 暖橙 kicker 等单点强调严格回避模板名、slug、内部标签与工作流文字若标题为中文遵循 CJK 注意事项字距 0、行高放宽、不做 uppercase选定后生成进入 Phase 3读取完整 design.md把其中的vw/vh设计比例翻译进 1920×1080 固定舞台坐标继承调色板、字体角色、1px 细线分隔、info-card、em-dash 项目符与辉光伪元素产出单文件自包含 HTML并逐一验证溢出与面板遮挡。这样一套轻量预览卡 → 完整设计文档的渐进式披露机制让 Agent 在风格发现阶段只付出最小读取成本即可产出高保真、可比较的视觉预览同时把完整的实现复杂度推迟到用户真正选定之后——这正是 Mat 预览卡在 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点击查看免费下载相关推荐frontend-slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析frontend slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析 导读本文以 frontend slidesAI 技能AI 插件前端frontend-slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析frontend slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析 Biennale Yellow 是 frontAI 技能AI 插件前端frontend-slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则frontend slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则 Mat 是 frontend slides 项目 BolAI 技能AI 插件前端上一篇FinceptTerminal终极指南5个实战技巧快速掌握AI金融分析平台下一篇重构多模态交互字节跳动Tar-1.5B如何用文本对齐技术降低AI应用门槛创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Frontend Slides Mat 模板预览卡解析：material-tactile 风格标题页的生成规范与设计系统实战
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 技能内 bold-template-pack 中的Mat 模板预览卡preview.md展开讲解它在先出 3 张标题页预览、用户选定后再生成完整 deck的工作流中扮演的角色、它定义的视觉配方深森林绿画布、木棕色辉光、奶油色文字、单一暖橙强调以及预览生成时必须遵守的硬性规则。读完本文你将掌握 Mat 模板的预览 Ingredients、Selection Metadata、CJK 处理要点与完整生成衔接流程并理解背后 1920×1080 固定舞台fixed-stage模型如何由 deck-stage.js 落地实现。一、preview.md 在模板库中的定位轻量样式卡不是完整设计文档在 frontend-slides 技能的分层文档体系中每个 bold 模板都配有一对文件预览卡与完整设计文档。Mat 模板的这两个文件位于预览卡标题页预览专用preview.md完整设计文档选定后生成最终 deck 用design.md预览卡开头就明确划定了使用边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本小文件仅用于标题页预览最终 deck 生成时请阅读下方列出的完整设计文档。这一渐进式披露progressive disclosure设计与技能工作流的执行顺序严格对应。根据 SKILL.md 的 Phase 2 规则Agent 先读取精简索引 selection-index.json仅凭mood、tone、best_for、avoid_for、formality、density、scheme等元数据圈定候选模板对短名单模板只读各自的preview.md用于生成 3 张标题页风格预览用户选定某一模板后进入 Phase 3 时才读取该模板完整的design.md生成整份 deck。preview.md末尾的Preview Rules也明确禁止在此阶段阅读template.html或其它模板的design.md这正是渐进式披露的约束体现。二、Selection Metadata模板的快速画像Mat 在 selection-index.json 中登记的核心元数据preview.md内亦有同源摘要字段值说明slugmat模板唯一标识用于索引与路径寻址taglineDark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones一句可视摘要深鼠尾草色画布 骨白色纸感 焦橙强调带木质底色的 mid-century 现代风moodwarm-modern, considered, tactile, mid-century情绪标签温暖现代、克制考量、触感、世纪中期tonewarm, design-led, intentional, considered语调温暖、设计主导、有意图、克制formalitymedium正式度中等densitymedium信息密度中等schememixed色彩方案混合深色为主、奶油色反转变体best_for设计工作室作品集、建筑/室内品牌、陶瓷/手工艺/家具、咨询 deck也适合希望走有考量感的模拟质感而非数字冷酷感的技术、研究或商务 deck适用场景avoid_for需要快速科技能量或机构性克制感的场景——灰绿焦橙的静默暖色盘天生偏暖、偏慢应避免场景这段元数据的作用不只是给人看它让 Agent 在 Phase 2 中凭元数据即可完成初筛无需打开完整文档即可判断 Mat 是否符合用户的场合与气质。best_for中的场景列举属于软信号而非严格的行业过滤条件。三、Visual Snapshot一个环境前提撑起整套系统preview.md的 Visual Snapshot 用两段话浓缩了 Mat 的完整视觉哲学理解它就能理解之后所有 Ingredients 与 Rules 的来源一套温暖、材质触感型的演示系统灵感来自高端产品落地页。深森林绿是主导环境每张深色幻灯片右下角被一层低强度的木棕色氛围辉光加温。奶油色字体直接浮在画布上暖橙色是唯一强调色。字体栈用 Bricolage Grotesque重型、圆润的 grotesque作 display、DM Sans 作正文、DM Mono 作标签——读感是工业设计作品集 × 精品产品发布绝不是科技 demo。Mat 是一个 material-tactile 演示系统围绕单一环境前提构建一个深森林绿表面右下角被一层低强度木棕色辉光加温。氛围本身承担了绝大部分视觉工作——任何内容落地之前幻灯片已经像午后阳光下的工作台。奶油色文字直接浮在绿色画布上没有卡片、没有面板、没有边框。系统需要打破绿色时只用一块奶油色内嵌盒info-card读感就像铺在深色表面上的一张温暖纸张。氛围先行、内容后置是这套系统的核心差异点。与之配套的完整设计文档 design.md 中这一环境前提被进一步物化为三个不可省略的视觉锚点环境辉光每张深色幻灯片都经由.slide.dark::before伪元素挂载一个右下角木棕色径向辉光椭圆尺寸约 55% 宽 × 70% 高渐变从rgba(122, 78, 36, 0.28)经rgba(80, 50, 20, 0.14)过渡到透明单一强调色纪律暖橙只出现在 kicker、项目符号、行内em、引言引号、图表中唯一高亮柱上永远不做背景、不做大标题色奶油信息卡info-card是签名级材质对比组件——一块铺在深绿场上的暖纸矩形无边框、无阴影、无圆角仅靠奶油与森林绿之间的色调跳变定义边缘。四、Preview Ingredients调色板、字体栈与五个 Signature Movespreview.md的 Preview Ingredients 给出了预览阶段必须保真的最小视觉集合4.1 调色板Palette令牌色值角色bg-dark#232E26深森林绿默认主导表面bg-dark-alt#2E3D30略浅的绿色深色页内分层/内凹表面用使用克制bg-cream#EDE6D0暖奶油浅色页背景与 info-card 填充bg-cream-alt#E4DAC4更深的奶油浅色页图片占位底色ink-cream#F0E8D2深色表面上的主文字色ink-dark#1E2820奶油表面上的主文字色近黑的深森林绿绝非纯黑accent-orange#C07030唯一强调色铜焦橙wood-glow#7A4E24木棕色辉光色仅用于右下角渐变0.28/0.14 透明度绝不作为平铺填充design.md 中还有配套的半透明次级令牌ink-cream-258%、ink-cream-330%、ink-dark-260%、ink-dark-330%、border-on-dark奶油 12%、border-on-cream深墨 14%分别服务于深色/奶油表面的次级文字与 1px 细线分隔。4.2 字体栈Typography预览卡列出三套字体Bricolage Grotesquedisplay 系、DM Sans正文系、DM Mono标签系并补充{typography.label.fontFamily}指向 DM Mono。design.md 给出了逐角色的完整字阶令牌字号字重用途display12vw800封面/开场巨型 display一行 1–2 词断行h17vw800章节开场/收束标题h24vw700内容页主标题默认主标题stat-value5.5vw800stat 格内大数字quote-mark8vw800暖橙超大引号装饰字形quote-text3.4vw600引文正文h32.4vw600小标题/区域标题lead1.5vw400DM Sans大段导语/大号列表项body1.05vw400DM Sans正文与 info-card 正文caption0.82vw400DM Sans图片说明、tagline、小字label0.7vw400DM Monokicker、chrome 标签、页脚、元数据、图表标签display 系全部使用负字距display -0.03em、h1 -0.025em、h2 -0.02em这是产生压缩、精品感的关键label 系则用 0.12em 正字距 uppercase。4.3 五个 Signature Moves预览必须保真深森林绿画布 右下角木棕色径向辉光{colors.bg-dark}打底{components.atmospheric-glow}经.slide.dark::before挂在每张深色页上位置固定为右下角椭圆55% × 70%辉光属非可选non-optional——没有它深色表面会显得平。奶油文字无框漂浮{colors.ink-cream}直接落在绿色场地上外层不包卡片、面板或边框。Bricolage display 永远 mixed case任何 display/h1/h2/h3 绝不转大写大写只留给 DM Mono 标签。单一暖橙强调{colors.accent-orange}只用于小尺寸行内强调——kicker、项目符号、行内em、引号字形、单根图表柱。橙色是标点不是表面。奶油信息卡{components.info-card}是签名级材质对比组件——深绿场上内嵌的暖纸矩形承载标题 正文块无边框无阴影。五、International / CJK Preview Note中文预览的注意事项预览卡明确要求若预览使用中文或其它 CJK 文本CJK 字距保持 0放宽行高line-height避免对 CJK 文本应用 uppercase 变换。并指引选定后使用完整design.md的 CJK 章节获取精确的字体配对与脚本级调整。design.md 的相关章节给出了这份精确字体配对的完整答案——即Strategy A全角色切换到思源宋体 Noto Serif SC/* Bricolage roles (display, h1, h2, h3, stat-value, quote) */ font-family: Bricolage Grotesque, Noto Serif SC, sans-serif; /* DM Sans roles (lead, body, caption) */ font-family: DM Sans, Noto Serif SC, sans-serif; /* DM Mono roles (label, kicker, chrome, footer) */ font-family: DM Mono, Noto Serif SC, monospace;配套的通用 CJK 调整还包括行高在 0.05–0.08 区间放宽display 至 1.0–1.2、body 至 1.7–1.85、CJK 标题去掉负字距置 0必要时 0.02em、绝不text-transform: uppercase、中文句内使用全角标点。「」『』、CJK 标题行尾不加句号、CJK 与拉丁/数字之间施加盘古之白Pangu spacing如2026 年 5 月、同一句内只用单一字重。加载字体时将原 Noto Sans SC 链接替换为 Noto Serif SClink relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSerifSC:wght400;500;600;700displayswap relstylesheetdesign.md 也坦诚记录了 CJK 的已知差距Bricolage 的重型圆润 grotesque 工业感在中文中无精确对应Noto Serif SC 700 提供结构重量但气质偏文雅若工业感是关键如硬件产品发布 deck可在最大 display 时刻封面/hero补充思源黑体 Noto Sans SC 800。六、Preview Rules生成预览页时必须遵守的硬性约束preview.md的 Preview Rules 是整套规范的执行清单预览生成务必逐条满足只构建一张 1920×1080 的标题页且必须在 fixed-stage 模型内。保留调色板、字体角色、表面节奏与装饰词汇即 Preview Ingredients 所述内容。使用用户真实的标题/副标题/上下文不得照抄 demo 内容。渲染结果必须像真实的第一张幻灯片而不是模板选择卡。绝不在页面上放置内部工作流文字preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签等一律禁止。绝不在页面上放置模板名或 slug如 mat只能在聊天消息里提及。绝不放用户需求笔记如想要的氛围目标受众等内部标签除非用户明确要求这些词出现在 deck 中。可见 chrome 只用真实 deck 内容deck 标题、真实章节名、日期、作者、公司、页码或用户素材中的真实语句。不读取template.html来生成预览。不读取其它模板的design.md。用户选定该模板生成完整 deck 后先读完整设计文档再生成最终幻灯片。第 5、6、7 条在 SKILL.md 中被升级为非协商一致NON-NEGOTIABLE的 Preview authenticity rules并在 bold-template-pack/README.md 的 Implementation Contract 中重申预览页必须是用户 deck 的真实标题页绝不允许出现模板名、选项标签、文件名、路径或需求笔记。七、固定舞台模型1920×1080 预览页如何落地Preview Rules 第 1 条要求的fixed-stage 模型在 frontend-slides 中是全局不可让步的规范NON-NEGOTIABLE。design.md 开篇的 Frontend Slides Fixed-Stage Policy 说明了关键点即便 Mat 源模板本身是 viewport-fluid 设计字号、留白、间距全部使用vw/vh单位被 frontend-slides 技能采用时必须生成为固定 1920×1080 舞台、整体等比缩放适配浏览器视口移动端允许 letterbox/pillarbox 但不得为手机重排内容。design.md 中的vw/vh值只作为设计比例proportion翻译进 1920×1080 舞台坐标即可。技术落地可参考 deck-stage.js该自定义元素deck-stage以默认 1920×1080 设计尺寸渲染画布通过const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale(${s});实现整幅画布等比缩放与居中letterbox/pillarbox并支持键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键跳页、触摸三分区点按、media print下每页一张幻灯片导出 PDF。对于仅需标题页预览的场景核心约束是画布按 1920×1080 设计、内容不得溢出、整幅等比缩放。八、预览 → 完整 deck 的衔接design.md 是最终的设计菜谱预览通过用户选定后生成完整 deck 的流程SKILL.md Phase 3会读取 Mat 的完整 design.md把它当作设计菜谱而非可复制内容。此时需要继承的深度细节包括默认排版节奏默认主标题用h24vw 一段lead1.5vw导语——这是系统最可靠的组合分隔语言所有结构分隔只用 1px 细线hairline深色面用奶油 12% 透明度、浅色面用深墨 14%绝不加厚无阴影、无圆角结构元素一律 0px 圆角仅导航圆点 50%全系统无box-shadow列表标记每项列表以暖橙 DM Mono 的 em-dash—前缀标记网格grid-template-columns: 1.4em 1fr实现绝不改用圆点、对勾或数字em语义重定义系统内不使用斜体em被重定义为暖橙行内强调font-style: normal用于数字中的单位后缀如4.7k的k或引文署名装饰组件kicker暖橙 DM Mono uppercase 眉标、rule32×1px 暖橙短线、stat cell三列竖分格大数字 单行标签、quote mark8vw 暖橙引号字形、compare divider1px 竖向列而非边框、image placeholder1px 细线框 6% 奶油底的毛玻璃式空洞迭代指南新组件直接以奶油文字落于深色表面、新标题只用 Bricolage 700/800 mixed case、新分隔只用 1px 细线、新标签只用 DM Mono uppercase 0.12em、任何新深色页必须复制::before辉光伪元素、深色默认奶油反转页每套 deck 只作一次强调。design.md 的 Known Gaps 也值得在生成时留意以下表述均为文档自述的事实而非评测结论--c-bg-dark-alt#2E3D30已定义但当前没有选择器使用辉光位置硬编码右下角无参数化令牌渲染依赖四个 Google Fonts 加载成功幻灯片过渡时长设为0s瞬时--ease-slide/--dur-slide令牌处于闲置柱状图柱高用行内styleheight: XX%手动计算无数据绑定层.split-center图片区固定 52vh 高导航圆点与页码计数器使用硬编码白色值在奶油反转页上会显得发白。九、把 Mat 预览卡用进真实工作流综合以上Mat 预览卡在 frontend-slides 中的完整使用路径是初筛Phase 2 读取 selection-index.json 的 mat 条目比对mood/tone/best_for/avoid_for判断是否适配用户场合预览若 Mat 入选短名单仅读 preview.md按其 Ingredients 生成一张 1920×1080 fixed-stage 的真实标题页用户真实标题/副标题深森林绿 右下角木棕辉光 奶油 floating 文字 暖橙 kicker 等单点强调严格回避模板名、slug、内部标签与工作流文字若标题为中文遵循 CJK 注意事项字距 0、行高放宽、不做 uppercase选定后生成进入 Phase 3读取完整 design.md把其中的vw/vh设计比例翻译进 1920×1080 固定舞台坐标继承调色板、字体角色、1px 细线分隔、info-card、em-dash 项目符与辉光伪元素产出单文件自包含 HTML并逐一验证溢出与面板遮挡。这样一套轻量预览卡 → 完整设计文档的渐进式披露机制让 Agent 在风格发现阶段只付出最小读取成本即可产出高保真、可比较的视觉预览同时把完整的实现复杂度推迟到用户真正选定之后——这正是 Mat 预览卡在 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点击查看免费下载相关推荐frontend-slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析frontend slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析 导读本文以 frontend slidesAI 技能AI 插件前端frontend-slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析frontend slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析 Biennale Yellow 是 frontAI 技能AI 插件前端frontend-slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则frontend slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则 Mat 是 frontend slides 项目 BolAI 技能AI 插件前端上一篇FinceptTerminal终极指南5个实战技巧快速掌握AI金融分析平台下一篇重构多模态交互字节跳动Tar-1.5B如何用文本对齐技术降低AI应用门槛创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考