34套设计感模板全解析Frontend Slides Bold Template Pack风格选择与避坑指南【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides是一个让 AI 编程代理无代码生成网页幻灯片的技能skill而随它附带的Bold Template Pack大胆设计模板包内置了34 套精选 HTML 幻灯片设计模板从商务深海军蓝到复古像素街机覆盖了几乎所有演讲场景。这篇文章带你全解析这 34 套模板的定位与取舍给出一份可直接套用的选择清单并列出新手最容易踩的 6 个坑帮你一次做对风格选择。先搞懂Bold Template Pack 是什么Frontend Slides 本身已经内置了 12 套安全预设详见 STYLE_PRESETS.md而 Bold Template Pack 是进阶的设计系统库灵感来自beautiful-html-templates设计体系共34 套模板每套都包含preview.md轻量预览卡只用于生成 3 张封面预览图design.md完整设计系统配色、字体、版式规则选它之前不读完整的元数据mood 情绪 / tone 语气 / formality 正式度 / density 信息密度核心设计思路是渐进式加载代理先读紧凑的索引 bold-template-pack/selection-index.json 缩小候选只为你看中的模板生成封面预览你选定后才加载那一份design.md生成整套幻灯片。这样既保证质量又不浪费上下文。工作流总地图见 SKILL.md模板包的使用契约写在 bold-template-pack/README.md。34套模板全解析按场景四大分类以下 34 套模板全部位于bold-template-pack/templates/目录下按最适合的场景分为四大类。一、专业商务类投资人、董事会、咨询交付模板一句话定位最适合建议回避Signal深海军蓝 低调金的机构感投资者材料、董事会汇报、法务简报需要热络、活泼氛围的场合Blue Professional奶油纸底 钴蓝点缀干净现代B2B 提案、咨询交付、顾问更新想要热或戏谑感的场合Monochrome象牙纸 全黑字零配色的档案感研究报告、白皮书、学术论文需要视觉个性与色彩叙事的场合Cartesian暖中性色 古典衬线克制优雅投资论题、长文研究、画廊展览需要紧迫感、多强调色的场合Cobalt Grid坐标纸底 电钴色衬线印刷级严谨设计研究、机构年鉴、建筑艺术需要暖色与俏皮语气的场合Emerald Editorial杂志封面式祖母绿 海军蓝高管汇报、战略简报、产品发布需要中性低调背景的场合二、编辑设计类有观点、有态度、有排版功底模板一句话定位最适合建议回避Broadside抗议海报式编辑系统火橙色 巨型字体支持中英双语品牌宣言、杂志提案、设计演讲需要安静、温暖、传统机构感的场合Bold Poster杂志封面海报感超大 Shrikhand 字体品牌宣言、创始人愿景每页信息量大的密集排版Neo-Grid Bold编辑式新粗野主义单一霓虹黄数据密集页、对比表、流程页需要安静传统语气的场合Editorial Tri-Tone粉 / 芥末 / 酒红三色编辑系统时装杂志风、生活方式媒体需要柔软、抚慰感的场合Biennale Yellow太阳黄 羊皮纸荷兰编辑海报能量美术馆、设计大会、策展提案需要视觉冲击力与多色能量的场合Soft Editorial暖纸 Cormorant 衬线周日副刊温度长文品牌故事、画廊、婚礼媒体需要视觉热度与冲击力的场合Pink Script黑底 荧光的深夜编辑奢华感时装品牌、夜场发布、个人品牌白天正式 B2B 场景Coral奶油与珊瑚色配超大 Bebas Neue时尚、美妆、健身、餐饮品牌需要机构感克制的场合Editorial Forest森林绿 灰粉 暖奶油的低压力编辑风季度回顾、内部汇报、工作室更新需要紧迫、销售导向语气的场合Grove森林绿底 古典衬线慢节奏的耐心感可持续品牌、酒庄餐厅、双语报告需要霓虹能量与快节奏的场合三、复古趣味类怀旧、俏皮、有手作温度模板一句话定位最适合建议回避8-Bit Orbit像素霓虹街机美学深夜 CRT 屏幕感赛博朋克、游戏、Web3、黑客松医疗、金融等严肃披露场景Retro WindowsWindows 95 灰标题栏满屏怀旧复古游戏、Y2K 品牌、科技史需要现代优雅机构感的场合Retro Zine米色纸 绿色点缀的漏印志Riso Zine独立出版物、音乐艺术品牌需要数字原生精致感的场合Sakura Chroma80 年代日式磁带包装彩虹斜纹硬件品牌、音乐厂牌、工作室年报需要克制企业感的场合Daisy Days手绘雏菊 彩虹的明快粉彩教育、亲子、工作坊、婚礼策划需要权威与精确感的场合Playful暖阳蜜桃底 Syne 字体友好独立感创作者作品集、独立产品发布机构可信度优先的场合Scatterbrain便利贴 手写体的进行中思维感头脑风暴、工作坊、创意复盘需要精确与机构分量的场合Pin Paper黄纸 别针插画 手写 Caveat 字体定性研究、创始人自述、工作坊复盘需要数据驱动严谨感的场合Peoples Platform蓝橙红三色抗议海报能量文化评论、社区议题、使命宣言以机构克制为目标时四、先锋设计类粗野主义、高对比、设计主导模板一句话定位最适合建议回避Studio黑底 电光黄全库最响亮的组合设计工作室自介、艺术指导评审需要安静或机构感的场合Creative Mode奶油纸 绿粉橙黄多色强调创意机构提案、品牌创意评审需要机构克制与安静权威的场合Raw Grid粗边框 错位阴影的新粗野主义创始人提案、孵化器路演、数据页需要柔软温暖语气的场合BlockFrame粉彩霓虹色块 粗黑边框独立 SaaS 发布、代理公司自介监管披露、正式法律文件Capsule药丸形模块化卡片 全粉彩调色板生活方式品牌、创作者作品集需要传统机构重量的场合Long Table奶油 铁锈红的 supper club 社交感餐饮、会员制活动、生活方式需要企业精致与技术密度时Mat深鼠尾草绿 焦橙中世纪现代风设计工作室、建筑室内、陶瓷家具需要快速科技能量的场合Stencil Tablet骨骼纸 模板切割字 大地六色博物馆、文化遗产、田野手册感需要数字原生精致感的场合 小提示如果拿不准记住一个直觉——正式度formality是选模板的第一维度董事会材料选 Signal / Monochrome创意提案选 Studio / Creative Mode社区活动选 Daisy Days / Scatterbrain。每个模板的元数据里都有现成的best_for最适合和avoid_for建议回避字段直接对照 selection-index.json 查即可。三步选模板从 34 套到 1 套的最快路径读索引列候选让代理先读 selection-index.json按mood / tone / best_for / avoid_for / formality / density / scheme七个字段筛出 2~3 套候选不必逐套读设计文档。看封面预览选方向代理会生成 3 张真实标题页预览——1 套安全预设 至少 1 套 Bold 模板 1 套通配符可以是另一套 Bold 模板也可以是自定义设计。你只需对眼睛说话我要这个。定稿生成选定后代理加载且仅加载那一份design.md产出单文件 HTML 幻灯片内联 CSS/JS、零依赖、固定 1920×1080 舞台。整个过程你不需要写一行 CSS——这正是 Frontend Slides show, dont tell 理念的核心不是让你描述审美而是让你看见后挑选。避坑指南新手最常踩的 6 个坑以下规则来自 bold-template-pack/README.md 中的实现契约也是代理生成幻灯片时的硬性约束别贪多读文件不要一次性读完 34 套design.md。正确姿势是先索引、后预览、最后只读选中的那一份——读多了反而污染上下文、拖慢速度。幻灯上不许出现过程标签封面与正文页不能出现preview、template、Option A/B/C、文件名、路径等元信息。预览必须是像真的第一页的标题页而不是选模板的卡片。坚持 16:9 固定舞台所有幻灯片按 1920×1080 生成并整体缩放源模板里的vw / vh / clamp()要换算成舞台坐标移动端用信箱letterbox留黑边而不是重排内容。基础舞台样式统一来自 viewport-base.css。检查文字溢出与面板重叠卡片即使通过了scrollHeight检查仍可能被相邻网格面板盖住。生成后要实际渲染验证两件事文字有没有溢出卡片、面板之间有没有互相遮挡。内容永远大于模板模板塑造的是呈现方式不能改写你的信息结构。如果你的每页都是密集段落就别选 Bold Poster 这类一页只放几个大字的低密度版式密度字段density: low是重要信号。中文排版注意 CJK 规则中英混排时中文字距保持为 0、放宽行高、不要对 CJK 文本做大写转换。像 Broadside 这类支持中英双语字体栈的模板选中后要按完整design.md的 CJK 章节执行。核心文件速查文件作用SKILL.md技能工作流总地图从内容发现到分享导出STYLE_PRESETS.md12 套内置安全预设深色 / 浅色 / 特色bold-template-pack/selection-index.json34 套模板的紧凑元数据索引bold-template-pack/README.md模板包使用契约与实现规则viewport-base.css强制的固定舞台基础样式html-template.mdHTML 结构与 JS 功能参考scripts/deploy.sh一键部署幻灯片到在线地址scripts/export-pdf.sh导出 1920×1080 的 PDF快速上手想本地体验 Frontend Slides可以先克隆仓库到代理的技能目录以 Claude Code 为例git clone https://gitcode.com/gh_mirrors/fr/frontend-slides ~/.claude/skills/frontend-slides然后在对话框里描述你的演讲内容例如帮我做一个 AI 创业公司的融资路演代理会先给你 3 张封面预览你挑中喜欢的风格完整的 HTML 幻灯片就会在浏览器里打开。一句话总结34 套 Bold 模板不是让你全都试试而是让你在索引字段里按正式度、密度、明暗三个维度各砍一刀——剩下的那套就是你的。【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考