Soft Editorial 模板实战指南：为 frontend-slides 生成文学杂志风标题页预览

AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Soft Editorial 是frontend-slides项目的 Bold Template Pack 中一款以温暖杂志版面为设计哲学的模板它的preview.md是选型阶段生成标题页预览的唯一依据。本文以该预览文档为主体结合其完整设计文档bold-template-pack/templates/soft-editorial/design.md与仓库中的固定舞台实现bold-template-pack/deck-stage.js、viewport-base.css系统讲解如何读懂 Soft Editorial 的调色板、字体分工与标志性手法并严格按预览规则在 1920×1080 固定画布上生成一张看起来就是真实首页的标题幻灯片。读完本文你将能准确执行该模板的标题页预览并为用户选定后的整套 deck 生成奠定基础。模板定位一封写给文学杂志的提案Soft Editorial 的元数据由 bold-template-pack/templates/soft-editorial/preview.md 定义Slug 为soft-editorial。它的 Tagline 是一句话讲清楚整个视觉主张Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.在 bold-template-pack/selection-index.json 的 34 个模板条目中Soft Editorial 被归入literary / elegant / quiet / warm-classical情绪档完整的选择元数据如下字段值含义Slugsoft-editorial模板唯一标识用于索引与选型Moodliterary, elegant, quiet, warm-classical情绪基调文学、优雅、安静、温暖古典Toneliterary, considered, warm, magazine语气文学、深思、温暖、杂志化Formalityhigh正式度高适合正式场域Densitylow密度低一页一个核心想法Schemelight色系浅色Best foreditorial features、longform brand stories、gallery/museum decks、advisory deliverables、wedding/lifestyle media、founder essays任何需要文学、优雅、不紧不慢气质的场景同样适合想要周日副刊式温暖的 tech/research/business deckAvoid for需要视觉热度或冲击力的 deck暖纸调色板与 Cormorant 衬线是刻意安静的选型阶段的用法在 bold-template-pack/README.md 中有明确约定先读selection-index.json仅凭mood / tone / best_for / avoid_for / formality / density / scheme短名单候选对入围候选只读各自的preview.md用户选定后才读且只读那一个模板的design.md。preview.md自述其定位——Use this small file for title-slide previews only它是一张轻量的风格卡不是最终的生成规格。视觉快照奶油纸、糖果粉彩与文学研究笔记preview.md用一段Visual Snapshot概括了整个系统的气质一个会委托小型印刷季刊做田野笔记式版式设计的杂志版面。Cormorant Garamond 承担每一个标题与装饰性瞬间Work Sans 退居正文调色板是奶油纸加上一组粉彩糖果色dusty pink、chartreuse lemon、soft peach blush、sage green、lilac作为彩色卡片底色宽圆角的卡片24–36px 圆角以半透明白悬浮在奶油底上。文档给出的整体判断是editorial calm with a sprinkling of riso-print color——更接近一本文学研究笔记本而非企业模板。其核心视觉前提是单一字体几乎包办所有话语权每一页都坐在{colors.paper}#F2EEDF这块温暖的做旧奶油纸上——它读起来像实体纸张而不是屏幕白。卡片悬浮在纸面上分为两个层级半透明白的柔和默认层以及饱和粉彩的强调层。预览要素调色板、字体与标志性手法preview.md的 Preview Ingredients 是生成标题页时必须逐项落实的视觉配方。调色板Palette预览文档给出 8 个色值完整设计文档 design.md 在此基础上补充了 lilac 与三组透明度色值合并后的完整色板为Token值角色paper#F2EEDF奶油纸默认页底色全 deck 的常量paper-2#ECE6D2略冷一点的邻近纸色用于相邻表面分离多数 deck 用不到ink#2A241B暖近黑带棕调所有表面上的主文字色绝不使用纯黑ink-soft#5C5345柔和的暖灰棕次要文字说明、页码、署名pink#E1A4C2灰粉玫瑰用得最多的强调填充lemon#D6DD63黄绿 chartreuse最亮的强调色blush#E8C9B6柔和蜜桃最中性的粉彩sage#B7C7A8柔和鼠尾草绿用于变化lilac#C9BEDC柔和紫灰五色流程中的第五个槽位card-fillrgba(255,255,255,0.55)半透明白默认卡片填充rule-softrgba(42,36,27,0.18)低透明度暖墨虚线内线rule-mediumrgba(42,36,27,0.35)稍重的主分隔线配色哲学是奶油加五个粉彩。五只粉彩pink、lemon、blush、sage、lilac是可互换的卡片填充不承载固定语义——lemon 不是警告pink 不是错误。唯一的例外是矩阵布局内的惯例lemonyes / blushpartial / pinkno。所有粉彩表面上的文字都保持在 ink/ink-soft系统从不反白。字体TypographyCormorant Garamond一套老式衬线字体斜体轴非常富有表现力。负责全部标题层级、数字、引言、kicker、装饰性 marker、页码、页脚、首字下沉。Work Sans人文主义无衬线。仅负责正文段落、eyebrow、卡片副标签、署名和 swatch-label。Work Sans 永不承担标题。系统最核心的排版信号是同一标题内的混重500 字重的衬线标题中夹一个em短语斜体且降到 400 字重。这与杂志斜体加重的惯例相反——这里斜体是更轻、更亲密的语调读起来是柔化而非强调。标志性手法Signature Movespreview.md明确列出 5 条必须遵守的标志性手法单一暖奶油表面{colors.paper}贯穿每一页粉彩只作为卡片填充绝不作为页面背景唯一例外全出血的收尾页可以整页铺{colors.pink}。Cormorant Garamond 承担一切display、headline、kicker 与装饰性瞬间全归衬线Work Sans 只留给正文和 eyebrow。标题内混排罗马斜体斜体短语从标题的 500 字重降为 400。五只饱和粉彩可互换无固定语义同一页经常同时出现三四种。圆角卡片是默认容器24–36px 圆角pill 完全圆角999px半透明白{colors.card-fill}是默认卡片填充。预览文档还强调本系统没有投影阴影——深度来自半透明叠加和圆角形态卡片内细线使用低透明度暖墨的虚线强化笔记本质感。国际化 / CJK 预览注意preview.md用专门一节约束 CJK 预览如果预览使用中文或其他 CJK 文本CJK 的 letter-spacing 保持 0系统在 Latin display 上的负字距 –0.01 到 –0.02em 对汉字是错的会造成笔画重叠、放宽 line-height、避免对 CJK 文本施加 uppercase transforms汉字无大小写text-transform: uppercase是空操作。完整的中文字体配对与脚本级调整在用户选定模板后读取 design.md 的 CJK 章节获得——其推荐方案为标题用霞鹜文楷 LXGW WenKai无真实斜体强调改用 ink-soft 颜色偏移、正文切换为思源宋体 Noto Serif SC并给出如下 font-family 栈font-family: Cormorant Garamond, LXGW WenKai TC, Noto Serif SC, serif; /* headlines */ font-family: Work Sans, Noto Serif SC, sans-serif; /* body */预览阶段只需遵守字距归零、行高放宽、禁 uppercase三条底线其余留到完整生成时处理。预览规则这是真实首页不是选择卡片preview.md的 Preview Rules 是标题页预览的行为边界共 10 条直接对应 SKILL.md 中 Phase 2 的Preview authenticity rulesNON-NEGOTIABLE只构建一个标题页尺寸为 1920×1080位于固定舞台模型内。保留调色板、字体角色、表面节奏与装饰词汇——即上一节的 Preview Ingredients 全部生效。使用用户的真实标题/副标题/上下文绝不复制 demo 幻灯片内容。渲染结果必须像真实的第一页而不是一张模板选择卡。绝不放置内部工作流文本preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。绝不把模板名或 slug 放到幻灯片上只在聊天消息中提及。绝不放置需求笔记期望氛围、受众、内部用途标签除非用户明确要求这些词出现在 deck 中。可见 chrome 只用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实短语。不读template.html生成预览不读其他模板的design.md。用户选定该模板后先读完整设计文档再生成最终幻灯片。这些规则对应 SKILL.md 的渐进披露原则Progressive Disclosure用轻量preview.md展示风格只有在用户做出选择后才加载完整的design.md。README 同样声明design.md是设计系统参考preview.md只是生成三个标题页选项的轻量风格卡。固定舞台底座1920×1080 与 deck-stage 缩放Soft Editorial 的标题页必须构建在固定 1920×1080 舞台上。这并非模板个性而是frontend-slides的全局铁律见 SKILL.md 的 Fixed 16:9 Stage (NON-NEGOTIABLE)与 Bold Template Pack 的实现契约见 bold-template-pack/README.md无论源模板原本是否使用视口流体 CSS最终 deck 一律输出为固定 1920×1080 舞台整体等比缩放到浏览器视口允许 letterbox/pillarbox绝不为移动端重排内容。design.md的 Fixed-Stage Policy 也强调此策略优先级高于任何源模板的响应式行为vw/vh/clamp()一律按设计比例翻译成舞台坐标不作为实时响应式规则。缩放与导航由两个配套文件支撑bold-template-pack/deck-stage.js 定义deck-stage自定义元素内部.canvas以 1920×1080 设计尺寸构建通过_fit()计算Math.min(vw / 1920, vh / 1080)的缩放因子并整体transform: scale()幻灯片以visibility/opacity/pointer-events控制显隐而非display: none支持键盘←/→、PgUp/PgDn、Space、Home/End、R 复位、数字跳转、移动端三等分点按区域和触控打印时按设计尺寸一页一页排版。viewport-base.css 是每次生成都必须整体嵌入的强制基础样式锁定视口、定义.deck-stage为 1920×1080 的绝对定位画布、.slide.active/.visible控制显隐、打印媒体查询每页一张幻灯片、并内建prefers-reduced-motion支持。因此为 Soft Editorial 生成预览标题页时最稳妥的容器是deck-stage width1920 height1080或其等价的内联舞台缩放器每个section以data-label标识。预览与最终 deck 共用这套底座保证了预览即真实首页。从预览到完整 deckdesign.md 的深化地图用户选定 Soft Editorial 后design.md 会把预览文档里藏着的规格全部展开生成最终幻灯片前必须逐项对照排版令牌表从 numeral-hero320px到 body-md24px共 20 个 token系统默认的工作马字号是 section-headline96px每类元素都有固定的字重、行高与字距。布局系统80px 外衬、60px 顶部 chrome、50px 底部eyebrow左上 60/80px、pagedot右上、双栏页脚底部 50px三件套 chrome 位置不可漂移封面页把 pagedot 换成右上角一排 3 个圆形粉彩色卡。圆角阶梯卡片 22–36px、pill 999px、色卡 16px、图例条 6px、封面色点 50%——系统内不存在方角。装饰词汇表软卡片、彩色卡片、状态 pill、action bar、封面色卡行、首字下沉、斜体罗马序号i., ii., iii.、引号符号220px blush 色、图例条、来源虚线行。Dos Donts十条做与不做清单例如正文不加粗除 11px swatch-label 外不用大写不引入第三款字体不用 mono卡片间 28–36px 间距与奶油纸呼吸感是承重结构。这个先预览、后深化的两阶段工作流正是frontend-slides让非设计师靠看见来发现审美Show, Dont Tell的具体落地preview.md负责让用户看见design.md负责让最终 deck 成立。赞分享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 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页frontend slides 模板预览卡实战指南读懂 BlockFrame 的 preview.md 并生成 neobrutalist 标题页 本文以 frAI 技能AI 插件前端frontend-slides 的 Editorial Forest 模板预览卡preview.md解析如何为四季度回顾式演示生成真实标题页frontend slides 的 Editorial Forest 模板预览卡preview.md解析如何为四季度回顾式演示生成真实标题页 editorAI 技能AI 插件前端Frontend Slides Mat 模板预览卡解析material-tactile 风格标题页的生成规范与设计系统实战Frontend Slides Mat 模板预览卡解析material tactile 风格标题页的生成规范与设计系统实战 本篇技术指南围绕 frontendAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考