AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载本篇技术指南以 Retro Zine 预览卡 及其配套 完整设计文档 为主体深入拆解 frontend-slides 这套 HTML 演示技能中一个极具辨识度的版式模板温暖卡其纸面、森林绿强调色与 Bebas Neue 大写压缩字体的 riso 印刷 zine 体系。读完本文你将掌握该模板的完整设计令牌调色板、字体刻度、间距、组件语法、如何用preview.md生成符合真实性规则的标题预览页、如何依据design.md生成完整的 1920×1080 固定舞台 deck以及中英文混排下的字体配对与 CJK 适配方案。一、一张轻量预览卡与一份完整设计配方retro-zine 的文档分工Retro Zine 模板在仓库中由两个文档共同定义二者职责完全不同这也是整个 bold-template-pack 的通用契约Preview 卡preview.md仅用于标题页title-slide预览。它是用户在风格探索阶段看到的轻量风格卡只承载选择元数据、视觉快照、预览原料与预览规则。设计文档design.md完整的排版设计系统包括完整调色板、字体令牌、间距刻度、组件语法、Dos and Donts、CJK 适配与迭代指南。只有在用户选定该模板后才会被读取。这一先预览、后深读的分层结构正是 frontend-slides 核心原则之一的渐进式披露Progressive Disclosure在模板包上的落地。参见 SKILL.md风格探索阶段只读preview.md最终生成阶段才读design.md绝不批量读取所有模板的设计文档。preview.md的Files小节明确给出了两条路径使用前应先确认完整设计文档bold-template-pack/templates/retro-zine/design.md预览卡bold-template-pack/templates/retro-zine/preview.md对应地在 selection-index.json 中retro-zine 条目同样以preview_md与design_md两个字段分别指向这两份文件。二、Selection Metadata这个模板适合谁、不适合谁预览卡用一套可检索的元数据描述模板的气质坐标这些字段在风格探索阶段被 Agent 直接用于候选短名单匹配字段值含义Slugretro-zine模板唯一标识用于文件路径与索引TaglineBeige paper with green accent and Bebas Neue Caveat一句话风格摘要Moodcrafted, lo-fi, underground, warm-retro情绪关键词手工感、低保真、地下、暖复古Tonescrappy, warm, intentional, DIY语气率性、温暖、刻意、DIYFormalitymedium-low正式度偏低Densitymedium内容密度中等Schemelight浅色系Best for独立 zine 与出版物、音乐/艺术品牌、创作者作品集、小批量手工产品发布、社区向 deck一切应该看起来像印刷品、低保真、手工制作的场景Avoid for需要数字原生精致感或快速现代科技感的内容其分层 zine 美学刻意保留手工痕迹不适合数字化抛光值得特别注意的是best_for中给出的一个反直觉建议Retro Zine 也是技术、研究或商业 deck的一个优秀备选——当演讲者希望用 riso 印刷的温暖质感而非数字化光鲜来传递内容时它可以作为underdog黑马选择。但若受众期待的是现代科技感或高度正式的数字产品感则应避开该模板。三、视觉快照riso 印刷 zine 编辑系统的核心美学预览卡给出的视觉快照是对整个设计系统的浓缩描述展开后包含四个层面1. 纸张与配色叙事系统构建在暖卡其画布{colors.bg}— #C8B99A上深森林绿{colors.green}— #008F4D是唯一的意义强调色墨黑{colors.black}— #1A1A1A承担结构色。美术渊源是独立出版文化、世纪中叶激进海报与 DIY zine 版面压缩工业显示字体、手写脚本强调、轻微旋转的印章、胶带拼贴痕迹、首字下沉以及覆盖每一张幻灯片、把所有表面钉在印刷纸面register 上的颗粒叠层。2. 三字型对比Bebas Neue显示声部全大写、压缩、带慷慨字距0.02–0.04em的工业无衬线用于一切标题、声明、数字与标签Space Grotesk正文声部300–500 字重的干净人文几何无衬线小号13–18px排布以保持杂志栏位的文字密度Caveat手写声部用于作者署名、侧注、显示元素上的手写说明以及 RSVP 式版式中的手填内容。三者合读的效果是一本由小出版社排印的编辑单页an editorial spread typeset by a small press。3. 纹理系统{components.grain-overlay}——一个内联 SVG fractal-noise 颗粒叠层以0.07 不透明度覆盖每一张幻灯片模拟 riso 或活版印刷纸面的颗粒质感。它是非可选的移除颗粒会立刻破坏 zine 声部。4. 装饰词汇轻微旋转的印章标记、拼贴版面中的胶带块、首字下沉以及纸叠纸paper-on-paper错位阴影。四、Preview Ingredients标题预览必须遵守的原料清单预览卡用{colors.*}与{components.*}占位符引用设计令牌列表如下调色板bg #C8B99Abg-dark #B8A98Agreen #008F4Dgreen-light #00A85Dblack #1A1A1Awhite #F4EFE6注意这里的white实为暖奶油色字体排印字体令牌在完整设计文档中定义选中后读取Signature moves标志性手法暖卡其纸面画布 森林绿强调 墨黑结构覆盖每页 0.07 不透明度的 SVG 颗粒叠层Bebas Neue 全大写加字距做一切显示时刻Space Grotesk 小号做正文Caveat 做手写强调3px 实心黑色结构边框划分区域2px 与 1.5px 边框做细分纸叠纸错位卡片绿色色块通过::before错位 12px 垫在白色卡片后方。这五条 Signature moves 是预览页与最终 deck 都必须保持的系统基因任何一条缺失都会使模板失真。五、Preview Rules预览页生成的真实性红线preview.md为标题预览页定义了不可协商的生成规则与 SKILL.md 中 Phase 2 的 Preview authenticity rules 完全一致只构建一张 1920×1080 的标题页位于 fixed-stage 模型内保持调色板、字型角色、表面节奏与装饰词汇使用用户真实的标题/副标题/上下文不得复制演示示例内容渲染结果必须像一张真实的第一页而不是模板选择卡绝不在幻灯片上放置内部工作流文字preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签绝不在幻灯片上放置模板名或 slug模板名只能出现在聊天消息里绝不放置用户需求备注如期望的氛围、受众、内部用途标签除非用户明确要求这些字出现在 deck 中可见的chrome只能使用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或来自用户材料的真实内容短语不读取template.html来生成预览不读取其他模板的design.md用户选定此模板后、生成最终幻灯片之前必须先读完完整设计文档。六、Frontend Slides Fixed-Stage Policydesign.md 到 1920×1080 的落地契约design.md顶部有一个优先级最高的政策声明值得单独强调当该设计系统被frontend-slides技能使用时最终 deck 必须以固定 1920×1080 舞台生成并整体等比缩放到浏览器视口。即使在手机上也保持 16:9 幻灯片画布允许 letterbox/pillarbox但不允许为移动端重排幻灯片内容。即使源模板原本用100vw、100vh、vw、vh、clamp()这类 viewport 流式 CSS 实现也应把这些值当作待转换到 1920×1080 舞台坐标的设计比例而不是生成 deck 中的实时响应式规则最终输出使用 deck-stage.js 或等价的内联舞台缩放器每页按 1920×1080 渲染整个舞台用一次transform: scale()缩放并在渲染截图中同时验证文字溢出与面板重叠。从源码看deck-stage.js是一个deck-stageWeb Component内部.canvas以设计尺寸默认DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080为固定宽高_fit()用Math.min(vw/designWidth, vh/designHeight)计算统一缩放系数以scale(${s})一次变换完成整台缩放非激活幻灯片以visibility: hidden opacity: 0隐藏而非卸载保证视频、iframe、表单等状态在翻页后保留。它还内置了键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键、R 复位、移动端三分区点击区与media print的一页一页输出。与之配合的 viewport-base.css 是必须整段包含进每个演示的固定舞台基础样式其中同样以.deck-stage1920px×1080px.slide.active/.visiblevisibility/opacity/pointer-events 切换禁用display:none切页落实固定舞台模型。七、色彩系统earth forest 调色板与默认值design.md的 Colors 节给出了完整调色板与一套默认值契约PaletteBackground#C8B99A暖卡其纸面画布每页默认表面。饱和到足以读作有历史的纸而非中性色温暖到能与森林绿和谐相处Background Dark#B8A98A画布的深一档同族色用于分屏时一层表面视觉上退到另一层之后或拼贴块中纸上之纸的效果Green#008F4D深森林绿系统强调色——英雄数字、首字下沉、丝带条、声明页背景、进度条、行内高亮、RSVP 标签、卡片背后的错位色块、结束页分隔 stub。它是除画布外最具辨识度的非画布色Green Light#00A85D绿色略亮的同族色作为 hover 态或需要更亮一步的次要绿色基线静态页很少使用Black#1A1A1A墨黑结构色——所有边框、正文、分隔线、结束页背景、反白时的标签填充。比纯黑#000000略软以便作为暖纸上的暖墨White / Cream#F4EFE6软奶油色用于卡片填充纸叠纸、黑面上的文字、声明页的分隔 stub。刻意不是纯白在任何白色表面上都维持暖纸 register。Defaults关键默认值默认表面背景bg卡其纸面默认主标题色green正文配对的双栏布局里可用black犹豫时选green——绿标题是系统最响亮的编辑信号默认正文色、默认边框色black结构边框一律黑色无例外默认强调面green配white文字默认绿面上的文字色white奶油默认黑面上的文字色bg卡其反白时类型仍读作纸上之墨默认 eyebrow/label 色Bebas Neue 标签用green字距拉开的 Space Grotesk 标签用black默认首字下沉色green首字下沉是编辑指纹永远是绿色默认手写色卡其/奶油面上用black黑面结束页上用green默认行内高亮黑底卡其字marker 笔刷效果系统对绿与黑的角色有严格分工green 强调请注意这里black 结构托住整页的东西。互换二者用黑做强调、绿做结构会直接翻转系统声部。八、字体排印系统三字型对比与完整 Type Scaledesign.md明确规定系统只有三个 Google 字体声部没有第四个字体不存在斜体Caveat 是手写字体而非斜体不存在下划线。强调通过换字体正文 Space Grotesk → 手写 Caveat或切到 Bebas Neue 显示或换颜色black → green实现。Type Scale完整令牌表TokenSize (clamp)FamilyWeightUsedisplay-hero56–160pxBebas Neue400结束页或超大封面标题display-cover48–140pxBebas Neue400封面/开场显示标题display48–120pxBebas Neue400重大声明或号召性显示headline42–90pxBebas Neue400主章节标题statement36–90pxBebas Neue400长引文声明headline-md36–72pxBebas Neue400编辑章节页眉title24–42pxBebas Neue400区域或拼贴块标题number-hero80–160pxBebas Neue400英雄统计数字number-md44–80pxBebas Neue400瓷砖或次级统计数字drop-cap48–80pxBebas Neue400引导编辑段落的初始大写body-md14–18pxSpace Grotesk400引导段或强调正文body13–16pxSpace Grotesk400标准段落正文label-eyebrow14–18pxBebas Neue400标题上方的 eyebrow0.2em 字距label-spaced12–14pxSpace Grotesk600拉开字距的全大写小标签caption-feature13–15pxBebas Neue400拉开字距的说明/特性标签hand-script22–36pxCaveat600作者署名、装饰注释、声明 bylinehand-script-sm16–22pxCaveat400小号手写标签或描述hand-script-lg24–36pxCaveat600较大的手写副标题排版默认值要点主章节标题默认headline42–90px用green封面默认display-cover48–140px用green段落正文默认body13–16px——zine register 期待小号正文而非现代 18px 段落eyebrow 默认label-eyebrow14–18px用green、0.2em 字距全大写英雄数字默认number-hero80–160px用greenBebas 显示元素一律 400 字重Bebas Neue 只有 400改字重会回退正文 400全大写小标签 600Signature Treatments同类元素出现时不可省略每个 Bebas Neue 元素必须全大写该字体虽有小写字形但本系统不使用句首大写式 Bebas 不属于词汇表每个 Bebas 元素必须有 ≥0.02em 的正向字距默认字距读作拥挤0.02–0.04em 将其打开标签类追踪到 0.2–0.25em每个主章节标题用green黑色标题只存在于正文配对列中每列引导段可用首字下沉且必须是drop-cap——绿色、Bebas Neue、line-height 0.8、左浮动每个手写元素用 Caveat换掉会丢失私人便笺声部引文/声明版式中手写署名不可省略——没有 byline 的声明读作未完成行内高亮一律用黑底卡其绿底行内高亮读作拼写错误行高契约显示 0.85–1.1紧、正文 1.6–1.7松、手写 1.3更松。不可反转——紧正文和松显示都会破坏节奏。九、布局系统画布、间距刻度与持久 ChromeCanvas System源模板语义生成时转为固定舞台比例源系统面向100vw × 100vh全视口每个.slide绝对定位铺满视口仅.active可见opacity 1其余 opacity 0幻灯片切换使用 0.6s opacity translateY(20px)缓动营造纸页轻翻的感觉导航由 JS 驱动方向键、空格、点击、触摸滑动一条 4px 高的green进度条沿底边铺满生长。在 frontend-slides 生成模型中这些比例值都会被翻译进 1920×1080 固定舞台坐标。Padding ScaleTokenValueUseslide-pad60px标准页外距slide-pad-wide60px 80px编辑栏展开的外距card-pad-lg48px英雄卡内部RSVP、大号召卡card-pad-md32px网格单元格内部card-pad-sm24px拼贴块、小卡片单元格内部gap-lg60px编辑栏间距gap-md40px标准区域间距gap-sm24px紧凑行内间距Persistent Chrome三件套位于版式体系之外进度条左下角贴边4px 高green填充随 deck 推进增长页数计数器右下角Bebas Neue 14px置于 2px 边框的奶油 chip 中卡其墨色文字导航提示底部中央黑色胶囊底、奶油文字仅在body:hover时淡入0.4s 透明度过渡border-as-divider 原则网格容器遵循边框即分隔线父容器 3px 实心黑外框每个子单元格 1.5px 实心黑边框形成发丝级单元格分隔分屏布局中相邻区域直接对接 3px 实心黑分界线不留空隙。自由构图拼贴、英雄、宣言页中区域绝对定位、带旋转与重叠边框落在各块而非网格上。十、深度与层次无 Web 阴影的印刷级深度语法系统的全部深度由三种手段构成彻底不用模糊box-shadow、drop-shadow或 rgba 阴影纸叠纸错位块主技法卡片通过绝对定位的::before伪元素承载一块实色绿板错位 12px 向下向右、z-index置于卡片之后。视觉上卡片像压在一张略大的绿色纸上面绿色从右下边缘露出。用于英雄 RSVP 卡与主号召容器旋转副技法印章 -8°、印章备用 6°、拼贴块 -5°~5° 的小角度旋转赋予手工摆放能量。旋转必须是有意的且只用于旨在读作物体的元素印章、贴纸块、贴上去的标签颗粒叠层氛围纹理0.07 不透明度 SVG fractal-noise 覆盖全部页面把所有平面色块锚定在印刷纸 register 上。此外还有第四重区域对比绿底丝带在卡其区域中视觉前冲黑色区域配白色卡片视觉后退高对比本身就是次要深度信号。十一、形状与装饰组件库形状约束圆角一律为 0卡片、丝带、印章、RSVP 卡、表格单元格、首字、chip、分隔 stub 全部是严格矩形边框权重分级3px 实心黑卡片、区域分隔、网格外框、拼贴块、RSVP 卡、英雄号召→ 2px 实心黑编辑栏规则、RSVP 下划线、编辑页眉底部、印章绿边→ 1.5px 实心黑网格子边框、账页表头下划线→ 1px rgba(black, 0.22)账页行分隔发丝线边框永远是黑色唯一的彩色边框是stamp-mark印章的绿色边框。组件清单design.md 中的完整语法line-box卡其底上的 3px 描边通用卡片系统默认内容容器card-offset奶油白卡 3px 黑边 ::before12px 错位绿板签名纸叠纸卡片stamp / stamp-mark-8°或 6° stamp-alt旋转的手工压印元素stamp-mark 变体为黑底、绿字、绿 2px 边、-8° 旋转用作批准印章、CONTACT US 徽章collage-piece自由定位、3px 黑边、小幅旋转的拼贴面板背景在绿/奶油/卡其深/黑反白之间轮换tape半透明白色矩形以随机锐角-40°~35°叠在拼贴块上模拟真实胶带ribbon-bar实心绿色块 奶油文字用作 eyebrow 条、强调条与行内章节标签drop-cap超大绿色 Bebas Neue 首字左浮动、line-height 0.8正文环绕inline-highlight黑底卡其字的行内 marker 笔刷rsvp-fieldBebas Neue 绿色小标签 Caveat 手写值 2px 黑下划线的表单行模式ledger-row日期 | 标题 | 版本 | 曲目 | 编号的横向数据行表头行 1.5px 黑下划线正文行 1px 发丝分隔行内可带彩色 chipchip等宽字体色块JetBrains Mono 或默认等宽标记行类别填充色为绿色 分类色扩展板divider-stub4px 高、60–80px 宽的短实心水平规则居中作声明/结束标题上下的视觉呼吸绿面上白色、黑面上绿色手写元素任何 Caveat 文本即人声信号十二、Dos and Donts最容易踩的 12 条红线Do每页保留 0.07 透明度的 SVG 颗粒叠层所有显示/标题/声明/数字/eyebrow 用 Bebas Neue 全大写 0.02–0.04em 字距主章节标题优先用green绿上卡其是最响亮的编辑信号英雄号召卡与 RSVP 卡使用纸叠纸错位模式::before绿板对应读作物件的元素施加小角度旋转印章 -8°、拼贴块 -5°~5°且旋转必须显得有意用首字下沉开启编辑正文栏这是系统的编辑指纹单页内混用三字型Bebas 显示 Space Grotesk 正文 Caveat 手写行内高亮用黑底卡其marker 刷效果每条引文/声明下配 Caveat 手写署名在拼贴构图上以锐角叠放半透明胶带块Dont不圆任何角系统级 border-radius 0不用模糊box-shadow深度只来自错位块、旋转、颗粒不用其他字体替换 Bebas Neue压缩工业全大写加字距声部就是整个系统身份Bebas 不用句首大写式不用其他手写字体替换 CaveatLobster、Pacifico 等属于别处不引入第三种品牌色chip 分类扩展板橙/粉/蓝/红只允许出现在表格账页的类别标签里不得用作一般强调色行内高亮不用绿底卡其会读作拼写错误元素倾斜不超过 ±8°正文不超过 18px13–16px 是杂志栏密度命脉卡片不用纯白 #FFFFFF奶油 #F4EFE6 维持纸叠纸 register十三、响应式、演示器与打印行为design.md记录的源模板行为在 frontend-slides 固定舞台模型下部分会被整体缩放替代缩放行为显示标题 48→140/160px正文 13→16/18px内距 32→60/80px边框、胶带尺寸、印章旋转固定不随视口缩放max-width: 768px时多栏折叠为单栏、栏间竖线换为底边线、页内距降至 32px演示器行为ArrowRight/ArrowDown/Space/Enter/PageDown/点击右半区前进ArrowLeft/ArrowUp/PageUp/点击左半区后退激活页带.active非激活页 opacity 0 translateY(20px)移动端横向滑动翻页导航提示在body:hover淡入打印行为源模板未定义media print为 web/viewport-first。而 frontend-slides 的 deck-stage.js 与 viewport-base.css 则内置了一页一页的打印规则配合 scripts/export-pdf.sh 可截图合成为 PDF。十四、CJK 与国际内容适配推荐的中文配对RoleLatinChineseWeight mappingDisplay / Headline / Statement / Title / Number / Drop-cap / Label-eyebrowBebas Neue (400)思源宋体 Noto Serif SC900Body / Body-md / Label-spacedSpace Grotesk (400/600)思源宋体 Noto Serif SC400 (body), 600 (label)Hand-script (Caveat)Caveat (400/600)无中文替代n/a混合内容策略Strategy A用**单一中文字族思源宋体**承担所有排印角色Bebas Neue 的压缩工业全大写声部在中文无衬线中没有能保留重海报重量且不沦为陈词滥调的对应物而 Noto Serif SC 字重 900 能承载真正的印刷压力感——其深衬线笔画呼应活版与木刻印刷比任何中文无衬线都更贴近系统世纪中叶激进海报的血统。拉丁 Bebas 中文宋体读作同一本 zine 的中译本而非两套竞争系统。加载方式link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSerifSC:wght400;600;700;900displayswap relstylesheet然后追加字体栈/* Display roles */ font-family: Bebas Neue, Noto Serif SC, sans-serif; /* Body roles */ font-family: Space Grotesk, Noto Serif SC, sans-serif;通用 CJK 调整行高正文 1.75–1.85显示 1.15–1.25字距CJK 上为0文本变换CJK 上不做全大写全角标点显示标题不加句号Pangu spacing盘古之白使用 Claude而非使用Claude每句只用一个字体本系统的美学专项调整Bebas 的 0.02–0.04em 正向字距在 CJK 上必须归零——被拉开字距的中文看起来像逐字拆词显示声部完全靠 900 字重承载显示行高须从 0.85–0.95 打开到 1.15–1.25CJK 字形占满 em-box需要垂直呼吸空间首字下沉需要重新思考中文排印传统上没有首字下沉。要么保留为西式编辑致敬要么改用绿色竖边条3px 宽、绿色填充沿引导段侧边铺开行内高亮、丝带条、印章标记都是色块处理可干净迁移手写 Caveat 无中文等效物应作为纯拉丁时刻处理署名用拉丁文、侧注用拉丁文即使页面其余部分是中文中文排版正文 拉丁手写页边注的对比反而会加深 zine 声部读作译者的批注编辑体正文尺寸13–16px仍然适用——Noto Serif SC 在该字号下读作密集杂志栏文字恰好符合 zine register。已知 CJK 缺口三字型对比Bebas 显示 Space Grotesk 正文 Caveat 手写是拉丁排印论证坍缩为单一中文字体宋体会失去一层节奏、获得另一层。选择宋体而非黑体是有意的——zine 的世纪中叶印刷血统更接近中文衬线传统而非中文几何无衬线。中英混排 deck 需要接受英文 Bebas 声部与中文宋体声部是两种 register这一不可避免的现实。十五、迭代指南新增内容时的十条检查表design.md的 Iteration Guide 是一份可执行的生成检查表逐条照做即可保证新内容不脱离系统每张新页携带 0.07 透明度的 SVG 颗粒叠层——移除即破功任何新标题用 Bebas Neue 全大写、400 字重、0.02–0.04em 字距主页面时刻用headlinegreen双栏/分屏配正文时用black任何新正文用 Space Grotesk 13–16px引导段 14–18px行高 1.6–1.7不超过 18px任何新 eyebrow 用label-eyebrowBebas 14–18px、0.2emgreen次级标签切label-spacedSpace Grotesk 600、0.25em任何新卡片用 3px 实心黑边 奶油或卡其底英雄号召卡加 12px 错位绿板::before任何新编辑栏可加首字下沉——绿色 Bebas、左浮动、line-height 0.8任何新声明/引文页必须配 Caveat 手写署名任何拼贴构图用 3px 边框拼贴块、-5°~5° 小旋转、锐角半透明胶带叠接缝背景在绿/奶油/卡其深/黑反白间轮换任何表格账页用ledger-row模式表头 1.5px 下划线、正文 1px 发丝分隔类别标签用等宽chip绿色或分类板状态/批准印章用stamp-mark黑底绿字绿边 -8°保留给值得盖章的时刻滥用会稀释信号。十六、已知边界生产使用前必须知道的限制design.md的 Known Gaps 是诚实且实用的工程提醒CDN 字体依赖系统从 CDN 加载三个 Google 字体Bebas Neue 仅 400 字重尝试更重字重会回退生产环境建议自托管颗粒叠层渲染差异颗粒为内联 SVG data URIfeTurbulence各浏览器渲染略有差异尤其旧版 Safari/Firefox错位块的::before依赖z-index: -1卡片必须position: relative且父容器不能裁剪溢出否则错位绿板会被裁掉chip 分类扩展色仅限表格红/粉/橙/蓝/绿只用于账页类别标签不属于通用系统调色板Caveat 的文化 register带浓重美式手写感与 CJK/西里尔文不搭配非拉丁 deck 需另选手写替代导航提示在触摸设备上不触发body:hover依赖 hover移动用户可能永远看不到提示将其视为桌面专属 chrome结束页颗粒可见性弱黑底上 0.07 不透明度的颗粒几乎不可见印刷 register 在结束页弱于卡其页RSVP 表单下划线用字符下划线_________非真实input下划线跨系统字体对齐不完美。十七、完整实践路径从选择到交付结合 SKILL.md 的全流程retro-zine 的典型使用路径是风格探索Phase 2Agent 基于 selection-index.json 的元数据mood/tone/best_for/avoid_for/formality/density/scheme匹配候选短名单确定后只读 retro-zine 的preview.md按第五节预览规则渲染一张 1920×1080 真实标题预览页保存到.frontend-slides/slide-previews/用户选定Phase 3 前用户从三张预览1 个安全 preset 至少 1 个 bold 模板 1 个 wildcard中做出选择完整生成Phase 3读取 design.md将其作为风格配方而非内容模板完整包含 viewport-base.css并以 1920×1080 固定舞台生成单文件 HTML使用 deck-stage.js 或等价缩放器最后对渲染截图验证文字溢出与面板重叠交付与导出Phase 5/6交付后用 scripts/deploy.sh 部署到 Vercel 获得在线 URL或用 scripts/export-pdf.sh 导出 PDF--compact可压缩体积。Retro Zine 的价值在于它用纯 HTML/CSS 还原了一整套独立出版 世纪中叶海报 DIY zine的印刷美学且严格锁死在可复制的令牌系统里暖卡其纸面、森林绿强调、墨黑结构、三字型对比、颗粒叠层与纸叠纸错位。只要遵循 preview.md 与 design.md 的规则任何 deck——无论是独立出版预告、创作者作品集还是想以 riso 印刷温度出现的技术演讲——都能以稳定、真实、可复现的方式获得这份手工印刷编辑单页的独特气质。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐LMCache Non-KV Caching 深度解析HiddenStateStore 隐藏状态缓存与 Encoder Cache 编码器缓存LMCache Non KV Caching 深度解析HiddenStateStore 隐藏状态缓存与 Encoder Cache 编码器缓存 导读KV CAI 技能AI 插件前端Frontend Slides 的 Retro Zine 模板risograph 印刷质感演示文稿的设计系统与工程落地Frontend Slides 的 Retro Zine 模板risograph 印刷质感演示文稿的设计系统与工程落地 本文围绕开源仓库 frontend sAI 技能AI 插件前端Pin Paper 模板设计系统解析用 frontend-slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片Pin Paper 模板设计系统解析用 frontend slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片 导读 Pin AI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考