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 技能包中的 Playful 设计文档 为骨架结合该技能包的模板索引、固定舞台实现与生成工作流源码完整讲解 Playful 这一「手工编辑风」幻灯设计系统的定位、配色、字体、版式、装饰语法、实现机制与中文本地化策略。读完本文你既能理解 Playful 的设计纪律单一色彩、双字体对比、双描边偏移边框、手绘涂鸦也能掌握它在frontend-slides技能中如何落地为固定 1920×1080 舞台的 HTML 幻灯片以及如何用于创作者作品集、独立产品发布、生活方式品牌等「温暖、独立、友好」的场合。Playful 的模板定位与适用场景在frontend-slides的 Bold Template Pack 中Playfulslug 为playful是一套可选的设计系统。模板索引 selection-index.json 中记录了它的选择元数据TaglineSun-warm peach background with Syne display: a friendly indie launch deck日暖桃粉背景 Syne 展示字体一套友好的独立产品发布套件。Moodwarm、approachable、indie、friendly。Toneupbeat、informal、welcoming。Formalitylow低正式度。Densitymedium中等密度。Schemelight浅色系。Best for创作者作品集、独立产品发布、生活方式品牌、小企业提案、Newsletter / 社区类演示也适合任何希望「友好而有人味、而非公司腔」的技术或研究类演示。Avoid for正式度要求高于温暖感的场合——桃粉色画布天然偏非正式。在 SKILL.md 定义的风格探索流程Phase 2中默认预览组合是「1 个安全预设 至少 1 个来自此模板包的 bold 模板 1 个 wildcard」。由于 Playful 的 mood/tone 偏 warm 与 friendly它适合作为大胆选项出现在需要「亲切、工作室感」的预览里若用户最终选中它Agent 才在 Phase 3 读取其完整 design.md将其视为「风格配方design recipe」而 preview.md 仅用于生成标题页预览。这套「先读轻量索引 → 再读 preview → 选中后才读完整 design.md」的渐进式披露机制是 bold-template-pack/README.md 明确要求的调用纪律避免 Agent 一次性读取全部模板造成信息过载。Frontend Slides 固定舞台策略Playful 设计文档开篇先声明了一条优先级高于模板本身响应式行为的硬性策略当它被frontend-slides技能使用时最终成品必须是固定 1920×1080 舞台整体等比缩放适配浏览器视口在任何屏幕包括手机上保持 16:9 画布允许 letterbox横向留黑边或 pillarbox纵向留黑边但绝不允许为移动端重排幻灯片内容。这一策略对源模板中所有100vw、100vh、vw、vh、clamp()等视口流式值一视同仁它们只作为「设计比例」被换算成 1920×1080 舞台坐标而不会作为成品中的响应式规则存在。文档同时要求使用 deck-stage.js 或等价的内联舞台缩放器并渲染截图同时检查「文本溢出」与「面板重叠」。该策略与技能其余部分的约束完全一致SKILL.md 将「Fixed 16:9 Stage」列为不可谈判的第五原则并规定幻灯片切换必须使用.active/.visible类配合visibility、opacity、pointer-events来自 viewport-base.css禁止用display: none/block切换。viewport-base.css 给出了该策略的完整基线实现.deck-stage固定 1920×1080、transform-origin: 0 0由 JS 设置translate(...) scale(...).slide绝对定位铺满舞台非激活页visibility: hidden; opacity: 0; pointer-events: none。deck-stage.js 在DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080第 53–54 行之上实现了自动缩放_fit()用Math.min(vw / designWidth, vh / designHeight)求出统一缩放系数并施加到画布上第 536–539 行同时提供键盘←/→、PgUp/PgDn、Space、Home/End、数字键、R 复位、触屏点击分区、底部计数浮层与media print每页一张幻灯的打印支持。html-template.md 中的SlidePresentation.setupStageScale()展示了同样的缩放算法Math.min(window.innerWidth / 1920, window.innerHeight / 1080)后以translate(x, y) scale(factor)把整个舞台居中。因此无论 Playful 源模板历史上是流式布局进入frontend-slides生成链路后统一为固定舞台输出。色彩系统单色纪律下的「墨在陶土纸上」Playful 的核心美学是单一温暖画布上的单色墨水它的完整色板只有四个 tokenToken色值用途{colors.bg}#F0C8A0桃陶土画布每张幻灯的默认表面饱和到足以成为系统签名又暖到让炭黑墨迹显得柔和{colors.bg-alt}#E8B88E画布的微深色调同胞用于图片占位区填充以及「无需引入新色」的层级区分{colors.light}#F7DEC6画布的微浅色调同胞用于单步抬升区域而不引入白色{colors.text}#1A1A1A炭黑墨色——系统中唯一的非画布颜色从纯黑略微软化覆盖全部正文、展示字、边框、SVG 描边与深色填充设计文档明确指出accent别名解析为{colors.text}——系统没有独立强调色。所谓「强调」是通过与画布的对比实现的而非第三种色相。所有视觉决策都是「画布桃粉对墨水炭黑」的二元选择通过不透明度、尺度与形状来调制默认表面背景永远是{colors.bg}标题与正文永远{colors.text}正文可降为 0.7–0.9 不透明度弱化但底色仍是炭黑。所有描边卡片、blob、涂鸦、图表轴线默认{colors.text}。炭黑实心块上的文字默认反转为{colors.bg}桃粉字这是系统唯一的反色关系。图片占位区默认用{colors.bg-alt}填充。装饰 blob 默认{colors.text}满不透明度前景或 0.08 不透明度背景大气幽灵 blob。在frontend-slides的 HTML 落地时这些 token 应映射为:root下的 CSS 自定义属性html-template.md 的 Base HTML Structure 提供了这种主题组织方式从而支持通过改变量整体换肤。字体系统Syne 与 Space Grotesk 的双面节奏Playful 的排版由一对 Google Font 构成没有第三个字体家族Syne展示体具有古怪人文主义比例的当代展示无衬线窄字怀、略压缩的比例。用于全部展示时刻——标题、宣言句、区域标题、数字、竖向标签字重 700–800。它的「性格」是区分 Playful 与普通暖色套件的关键读起来像独立工作室的嗓音而不是公司标题。Space Grotesk正文字干净、略带几何感的无衬线带友好的人文温度。正文 400–500标签/说明 500–600充当 Syne 表现力下的稳定对位。设计文档禁止斜体与下划线强调一律通过换字体正文→展示或加字重400→700实现。完整字号阶梯下表是文档定义的 13 个排版 token生成时必须完整继承Token尺寸clamp字体字重用途{typography.display-hero}4–9remSyne800超大封面或开场日期/标题{typography.display}3–7remSyne800结尾或重磅宣言标题{typography.headline}2.5–5remSyne700主要章节标题{typography.statement}2.5–4.5remSyne700长引文或宣言行{typography.title}2–3.5remSyne700区域或章节标题{typography.number-hero}4–7remSyne800主统计数字{typography.number-md}2.5remSyne800中等序数/统计数字{typography.number-sm}2remSyne800行内序号/步骤数字{typography.title-sm}1.3remSyne700小块内的卡片标题{typography.body-md}1.2remSpace Grotesk500副标题或强调正文{typography.body}1–1.1remSpace Grotesk400段落正文{typography.label-eyebrow}0.85remSpace Grotesk600标题上方的小眉毛标签大写 0.15em 字距{typography.caption}0.85remSpace Grotesk500副标题、细则、脚注{typography.tag}0.75remSpace Grotesk600炭黑 pill 内的标签文字文档给出的取舍指引当不确定主文案该用title还是headline时选headline——title只服务于幻灯内的子区域。非可选的签名处理设计文档强调以下处理在对应元素出现时不可省略每个展示元素都用 Syne每个 Syne 元素都带负字距-0.01em 至 -0.03em随字号变化默认字距的 Syne 读起来像「未处理」。每个正文与标签元素用 Space Grotesk眉毛标签必须大写 0.15em 字距否则读起来像正文片段而非标签。统计与数字恒为 800 字重即使 2rem 的小数字也遵循展示字重惯例独立站位的数字/统计可加 ±0.5deg–1deg 微旋转。行高纪律展示字收紧0.85–1.1正文放宽1.5–1.7两套节奏不可互换。布局系统全视口画布、间距刻度与演示器镶边Canvas 与间距源模板的布局目标是100vw × 100vh全视口每张.slide绝对定位铺满视口仅.active可见其余 opacity 0JS 驱动方向键/Space/按钮/触摸滑动翻页底部一条 4px 高的炭黑进度条。间距刻度如下Token值用途{spacing.pad-slide-lg}4rem 5rem封面、宣言、结尾页的外边距{spacing.pad-slide-md}3rem 4rem标准内容页外边距{spacing.pad-card-lg}2rem 3rem大卡片/联系块内边距{spacing.pad-card-md}1.5rem标准卡片内边距{spacing.gap-lg}3rem大区域间 gap{spacing.gap-md}2rem单元格间标准 gap{spacing.gap-sm}1.5rem紧凑行内 gap在固定舞台落地时这些 rem 值应换算为 1920×1080 坐标系下的像素比例1rem ≈ 相对 1080p 舞台的基准字号而不是保留为视口流式单位。演示器镶边Chrome右下角固定一个 48px×48px 导航簇上一页箭头、页码、下一页箭头全部 2px 炭黑描边底部边缘一条 4px 高炭黑进度条。二者不属于幻灯片构图是套件的持久演示镶边不应该被内容样式化。幻灯片画布内没有顶栏、页脚、页码。深度与层次双描边偏移边框、旋转与幽灵 blobPlayful 明确不依赖任何网页阴影——没有box-shadow模糊、没有drop-shadow、没有 rgba 阴影。所有层次感来自三件事双描边偏移边框主技法卡片带 3px 实心炭黑边框::before伪元素绝对定位于卡片上向下右偏移 6–8px携带第二条 2–3px 边框偏移层无填充画布透出。视觉上像「一笔拉了两遍」的手绘双重轮廓是系统的「抬高」装置。旋转次级技法卡片、块、统计与装饰形带 ±0.5deg–±3deg 微旋转且相邻元素旋转方向交替绝不让相邻卡片同向——暗示有人手工摆放而非网格吸附。大气幽灵 blob超大有机 blob 以 0.08 不透明度置于角落充当氛围壁纸像水印云。每页最多一个锚定在主体内容未占用的角落。形状与装饰语法圆角刻度值用途0px卡片、块、标签、图片框、表格单元格50%圆形头像占位、步骤节点、涂鸦圆非对称有机如40% 60% 70% 30% / 40% 50% 60% 50%仅限 blob 框与 blob 填充鹅卵石非对称如255px 15px 225px 15px / 15px 225px 15px 255px仅限鹅卵石形框系统刻意避开 4px/8px/12px 的中等圆角——角要么锋利、要么正圆、要么有机 blob中间地带读起来像通用网页应用。边框与描边权重3px 实心炭黑——标准描边卡片与 blob 框。2–3px 实心炭黑——::before偏移幽灵边框略细于主边框。3px 实心炭黑——图表 X/Y 轴线。2px 实心炭黑——导航按钮边框与时间轴轨道横线。2px 描边——SVG 涂鸦标准笔划圆头线帽。装饰元素清单设计文档定义了 11 类可复用装饰组件components段的 YAML token 也逐一定义了实现细节Rough-box 卡片矩形内容卡带签名双描边偏移边框背景默认桃粉也可反色为炭黑可选 ±0.5–3deg 旋转。有机 blob 框非对称圆角的描边装饰框用作肖像框或装饰锚常内嵌一个更小的实心 blob-fill两种特征形波浪有机形与鹅卵石形。实心 blob 填充炭黑非对称有机形可与描边框组成「框 块」配对或独立漂浮。涂鸦 SVG单条 2px 描边炭黑线圆头线帽词汇包括波浪 stub、星形轮廓、乱画圆、波浪线、箭头、同心圆每张幻灯至少一个最多两三个。涂鸦圆 / 涂鸦矩形简化的描边装饰锚轻微旋转用于「blob 太有机」时的视觉标点。步骤节点圆64px 圆形描边节点内含 Syne 800 单数字描边与实心按序交替。标签 pill炭黑小矩形 桃粉 0.75rem 600 文字锚定在图片框左下角作分类标签。竖向脊标签Syne 700 1.5rem 文字旋转 90deg锚定右缘0.1em 字距像杂志书脊指路标。幽灵 blob 壁纸0.08 不透明度超大有机 blob 置于角落。连接箭头涂鸦单条 2px 线 箭头头的 SVG 草图暗示「下一个」或「另见」。这些装饰正是preview.md中「signature moves」的实现原料双描边偏移、±3deg 旋转、有机 blob、角落涂鸦全部随单一色彩纪律一起迁移到成品。生成实现固定舞台的源码级落地当 Playful 被选中后Agent 依据 SKILL.md Phase 3 的要求生成单个自包含 HTML 文件完整内联 viewport-base.css、字体走 Fontshare 或 Google Fonts、每段代码带/* SECTION NAME */注释块。关键机制对应如下舞台缩放viewport-base.css 中.deck-stage固定 1920×1080JS 用Math.min(window.innerWidth / 1920, window.innerHeight / 1080)计算缩放因子再translate(x, y) scale(factor)居中html-template.md 的SlidePresentation实现deck-stage.js 的_fit()等价。这保证了「可 letterbox/pillarbox但不重排内容」。翻页与可见性.slide默认visibility: hidden; opacity: 0; pointer-events: none激活页加.active/.visible变为可见viewport-base.css 明确这是为了不让后置布局类如.slide-content { display: flex }把隐藏页全部显形。打印media print中每张.slide变为相对定位、1920×1080 整页break-after: page实现浏览器「另存为 PDF」的一页一稿deck-stage.js 还会向head注入page { size: 1920px 1080px; margin: 0 }。动效与无障碍viewport-base.css 内置prefers-reduced-motion降级deck-stage.js 的键盘导航会忽略输入框/可编辑元素中的按键且用visibility保留非激活页状态视频、iframe、表单、React 树。质量校验SKILL.md 与 bold-template-pack/README.md 都要求渲染截图同时验证文本溢出与面板重叠——仅靠scrollHeight检查不够因为网格面板可能互相遮挡。Playful 的.slide中还会自动获得data-om-validateno_overflowing_text,no_overlapping_text,slide_sized_text等校验属性deck-stage.js 的_collectSlides()供后续质量检查使用。Dos 与 Donts 清单生成 Playful 幻灯时文档给出的行为边界需要逐条遵守。应做Do每个展示时刻用 Syne每个正文/标签用 Space Grotesk维持双字体对比节奏。每个 Syne 元素加 -0.01em 至 -0.03em 负字距。每张主要内容卡都加双描边偏移边框3px 主轮廓 ::before偏移 6–8px 的 2–3px 幽灵边框。每张幻灯至少在一个角落放一个涂鸦 SVG波浪、星、圆、箭头——标记是标点不是内容。卡片、块、统计加 ±0.5–3deg 微旋转相邻元素方向交替。只使用{colors.text}作为唯一墨色需要「独立表面」时用{colors.bg-alt}。保持负空间呼吸每页一个主导元素加一两个涂鸦。需要肖像式装饰锚时把描边 blob 框与小实心 blob-fill 配对。负空间显得空、而涂鸦又太小的时候放一个 0.08 不透明度的超大幽灵 blob。禁止Dont不引入第三色图表条只有实心炭黑或描边炭黑绝不上色。不用模糊box-shadow层次只来自双边框与旋转。不用 4px/8px/12px 中等圆角。不用 Space Grotesk 做大标题不用 Syne 做正文段落。旋转不超过 ±3deg相邻元素绝不全部同向旋转。不把幻灯塞满卡片/统计/涂鸦——稀疏时贵气拥挤时崩坏。不用斜体或下划线强调不把展示字放到默认字距永远收紧 Syne。响应式、演示行为与打印源模板的响应式约定在frontend-slides固定舞台下作为「源历史」理解100vw×100vh 全程clamp()无断点流体缩放唯一媒体查询在max-width: 768px——多列网格折为单列、横向时间轴轨道变竖向、幻灯内边距缩为 2rem。演示器行为ArrowRight/Space/Enter前进ArrowLeft后退激活页带.active非激活页visibility隐藏 opacity 0。翻页过渡为 0.6s 不透明度淡入淡出。底部 4px 炭黑进度条随进度生长右下角导航簇含 48px 描边方按钮与当前/总页数。移动端支持横向触摸滑动。打印行为源模板未定义media print是纯 Web/视口优先但在frontend-slides链路中由 viewport-base.css 与 deck-stage.js 补齐了打印样式。若使用仓库的导出脚本scripts/export-pdf.sh以 Playwright 截图每页 1920×1080 合成 PDF注意动画不会被保留且幻灯片必须使用.slide类名。CJK 与国际化内容Playful 对中文内容的支持是设计文档的完整章节值得全文保留。推荐中文配对角色拉丁字体中文字体字重展示/标题/数字Syne 700–800Syne站酷快乐体 ZCOOL KuaiLe400唯一可用字重正文/标签Space Grotesk 400–600Space Grotesk悠哉字体 Yozai400混合内容策略Strategy A把中文字体追加到每个 token 的fontFamily末尾——Syne 系列变为Syne, ZCOOL KuaiLe, sans-serifSpace Grotesk 系列变为Space Grotesk, Yozai, sans-serif。拉丁字形走原字体CJK 字符自动回落。字体加载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.25。CJK 字距归零不做大写变换。使用全角标点。「」。展示标题不加句号中文排版惯例。盘古之白CJK 与拉丁文字间加空格如使用 Claude而非使用Claude。一个句子只用一种字体。美学说明中文转译在 Playful 上尤其成立因为两个中文字体与拉丁配对承载着同样的「温暖、手作、独立工作室」语感站酷快乐体 ZCOOL KuaiLe圆润友好、比例古怪的中文展示体是 CDN 可及范围内最接近 Syne 表现嗓音的字体。但中文展示必须去掉负字距——KuaiLe 基于方形 em 框设计收紧会造成字形碰撞它内在的温暖取代了负字距对 Syne 的作用。悠哉字体 Yozai为放松阅读设计的中文无衬线圆润字脚、友好人文比例与 Space Grotesk 的温暖对位。中文正文一律 Yozai 400眉毛标签的拉丁处理大写 0.15em 字距不迁移到 CJK中文眉毛用同样 0.85rem、字距 0、无大写靠小字号本身读作标签。双描边偏移边框、±3deg 旋转、有机 blob、SVG 涂鸦、幽灵 blob 壁纸全部与文字系统无关跨脚本完整保留单色纪律桃粉 炭黑与手作风审美在切换脚本后不受影响。版式节奏从「Syne↔Space Grotesk 对比」变为「KuaiLe↔Yozai 对比」统计与数字是纯数字保持 Syne 800 原样只有带中文单位后缀亿、万时后缀字形才回落至 KuaiLe。已知中文缺口KuaiLe 与 Yozai 都是单字重400字体系统对「Syne 700 vs 800 的子级展示层级、Space Grotesk 400/500/600 的标签层级」的依赖在纯中文中塌缩为仅靠字号分层。文档判断这不算有意义损失——Playful 的层级本就主要靠字号驱动且旋转、涂鸦、双边框足以维持系统性格。迭代指南逐条可执行的装配规则设计文档给出的 10 条迭代规则是生成每张新幻灯的可操作检查表新卡片用 rough-box 模式3px 炭黑边框、桃粉背景或反色炭黑、{spacing.pad-card-*}内边距、::before幽灵边框向下右偏移 6–8px、2–3px 权重。新卡片带 ±0.5–3deg 旋转与相邻卡方向交替绝不同向对齐。新标题用 Syne 700–800 负字距若是页面主时刻选{typography.headline}或{typography.display}而非子区域尺度的{typography.title}。新正文/标签用 Space Grotesk 400–600标题上方小标签用{typography.label-eyebrow}0.85rem、600、大写、0.15em 字距。新统计/数字用 Syne 800 负字距小数字2rem同样遵循展示字重惯例。每张新幻灯至少一个角落涂鸦 SVG波浪、星、圆、箭头2px 描边圆头线帽颜色{colors.text}。装饰形只用非对称有机圆角blob、0px 锐角矩形或 50%圆形避开中等圆角。负空间显得重时加幽灵 blob0.08 不透明度、超大有机形锚定内容未占用的角落。图表条形、环形、折线填充只用{colors.text}与{colors.bg-alt}不引入彩色图表色板。卡片可选描边默认桃粉底 炭黑边 炭黑字或反色炭黑底 桃粉字反色卡是系统唯一的强调装置留给需要锚定注意力的单元格。已知缺口与使用限制文档坦诚列出了系统的边界使用前应明确这些前提运行时经网络加载两个 Google FontSyne、Space Grotesk字体加载失败时回退 sans-serif 仍可渲染但系统「嗓音」会丢失生产环境建议自托管。双描边偏移边框要求父卡position: relative靠近幻灯边缘的卡偏移边框可能被裁切。768px 移动断点只重排网格不调整绝对定位的装饰 SVG 与 blob——它们仍停在桌面坐标小屏可能重叠或出屏。响应式按「基础可用」而非「打磨完善」对待。桃粉画布#F0C8A0文化联想很强大地色、温暖、略 rustic与冷调品牌色板不搭也不能用中性米白/纯白替代——温暖是系统的根基。图片占位{colors.bg-alt}填充 居中 IMG 01 标签只是占位生产套件需要真正尊重暖色板的图片冷调照片会与画布冲突。没有暗色模式变体系统是单一模式暖桃粉画布。导航按钮 hover 态背景变炭黑、文字反转为桃粉是演示镶边的交互行为不属于幻灯构图。总结Playful 是一套纪律鲜明的「单色手工编辑」设计系统桃粉画布 炭黑墨水构成唯一色彩二元Syne 与 Space Grotesk 的双字体对比撑起全部排版节奏双描边偏移边框与 ±3deg 旋转取代阴影成为层次语言有机 blob 与角落涂鸦注入手作气息。它在frontend-slides技能中作为 Bold Template Pack 的一员经渐进式披露被选中后以「风格配方」形式落到固定 1920×1080 舞台的单个自包含 HTML 文件中并完整继承了技能包的缩放、翻页、打印与无障碍基础设施。中文场景下按文档推荐的 KuaiLe Yozai 配对与通用 CJK 调整即可无损迁移。对希望做出「独立工作室而非公司提案」观感的内容创作者与产品发布者这套系统提供了可直接复制的完整设计语法。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Peoples Platform 模板设计系统解析基于 frontend-slides 打造 WPA 海报风幻灯片Peoples Platform 模板设计系统解析基于 frontend slides 打造 WPA 海报风幻灯片 本指南以 bold template pAI 技能AI 插件前端Pin Paper 模板设计系统解析用 frontend-slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片Pin Paper 模板设计系统解析用 frontend slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片 导读 Pin AI 技能AI 插件前端frontend-slides 的 Bold Poster 模板设计系统全解析打造海报级印刷质感网页幻灯片frontend slides 的 Bold Poster 模板设计系统全解析打造海报级印刷质感网页幻灯片 导读 本文以开源仓库 frontend slidAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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 技能包中的 Playful 设计文档 为骨架结合该技能包的模板索引、固定舞台实现与生成工作流源码完整讲解 Playful 这一「手工编辑风」幻灯设计系统的定位、配色、字体、版式、装饰语法、实现机制与中文本地化策略。读完本文你既能理解 Playful 的设计纪律单一色彩、双字体对比、双描边偏移边框、手绘涂鸦也能掌握它在frontend-slides技能中如何落地为固定 1920×1080 舞台的 HTML 幻灯片以及如何用于创作者作品集、独立产品发布、生活方式品牌等「温暖、独立、友好」的场合。Playful 的模板定位与适用场景在frontend-slides的 Bold Template Pack 中Playfulslug 为playful是一套可选的设计系统。模板索引 selection-index.json 中记录了它的选择元数据TaglineSun-warm peach background with Syne display: a friendly indie launch deck日暖桃粉背景 Syne 展示字体一套友好的独立产品发布套件。Moodwarm、approachable、indie、friendly。Toneupbeat、informal、welcoming。Formalitylow低正式度。Densitymedium中等密度。Schemelight浅色系。Best for创作者作品集、独立产品发布、生活方式品牌、小企业提案、Newsletter / 社区类演示也适合任何希望「友好而有人味、而非公司腔」的技术或研究类演示。Avoid for正式度要求高于温暖感的场合——桃粉色画布天然偏非正式。在 SKILL.md 定义的风格探索流程Phase 2中默认预览组合是「1 个安全预设 至少 1 个来自此模板包的 bold 模板 1 个 wildcard」。由于 Playful 的 mood/tone 偏 warm 与 friendly它适合作为大胆选项出现在需要「亲切、工作室感」的预览里若用户最终选中它Agent 才在 Phase 3 读取其完整 design.md将其视为「风格配方design recipe」而 preview.md 仅用于生成标题页预览。这套「先读轻量索引 → 再读 preview → 选中后才读完整 design.md」的渐进式披露机制是 bold-template-pack/README.md 明确要求的调用纪律避免 Agent 一次性读取全部模板造成信息过载。Frontend Slides 固定舞台策略Playful 设计文档开篇先声明了一条优先级高于模板本身响应式行为的硬性策略当它被frontend-slides技能使用时最终成品必须是固定 1920×1080 舞台整体等比缩放适配浏览器视口在任何屏幕包括手机上保持 16:9 画布允许 letterbox横向留黑边或 pillarbox纵向留黑边但绝不允许为移动端重排幻灯片内容。这一策略对源模板中所有100vw、100vh、vw、vh、clamp()等视口流式值一视同仁它们只作为「设计比例」被换算成 1920×1080 舞台坐标而不会作为成品中的响应式规则存在。文档同时要求使用 deck-stage.js 或等价的内联舞台缩放器并渲染截图同时检查「文本溢出」与「面板重叠」。该策略与技能其余部分的约束完全一致SKILL.md 将「Fixed 16:9 Stage」列为不可谈判的第五原则并规定幻灯片切换必须使用.active/.visible类配合visibility、opacity、pointer-events来自 viewport-base.css禁止用display: none/block切换。viewport-base.css 给出了该策略的完整基线实现.deck-stage固定 1920×1080、transform-origin: 0 0由 JS 设置translate(...) scale(...).slide绝对定位铺满舞台非激活页visibility: hidden; opacity: 0; pointer-events: none。deck-stage.js 在DESIGN_W_DEFAULT 1920、DESIGN_H_DEFAULT 1080第 53–54 行之上实现了自动缩放_fit()用Math.min(vw / designWidth, vh / designHeight)求出统一缩放系数并施加到画布上第 536–539 行同时提供键盘←/→、PgUp/PgDn、Space、Home/End、数字键、R 复位、触屏点击分区、底部计数浮层与media print每页一张幻灯的打印支持。html-template.md 中的SlidePresentation.setupStageScale()展示了同样的缩放算法Math.min(window.innerWidth / 1920, window.innerHeight / 1080)后以translate(x, y) scale(factor)把整个舞台居中。因此无论 Playful 源模板历史上是流式布局进入frontend-slides生成链路后统一为固定舞台输出。色彩系统单色纪律下的「墨在陶土纸上」Playful 的核心美学是单一温暖画布上的单色墨水它的完整色板只有四个 tokenToken色值用途{colors.bg}#F0C8A0桃陶土画布每张幻灯的默认表面饱和到足以成为系统签名又暖到让炭黑墨迹显得柔和{colors.bg-alt}#E8B88E画布的微深色调同胞用于图片占位区填充以及「无需引入新色」的层级区分{colors.light}#F7DEC6画布的微浅色调同胞用于单步抬升区域而不引入白色{colors.text}#1A1A1A炭黑墨色——系统中唯一的非画布颜色从纯黑略微软化覆盖全部正文、展示字、边框、SVG 描边与深色填充设计文档明确指出accent别名解析为{colors.text}——系统没有独立强调色。所谓「强调」是通过与画布的对比实现的而非第三种色相。所有视觉决策都是「画布桃粉对墨水炭黑」的二元选择通过不透明度、尺度与形状来调制默认表面背景永远是{colors.bg}标题与正文永远{colors.text}正文可降为 0.7–0.9 不透明度弱化但底色仍是炭黑。所有描边卡片、blob、涂鸦、图表轴线默认{colors.text}。炭黑实心块上的文字默认反转为{colors.bg}桃粉字这是系统唯一的反色关系。图片占位区默认用{colors.bg-alt}填充。装饰 blob 默认{colors.text}满不透明度前景或 0.08 不透明度背景大气幽灵 blob。在frontend-slides的 HTML 落地时这些 token 应映射为:root下的 CSS 自定义属性html-template.md 的 Base HTML Structure 提供了这种主题组织方式从而支持通过改变量整体换肤。字体系统Syne 与 Space Grotesk 的双面节奏Playful 的排版由一对 Google Font 构成没有第三个字体家族Syne展示体具有古怪人文主义比例的当代展示无衬线窄字怀、略压缩的比例。用于全部展示时刻——标题、宣言句、区域标题、数字、竖向标签字重 700–800。它的「性格」是区分 Playful 与普通暖色套件的关键读起来像独立工作室的嗓音而不是公司标题。Space Grotesk正文字干净、略带几何感的无衬线带友好的人文温度。正文 400–500标签/说明 500–600充当 Syne 表现力下的稳定对位。设计文档禁止斜体与下划线强调一律通过换字体正文→展示或加字重400→700实现。完整字号阶梯下表是文档定义的 13 个排版 token生成时必须完整继承Token尺寸clamp字体字重用途{typography.display-hero}4–9remSyne800超大封面或开场日期/标题{typography.display}3–7remSyne800结尾或重磅宣言标题{typography.headline}2.5–5remSyne700主要章节标题{typography.statement}2.5–4.5remSyne700长引文或宣言行{typography.title}2–3.5remSyne700区域或章节标题{typography.number-hero}4–7remSyne800主统计数字{typography.number-md}2.5remSyne800中等序数/统计数字{typography.number-sm}2remSyne800行内序号/步骤数字{typography.title-sm}1.3remSyne700小块内的卡片标题{typography.body-md}1.2remSpace Grotesk500副标题或强调正文{typography.body}1–1.1remSpace Grotesk400段落正文{typography.label-eyebrow}0.85remSpace Grotesk600标题上方的小眉毛标签大写 0.15em 字距{typography.caption}0.85remSpace Grotesk500副标题、细则、脚注{typography.tag}0.75remSpace Grotesk600炭黑 pill 内的标签文字文档给出的取舍指引当不确定主文案该用title还是headline时选headline——title只服务于幻灯内的子区域。非可选的签名处理设计文档强调以下处理在对应元素出现时不可省略每个展示元素都用 Syne每个 Syne 元素都带负字距-0.01em 至 -0.03em随字号变化默认字距的 Syne 读起来像「未处理」。每个正文与标签元素用 Space Grotesk眉毛标签必须大写 0.15em 字距否则读起来像正文片段而非标签。统计与数字恒为 800 字重即使 2rem 的小数字也遵循展示字重惯例独立站位的数字/统计可加 ±0.5deg–1deg 微旋转。行高纪律展示字收紧0.85–1.1正文放宽1.5–1.7两套节奏不可互换。布局系统全视口画布、间距刻度与演示器镶边Canvas 与间距源模板的布局目标是100vw × 100vh全视口每张.slide绝对定位铺满视口仅.active可见其余 opacity 0JS 驱动方向键/Space/按钮/触摸滑动翻页底部一条 4px 高的炭黑进度条。间距刻度如下Token值用途{spacing.pad-slide-lg}4rem 5rem封面、宣言、结尾页的外边距{spacing.pad-slide-md}3rem 4rem标准内容页外边距{spacing.pad-card-lg}2rem 3rem大卡片/联系块内边距{spacing.pad-card-md}1.5rem标准卡片内边距{spacing.gap-lg}3rem大区域间 gap{spacing.gap-md}2rem单元格间标准 gap{spacing.gap-sm}1.5rem紧凑行内 gap在固定舞台落地时这些 rem 值应换算为 1920×1080 坐标系下的像素比例1rem ≈ 相对 1080p 舞台的基准字号而不是保留为视口流式单位。演示器镶边Chrome右下角固定一个 48px×48px 导航簇上一页箭头、页码、下一页箭头全部 2px 炭黑描边底部边缘一条 4px 高炭黑进度条。二者不属于幻灯片构图是套件的持久演示镶边不应该被内容样式化。幻灯片画布内没有顶栏、页脚、页码。深度与层次双描边偏移边框、旋转与幽灵 blobPlayful 明确不依赖任何网页阴影——没有box-shadow模糊、没有drop-shadow、没有 rgba 阴影。所有层次感来自三件事双描边偏移边框主技法卡片带 3px 实心炭黑边框::before伪元素绝对定位于卡片上向下右偏移 6–8px携带第二条 2–3px 边框偏移层无填充画布透出。视觉上像「一笔拉了两遍」的手绘双重轮廓是系统的「抬高」装置。旋转次级技法卡片、块、统计与装饰形带 ±0.5deg–±3deg 微旋转且相邻元素旋转方向交替绝不让相邻卡片同向——暗示有人手工摆放而非网格吸附。大气幽灵 blob超大有机 blob 以 0.08 不透明度置于角落充当氛围壁纸像水印云。每页最多一个锚定在主体内容未占用的角落。形状与装饰语法圆角刻度值用途0px卡片、块、标签、图片框、表格单元格50%圆形头像占位、步骤节点、涂鸦圆非对称有机如40% 60% 70% 30% / 40% 50% 60% 50%仅限 blob 框与 blob 填充鹅卵石非对称如255px 15px 225px 15px / 15px 225px 15px 255px仅限鹅卵石形框系统刻意避开 4px/8px/12px 的中等圆角——角要么锋利、要么正圆、要么有机 blob中间地带读起来像通用网页应用。边框与描边权重3px 实心炭黑——标准描边卡片与 blob 框。2–3px 实心炭黑——::before偏移幽灵边框略细于主边框。3px 实心炭黑——图表 X/Y 轴线。2px 实心炭黑——导航按钮边框与时间轴轨道横线。2px 描边——SVG 涂鸦标准笔划圆头线帽。装饰元素清单设计文档定义了 11 类可复用装饰组件components段的 YAML token 也逐一定义了实现细节Rough-box 卡片矩形内容卡带签名双描边偏移边框背景默认桃粉也可反色为炭黑可选 ±0.5–3deg 旋转。有机 blob 框非对称圆角的描边装饰框用作肖像框或装饰锚常内嵌一个更小的实心 blob-fill两种特征形波浪有机形与鹅卵石形。实心 blob 填充炭黑非对称有机形可与描边框组成「框 块」配对或独立漂浮。涂鸦 SVG单条 2px 描边炭黑线圆头线帽词汇包括波浪 stub、星形轮廓、乱画圆、波浪线、箭头、同心圆每张幻灯至少一个最多两三个。涂鸦圆 / 涂鸦矩形简化的描边装饰锚轻微旋转用于「blob 太有机」时的视觉标点。步骤节点圆64px 圆形描边节点内含 Syne 800 单数字描边与实心按序交替。标签 pill炭黑小矩形 桃粉 0.75rem 600 文字锚定在图片框左下角作分类标签。竖向脊标签Syne 700 1.5rem 文字旋转 90deg锚定右缘0.1em 字距像杂志书脊指路标。幽灵 blob 壁纸0.08 不透明度超大有机 blob 置于角落。连接箭头涂鸦单条 2px 线 箭头头的 SVG 草图暗示「下一个」或「另见」。这些装饰正是preview.md中「signature moves」的实现原料双描边偏移、±3deg 旋转、有机 blob、角落涂鸦全部随单一色彩纪律一起迁移到成品。生成实现固定舞台的源码级落地当 Playful 被选中后Agent 依据 SKILL.md Phase 3 的要求生成单个自包含 HTML 文件完整内联 viewport-base.css、字体走 Fontshare 或 Google Fonts、每段代码带/* SECTION NAME */注释块。关键机制对应如下舞台缩放viewport-base.css 中.deck-stage固定 1920×1080JS 用Math.min(window.innerWidth / 1920, window.innerHeight / 1080)计算缩放因子再translate(x, y) scale(factor)居中html-template.md 的SlidePresentation实现deck-stage.js 的_fit()等价。这保证了「可 letterbox/pillarbox但不重排内容」。翻页与可见性.slide默认visibility: hidden; opacity: 0; pointer-events: none激活页加.active/.visible变为可见viewport-base.css 明确这是为了不让后置布局类如.slide-content { display: flex }把隐藏页全部显形。打印media print中每张.slide变为相对定位、1920×1080 整页break-after: page实现浏览器「另存为 PDF」的一页一稿deck-stage.js 还会向head注入page { size: 1920px 1080px; margin: 0 }。动效与无障碍viewport-base.css 内置prefers-reduced-motion降级deck-stage.js 的键盘导航会忽略输入框/可编辑元素中的按键且用visibility保留非激活页状态视频、iframe、表单、React 树。质量校验SKILL.md 与 bold-template-pack/README.md 都要求渲染截图同时验证文本溢出与面板重叠——仅靠scrollHeight检查不够因为网格面板可能互相遮挡。Playful 的.slide中还会自动获得data-om-validateno_overflowing_text,no_overlapping_text,slide_sized_text等校验属性deck-stage.js 的_collectSlides()供后续质量检查使用。Dos 与 Donts 清单生成 Playful 幻灯时文档给出的行为边界需要逐条遵守。应做Do每个展示时刻用 Syne每个正文/标签用 Space Grotesk维持双字体对比节奏。每个 Syne 元素加 -0.01em 至 -0.03em 负字距。每张主要内容卡都加双描边偏移边框3px 主轮廓 ::before偏移 6–8px 的 2–3px 幽灵边框。每张幻灯至少在一个角落放一个涂鸦 SVG波浪、星、圆、箭头——标记是标点不是内容。卡片、块、统计加 ±0.5–3deg 微旋转相邻元素方向交替。只使用{colors.text}作为唯一墨色需要「独立表面」时用{colors.bg-alt}。保持负空间呼吸每页一个主导元素加一两个涂鸦。需要肖像式装饰锚时把描边 blob 框与小实心 blob-fill 配对。负空间显得空、而涂鸦又太小的时候放一个 0.08 不透明度的超大幽灵 blob。禁止Dont不引入第三色图表条只有实心炭黑或描边炭黑绝不上色。不用模糊box-shadow层次只来自双边框与旋转。不用 4px/8px/12px 中等圆角。不用 Space Grotesk 做大标题不用 Syne 做正文段落。旋转不超过 ±3deg相邻元素绝不全部同向旋转。不把幻灯塞满卡片/统计/涂鸦——稀疏时贵气拥挤时崩坏。不用斜体或下划线强调不把展示字放到默认字距永远收紧 Syne。响应式、演示行为与打印源模板的响应式约定在frontend-slides固定舞台下作为「源历史」理解100vw×100vh 全程clamp()无断点流体缩放唯一媒体查询在max-width: 768px——多列网格折为单列、横向时间轴轨道变竖向、幻灯内边距缩为 2rem。演示器行为ArrowRight/Space/Enter前进ArrowLeft后退激活页带.active非激活页visibility隐藏 opacity 0。翻页过渡为 0.6s 不透明度淡入淡出。底部 4px 炭黑进度条随进度生长右下角导航簇含 48px 描边方按钮与当前/总页数。移动端支持横向触摸滑动。打印行为源模板未定义media print是纯 Web/视口优先但在frontend-slides链路中由 viewport-base.css 与 deck-stage.js 补齐了打印样式。若使用仓库的导出脚本scripts/export-pdf.sh以 Playwright 截图每页 1920×1080 合成 PDF注意动画不会被保留且幻灯片必须使用.slide类名。CJK 与国际化内容Playful 对中文内容的支持是设计文档的完整章节值得全文保留。推荐中文配对角色拉丁字体中文字体字重展示/标题/数字Syne 700–800Syne站酷快乐体 ZCOOL KuaiLe400唯一可用字重正文/标签Space Grotesk 400–600Space Grotesk悠哉字体 Yozai400混合内容策略Strategy A把中文字体追加到每个 token 的fontFamily末尾——Syne 系列变为Syne, ZCOOL KuaiLe, sans-serifSpace Grotesk 系列变为Space Grotesk, Yozai, sans-serif。拉丁字形走原字体CJK 字符自动回落。字体加载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.25。CJK 字距归零不做大写变换。使用全角标点。「」。展示标题不加句号中文排版惯例。盘古之白CJK 与拉丁文字间加空格如使用 Claude而非使用Claude。一个句子只用一种字体。美学说明中文转译在 Playful 上尤其成立因为两个中文字体与拉丁配对承载着同样的「温暖、手作、独立工作室」语感站酷快乐体 ZCOOL KuaiLe圆润友好、比例古怪的中文展示体是 CDN 可及范围内最接近 Syne 表现嗓音的字体。但中文展示必须去掉负字距——KuaiLe 基于方形 em 框设计收紧会造成字形碰撞它内在的温暖取代了负字距对 Syne 的作用。悠哉字体 Yozai为放松阅读设计的中文无衬线圆润字脚、友好人文比例与 Space Grotesk 的温暖对位。中文正文一律 Yozai 400眉毛标签的拉丁处理大写 0.15em 字距不迁移到 CJK中文眉毛用同样 0.85rem、字距 0、无大写靠小字号本身读作标签。双描边偏移边框、±3deg 旋转、有机 blob、SVG 涂鸦、幽灵 blob 壁纸全部与文字系统无关跨脚本完整保留单色纪律桃粉 炭黑与手作风审美在切换脚本后不受影响。版式节奏从「Syne↔Space Grotesk 对比」变为「KuaiLe↔Yozai 对比」统计与数字是纯数字保持 Syne 800 原样只有带中文单位后缀亿、万时后缀字形才回落至 KuaiLe。已知中文缺口KuaiLe 与 Yozai 都是单字重400字体系统对「Syne 700 vs 800 的子级展示层级、Space Grotesk 400/500/600 的标签层级」的依赖在纯中文中塌缩为仅靠字号分层。文档判断这不算有意义损失——Playful 的层级本就主要靠字号驱动且旋转、涂鸦、双边框足以维持系统性格。迭代指南逐条可执行的装配规则设计文档给出的 10 条迭代规则是生成每张新幻灯的可操作检查表新卡片用 rough-box 模式3px 炭黑边框、桃粉背景或反色炭黑、{spacing.pad-card-*}内边距、::before幽灵边框向下右偏移 6–8px、2–3px 权重。新卡片带 ±0.5–3deg 旋转与相邻卡方向交替绝不同向对齐。新标题用 Syne 700–800 负字距若是页面主时刻选{typography.headline}或{typography.display}而非子区域尺度的{typography.title}。新正文/标签用 Space Grotesk 400–600标题上方小标签用{typography.label-eyebrow}0.85rem、600、大写、0.15em 字距。新统计/数字用 Syne 800 负字距小数字2rem同样遵循展示字重惯例。每张新幻灯至少一个角落涂鸦 SVG波浪、星、圆、箭头2px 描边圆头线帽颜色{colors.text}。装饰形只用非对称有机圆角blob、0px 锐角矩形或 50%圆形避开中等圆角。负空间显得重时加幽灵 blob0.08 不透明度、超大有机形锚定内容未占用的角落。图表条形、环形、折线填充只用{colors.text}与{colors.bg-alt}不引入彩色图表色板。卡片可选描边默认桃粉底 炭黑边 炭黑字或反色炭黑底 桃粉字反色卡是系统唯一的强调装置留给需要锚定注意力的单元格。已知缺口与使用限制文档坦诚列出了系统的边界使用前应明确这些前提运行时经网络加载两个 Google FontSyne、Space Grotesk字体加载失败时回退 sans-serif 仍可渲染但系统「嗓音」会丢失生产环境建议自托管。双描边偏移边框要求父卡position: relative靠近幻灯边缘的卡偏移边框可能被裁切。768px 移动断点只重排网格不调整绝对定位的装饰 SVG 与 blob——它们仍停在桌面坐标小屏可能重叠或出屏。响应式按「基础可用」而非「打磨完善」对待。桃粉画布#F0C8A0文化联想很强大地色、温暖、略 rustic与冷调品牌色板不搭也不能用中性米白/纯白替代——温暖是系统的根基。图片占位{colors.bg-alt}填充 居中 IMG 01 标签只是占位生产套件需要真正尊重暖色板的图片冷调照片会与画布冲突。没有暗色模式变体系统是单一模式暖桃粉画布。导航按钮 hover 态背景变炭黑、文字反转为桃粉是演示镶边的交互行为不属于幻灯构图。总结Playful 是一套纪律鲜明的「单色手工编辑」设计系统桃粉画布 炭黑墨水构成唯一色彩二元Syne 与 Space Grotesk 的双字体对比撑起全部排版节奏双描边偏移边框与 ±3deg 旋转取代阴影成为层次语言有机 blob 与角落涂鸦注入手作气息。它在frontend-slides技能中作为 Bold Template Pack 的一员经渐进式披露被选中后以「风格配方」形式落到固定 1920×1080 舞台的单个自包含 HTML 文件中并完整继承了技能包的缩放、翻页、打印与无障碍基础设施。中文场景下按文档推荐的 KuaiLe Yozai 配对与通用 CJK 调整即可无损迁移。对希望做出「独立工作室而非公司提案」观感的内容创作者与产品发布者这套系统提供了可直接复制的完整设计语法。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Peoples Platform 模板设计系统解析基于 frontend-slides 打造 WPA 海报风幻灯片Peoples Platform 模板设计系统解析基于 frontend slides 打造 WPA 海报风幻灯片 本指南以 bold template pAI 技能AI 插件前端Pin Paper 模板设计系统解析用 frontend-slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片Pin Paper 模板设计系统解析用 frontend slides 打造田野笔记本风格的 1920×1080 固定舞台幻灯片 导读 Pin AI 技能AI 插件前端frontend-slides 的 Bold Poster 模板设计系统全解析打造海报级印刷质感网页幻灯片frontend slides 的 Bold Poster 模板设计系统全解析打造海报级印刷质感网页幻灯片 导读 本文以开源仓库 frontend slidAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考