AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Playful 是 frontend-slides 的 Bold Template Pack 34 个设计体系之一本文围绕其预览卡片bold-template-pack/templates/playful/preview.md完整解读模板的定位元数据、视觉快照、预览配料Palette / Typography / Signature move与 CJK 处理提示并结合配套的bold-template-pack/templates/playful/design.md与bold-template-pack/deck-stage.js、viewport-base.css等仓库实现说明 Agent 如何在风格发现阶段产出真实的首屏预览、在用户选定后如何升级到完整设计系统。读完你可以直接复现「preview 卡片 → 全 deck」的完整生成流程。模板在仓库中的角色Playful 模板由一对文件组成它们承担两个阶段的不同职责文件用途读取时机preview.md轻量风格卡片用于标题页预览风格发现阶段Phase 2短名单确定后design.md完整设计系统规范用户选定该模板后Phase 3这一「渐进式披露progressive disclosure」设计在 README.md 与 SKILL.md 中均有描述先读取紧凑索引 bold-template-pack/selection-index.json 做粗筛再读取候选模板的preview.md生成标题页预览只有用户最终选定后才加载该模板的完整design.md避免一次性加载 34 份完整规范造成上下文浪费。selection-index 中 Playful 的条目明确记录了preview_md与design_md的相对路径Agent 据此按需加载。选择元数据判断何时该推荐 Playfulpreview.md 首先给出模板的选择元数据这是风格发现阶段「Match user purpose and mood」的关键依据SlugplayfulTaglineSun-warm peach background with Syne display: a friendly indie launch deck.Moodwarm、approachable、indie、friendlyToneupbeat、informal、welcomingFormalitylowDensitymediumSchemelightBest for需要营造温暖、独立、亲和氛围的场合——创作者作品集、独立产品发布会、生活方式品牌、小企业路演、Newsletter / 社区向 deck任何希望显得友好、有人情味而非企业化的内容包括技术或研究向 deck。Avoid for当机构可信度institutional credibility比温暖感更重要的场合——peach 调色板是刻意非正式的。对照 selection-index.json 中该模板的元数据preview.md 与其完全一致属于「soft signal」而非硬性行业过滤器best_for是建议不是禁止遇到氛围匹配的场合即可推荐。视觉快照一色纪律与手工质感preview.md 用一段话概括了 Playful 的核心美学一个建立在peach-clay 画布{colors.bg}#F0C8A0之上的手工编辑系统charcoal 墨色{colors.text}#1A1A1A是唯一有意义的「颜色」。整体呈现 ink-on-clay-paper墨在陶纸上的效果。视觉词汇来自独立工作室 deck、risograph 小册子和速写本版面有机 blob 形边框organic blob frames涂鸦式 SVG 线条scribbled SVG doodles轻微旋转的卡片slightly rotated cards双描边偏移边框double-stroke offset borders关键词confident but human, structured but loose自信但有人情味结构清晰但松散。系统没有任何辅助品牌色、渐变或彩色点缀完全承诺单色纪律用形状、字重、旋转与手绘痕迹来表达而非依赖调色板多样性。预览配料实现标题页的素材清单preview.md 的「Preview Ingredients」是生成标题页的最小素材集Palettebg #F0C8A0bg-alt #E8B88Elight #F7DEC6text #1A1A1ATypographySynedisplaySpace GroteskbodySignature move 1peach-clay 画布 charcoal 墨色是唯一颜色无辅助品牌调色板Signature move 2Syne 700–800 字重 负字距应用于所有展示与数字场景Space Grotesk 400–500 用于正文Signature move 3卡片采用双描边偏移边框——3px 外轮廓 通过::before实现的 6–8px 偏移 ghost 边框Signature move 4卡片、区块与统计数字带 ±0.5deg 到 ±3deg 的小幅旋转营造手工摆放感Signature move 5不对称 border-radius 的有机 blob 形状充当装饰性边框与填充完整设计系统在 design.md 中有更细的规格typography表定义了 13 个字号 token从display-hero的clamp(4rem, 10vw, 9rem)/ 800 字重 /-0.03em负字距到tag的 0.75rem / 600 字重components表定义了 rough-box、filled-block、blob-frame-organic、blob-frame-pebble、blob-fill、scribble-svg、step-node-circle、ghost-blob 等组件的精确参数——例如 pebble 形状的borderRadius: 255px 15px 225px 15px / 15px 225px 15px 255pxghost-blob 的opacity: 0.08。CJK 处理提示预览阶段即需遵守的排版规则preview.md 专门提示如果预览使用中文或其他 CJK 文本需要保持 CJK 字距为 0、放宽行高、避免对 CJK 片段做 uppercase 变换完整的字型搭配与脚本级调整在选中后参考 design.md 的 CJK 章节。design.md 给出了可落地的方案中文配对Syne → 站酷快乐体 ZCOOL KuaiLe400唯一字重Space Grotesk → 悠哉字体 Yozai400混合策略扩展fontFamily拉丁字体在前、中文字体在后如Syne, ZCOOL KuaiLe, sans-serif与Space Grotesk, Yozai, sans-serifCJK 字符自动回退加载方式link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familySyne:wght700;800familySpaceGrotesk:wght400;500;600;700familyZCOOLKuaiLedisplayswap relstylesheet link hrefhttps://cdn.jsdelivr.net/npm/cn-fontsource-yozai-regular/font.css relstylesheet通用 CJK 调整正文行高 1.75–1.85、展示行高 1.15–1.25CJK 字距为 0CJK 不做 uppercase使用全角标点展示标题不加句号CJK 与拉丁混排时留出盘古之白如使用 Claude而非使用Claude一句话内只使用一种字体。design.md 还明确指出一个已知差距两个中文字体都只有 400 单一字重纯中文环境下系统依赖的字重对比Syne 700 vs 800、Space Grotesk 400/500/600会塌缩为纯字号层级——但由于 Playful 的层级主要靠字号驱动且旋转、涂鸦、双描边等特征与文字脚本无关这一损失可以接受。需要额外注意的是中文展示字体的负字距应当去掉-0.01em到-0.03em因为方形的 em-box 设计下收紧会导致字形碰撞。预览规则把预览做成「真实第一页」preview.md 的「Preview Rules」是生成预览时不可妥协的约束也是 SKILL.md 中「Preview authenticity rules」对每个模板的统一要求固定舞台在 fixed-stage 模型内构建恰好一张 1920×1080 的标题页保留特征完整保留上面描述的调色板、字型角色、表面节奏与装饰词汇使用真实内容使用用户的真实标题/副标题/背景信息不得复制 demo 内容渲染出的预览必须像真实的第一张幻灯片而不是模板选择卡禁止内部工作流文字幻灯片上不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签禁止模板名与 slug模板名称与 slug 只出现在聊天消息中不上屏禁止需求备注不得把「想要的氛围、受众、内部用途」这类需求注释放到幻灯片上除非用户明确要求仅用真实 deck 内容作 chrome可见的 chromedeck 标题、真实章节标题、日期、作者、公司、页码或用户材料的真实短语之外不用别的东西不读取template.html预览阶段不需要源模板实现文件不读取其他模板的design.md保持渐进式披露的边界选中后读取完整 design.md用户选定模板后、生成最终幻灯片之前必须读取该模板的完整设计文档这些规则共同保证了风格发现阶段的预览「authentic」像真实首屏而非诊断卡这是 frontend-slides「show, dont tell」方法论的落地点。从固定舞台到最终 deck仓库实现依据preview.md 要求预览构建在「fixed-stage model」内而整个 Bold Template Pack 都遵循 frontend-slides 的Fixed 16:9 Stage 策略。design.md 中的「Frontend Slides Fixed-Stage Policy」进一步明确即使源模板原本是 viewport-fluid使用100vw、100vh、clamp()等生成时也要把那些值当作设计比例翻译成 1920×1080 舞台坐标而不是作为实时响应式规则手机等窄屏上允许 letterbox / pillarbox但绝不 reflow 幻灯片内容。舞台缩放有两套仓库实现可供选用deck-stage.js可复用的deck-stageWeb Component内部_fit()方法计算Math.min(vw/designWidth, vh/designHeight)并用transform: scale(s)整体缩放画布同时内置键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键跳页、R回到第一页、底部居中 slide 计数 overlay、触屏点击区左 1/3 后退、右 1/3 前进与打印支持media print一页一 slidepage尺寸由width/height属性注入。viewport-base.css固定舞台基础样式.deck-stage固定 1920×1080、.slide用visibilityopacitypointer-events控制显隐禁用display:none切换避免布局类覆盖导致全部可见内置media print每页一个 1920×1080 的 slide以及prefers-reduced-motion支持。SKILL.md 明确要求每次生成都读取viewport-base.css并把完整内容内联进最终单文件 HTMLslide 切换类名必须使用.active/.visible。这些约束保证了「固定 16:9、整体缩放、不重排」的硬性不变量也正是 preview 阶段就需遵守的模型。深入阅读本文主体来源playful/preview.md完整设计系统playful/design.md模板选择索引bold-template-pack/selection-index.json舞台缩放实现bold-template-pack/deck-stage.js固定舞台基础 CSSviewport-base.css工作流与规则SKILL.md、README.md赞分享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 插件前端frontend-slides 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页frontend slides 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页 本文以 frAI 技能AI 插件前端frontend-slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析frontend slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析 导读本文以 frontend slidesAI 技能AI 插件前端上一篇训练到一半才后悔没可视化mmsegmentation 的 SegLocalVisualizer 让你提前看见语义分割模型下一篇Bash-Snippets依赖管理为什么无外部依赖设计如此重要创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/1 2:06:10 · 阅读 1.2k frontend-slides Playful 模板预览卡片解析：从标题页预览到完整设计系统的选择与生成流程
AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Playful 是 frontend-slides 的 Bold Template Pack 34 个设计体系之一本文围绕其预览卡片bold-template-pack/templates/playful/preview.md完整解读模板的定位元数据、视觉快照、预览配料Palette / Typography / Signature move与 CJK 处理提示并结合配套的bold-template-pack/templates/playful/design.md与bold-template-pack/deck-stage.js、viewport-base.css等仓库实现说明 Agent 如何在风格发现阶段产出真实的首屏预览、在用户选定后如何升级到完整设计系统。读完你可以直接复现「preview 卡片 → 全 deck」的完整生成流程。模板在仓库中的角色Playful 模板由一对文件组成它们承担两个阶段的不同职责文件用途读取时机preview.md轻量风格卡片用于标题页预览风格发现阶段Phase 2短名单确定后design.md完整设计系统规范用户选定该模板后Phase 3这一「渐进式披露progressive disclosure」设计在 README.md 与 SKILL.md 中均有描述先读取紧凑索引 bold-template-pack/selection-index.json 做粗筛再读取候选模板的preview.md生成标题页预览只有用户最终选定后才加载该模板的完整design.md避免一次性加载 34 份完整规范造成上下文浪费。selection-index 中 Playful 的条目明确记录了preview_md与design_md的相对路径Agent 据此按需加载。选择元数据判断何时该推荐 Playfulpreview.md 首先给出模板的选择元数据这是风格发现阶段「Match user purpose and mood」的关键依据SlugplayfulTaglineSun-warm peach background with Syne display: a friendly indie launch deck.Moodwarm、approachable、indie、friendlyToneupbeat、informal、welcomingFormalitylowDensitymediumSchemelightBest for需要营造温暖、独立、亲和氛围的场合——创作者作品集、独立产品发布会、生活方式品牌、小企业路演、Newsletter / 社区向 deck任何希望显得友好、有人情味而非企业化的内容包括技术或研究向 deck。Avoid for当机构可信度institutional credibility比温暖感更重要的场合——peach 调色板是刻意非正式的。对照 selection-index.json 中该模板的元数据preview.md 与其完全一致属于「soft signal」而非硬性行业过滤器best_for是建议不是禁止遇到氛围匹配的场合即可推荐。视觉快照一色纪律与手工质感preview.md 用一段话概括了 Playful 的核心美学一个建立在peach-clay 画布{colors.bg}#F0C8A0之上的手工编辑系统charcoal 墨色{colors.text}#1A1A1A是唯一有意义的「颜色」。整体呈现 ink-on-clay-paper墨在陶纸上的效果。视觉词汇来自独立工作室 deck、risograph 小册子和速写本版面有机 blob 形边框organic blob frames涂鸦式 SVG 线条scribbled SVG doodles轻微旋转的卡片slightly rotated cards双描边偏移边框double-stroke offset borders关键词confident but human, structured but loose自信但有人情味结构清晰但松散。系统没有任何辅助品牌色、渐变或彩色点缀完全承诺单色纪律用形状、字重、旋转与手绘痕迹来表达而非依赖调色板多样性。预览配料实现标题页的素材清单preview.md 的「Preview Ingredients」是生成标题页的最小素材集Palettebg #F0C8A0bg-alt #E8B88Elight #F7DEC6text #1A1A1ATypographySynedisplaySpace GroteskbodySignature move 1peach-clay 画布 charcoal 墨色是唯一颜色无辅助品牌调色板Signature move 2Syne 700–800 字重 负字距应用于所有展示与数字场景Space Grotesk 400–500 用于正文Signature move 3卡片采用双描边偏移边框——3px 外轮廓 通过::before实现的 6–8px 偏移 ghost 边框Signature move 4卡片、区块与统计数字带 ±0.5deg 到 ±3deg 的小幅旋转营造手工摆放感Signature move 5不对称 border-radius 的有机 blob 形状充当装饰性边框与填充完整设计系统在 design.md 中有更细的规格typography表定义了 13 个字号 token从display-hero的clamp(4rem, 10vw, 9rem)/ 800 字重 /-0.03em负字距到tag的 0.75rem / 600 字重components表定义了 rough-box、filled-block、blob-frame-organic、blob-frame-pebble、blob-fill、scribble-svg、step-node-circle、ghost-blob 等组件的精确参数——例如 pebble 形状的borderRadius: 255px 15px 225px 15px / 15px 225px 15px 255pxghost-blob 的opacity: 0.08。CJK 处理提示预览阶段即需遵守的排版规则preview.md 专门提示如果预览使用中文或其他 CJK 文本需要保持 CJK 字距为 0、放宽行高、避免对 CJK 片段做 uppercase 变换完整的字型搭配与脚本级调整在选中后参考 design.md 的 CJK 章节。design.md 给出了可落地的方案中文配对Syne → 站酷快乐体 ZCOOL KuaiLe400唯一字重Space Grotesk → 悠哉字体 Yozai400混合策略扩展fontFamily拉丁字体在前、中文字体在后如Syne, ZCOOL KuaiLe, sans-serif与Space Grotesk, Yozai, sans-serifCJK 字符自动回退加载方式link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familySyne:wght700;800familySpaceGrotesk:wght400;500;600;700familyZCOOLKuaiLedisplayswap relstylesheet link hrefhttps://cdn.jsdelivr.net/npm/cn-fontsource-yozai-regular/font.css relstylesheet通用 CJK 调整正文行高 1.75–1.85、展示行高 1.15–1.25CJK 字距为 0CJK 不做 uppercase使用全角标点展示标题不加句号CJK 与拉丁混排时留出盘古之白如使用 Claude而非使用Claude一句话内只使用一种字体。design.md 还明确指出一个已知差距两个中文字体都只有 400 单一字重纯中文环境下系统依赖的字重对比Syne 700 vs 800、Space Grotesk 400/500/600会塌缩为纯字号层级——但由于 Playful 的层级主要靠字号驱动且旋转、涂鸦、双描边等特征与文字脚本无关这一损失可以接受。需要额外注意的是中文展示字体的负字距应当去掉-0.01em到-0.03em因为方形的 em-box 设计下收紧会导致字形碰撞。预览规则把预览做成「真实第一页」preview.md 的「Preview Rules」是生成预览时不可妥协的约束也是 SKILL.md 中「Preview authenticity rules」对每个模板的统一要求固定舞台在 fixed-stage 模型内构建恰好一张 1920×1080 的标题页保留特征完整保留上面描述的调色板、字型角色、表面节奏与装饰词汇使用真实内容使用用户的真实标题/副标题/背景信息不得复制 demo 内容渲染出的预览必须像真实的第一张幻灯片而不是模板选择卡禁止内部工作流文字幻灯片上不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签禁止模板名与 slug模板名称与 slug 只出现在聊天消息中不上屏禁止需求备注不得把「想要的氛围、受众、内部用途」这类需求注释放到幻灯片上除非用户明确要求仅用真实 deck 内容作 chrome可见的 chromedeck 标题、真实章节标题、日期、作者、公司、页码或用户材料的真实短语之外不用别的东西不读取template.html预览阶段不需要源模板实现文件不读取其他模板的design.md保持渐进式披露的边界选中后读取完整 design.md用户选定模板后、生成最终幻灯片之前必须读取该模板的完整设计文档这些规则共同保证了风格发现阶段的预览「authentic」像真实首屏而非诊断卡这是 frontend-slides「show, dont tell」方法论的落地点。从固定舞台到最终 deck仓库实现依据preview.md 要求预览构建在「fixed-stage model」内而整个 Bold Template Pack 都遵循 frontend-slides 的Fixed 16:9 Stage 策略。design.md 中的「Frontend Slides Fixed-Stage Policy」进一步明确即使源模板原本是 viewport-fluid使用100vw、100vh、clamp()等生成时也要把那些值当作设计比例翻译成 1920×1080 舞台坐标而不是作为实时响应式规则手机等窄屏上允许 letterbox / pillarbox但绝不 reflow 幻灯片内容。舞台缩放有两套仓库实现可供选用deck-stage.js可复用的deck-stageWeb Component内部_fit()方法计算Math.min(vw/designWidth, vh/designHeight)并用transform: scale(s)整体缩放画布同时内置键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键跳页、R回到第一页、底部居中 slide 计数 overlay、触屏点击区左 1/3 后退、右 1/3 前进与打印支持media print一页一 slidepage尺寸由width/height属性注入。viewport-base.css固定舞台基础样式.deck-stage固定 1920×1080、.slide用visibilityopacitypointer-events控制显隐禁用display:none切换避免布局类覆盖导致全部可见内置media print每页一个 1920×1080 的 slide以及prefers-reduced-motion支持。SKILL.md 明确要求每次生成都读取viewport-base.css并把完整内容内联进最终单文件 HTMLslide 切换类名必须使用.active/.visible。这些约束保证了「固定 16:9、整体缩放、不重排」的硬性不变量也正是 preview 阶段就需遵守的模型。深入阅读本文主体来源playful/preview.md完整设计系统playful/design.md模板选择索引bold-template-pack/selection-index.json舞台缩放实现bold-template-pack/deck-stage.js固定舞台基础 CSSviewport-base.css工作流与规则SKILL.md、README.md赞分享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 插件前端frontend-slides 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页frontend slides 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页 本文以 frAI 技能AI 插件前端frontend-slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析frontend slides 模板预览指南Broadside 宽幅海报风格标题幻灯片的生成规范与设计系统解析 导读本文以 frontend slidesAI 技能AI 插件前端上一篇训练到一半才后悔没可视化mmsegmentation 的 SegLocalVisualizer 让你提前看见语义分割模型下一篇Bash-Snippets依赖管理为什么无外部依赖设计如此重要创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考