AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Emerald Editorial 是 frontend-slides 技能中 Bold Template Pack 里的一套「杂志封面式」商业演示模板以饱和翡翠绿、深藏蓝墨与燕麦纸构成的三色系统搭配 Bodoni Moda 900 级展示衬线体与标志性的双规则装饰double-rule ornament。本文基于该模板的预览卡片与其后的完整设计文档并结合仓库中的deck-stage.js、viewport-base.css与selection-index.json源码完整讲解该模板的选择元数据、固定 16:9 舞台渲染策略、调色板与字体令牌、布局与组件语法、CJK 多语言适配以及生成预览与最终演示时必须遵守的规则让你能直接用它做出「像严肃杂志封面」的高质量演示。模板定位与选择元数据在 frontend-slides 的 Phase 2 样式发现阶段Agent 会先读取 bold-template-pack/selection-index.json仅凭元数据mood、tone、best_for、avoid_for、formality、density、scheme初筛候选模板确定候选后才读取对应候选的preview.md而不会提前读取任何design.md。这一「渐进式披露」约定记录在 SKILL.md 与 bold-template-pack/README.md 中。Emerald Editorial 在选择索引中登记的核心元数据如下与 preview.md 完全一致Slugemerald-editorialTaglineA magazine-cover business deck: emerald navy paper, double-rule masthead ornaments, and a bold Bodoni-style display serif.Moodeditorial, considered, confident, magazine-coverToneliterary, authoritative, warm, designedFormalitymedium-highDensitymediumSchememixedBest for任何需要像严肃杂志封面的场景包括但不限于领导层读报会leadership readouts、规划办公室评审planning-office reviews、战略简报strategy briefs。双规则报头装饰带来社论式分量又不显僵硬也非常适合产品发布或研究回顾这类「想要考究感而非企业感」的场合。Avoid for需要安静、中性、机构化克制的场景——翡翠绿底色过于饱和无法退居背景。视觉快照时装刊头与 19 世纪戏单的纸墨语言从设计文档的 Overview 可以看出Emerald Editorial 的核心立论是单一字体面孔Bodoni Moda 以 900 字重、44–460px 的宽幅字阶铺满全片92px 用于常规标题、130–200px 用于陈述句与章节开场、460px 用于英雄数字。衬线体响亮、戏剧化、自信每一页都以文字而非图片领起。配色是一个紧凑的三色编辑部集合饱和翡翠绿bg—#3CD896作为主画面深藏蓝墨ink—#0F1A5C既是最主要的文字色也是反色面板inverse panel的填充色燕麦纸paper—#F1E9D6作为交替瓦片的次表面。墨绿/藏蓝的对比就是系统的色彩身份所有正文要么是「藏蓝印在翡翠上」要么是「翡翠印在藏蓝上」。bg-2、bg-3与ink-2、ink-3是令牌系统中保留的色调变体但发布页几乎只用三种原色。支撑字体是Manrope人文几何无衬线正文段用 500 字重标签、眉毛、tag、caption、footline 一律用 700–800 字重的大写并加宽字距。Manrope 永不超过 28px只待在「chrome 层」永不进入展示领域。深度完全依赖平坦的墨色块没有投影、没有渐变、没有模糊、没有光晕。层次感来自色块反转翡翠画布上的藏蓝瓦片就是「被抬升」的元素与分隔章节的 4px 墨色规则线整体读感是「印在纸上的油墨」而非数字界面。预览卡片只做一张真实标题页预览的用途边界preview.md 第一行就声明这个文件只用于标题页预览最终整副演示必须改读完整设计文档。两版文件在仓库根目录与 插件副本目录 中逐字节一致内容等价。预览所需的固定舞台预览必须遵守 frontend-slides 的固定 16:9 舞台铁律NON-NEGOTIABLE见 SKILL.md 与 bold-template-pack/README.md 的 Fixed-Stage Policy幻灯片以固定 1920×1080 画布创作整体缩放适配浏览器视口允许 letterbox / pillarbox但绝不为手机重排内容源模板即使原本使用100vw、clamp()等流式 CSS也只把这些值当作设计比例翻译成固定坐标不作为生成的响应式规则。渲染依赖于 bold-template-pack/deck-stage.js这是一个deck-stage自定义元素读取width/height属性默认 1920×1080把画布用transform: scale()等比缩放到视口见_fit()中Math.min(vw / designWidth, vh / designHeight)的逻辑并为移动端提供左右三分之一的点按翻页区与底部的页码浮层。幻灯片以visibility: hiddenopacity: 0隐藏而非卸载保留视频/iframe/表单状态非活动页仍留在 DOM 中。同时 viewport-base.css 提供了必须整段内联的基础样式.deck-viewport锁定浏览器视口、.deck-stage固定 1920×1080、.slide.active/.visible控制可见性禁用display:none切换、media print每页一张 1920×1080 幻灯片、prefers-reduced-motion降级支持。预览必须遵守的规则来自 preview.md恰好构建一张 1920×1080 标题页置于固定舞台模型内。保留调色板、类型角色、表面节奏与装饰词汇见下节。使用用户的真实标题/副标题/上下文不得照抄演示示例内容。渲染结果必须像真实的第一张幻灯片而不是模板选择卡。绝不在幻灯片上放内部工作流文字preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签一律禁止。绝不在幻灯片上放模板名或 slug只允许在聊天消息中提及。绝不在幻灯片上放需求备注如 desired vibe、audience、internal-use除非用户明确要求这些词出现在演示里。可见 chrome 只能用真实演示内容演示标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实内容短语。不读取template.html来生成预览。不读取其他模板的design.md。用户选定该模板进入完整演示后先读完整设计文档再生成最终幻灯片。调色板令牌三色纪律与默认值设计文档 Colors 章节给出了完整令牌及使用约定预览卡中的 Palette 只是它的速记令牌值角色bg#3CD896翡翠绿主画布默认幻灯片背景bg-2#2DC684略深翡翠仅用于两个翡翠表面相邻需要区分时bg-3#25B377最深翡翠变体保留ink#0F1A5C深藏蓝墨文字色、反色面板背景、规则线色、边框色系统结构色ink-2#1B2774略浅藏蓝用于墨上墨对比极少用ink-3#3A4593最浅藏蓝变体保留paper#F1E9D6燕麦奶油次表面交替瓦片/备用柱状序列承载ink文字rulergba(15, 26, 92, 0.22)半透明墨仅用于暗底上的细微内部网格线rule-strongrgba(15, 26, 92, 0.85)85% 不透明度墨线备选默认值要点默认背景bg翡翠面上标题默认ink、藏蓝面上标题默认bg系统唯一的展示字色翻转默认规则线是 4px 实线ink默认反色瓦片为ink底 bg字纸瓦片为paper底 ink字墨瓦片内的 delta/pill 用bg底 ink字在纸瓦片内则反转。严禁引入第四组色相红、黄、橙、lavender那会击碎社论承诺。字体系统Bodoni Moda 与 Manrope 的严格分工设计文档 Typography 章节定义了完整的字体阶梯。字体加载请求来自 Google Fonts同时包含 Bodoni Moda、Playfair Display、DM Serif Display、Rozha One、Yeseva One 与 Manrope但实际只有 Bodoni Moda 用于展示其余衬线家族是休眠的备选变体。展示/正文/Chrome 字阶令牌字号家族/字重用途numeral-jumbo460pxBodoni Moda 900反色章节开场面板上的英雄数字display-section200pxBodoni Moda 900议程/章节标题英雄display-cover184pxBodoni Moda 900封面报头标题display130pxBodoni Moda 900陈述句/引语级display-md128pxBodoni Moda 900KPI 行引导标题display-sm120pxBodoni Moda 900流程引导标题headline-xl104pxBodoni Moda 900图表/数据引导标题headline92pxBodoni Moda 900常规幻灯片标题默认ornament-word-lg84pxBodoni Moda 800大装饰括词ornament-word76pxBodoni Moda 800标准装饰括词ornament-word-sm68pxBodoni Moda 800双规则括起的介词kpi-figure144pxBodoni Moda 900KPI 瓦片数字kpi-figure-unit60pxBodoni Moda 800KPI 数字单位后缀stat-figure92pxBodoni Moda 900侧栏次要统计数字title-card-lg64pxBodoni Moda 800大卡内标题/议程行名title-card48pxBodoni Moda 800图表卡结论标题step-numeral80pxBodoni Moda 900流程步骤序号step-title40pxBodoni Moda 800流程步骤标题body-lg28pxManrope 500Lede/副标题段落body26pxManrope 500标准正文body-sm24pxManrope 500瓦片/图表侧栏紧凑正文eyebrow28pxManrope 800 / 0.18em标题上方章节眉毛大写label26pxManrope 700 / 0.08em报头/footline 标签大写label-tight26pxManrope 700 / 0.05em封面上下字符串大写tag24pxManrope 800 / 0.12em反色 pill/tag大写caption24pxManrope 700 / 0.1em议程行类型标签、图表 x 轴、kpi 标签大写credit28pxManrope 700 / 0.18em作者/机构署名行大写强制签名式处理每个主 Bodoni 标题必须 900 字重 负字距-0.01em 至 -0.03em 紧凑行高0.9–0.95三者缺一即读作另一套系统。每个 Manrope 标签/眉毛/tag/caption/footline/credit必须大写且字距 ≥ 0.05em。双规则装饰必须双侧对称字两侧都有规则单侧会破坏括弧对称可用:root[data-ornament]降级为 single 或 none但默认且推荐形态是 double。章节分隔线与瓦片分隔线一律4px 实线ink绝不用 1px/2px。反色瓦片恒为ink底 bg字纸瓦片恒为paper底 ink字。200px 的巨型 Bodoni 数字必须活在藏蓝反色面板上——460px 数字直接放翡翠画布在视觉上会脱离面板锚定的戏单语言。布局系统1920×1080 画布、间距与组件语法画布与内边距系统目标固定 1920×1080 画布幻灯片为section classslide渲染交给deck-stage.js。内边距令牌pad-default110px 110px 70px标准内容页底部略少给 footline 让位、pad-cover56px 110px封面顶部少给报头让位、pad-closing80px 110px、masthead-inset56px 顶 / 80px 侧。Chrome 解剖封面与结尾页带报头顶部 Manrope flex 行两侧各一条标签串与footline底部对应行内容页通常省略靠 110px 顶部留白给标题空间。报头定位在top: 56px, left/right: 80px。组件语法Double-Rule Ornament签名装置。居中衬线字两侧各两条叠置 4px 横线、线间 3px形成 19 世纪戏单/戏剧海报的括弧效果。ruleHeight 4px、ruleGap 3px、wordWeight 800由:root[data-ornament]全局切换 double/single/none。Vertical Side-Bracket更小的行内变体介词两侧各一对 4px 线8px 间距、64px 条宽用于句子内联而非居中。Masthead / Footline绝对定位 flex 行两侧 Manrope 大写字符串如刊名日期、章节页码建立杂志页身份。Inverse Tileink底 bg字矩形作图表卡容器、KPI 瓦片、流程步骤、侧栏。Paper Tilepaper底 ink字沿瓦片行轮换以打破全墨瓦片的单调如四步流程 ink→paper→ink→paper。Mark Pill / Tag Pill / Delta Pill小号反色或 bg 反相矩形徽章分别用于分类标记、图表侧栏统计类型、KPI 瓦片角落的方向变化指示如↑ 12% YoY。全部零圆角。Agenda Row三列网格行130px / 1fr / 320px上下 4px 墨线上边框左列衬线序号、中列衬线名称、右列 Manrope 类型标签末行还带 4px 下边框闭合列表。Chart Card藏蓝反色面板内放翡翠纸双色柱状图y 轴标签 Bodoni、x 轴 Manrope网格线为 2px、22% 不透明度 bg-on-ink形成「杂志数据跨页」。Ornament Numeral Panel全出血的反色半页居中 460px Bodoni 数字角落放置 topbar/footline 字符串仅用作章节开场装置。规则线权重与「零圆角」纪律2px 用于图表网格线细、半透明4px 是通用结构规则章节分隔、列表行边框、瓦片顶线5px 用于封面装饰线在 184px 展示标题旁保持分量18px 高4px 上线4px 下线为双规则装饰跨度。系统任何地方没有 border-radius——卡片、瓦片、KPI 面板、装饰线、徽章全部严格矩形唯一圆形来自 Bodoni 字形本身的曲线。深度与层次系统使用零阴影。层次感只来自三点色块反转翡翠画布上的藏蓝瓦片即「被抬升」元素、4px 墨线像纸面折痕般分隔区域、实色无圆角面板。没有柔光、玻璃、neumorphism。一个典型的章节开场面板是把整页切成两列全出血网格左侧藏蓝实色面板放 460px 巨型数字右侧标准翡翠画布放眉毛标题lede分类标记——重、锚定、仪式化这是开场模式而非常规布局。密度哲学与 Dos / Donts设计文档的 Density Philosophy 明确中满且居中。多数幻灯片携带一个 92–200px 的展示标题外加 3–4 个支撑元素统计行、KPI 网格、流程、图表卡。110px 内边距提供呼吸空间顶部/底部 chrome 锚定页面。一页塞六个小元素读起来是「坏的」一个大标题加三个支撑瓦片读起来「权威」。例外是议程列表模式竖排大号编号行、4px 墨线分隔它天生高密度、应填满纵向空间。Do所有 Bodoni 展示标题 900 字重负字距紧凑行高所有 Manrope chrome 大写≥0.05em 字距默认bg背景、仅在开场/结尾用ink整页所有分隔用 4px 实线ink需要戏剧化框定时用双规则装饰尤其两个展示标题之间的小连接词 of/in/for默认抬升用反色瓦片并轮换纸瓦片展示字阶大胆拉大130–460px色彩翻转只在 ink-on-bg 与 bg-on-ink 之间不引入第三种翻转所有形状严格矩形。Dont不加 box-shadow/text-shadow/gradient/blur不引入第三字体Playfair、DM Serif、Rozha、Yeseva 已加载但不属于发布声音不把 Bodoni 跑在 500 或更轻字重系统只承诺 900、800 于装饰词/瓦片标题、700 于小介词不用句例或零字距的 Manrope不引入第四色相任何元素不用圆角结构线不用 1px/2px不把 460px 数字放翡翠画布而无藏蓝面板锚定不在一页塞六个小元素封面与结尾页绝不省略报头/footline。CJK 与国际化内容中文配对策略设计文档为中文内容提供了完整方案预览卡仅给出摘要CJK 字距归 0、放宽行高、避免 CJK 大写变换。推荐中文配对角色中文字体字重理由展示标题92–460px霞鹜文楷 LXGW WenKaiNoto Serif SC 900 兜底400 / 900LXGW WenKai 的手书温度最接近 Bodoni Moda 的戏剧戏单声音Noto Serif SC 900 在巨型尺寸提供结构质量统计/KPI 数字144px思源宋体 Noto Serif SC900Mincho 900 提供 Bodoni 900 的印刷墨块感正文24–28px思源宋体 Noto Serif SC400温暖杂志跨页阅读的 Mincho 正文声音眉毛/标签/tag思源黑体 Noto Sans SC700–800替代 Manrope 的 chrome 层几何人文感瓦片标记/pill/caption思源黑体 Noto Sans SC700保持反色 pill/tag 的大写字距感混排策略 C保持 Bodoni Moda 作为拉丁展示字体让 CJK 字形回落到 LXGW WenKai展示或 Noto Serif SC正文。设计文档给出的字栈/* Bodoni Moda roles (every display moment) */ font-family: Bodoni Moda, LXGW WenKai TC, Noto Serif SC, Georgia, serif; /* Manrope roles (every chrome / body moment) */ font-family: Manrope, Noto Sans SC, system-ui, sans-serif;加载方式追加到现有 Google Fontslink或作为第二个 linklink relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyLXGWWenKaiTCfamilyNotoSerifSC:wght400;700;900familyNotoSansSC:wght500;700;800displayswap relstylesheet通用 CJK 调整对所有中文块适用放宽行高 0.05–0.08展示 1.0–1.1、正文 1.55–1.65拉丁的 0.9–0.95 / 1.45–1.5 对中文太挤。CJK 标题移除负字距letter-spacing: 0若视觉太挤可用极小正值0.02em。绝不对 CJK 使用text-transform: uppercase中文无大小写且会破坏混排行中 Manrope 部分的大小写意图。中文句内用中文全角标点。「」『』不混用拉丁标点。CJK 标题末尾不加句号正文段落保留。Pangu 间距CJK 与拉丁/数字边界加空格2026 年 5 月而非2026年5月可手输或用 pangu.js 式自动空格器。一句一字体展示层 LXGW WenKai、正文层 Noto Serif SC同一句子内不切换。已知 CJK 局限系统对「Bodoni 900 460px 藏蓝面板数字」的承诺最难翻译——Google Fonts 上没有能复现 Bodoni 900 光学厚重的汉字体。Noto Serif SC 900 最接近但 460px 汉字的对比轮廓读起来比 Bodoni 数字更重可能压垮藏蓝面板。中文巨型数字开场页建议(1) 用中文数字字符一二三四五六七八九十视觉更轻或 (2) 数字保留 Bodoni 拉丁字形、让面板下方的标签承载中文语境。纯中文巨型数字是这套系统风险最高的时刻建议逐页人工复核。迭代指南与已知局限设计文档结尾给出两条可执行的参考清单迭代指南10 条摘要新展示标题走展示阶梯92/104/120/128/130/184/200不发明新字号新 chrome 行走 chrome 阶梯24/26/28且大写0.05em–0.18em 字距新分隔线一律 4px 实线ink新瓦片用反色或纸填充并沿行轮换新徽章严格矩形KPI 数字恒为 144px可选 60px 单位后缀新装饰默认双规则、仅经:root[data-ornament]全局切换新开场用半出血反色面板巨型数字新颜色只来自三原色或保留的 2/3 变体布局拥挤时增大展示字号而非添加元素。已知局限依据 design.mdGoogle Fonts 请求加载了六族字体但实际只用两族依赖deck-stage.js做缩放与导航design.md不描述该脚本视为运行时依赖data-ornament是全局设定不能按页/按元素切换ink-2/3、bg-2/3 令牌已定义但未在发布 CSS 中使用柱状图高度为手写%没有数据绑定层扩展图表需手动计算百分比离线渲染会回落系统衬线Bodoni→Georgia展示声音会被大幅压平离线/打印建议自托管字体92px Bodoni 在墨/翡翠对比上保持 WCAG AA但 24–28px Manrope 小字在同一配对下逼近对比度下限小字尽量用「藏蓝印翡翠」方向报头/footline 字符串在源码中是占位符需逐副编辑系统无media print规则、无响应式断点固定 1920×1080任何视口适配都交给deck-stage.js。从预览到最终演示的完整工作流初筛读 selection-index.json从mood/tone/best_for/avoid_for/formality/density/scheme匹配用户目的与氛围。预览只读候选的 preview.md在固定 1920×1080 舞台内构建恰好一张真实标题页遵守上文全部预览规则绝不放模板名、路径或工作流文字。选定后读完整 design.md把它当「风格配方」而非内容复制对象。生成产出单文件自包含 HTML内联 viewport-base.css 全文用deck-stage.js或等价行内缩放器统一缩放舞台保留字族、调色板、装饰词汇、间距节奏与组件语法以用户的真实内容为主。校验截图核验文本溢出与面板重叠——scrollHeight检查不足以发现网格面板互相遮盖的问题见 bold-template-pack/README.md。在 Emerald Editorial 语境下最终验收就是三个问题所有展示文字是否都是 Bodoni 900 负字距 紧凑行高所有分割线是否都是 4px 实线墨色封面是否带双侧双规则装饰、报头/footline并且全片零圆角、零阴影、零渐变三者皆「是」你就拿到了一副真正的杂志封面式演示。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐用 ADK 与 Agent Platform Vector Search 2.0 构建可落地的 RAG 问答 Agentcore/rag-vector-search 实战指南用 ADK 与 Agent Platform Vector Search 2.0 构建可落地的 RAG 问答 Agentcore/rag vector seaAI 技能AI 插件前端frontend-slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析frontend slides 模板实战Biennale Yellow 风格预览卡片与文学编辑风设计系统全解析 Biennale Yellow 是 frontAI 技能AI 插件前端MarkText 拼写检查完全指南从开启、语言切换到字典管理MarkText 拼写检查完全指南从开启、语言切换到字典管理 MarkText 内置基于 Chromium 的实时拼写检查能力在 Linux、macOS 与AI 技能AI 插件前端上一篇Web开发资源平台数据结构设计gh_mirrors/we/web-development-resources数据库架构下一篇Popular Convention on Github Docker部署完整教程从零到生产环境创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考