★ FEATURED ARTICLE 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 仓库中 Long Table 模板的预览卡 为主体系统讲解这套 晚宴俱乐部海报 / Risograph 小志 / 小批量印刷节目单 风格设计系统在编码 Agent 工作流中的角色、选择元数据、单墨色调色板、双字体排版规则与严格预览约束。读完本文你将掌握如何用 preview.md 快速产出真实感标题预览页并在用户选定模板后正确衔接到 完整设计文档 生成全套 1920×1080 固定舞台幻灯片。一、preview.md 在整个技能工作流中的位置frontend-slides 采用渐进式披露progressive disclosure架构Agent 先读轻量索引再读候选模板的迷你预览卡只有当用户最终选定某个模板后才读取该模板的完整设计文档。这一链路在 SKILL.md 的 Phase 2风格发现与 Phase 3生成中有明确约定阶段读取文件用途候选筛选bold-template-pack/selection-index.json仅凭mood、tone、best_for、avoid_for、formality、density、scheme元数据圈定短名单风格预览bold-template-pack/templates/long-table/preview.md只为短名单中的候选生成一张真实感标题预览页最终生成bold-template-pack/templates/long-table/design.md用户选定后以此为设计配方生成整副 deck因此 preview.md 的开篇就写明了自己的边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本小文件仅用于标题页预览最终生成时请阅读下方列出的完整设计文档。它同时给出两份文件的定位完整设计文档bold-template-pack/templates/long-table/design.md预览卡bold-template-pack/templates/long-table/preview.md这条预览卡—设计文档的双层结构是整个 Bold Template Pack 的统一契约bold-template-pack/README.md 将其明确为preview.md 只是用于生成三个标题选项的轻量风格卡design.md 才是设计系统参考。二、选择元数据Selection Metadata逐字段解析preview.md 的第二部分是结构化的选择元数据Agent 在 Phase 2 依靠它判断 Long Table 是否匹配用户的场合、受众与氛围。这些字段与 selection-index.json 中long-table条目的字段一一对应字段值说明Sluglong-table模板的唯一标识符也是目录名templates/long-table/TaglineWarm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, Fraunces serifs, and pill-shaped outlined buttons一句话卖点奶油色 锈红色、大号大写无衬线标题、Fraunces 衬线、胶囊描边按钮Moodwarm, intimate, modern, friendly, small-batch, social, hospitality温暖、亲密、现代、友好、小批量、社交、好客Tonewarm, playful, considered, social, magazine-friendly, modern-editorial温暖、俏皮、考究、社交、杂志友好、现代编辑风Formalitymedium中等正式度介于休闲与严肃之间Densitymedium中等内容密度Schemelight浅色方案适用与回避场景Best for最适合一切需要温暖、亲密、现代的好客/社区品牌感的内容——晚宴俱乐部supper clubs、晚餐系列、小型餐厅、创意工作室活动、会员制 pitch、生活方式与葡萄酒品牌也适用于任何想要单一暖色强调、混合字重排版和社交媒体友好的现代编辑语气的 deck。Avoid for避免需要企业正式感corporate polish、技术密集或冷峻极简语境的 deck——锈红色配色与大胆衬线混排刻意面向人群、偏温暖会与冷色、正式的要求相冲突。在 Phase 2 的预览混合规则SKILL.md中mood、tone、formality、density、scheme是判断候选匹配度的核心输入而best_for与avoid_for提供软性行业信号。例如一份葡萄酒品牌发布 deckLong Table 是强候选而一份医疗机构年报则应当被avoid_for直接排除。三、视觉快照单墨色编辑系统的设计本质preview.md 的核心设计判断只有一句整个系统只有一种油墨色。预览卡给出的视觉快照Visual Snapshot明确写道A warm, single-ink editorial system in the register of a supper-club poster, a small-batch zine, or a Risograph-printed program.Long Table 是一套单墨色编辑系统美学灵感来自单色丝网印刷、活版印刷海报与 Risograph 文具——在这些印刷媒介里每多一种颜色都是一次额外的印刷工序因此增加颜色是一个需要深思熟虑的决定。commit 到单墨色后系统获得的是印刷物的沉静权威感而非数字表面的精致感。调色板与不透明度分层完整调色板在 design.md 中定义为 tokenpreview.md 的 Preview Ingredients 摘录了核心值Token值用途paper#FAF1E2黄油奶油纸底色系统唯一的背景填充paper-d#F2E5CF略深的奶油色备用次级表面paper-vd#E8D7B6更深奶油色备用强调表面ink#B53D2A唯一的油墨色——暖锈红陶土色所有文本、边框、规则线、胶囊描边、页码均用它ink-dp#8E2D1F更深的锈色备用强调rule#B53D2Aink的语义别名用于规则线语境ink-78rgba(181, 61, 42, 0.78)弱化元数据的降级墨色ink-50rgba(181, 61, 42, 0.5)纸纹网点渐变内部使用ink-32rgba(181, 61, 42, 0.32)内部虚线/实线分隔线专用唯一的变化维度是不透明度主标记用 100% 的墨色弱化元数据用 78%虚线内部分隔线用 32%纸纹网点用 10%。整个系统刻意不提供强调色——如果某处需要突出正确做法是放大字号Bricolage 800 至 180px或启用斜体 Fraunces 大编号而不是引入第二种颜色。4px 网点纸纹Paper Texture另一个关键签名元素是通过.stage::before伪元素叠加的 4px 网点纸纹以ink-50的 0.5px 径向渐变点铺成4px × 4px平铺整体不透明度 10%。它位于舞台上所有内容之下pointer-events 关闭。在正常观看距离下不可见、凑近时恰好可见赋予奶油表面印刷纸的质感。design.md 强调这是设计系统的一部分而非可选的装饰——移除它或使用纯平奶油底会丢失印刷纸品质。四、Preview Ingredients签名设计手法清单preview.md 用Preview Ingredients一节浓缩了该系统的签名手法Signature Move供生成预览页时照做调色板paper #FAF1E2; paper-d #F2E5CF; paper-vd #E8D7B6; ink #B53D2A; ink-dp #8E2D1F; rule #B53D2A。排版完整字阶以 design.md 为准。签名一Bricolage Grotesque 700/800 字重、严格大写承载所有显示级时刻——封面、标题、卡片标题、菜品名、引言正文、信息值、who-tag。Bricolage 是宽体、微窄的 grotesque大写形态具备手绘海报般的冲击力并启用opsz光学尺寸轴。签名二Fraunces 400–600 承载所有正文、元数据、胶囊、页码、版次标签斜体 Fraunces 是系统默认正文形态。签名三奶油纸上一色油墨ink唯一颜色变化是不透明度。签名四每个显示元素均为大写 Bricolage、每个正文元素默认斜体 Fraunces。签名五每张幻灯片通过.stage::before叠加 4px 径向网点纸纹。五、字号阶梯从预览到完整 deck 的排版骨架虽然预览页只需遵循上述签名手法但要生成完整 deck必须继承 design.md 中从 13px 到 480px 的完整字阶。核心分层如下Token最大字号字体 / 字重 / 样式用途display-jumbo-numeral480pxFraunces 400 斜体封面级大版次数字系统签名锚点display-cover180pxBricolage 800 大写封面标题display160pxBricolage 800 大写章节开启 / 宣言标题headline-xl140pxBricolage 800 大写特刊标题headline120pxBricolage 800 大写常规页标题、索引/日历 topbarheadline-md100pxBricolage 800 大写菜单/节目单标题quote96pxBricolage 700 大写引言正文card-title44pxBricolage 800 大写描边卡片内标题course-name28pxBricolage 700 大写账本行内菜品名info-value28pxBricolage 700 大写键值信息行的值body-serif-italic-lg28pxFraunces 400 斜体宣言/信件类导语body-serif-italic22pxFraunces 400 斜体标准正文body-roman17pxFraunces 400 正体卡片内描述小字号下正体更易读pill-text20pxFraunces 400 斜体胶囊按钮 / 矩形标签内文字meta-tag16pxFraunces 400 斜体卡片元数据标签pagenum16pxFraunces 400 斜体右下角页码nav-hint13pxFraunces 400 斜体 45% 透明度左下角导航提示两条硬规则值得牢记Bricolage 显示元素必须大写 负字距-0.005em ~ -0.012em 700/800 字重三者同时成立改变任一属性都会读成另一套设计系统Fraunces 正文元素默认斜体正体仅用于 info-key 和卡片内描述两处紧凑场景。六、布局与组件词汇卡片、胶囊、账本行与分隔线design.md 定义了完整的组件语法这些在预览页中同样生效Pill胶囊按钮border-radius: 999px全圆角描边按钮1.5px 实线 ink 边框、无填充内放短斜体 Fraunces 文本是系统的 CTA 按钮。Edition Badge版次徽章约 38px 圆形描边徽章内放单个斜体 Fraunces 数字必须与斜体 EDITION N. 标签成对出现——二者是一个整体。Rect Tag矩形标签直角描边标签胶囊的直角表亲用于不适合圆角的元数据/状态场合。Outlined Card描边卡片1.5px ink 描边矩形卡片内部结构固定顶部元数据行下方是 1px 32% 实线分隔线标题与描述之后、底部 meta 行上方是 1px 32% 虚线分隔线——实/虚成对是该系统的卡片节奏装置。Ledger Row账本行多列网格行典型列宽 80px / 130px / 1.6fr / 0.9fr / auto底部 1px 32% ink 实线用于日历、日程、索引页读起来像宾客簿/餐厅预订日志。Topbar with Divider左侧 Bricolage 大标题 右侧小斜体 Fraunces 标签下方 1.5px ink 实线横规则是通用的章节开启装置。页码与导航提示每页右下角斜体 Fraunces 页码系统脊梁视口左下角 45% 透明度的斜体 Fraunces 导航提示如 ← → to navigate。深度是扁平印刷式的系统内不存在阴影、渐变、模糊与发光。层级完全依靠 1.5px 实线描边、1px 32% 的实/虚线内部分隔线以及纸纹叠加营造。边框圆角只允许三档999px胶囊、50%版次徽章、0其余一切不存在 4px/8px/12px 的中间值。七、CJK / 国际内容预览注意事项preview.md 专门为中文等 CJK 文本给出了预览期三条要点CJK 字距保持 0Bricolage 显示元素使用的 -0.005em ~ -0.012em 负字距会把汉字挤在一起CJK 行应设letter-spacing: 0标题若显拥挤可用微正0.02em。放宽行高CJK 字形是全宽方块视觉重量大于拉丁字母正文行高需从 1.45–1.5 放宽到 1.55–1.65显示级放宽到 1.0–1.1。避免对 CJK 文本执行 uppercase 变换中文没有大小写text-transform: uppercase对汉字无效却会破坏任何混排行中本应大写的 Bricolage 部分。更完整的字体配对策略在 design.md 的 CJK 章节推荐用思源宋体 Noto Serif SC 一统全栈Strategy A——显示角色取 700 字重以匹配 Bricolage 800 的印刷重量正文角色取 400 字重斜体概念在中文中不存在改用宋体自身的温暖感替代。封面级大版次数字在中文中应使用「三」「五」「春」「秋」等汉字序数/季节字代替西方数字。预览卡提示Use the fulldesign.mdCJK section after selection for exact font pairings and script-specific adjustments.选定后请使用 design.md 完整的 CJK 章节获取精确字体配对与脚本级调整。八、Preview Rules预览页生成的硬性约束preview.md 用最后一节列出预览页生成的硬性规则这些规则与 SKILL.md 中的预览真实性规则NON-NEGOTIABLE一致是生成时必须逐条遵守的契约只构建一张标题页在固定舞台模型内生成恰好一张 1920×1080 的标题页。保持系统一致性保留调色板、字体角色、表面节奏与上述装饰词汇。使用用户的真实内容标题/副标题/语境必须来自用户不得复制演示内容。预览必须像真实首页渲染结果应是一张真实的第一页而不是模板选择卡。严禁流程性文本上屏不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或源文档标签。模板名与 slug 只出现在聊天消息中绝不写到幻灯片本体上。用户需求备注不上屏期望氛围、受众、内部用途等标注不得出现在页面上除非用户明确要求这些词进入 deck。可见 chrome 只用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实内容短语。不得读取template.html进行预览生成。不得读取其他模板的design.md。用户选定模板后先读完整设计文档再生成最终 slides。固定 16:9 舞台底座第 1 条中的固定舞台模型fixed-stage model是 frontend-slides 的全局非协商约束每页以 1920×1080 设计尺寸绘制整页通过transform: scale()等比缩放到浏览器视口允许 letterbox/pillarbox但绝不为手机重新排版内容。这一约束在 viewport-base.css 中体现为强制的 8 段基础样式——锁定html/body视口、.deck-viewport全窗容器、.deck-stage固定 1920×1080 画布、.slide绝对定位堆叠与.active/.visible可见性切换用visibility/opacity/pointer-events而非display:none、媒体元素限幅、打印分页与prefers-reduced-motion降级。若预览使用 deck-stage.js 这类舞台缩放器其_fit()方法即按Math.min(vw/designWidth, vh/designHeight)计算缩放系数noscale属性可让 PPTX 导出器在 DOM 捕获时看到未缩放的原始几何尺寸。Long Table 的 design.md 也明确声明源模板中一切vw、vh、clamp()值只作为设计比例翻译进 1920×1080 舞台坐标不作为最终 deck 的响应式重排规则。九、从预览到完整 deck一次典型调用流程把以上内容串起来一套完整的 Long Table 使用流程是风格发现Phase 2Agent 读取 selection-index.json凭元数据将long-table选入短名单随后读取本 preview.md按 Preview Rules 用用户的真实标题生成一张 1920×1080 预览页与安全预设、通配选项一起供用户对比。用户选定用户确定选择 Long Table 后Agent 读取 design.md将其作为设计配方保留字体、调色板、装饰词汇、间距节奏与组件语法并连同 viewport-base.css 的完整内容生成单文件 HTML。验证与交付按 SKILL.md Phase 3 要求在渲染截图中同时检查文本溢出与面板重叠scrollHeight检查不足以发现网格面板互相遮挡交付后可经 scripts/export-pdf.sh 导出为 PDF默认以 1920×1080 逐页截图合成--compact模式降至 1280×720 以缩小文件体积。十、关键边界与常见误区单墨色是身份不是约束加入第二个颜色藏青、绿、黄会直接击碎印刷节目单的语域。强调只能通过 Bricolage 放大、Fraunces 400→600 字重切换、斜体↔正体切换与不透明度100%→78%实现。描边永不填充卡片、胶囊、徽章、矩形标签全部是无填充描边词汇不存在墨色填充矩形。纸纹不可移除纯#FAF1E2平底没有网点会读成数字平面而非纸。浏览器高缩放时 radial-gradient 可能产生轻微压缩伪影但设计系统明确要求不要以性能优化为由移除它。离线与字体自托管Bricolage Grotesqueopsz12..96与 Frauncesopsz9..144通过 Google Fontslink加载离线渲染会回退到系统无衬线/Georgia丢失光学尺寸轴与字面个性。opsz轴对 480px 超大数字与 14px 页码两个极端的品质都至关重要。打印导出系统没有media print规则Long Table 是屏幕优先设计多页打印应依赖 deck-stage 的打印分页或 scripts/export-pdf.sh 的逐页截图方案。结语long-table 的 preview.md 看似只是三屏之内的迷你风格卡实则浓缩了一整套可执行的设计系统契约结构化选择元数据决定了它在 Phase 2 的匹配逻辑视觉快照与 Preview Ingredients 定义了单墨色调色板、双字体分工与 4px 网点纸纹Preview Rules 则划定了真实感预览页的生成红线。将它与 selection-index.json、design.md、viewport-base.css 串联理解即可在 frontend-slides 中完整复现这套温暖、亲密、社交友好又适合杂志传播的现代编辑风 deck——从一张真实首页开始到整副 1920×1080 印刷质感的 HTML 演示为止。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Biennale Yellow 设计系统实战指南用 frontend-slides 构建「纸墨黄」文学编辑体幻灯片Biennale Yellow 设计系统实战指南用 frontend slides 构建「纸墨黄」文学编辑体幻灯片 本文围绕 frontend slidesAI 技能AI 插件前端Notepad-- 保姆级上手指南安装、配置与排障Notepad 保姆级上手指南安装、配置与排障 30秒认识 Notepad Notepad 是一款国产跨平台Windows / Linux / macOSAI 技能AI 插件前端OpenMontage 实战用 visual-style.md 设计系统驱动 HTML 幻灯片HTML Slides Connector 全解析OpenMontage 实战用 visual style.md 设计系统驱动 HTML 幻灯片HTML Slides Connector 全解析 导读 人工智能AI Agent音视频媒体生成工作流自动化上一篇NocoBase client-v2 CodeScanner 全屏扫码器组件实战API、识别原理与移动端适配下一篇tsParticles HeatHaze 调色板完全指南安装配置、源码解析与自定义技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
