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 是一个面向编码代理coding agent的开源演示文稿技能包它通过渐进披露progressive disclosure机制帮助非设计师先看后选轻量的preview.md预览卡只负责产出看起来像真实第一张幻灯片的风格预览用户选定后才会加载完整的design.md设计系统。本文以 Bold Template Pack 中 Creative Modeslug 为creative-mode的预览卡 preview.md 为主体完整解读其选择元数据、视觉配方、CJK 注意事项与预览硬性规则并结合 design.md、selection-index.json、deck-stage.js 与 viewport-base.css 等仓库源码说明一张预览卡如何被真正渲染、校验并最终扩张成一套完整的 1920×1080 neo-brutalist 演示系统。读完本文你将掌握预览卡与完整设计文档的分工边界、Creative Mode 的四色/三字体/硬阴影设计配方以及从预览到成稿的每一步落地规范。一、预览卡在项目中的定位渐进披露工作流的第一层1.1 为什么需要一张预览卡在frontend-slides技能的设计哲学中用户不该用抽象词汇描述审美偏好而应通过看到来决策Show, Dont Tell。为此技能包把样式信息拆成两层轻量预览层bold-template-pack/templates/*/preview.md每张卡只有几十行只允许用于标题幻灯片的风格预览完整设计层bold-template-pack/templates/*/design.md包含色板 token、完整字号阶梯、间距、组件、CJK 方案等只在用户选定模板后才读取。预览卡的第一句话就划定了边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本文件仅用于标题幻灯片预览最终生成请阅读下方列出的完整设计文档。这一约束与 SKILL.md 的流程完全对应Phase 2风格发现只读候选项的preview.mdPhase 3正式生成才读取用户选中的那一个模板的完整design.md见 SKILL.md 与 SKILL.md。1.2 索引文件如何指向预览卡frontend-slides在风格发现阶段先读紧凑索引 selection-index.json从中按 mood / tone / formality / density / scheme 等字段为候选模板排序。Creative Mode 在索引中对应条目见 selection-index.json其中preview_md与design_md字段分别指向两张文档{ slug: creative-mode, name: Creative Mode, preview_md: bold-template-pack/templates/creative-mode/preview.md, design_md: bold-template-pack/templates/creative-mode/design.md }也就是说preview.md是索引与完整设计系统之间的网关它既承接索引里的元数据又负责在选定后把读者导向 design.md。预览卡自身的Files一节也显式列出这两份文件方便后续引用。二、选择元数据如何判断 Creative Mode 是否适合当前简报预览卡中的Selection Metadata一节把该模板的可检索画像完整列出这些字段与索引条目的字段一一对应是代理在 Phase 2 为候选排序的依据字段值实战含义Slugcreative-mode全局唯一标识用于索引和路径寻址TaglineCream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display一句话视觉卖点用于风格对比Moodcreative, confident, playful, design-led情绪方向与创意/自信/玩味/设计主导匹配Tonegraphic, expressive, modern语气基调图形化、表现力强、现代Formalitymedium正式度中等既不做布道也不做公文Densitymedium-high中高信息密度适合带数据的版式Schemelight浅色方案画布为暖奶油色2.1 Best for / Avoid for 的匹配规则预览卡给出了非常具体的适用与回避场景适合Best for一切需要设计主导、自信表达的场景——创意代理 pitch、设计工作室作品集、广告代理 credentials、品牌创意评审、艺术指导评审同时它也是技术演讲、研究成果汇报、财务复盘中的出人意料之选——当演讲者想以品位而非惯例开路时。回避Avoid for要求机构克制与安静权威的语境——饱和的多色强调会把表达力拉满读起来是表现主义而非正式。需要说明的是SKILL.md 明确把best_for标记为软信号soft signals而非严格行业过滤因此上述举例只用于倾向判断不应机械套用为行业白名单。三、视觉快照Creative Mode 是什么预览卡用两段话点明这套系统的核心美学a neo-brutalist editorial presentation system built for 1920x1080 slides——新粗野主义neo-brutalist编辑式演示系统。其根本美学主张是技术上的克制 × 表达上的激进没有圆角卡片、没有渐变、没有暗示光源的模糊阴影只有纯色色块flat color-blocking与硬偏移投影hard offset drop-shadows——即Risograph / 丝网印刷那种实色同色偏移视觉血统是一半 Bauhaus 网格、一半朋克小志punk zine、一半瑞士编辑风Swiss editorial。画布是暖奶油色cream#EFE9D9近黑墨水ink#0F0F0F负责边框、文字与分隔线。四种强调色以全饱和状态出场森林绿、热粉、焦橙、阳光黄它们从不融合而是在页面上相撞——碰撞本身就是设计。3.1 视觉配方Preview Ingredients预览卡把三种关键配方压缩为最简形式调色板cream #EFE9D9cream-2 #E4DCC4ink #0F0F0Fink-2 #2A2A2Agreen #1F8A4Cgreen-dark #136636pink #F06CA8pink-dark #D14E8B橙色与黄色也出现在预览快照的 accent 描述中完整十色定义见 design.md 的 colors token字体三角Archivo Black展示大字、Space Grotesk正文、JetBrains Mono等宽标签签名手法Signature movescream 画布作为通用背景绿色只用于收尾页closing slide所有结构元素使用4px 实色 ink 边框——卡片、面板、表格单元格、图表轴线用硬偏移 box-shadow 替代模糊投影featured 块为24px 24px 0 color, 24px 24px 0 4px inkArchivo Black 展示字一律大写行高 0.92压缩到极限四种强调色只做纯色填充每页只用其中两到三种绝不同时用全四个。四、CJK中文等文字预览注意预览卡用一节特别提醒如果预览使用中文或其他 CJK 文字有三条立即生效的调整letter-spacing 归零CJK 文字不施加字距保留给拉丁字符放宽 line-height汉字需要比拉丁小写字母更多的垂直呼吸空间不要对 CJK 片段施加text-transform: uppercase中文没有大小写强制大写对汉字无意义反而会破坏内部混合的拉丁缩写渲染。预览卡同时声明Use the fulldesign.mdCJK section after selection for exact font pairings and script-specific adjustments.选定后请使用完整 design.md 的 CJK 章节获取精确字体配对与脚本级调整。这套完整方案——包括 Archivo Black 配思源宋体 Noto Serif SC 900、Space Grotesk 配 NSC 400、单一字体栈 fallback 策略、Pangu spacing 等——都收录在 design.md 的 CJK International Content 章节预览阶段无需展开。五、预览硬性规则一张真实第一页的验收标准Preview Rules是全卡最重要的可执行规范任何代理在产出预览前都必须逐条对照只构建一张 1920×1080 的标题幻灯片且必须在固定舞台模型fixed-stage内完成保留调色板、字体角色、表面节奏surface rhythm与装饰语汇——预览不是自由发挥使用用户真实的标题/副标题/上下文不复制演示示例内容渲染结果必须像真实的第一页幻灯片而不是一张模板选择卡绝不把内部工作流文字放到幻灯片上包括preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签绝不把模板名或 slug 印在幻灯片上只能出现在与用户的聊天消息中绝不把用户需求备注如期望的氛围、受众、内部用途标签当作幻灯片内容除非用户明确要求那些原词出现在 deck 中可见的 chrome 只允许使用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或来自用户材料的真实措辞预览生成阶段不要读template.html不要读其他模板的design.md用户选定该模板后先读完整 design.md 再生成正式幻灯片。这套规则与 SKILL.md 的预览真实性规则Preview authenticity rules, NON-NEGOTIABLE完全同源预览必须是一张真实首屏任何诊断式内部元数据都是违规。它解释了为什么预览卡要刻意保持轻量——读得越少越不容易把内部标记泄漏进成品。六、固定舞台预览与成稿的同一套渲染底座预览卡要求预览构建在固定舞台模型内这一步的实际执行由仓库的两份基础设施保证。6.1 deck-stage.js 的整画布缩放deck-stage.js 是deck-stage自定义元素硬编码设计尺寸默认值1920×1080见 deck-stage.js并通过_fit()计算缩放因子const vw window.innerWidth; const vh window.innerHeight; const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale(${s});这段逻辑见 deck-stage.js正是预览卡所依赖的scale-stage-to-viewport模型每页在 1920×1080 下排版整体用一次transform: scale()适配视口宁可 letterbox / pillarbox 也绝不重排内容。它对手机同样成立——SKILL.md 将固定 16:9 舞台列为不可妥协的全局不变量。6.2 viewport-base.css 的舞台与翻页viewport-base.css 是每份成品都必须整体内联的强制 CSS.deck-stage固定为 1920×1080见 viewport-base.css.slide初始visibility: hidden; opacity: 0仅.slide.active / .slide.visible切换到可见见 viewport-base.css——这正是预览卡单页标题幻灯片在预览阶段与成品阶段共享的渲染底座。预览卡中不要在预览阶段读取 template.html的约束也与 SKILL.md 中除非选定的 design.md 缺失关键实现细节否则不读 template.html的策略一致进一步保证预览产出不抄袭实现、只忠实于视觉配方。七、选定之后从预览卡扩张为完整设计系统一旦用户选定 Creative Mode预览卡的最后一条规则触发读取 design.md。这份完整文档把预览卡的全部配方展开为可直接执行的 token 化规格预览卡中的每一条签名手法都能在其中找到数值定义。7.1 色板 token十色全表预览卡列出了八种主要颜色design.md 的 YAML frontmatter 补全了全部十色及其角色见 design.mdToken色值使用角色cream#EFE9D9通用画布背景暖而非白cream-2#E4DCC4仅作对比表格底色营造内凹表面ink#0F0F0F全部边框/正文/分隔线/顶栏近黑而非纯黑ink-2#2A2A2A次要正文、统计格描述、图表脚注green#1F8A4C主导强调色可用于整页收尾背景green-dark#136636杠杆/深度装饰不作主面填充pink#F06CA8高能热粉开关插图/标记/印章/流程步pink-dark#D14E8B装饰杠杆的阴影侧强调orange#E85A1Ffeatured 块的硬投影色、统计格、柱状图yellow#F5C518装饰圆、旋转徽章、柱条暖色标点7.2 字体三角的 token 化design.md 将三字体角色固化为严格分工见 design.mdArchivo Black仅承担展示位——大标题、步骤序号、统计数字、表格标签一律大写、行高 0.92、字距 -0.01em该字体本身极重无需额外 font-weightJetBrains Mono全部元数据——顶栏标签、页脚 meta、kicker、图表轴、图例、图注统一 24px字距在 0.06em–0.16em 之间按用途取值topbar 0.08em、meta footer 0.06em、kicker 0.14em、chart 0.08em、layer tags 0.1emSpace Grotesk仅正文——列文本、统计格描述、图表副文本、步骤描述、收尾 strap。展示字号从 72px 到 220px 共七级display-xs → display-jumbo加上 step-num 140px、stat-num 96px、stamp-num 64px、marker-label 46px、badge-label / table-head 28px 等辅助刻度——这套数值是预览卡font sizes are far larger than web norms说法的实证来源。7.3 硬阴影与边框的精确规格预览卡的签名手法在设计文档中细化为唯一两种硬阴影规格大偏移24px 24px仅用于 featured 块marker、poster switch——box-shadow: 24px 24px 0 {colors.orange}, 24px 24px 0 4px {colors.ink}第一层是彩色偏移第二层是它的 4px 墨线描边中偏移18px 18px仅用于图表中的叠块——box-shadow: 18px 18px 0 {colors.ink}纯墨色。边框按结构角色分级结构元素一律4px 实线 ink表格内部行/列、图表轴线、柱条为3px 实线 ink顶栏 pill 徽章为2px 实线 ink流程页顶栏与卡片之间用3px 虚线 ink。圆角只有三种取值0px全部结构元素、50%装饰圆与 meta 分隔点、999px唯一的顶栏 pill 徽章。7.4 从两到三种 accent到颜色纪律预览卡要求每页只出现两到三种 accentdesign.md 把这条纪律扩展为系统的 Dos and Donts见 design.md其中最容易触雷的红线包括不要圆角卡片圆角读起来像友好 SaaS直角才表达编辑式精确不要渐变、模糊投影、辉光——深度只来自硬偏移或颜色对比不要对 Archivo Black 用小写或句子大小写不要给它加字距不要引入第五种强调色不要用纯白 #ffffff 做背景Space Grotesk 不承担标签位不要中心对齐正文不要把徽章 -4deg、印章 -6deg 的旋转软化掉。7.5 CJK 成稿方案与已知差距选定后预览卡的 CJK 提醒升级为完整策略见 design.md字体配对表展示/大标题用 Noto Serif SC 900对应 Archivo Black正文用 NSC 400对应 Space Grotesk等宽 chrome 保持拉丁/数字JetBrains Mono 本无汉字形Strategy A 单一字体栈 fallback把 NSC 声明在拉丁字体之后拉丁字形走 Archivo/Space GroteskCJK 字形自动落到 NSC通用调整CJK 正文行高提到 ~1.55Hanzi 片段字距归零去掉 uppercase transform中文句子用全角标点、标题不加句号Hanzi 与拉丁/数字相邻处加 Pangu 空格一句话内不混用两套 CJK 字体已知差距Archivo Black 220px 的粗犷密度没有精确的汉字等价物NSC 900 读起来更文学衬线而非朋克 grotesk文档估算中文版会比拉丁原版少约 30% 的 punk-zine 味道——补偿手段是加重色块、硬阴影和旋转徽章/印章元素并明确避免使用 Smiley Sans Oblique其斜切与系统严格的直角几何冲突。八、版本与依赖边界仓库实际状态依据 design.md 的 Known Gaps 一节与仓库实现本模板有以下需要了解的边界翻页键盘、点击由外部依赖 deck-stage.js 提供该脚本不在 design.md 内展开模板本身不定义动画与转场所有幻灯片为静态标题页的开关插图是纯装饰性嵌套 div无功能状态图表与表格数据为硬编码占位无数据绑定层--rule这个 CSS 变量与--ink同值#0F0F0F当前定义了但未被显式使用可视为 ink 的别名Archivo Black 的 fallback 是sans-serif字体必须从 Google Fonts 加载才能正确渲染。这些限制同时解释了为什么 SKILL.md 要求成稿后必须做渲染截图验证——scrollHeight检查无法发现网格面板互相遮挡的问题这正是预览卡反复强调面节奏、装饰语汇必须保留的最终目的让预览与成稿共享同一套视觉语言避免选定后的成品叛离预览。结语Creative Mode 的预览卡是一个被刻意约束在单页、真实、轻量三个词上的文件它靠元数据做匹配靠配方做表达靠规则做验收。在 frontend-slides 的渐进披露架构里它是用户与完整设计系统之间最短的决策链路——读它只需片刻但它要求的视觉纪律cream 画布、4px 墨线、硬偏移投影、每页两到三色、大写 Archivo Black会一直延续到成稿的每一页。对想要产出设计主导、自信表达型演示的开发者与代理而言理解这张预览卡就等于理解了 Creative Mode 整套系统的最小可执行内核。赞分享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 Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则frontend slides Mat 模板预览卡解析材质触感演示设计系统的选择元数据与预览落地规则 Mat 是 frontend slides 项目 BolAI 技能AI 插件前端HyperFrames Creative Mode 帧级设计系统以 1920×1080 画布为单位的 Neo-Brutalist 编辑海报规范HyperFrames Creative Mode 帧级设计系统以 1920×1080 画布为单位的 Neo Brutalist 编辑海报规范 HyperFr音视频视频AI 技能frontend-slides 的 Emerald Editorial 模板从预览卡片到完整杂志封面式商业演示的设计系统与实战指南frontend slides 的 Emerald Editorial 模板从预览卡片到完整杂志封面式商业演示的设计系统与实战指南 Emerald EditoAI 技能AI 插件前端上一篇如何用3轮循环跑通RED-GREEN-REFACTORSuperpowers中TDD测试驱动开发实战指南下一篇xdpcap高级功能详解BPF映射、过滤器与hook机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考