AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Peoples PlatformBlock Bold是 frontend-slides 项目中“Bold Template Pack”里的一套 WPA 海报风格演示系统而 bold-template-pack/templates/peoples-platform/preview.md 正是这套系统的轻量“样式卡”——它只用于生成首屏标题预览title-slide preview。阅读本文后你将掌握该模板的完整视觉词汇蓝/橙/红三色功能分工、Alfa Slab One Caveat Brush DM Mono 三字体系、预览阶段必须遵守的生成规则以及选定模板后如何无缝衔接到完整设计文档 design.md 与 1920×1080 固定舞台实现。什么是 Peoples Platform一套“抗议海报能量”的演示系统从元数据看这套模板的核心气质是activist行动主义、loud响亮、graphic图形化、honest诚实语气是 punchy、direct、expressive、warm-bold形态上属于 formality 较低的“medium-low”、内容密度偏高的“medium-high”、浅色系scheme: light。这些字段被定义在 bold-template-pack/selection-index.json 的模板索引里slug: peoples-platform也是 SKILL.md 的 Phase 2 做视觉候选筛选时推荐使用的关键元数据mood/tone/best_for/avoid_for/formality/density/scheme。在适用场景上preview.md 给出了明确的边界Best for文化评论、宣言manifesto、公民与社区类演讲、设计分享、竞选式提案创始人愿景时刻、使命陈述以及任何想要“抗议海报能量而非企业式打磨”的跨行业演示。Avoid for当“制度性克制”本身就是目标时——这个高度饱和的政治海报配色会坚定地选择表达性能量不适合需要安静权威感的场合。preview.md 的定位非常明确它只服务于首屏预览文档开头就写着 “Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.”本小文件仅供标题页预览最终整份演示生成需阅读下方完整设计文档。这是 SKILL.md 与 bold-template-pack/README.md 所描述的“渐进式披露Progressive Disclosure”流程的一部分先读轻量样式卡做预览用户选定后再读该模板完整的design.md生成正式页面。视觉快照WPA 海报遇上政治竞选印刷preview.md 的 “Visual Snapshot” 把整套系统的气质浓缩为一段描述WPA 海报 × 政治竞选的印刷体系建立在三种字体与五色配色可归约为三个功能角色之上。Alfa Slab One压缩型粗衬线compressed slab serif以纯大写形式承担全部视觉重活字号可以拉到极端尺寸。Caveat Brush手写字体作为“人的介入”——小写、略带旋转、情感温暖。DM Mono承载所有元数据紧排的大写字距。画布是暖色纸面{colors.paper}#F5F2EA比纯白略暖每一页都通过CSS 伪元素叠加纸张颗粒纹理grain overlay让整套演示读起来像丝网印刷screen-printed而非屏幕渲染。这正是它区别于普通企业模板的核心记忆点它是“信念的视觉语言、公共表达的图形语域”。预览要素调色板、字体系与五个签名动作preview.md 的 “Preview Ingredients” 是生成预览时必须逐字兑现的要素清单类别内容调色板blue #2C2CDCblue-deep #1B1BB0orange #F2A03Aorange-deep #E89321red #E83A2Ared-deep #B7281Ccream #F4E9D6paper #F5F2EA字体Alfa Slab OneCaveat BrushArchivo NarrowDM Mono在完整设计文档 design.md 中这四套字体有严格的分工Alfa Slab One是“喊话的声音”只使用 weight 400该字体的唯一字重天生粗壮严格大写、行高 0.82–1.04、字距 0.005emCaveat Brush是“低语的声音”仅在 64–96px 大字号出现永远小写并带 -2°~-5° 旋转DM Mono是“记账的声音”固定 24px、0.18–0.22em 大写字距Archivo Narrow是正文工作字体只用 400/500 字重绝不用于展示级字号。签名动作Signature Moves纸面画布{colors.paper}#F5F2EA 每个页面通过 CSS 伪元素叠加的颗粒纹理。堆叠双文本阴影Npx Npx 0 {colors.red}, 2Npx 2Npx 0 {colors.red-deep}阴影尺寸随字号等比放大。Alfa Slab One 承担所有展示与结构字体——大写、行高 0.82–1.04、字距 0.005em。红色只用做阴影色{colors.red}从不作为表面背景。6px 墨色粗边框用于所有主要结构分隔顶栏、章节标题、分栏线、内嵌框。完整的阴影分层规格在 design.md 的 “Depth and Elevation” 章节按元素尺寸分四档层级偏移层 1偏移层 2适用Small3px 3px 0 {colors.red}—72px 以下Medium5px–6px 5px–6px 0 {colors.red}—72px–140pxLarge10px 10px 0 {colors.red}, 20px 20px 0 {colors.red-deep}140px–260pxJumbo12px 12px 0 {colors.red}, 24px 24px 0 {colors.red-deep}260px 统计数字其原理是三层“准 3D 活字印刷”错觉橙色文字是“面”红色是“体”red-deep 是“脚”。迭代指南建议第一层阴影偏移约等于字号除以 20第二层翻倍。颜色的三个功能角色完整设计文档把“五色归约为三角色”讲得很透Blue#2C2CDC结构色高强调表面的背景、内容分隔边框、非蓝背景上的文字颜色。Blue-deep#1B1BB0只用于最外层阴影。Orange#F2A03A能量色超大统计数字、栏目标识数字、蓝面内强调文字、CTA 按钮填充、底部 ribbon。Orange-deep#E89321只用于橙色元素的最深阴影层。Red#E83A2A深度色只出现在 text-shadow 与 box-shadow 中绝不作为背景或主文字色。Red-deep#B7281C是最大展示元素双层阴影的最外层。表层色Surface另有两支**Cream#F4E9D6**用于蓝面上的文字/边框反色模式与内嵌框边框**Ink#0E0E14**是所有结构边框、正文、时间线轨道与 KPI 卡片边框的近黑墨色。design.md 给了一句高度概括的“颜色角色总结”蓝面高强调/结论时刻纸/奶油面内容优先/从属时刻橙色数字与能量红色你不会直接看到、只会感知到的阴影。预览生成规则一张真实的第一页而不是诊断卡片preview.md 的 “Preview Rules” 是预览阶段**不可妥协NON-NEGOTIABLE**的行为约束它与 SKILL.md 的 Preview Authenticity Rules 完全一致只构建一张 1920×1080 标题页运行在固定舞台fixed-stage模型内。保留调色板、字体角色、表面节奏与装饰词汇。使用用户真实的主标题/副标题/背景信息不得复制演示示例内容。渲染结果必须像一张真实的第一页而不是模板选择卡。严禁把内部流程文字放上页面不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。模板名/slug 也不得出现在页面上只能出现在对话消息里。不得把用户需求备注如期望氛围、受众、内部用途标签放上页面除非用户明确要这些词出现在演示中。可见的“chrome”页眉页脚只能用真实演示内容演示标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实语句。不得读取template.html也不得读取其他模板的design.md。用户选定该模板生成完整演示后先读完整设计文档再生成最终页面。这套规则的底层原因在于流程设计Bold Template Pack 的 README.md 明确区分了design.md设计系统参考、风格配方与preview.md轻量样式卡。预览页必须“看起来是真实的第一页”用户才能在三个候选中做出有意义的视觉选择而不是看到带流程标签的样式诊断卡。固定舞台1920×1080 的渲染与缩放前提预览与最终页面共享同一个舞台模型。design.md 的 “Frontend Slides Fixed-Stage Policy” 以及 selection-index.json 的frontend_slides_policy都规定所有页面固定为 1920×1080 舞台整体等比缩放到浏览器视口手机上允许 letterbox/pillarbox但绝不重排幻灯片内容。即使源模板原本用100vw/100vh/clamp()这类流式 CSS也一律当作设计比例折算成 1920×1080 舞台坐标。具体实现层面仓库提供两个可选路径官方 Web Component 方案 bold-template-pack/deck-stage.jsdeck-stage width1920 height1080包裹多个section内部_fit()用Math.min(vw/1920, vh/1080)计算缩放因子并施加transform: scale()支持键盘←/→、PgUp/PgDn、Space、Home/End、数字键跳页、R 重置、触屏三等分点击翻页、底部页码浮层以及media print下“一页一张幻灯片”的 PDF 打印布局。经典类方案 html-template.md 中的SlidePresentation同样以Math.min(window.innerWidth/1920, window.innerHeight/1080)计算因子通过translate(x, y) scale(factor)实现居中缩放。两者都必须配合 viewport-base.css 使用——SKILL.md 要求每次生成演示时完整包含该文件。它对.deck-stage、.slide、打印样式与prefers-reduced-motion做了统一规定尤其强调幻灯片切换要用visibility/opacity/pointer-events而非display:none。国际内容与 CJK中文版本的现实取舍preview.md 明确提示若预览使用中文或其他 CJK 文本必须把 CJK 字距归零、放宽行高、避免对 CJK 做大写转换具体字型配对在选定后阅读 design.md 的完整 CJK 章节。design.md 的 “CJK International Content” 给出了完整方案角色拉丁字体中文字体字重展示/标题/引语Alfa Slab One 大写Alfa Slab OneNoto Serif SC思源宋体900手写打断Caveat BrushCaveat Brush—无合适替代—正文Archivo Narrow 500Archivo NarrowNoto Sans SC思源黑体500标签/等宽DM MonoDM MonoNoto Sans SC400不给 CJK 强加等宽混合内容策略Strategy A是把中文字体追加到每个 token 的fontFamily末尾例如 Alfa Slab One 变成Alfa Slab One, Noto Serif SC, serif。design.md 还给出了可直接使用的 Google Fonts 加载链接同时加载 Alfa Slab One、Caveat Brush、Archivo Narrow、DM Mono、Noto Serif SC、Noto Sans SC。design.md 坦诚地记录了三个关键“不可转译”点Known CJK Gap 与 Aesthetic NotesAlfa Slab One 没有等量级的中文粗衬线Noto Serif SC 900 最接近但气质更接近“遗产时代的公告牌/大字报”而非 1930 年代 WPA 海报需接受这种语域偏移。Caveat Brush 的手写打断无法转译为中文中文书法字体如马善政偏仪式感、正式甚至官僚感与拉丁 Caveat 的随性人格相反。推荐方案是在纯中文页直接省略手写打断备选是在中文内容里夹一个短拉丁手写词如yes!保留“声音打断”的能量。DM Mono 大写字距标签不转译为中文中文元数据用 Noto Sans SC 400、字距归零、不做大写纯拉丁标签URL、日期、版号继续用 DM Mono。Archivo Narrow 没有中文压缩变体需接受中文正文略宽的观感。好消息是堆叠红色文本阴影完美转译到中文——对每个中文展示标题同样施加橙色→红→红深三层阴影活字印刷的深度感不受脚本切换影响蓝橙红配色、菱形子弹、旋转印章、奶油内嵌框、6px 墨色边框也全部原样工作。从预览到整份演示design.md 的完整设计体系选定模板后design.md 是最终生成的设计配方。它在 preview.md 的基础上补全了完整的 token 体系排版 Token从display-jumbo540px到stamp28px共 20 个 Alfa Slab One 展示级 tokenCaveat Brush 的script-lg96px/script-md64pxArchivo Narrow 的 body 系列DM Mono 的label0.18em/label-wide0.22em/label-accent32px, 600/signoff0.20em标签系列。间距系统slide gutter 90px、content gutter 120px、topbar 高 90px、frame inset 48px、section-border 6px、inner-border 3px。布局模式两种通用 chrome——90px 蓝色顶栏模式与 6px 墨色章节分隔线模式可独立或共存。组件库inset-frame6px cream 内嵌框、kpi-card、timeline-dot60px 橙圆 6px 墨框 6px 6px 0红影、compare-side-left/right纸面 vs 蓝面对比面板、diamond-bullet24px 红菱形蓝面用橙色、circular-stamp200px 圆章-9° 旋转、quote-stamp-3° 矩形章、ribbon60px 橙色底部条、grain-overlay双层径向渐变点阵mix-blend-mode: multiply50% 透明度。Dos and Donts核心红线包括——每页必须有 grain 覆盖层所有橙/奶油展示文本必须带堆叠阴影红色永远只做阴影Caveat Brush 只在 64px、小写、带旋转DM Mono 永远 24px 且字距不低于 0.16em结构边框只用 6px卡片一律直角Alfa Slab One 禁用大小写混排blue-deep/red-deep 禁止做表面色。design.md 的 “Known Gaps” 也值得在实现前过一遍橙色 ribbon 是静态重复文本而非 JS 跑马灯动画grain 的multiply混合模式在纯白/纯黑表面可能不可见PDF 导出时混合模式可能被扁平化需测试打印输出并按需关闭颗粒层text-wrap: pretty在现代 CSS 中支持有限旧导出环境可能不生效。快速上手指引预览 → 选定 → 生成结合 SKILL.md 的流程与 bold-template-pack/README.md 的实现契约标准使用路径如下候选筛选读取 bold-template-pack/selection-index.json只依据元数据mood/tone/best_for/avoid_for/formality/density/scheme初选候选不要批量读取所有design.md。预览生成只读取候选模板的 preview.md在固定舞台内生成一张 1920×1080 的真实标题页严格遵循上文“预览生成规则”。用户选定用户选定 Peoples Platform 后读取本模板完整的 design.md按其中 token 体系生成整份演示。输出与校验保持单文件自包含 HTML完整内联 viewport-base.css使用 bold-template-pack/deck-stage.js 或等价的舞台缩放逻辑渲染后必须同时校验文本溢出与面板重叠scrollHeight检查不足以发现网格面板互相遮盖。这套“轻量预览卡 → 完整设计文档”的双层文档结构是 Peoples Platform 乃至整个 Bold Template Pack 的核心工作方式预览阶段用最少的信息做出可决策的真实首页选定后用最完整的 token 体系还原出从顶栏到印章、从阴影分层到中文配对的整张设计图纸。赞分享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 的 Coral 模板设计系统——Bebas Neue 杂志海报式幻灯片生成规范前端设计指南frontend slides 的 Coral 模板设计系统——Bebas Neue 杂志海报式幻灯片生成规范 导读 本文以 bold tempAI 技能AI 插件前端frontend-slides 设计系统实战Broadside 抗议海报式幻灯片的双寄存器色彩、Barlow 巨字排版与固定舞台实现frontend slides 设计系统实战Broadside 抗议海报式幻灯片的双寄存器色彩、Barlow 巨字排版与固定舞台实现 Broadside 是AI 技能AI 插件前端上一篇1Panel SMTP 邮件配置完整指南4 步开通服务器告警附端口避坑清单下一篇PowerMock在JUnit4中的完整应用从Rule到Runner的全面指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考