AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载Retro Windows 是 frontend-slides 技能所内置 Bold Template Pack 中 34 个大胆设计系统之一它以 Windows 95/98 桌面操作系统为整体隐喻让每一张幻灯片看起来都是运行在 1995 年 CRT 显示器上的一款软件窗口。本篇指南以模板包内的预览卡片 retro-windows/preview.md 为核心骨架展开其完整设计文档 retro-windows/design.md并结合技能工作流与舞台实现源码讲清楚三件事如何正确生成 Retro Windows 的标题幻灯片预览、这个模板的设计系统由哪些可复用的组件与令牌构成、以及如何按固定 1920×1080 舞台契约产出最终全套幻灯片。读完你可以直接在编码 Agent 会话中把任意用户题材套上这套刻意怀旧的 Win9x 外壳并跑通完整的渐进式披露流程。模板定位与选择元数据在 Bold Template Pack 的索引 selection-index.json 中Retro Windows 被登记为一个 slug 为retro-windows的候选模板索引条目与预览卡片 preview.md 里的Selection Metadata一节完全对应构成 Agent 筛选模板时的第一层判断依据。Slug 与一句话定位模板的 slug 是retro-windows官方 tagline 为Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia.Windows 95 界面风格灰色标题栏、MS Sans Serif、像素字体排版、满满的情怀。这一定位决定了模板的全部技术决策灰阶按钮面、蓝渐变标题栏、MS Sans Serif 系统字体栈以及像素字体的点缀用法。情绪、语气、正式度与密度元数据项值含义Moodnostalgic, retro, geeky, playful怀旧、复古、极客、俏皮Tonewinking, nostalgic, geeky, fun会心眨眼式、怀旧、极客、有趣Formalitylow低正式度——这套美学天然不适合严肃场合Densitymedium中等密度对比设计文档定义的高密度哲学幻灯片正文应饱满Schemelight浅色系——Win9x 的按钮面灰是亮色调基准适用与避免场景Best for适合任何理应刻意怀旧的内容——复古游戏、Y2K 美学的品牌、带 90 年代氛围的创作者作品集、科技史演讲、故意玩梗的幻灯片。凡是一个俏皮的复古梗就是全部卖点的场景Retro Windows 都是绝佳选择。Avoid for避免需要呈现现代、优雅或机构可信度的幻灯片——Win95 的界面质感永远会被读成穿戏服正式场合使用会削弱专业形象。视觉快照把整份幻灯片变成 1995 年的桌面预览卡片用一段Visual Snapshot完整描述了模板的视觉设定它是生成任何一张 Retro Windows 幻灯片包括预览页时都必须遵守的视觉纲领一种以 Windows 95/98 桌面操作系统美学渲染的演示系统。每一张幻灯片都是一个窗口——斜边金属边框、藏蓝渐变标题栏、MS Sans Serif 正文字体图表区域、分组框与面板都排列得像 1995 年的软件 UI。调色板采用原始 Win9x 系统色灰色按钮面、藏蓝标题栏、白色凹陷输入框并用复古强调色DOS 绿、砖红、芥末黄、青蓝保留给状态文本与图表数据。像素字体Press Start 2P与终端字体VT323仅在怀旧点缀处少量出现。整体效果一半是俏皮怀旧一半是实用仪表盘——一份读起来像运行在 CRT 显示器上的软件产品的幻灯片。在完整设计文档 design.md 中这一设定被提炼为一个贯穿始终的total conceit彻底化的概念设定每一张幻灯片都被构造成一个win-window——带斜边金属边框、右上角三个系统按钮_、[]、X的矩形窗口。构图逻辑是这张幻灯片就是运行在 1995 年桌面上的软件而内容是这款软件显示的数据。没有现代意义上的幻灯片标题只有按文件名风格书写的窗口标题README.DOC、DATAVIEW.CSV、METRICS.LOG。由此派生出两条硬性设计纪律也是最容易做错的地方窗口标题必须是大写文件名 扩展名例如PRESENTATION.EXE、AGENDA.TXT、EXPLORER.EXE禁止使用现代标题的大小写习惯。密度哲学是高。Win9x 的应用 UI 是出了名的紧凑——每个像素都有用途。一张只有居中标题和大量留白的幻灯片在 Retro Windows 系统里会读作坏了/没做完。正确的做法是让窗口体内同时容纳堆叠的面板、分组框、表格、图表、按钮条与状态栏脚注让每张幻灯片都像同时运行着多个区域的应用屏幕。渐进式披露preview.md 在 frontend-slides 工作流中的角色理解 preview.md必须先理解 Bold Template Pack 的渐进式披露设计。技能主文档 SKILL.md 在 Phase 2风格发现阶段明确要求先读 selection-index.json只依据元数据mood、tone、best_for、avoid_for、formality、density、scheme圈定候选对入围候选只读对应的preview.md用于生成标题页预览用户最终选定模板后才读取该模板的完整design.md生成最终幻灯片除非选中的 design.md 缺失关键实现细节否则不得读取或复制template.html也不得批量读取其他模板的 design.md。bold-template-pack/README.md 把这个契约说得更直接design.md是设计系统参考是配方而不是可复制的内容preview.md只是用于生成三个标题页选项的轻量样式卡。而 SKILL.md 规定的三选项预览混合是1 个来自STYLE_PRESETS.md的安全预设至少 1 个来自 Bold Template Pack 的大胆模板本卡片即服务于这个槽位1 个通配选项另一个大胆模板或自定义设计。因此Retro Windows 的 preview.md 承担的是一个非常具体的职能在不泄露完整设计系统的情况下指导 Agent 产出一张看起来真实、可对比的标题页。这也是为什么预览卡片通篇都在强调预览必须看起来像真实的第一页而不是模板选择卡。预览成分调色板、字体与签名动作Preview Ingredients一节给出了生成预览页时最低限度的视觉配方。与完整设计文档 design.md 的 colors/typography 块对照后可以还原出完整的令牌表。Win9x 系统调色板preview.md 中列出的核心色板8 色design.md 补充了完整的 14 色令牌与别名令牌十六进制角色bg-gray#C0C0C0表格表头、滚动条轨道、非激活导航点填充Gray Background 系统色bg-light#D4D0C8窗口/面板/分组框/按钮的基础金属色Win9x 3D Objects 系统色bg-dark#808080窗口外的桌面区域、非激活标题栏起点Inactive Title Bar 色white#FFFFFF凹陷面板内部、输入框、表格单元格、进度条井白色内容的信号色black#000000斜边边框最深阴影色、最强文本色text-dark#222222默认正文色比纯黑柔和避免与斜边阴影抢戏text-gray#555555次级文本、说明文字、状态提示blue-navy#000080主品牌色标题栏起点、图表柱、进度条填充、主标题、激活导航点、列表箭头blue-bright#0000A0标题栏渐变终点、第二种图表柱变体blue-light#1084D0第三种图表柱变体green-retro#008000DOS 绿仅用于 OK/成功/增长/READY/LIVE 徽标red-retro#800000砖红仅用于错误/警告文本yellow-retro#808000芥末黄仅用于中度风险标签与警告图表段cyan-retro#008080青蓝仅用于第三类图表段与次级状态点缀语义红线强调色绿/红/黄/青有固定语义——绿OK/在线/增长红警告/错误黄中度关注青第三类数据。它们是状态信号不是涂料禁止把绿色当装饰色、把红色用于非警告文本。图表配色优先级为先取藏蓝梯队blue-navy→blue-bright→blue-light类别分段才从状态色中取用。字体栈三款字体各有明确分工且后两款是点缀型角色字体角色使用场景MS Sans Serif / Segoe UI / Tahoma / Geneva / Verdana 栈系统正文几乎所有文本。fallback 链在任何操作系统都能落地macOS 落 Geneva/VerdanaWindows 落 Segoe UI/MS Sans SerifLinux 落无衬线兜底Press Start 2P8-bit 像素展示字启动屏标题、结束页送别语、超大号怀旧标题时刻。整份幻灯片只出现一到两次渲染为藏蓝色、居中VT323CRT 终端等宽字底部导航提示-- ARROW KEYS to navigate --与终端输出区域可选设计文档强调italic 不使用、装饰性下划线不使用强调手段只有字重400→700与颜色切换默认→藏蓝或默认→状态色。正文级排版一律使用固定整数像素字号12、13、14、16、18、22、30、32避免rem/em/clamp——亚像素渲染会立刻戳破 OS-UI 幻觉。五个签名动作preview.md 明列了模板的五个Signature move生成任何幻灯片都不可省略每张幻灯片都是一个win-window——斜边金属边框 藏蓝渐变标题栏 三个系统按钮_、[]、X。固定 3px 周期的 CRT 扫描线覆盖层crt-overlay以 3% 黑色不透明度盖在所有内容之上模拟 CRT 显示器磷光行。基于斜边的深度凸起panel-raised、btn-retro与凹陷panel-sunken、group-box——全系统禁止模糊阴影。字体栈为 MS Sans Serif / Segoe UI / Tahoma 兜底Press Start 2P 与 VT323 作怀旧点缀。状态色承载语义绿OK、红警告、黄中度、青第三类数据。中英文 / CJK 预览注意事项preview.md 的International / CJK Preview Note给出了预览阶段的 CJK 规则若预览使用中文或其他 CJK 文本CJK 字距保持 0、放宽行高、不对 CJK 段落做大写转换选定模板后的精确字体配对与脚本级调整则查阅 design.md 的完整 CJK 章节详见本文中英混排策略一节。设计系统核心从预览卡到完整配方预览页只是冰山一角真正支撑全套幻灯片生成的是 design.md 中的完整设计系统。这里提炼生成时最常查用的部分。窗口解剖Window Anatomy每个win-window垂直堆叠三个区域标题栏win-titlebar——4px×8px 内边距藏蓝→亮蓝水平渐变左侧为图标 lockup 大写文件名右侧为三按钮簇。窗口体win-body——20px 24px 24px 24px内边距承载幻灯片内容组合。可选状态脚注——窗口体底部一条panel-raised或panel-sunken横条携带元信息数据来源、最后更新、计数、状态徽标。同一张幻灯片可以并排堆叠多个窗口用于季度时间线或多屏对比多窗口时只有一个窗口保留激活态藏蓝标题栏其余使用灰色渐变标题栏win-titlebar-inactive。斜面深度语法Bevel Illusion全系统的深度都来自双色非对称边框 内嵌 box-shadow这是 1995 年 UI 的经典幻觉凸起态2px solid white上左2px solid black右下inset 1px 1px 0 white, inset -1px -1px 0 #404040。用于窗口、凸起面板、按钮、导航点。凹陷态2px solid #404040上左2px solid white右下。用于分组框、凹陷面板、输入框、进度条轨道、复选框、滚动条轨道。按钮按下态反转斜边方向不存在 hover 态该年代先于通用 hover 交互。硬性禁令不使用任何模糊box-shadow、drop-shadow滤镜或 rgba 阴影色调全系统border-radius: 0圆角为零边框永远不上色只有白色黑/深灰的双色斜边语法没有藏蓝边框、没有绿边框。核心组件清单组件样式要点crt-overlayrepeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0px, ..., transparent 3px)z-index 9999盖住一切pointer-events 关闭win-window斜边凸起矩形win-body内边距20px 24px 24px 24pxwin-titlebar藏蓝渐变、白字、14px 700、0.5px 字距btn-retro斜边凸起灰按钮6px 24px内边距14px MS Sans Serifgroup-box凹陷边框 左上缺口式标题group-box-title用父背景色遮住边框等效fieldsetlegendpanel-raised凸起灰面板工具条、按钮带、状态脚注panel-sunken凹陷白面板输入框、KPI、只读数据——白色内部内容是内容的信号progress-bar凹陷白井 纯藏蓝填充条无渐变无动画retro-list每行前缀藏蓝字符::before实现禁用 list-styleretro-check16px 凹陷白方块勾选态用字面小写x字符retro-table灰表头 白单元格 浅灰边框 极淡斑马纹#f0f0f014pxmarquee凹陷白井内滚动文本marquee 14s linear infinite纯 CSS 复刻win-icon18px 白底黑边框方块 单个藏蓝字母作为窗口角色助记符P/R/D/F/G/M/E/Ttree-itemExplorer 式树/−展开标记 /图标 每层 24px 缩进hr-retro/separator-vertical双线雕刻式分隔线nav-dot12px 斜边方块导航点激活态填充藏蓝 4px 白色中心方块scrollbar16px 宽的 webkit 自定义滚动条斜边凸起灰色滑块类型刻度表来自 design.md 的typography块design.md令牌字号字重用途text-xl32px700窗口体内主标题metric-xl30px700KPI 卡片中的主指标数字text-lg22px700窗口内章节标题/副标题标题默认规格text-md18px400标准正文段body16px400默认工作正文text-sm14px400说明文字、列表项、按钮、表格单元格text-xs12px400小字、状态提示、页码title-bar14px700窗口标题文件名恒为大写、白色group-box-title13px700缺口式组框标题pixel-display20–24px400Press Start 2P 启动屏/结束页标题terminal22px400VT323 终端文本/marqueenav-hint16px400VT323 底部键盘提示主标题默认取text-lg22px藏蓝 700——藏蓝是应用标题的声音黑色标题会被读成时代错误。KPI 卡片模式为组框标题 30px 藏蓝指标 绿色增量行▲ 18.3% 12px 灰色上下文行。布局与持久化装饰窗口max-width: 1200px、max-height: calc(100vh - 68px)保证桌面灰边始终可见。幻灯片外内边距24px 32px 44px 32px底部 44px 为常驻导航装饰让位。三件常驻装饰底部居中斜边导航点、右下凹陷页码芯片N / TOTAL12px、左下 VT323 导航提示-- ARROW KEYS to navigate --。图表使用 CDN 加载的 Chart.js4.4.7颜色直接映射系统令牌坐标轴标签用 11–12px MS Sans Seriftext-dark网格线 1pxbg-gray在幻灯片激活时懒渲染。中英混排策略CJK 与国际化内容Retro Windows 是系统字体型模板design.md 的中文配对建议是所有拉丁系统角色统一搭配单一 CJK 家族思源黑体 Noto Sans SC——因为 Win9x 应用的简体中文本地化本就只用一个系统 CJK 字体MS YaHei / SimSun多字体混搭反而破坏软件 UI的语域。link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSansSC:wght400;500;700displayswap relstylesheetfont-family: MS Sans Serif, Segoe UI, Tahoma, Geneva, Verdana, Noto Sans SC, sans-serif;通用 CJK 调整正文行高 1.75–1.85、展示行高 1.15–1.25CJK 字距恒为 0不对 CJK 做大写转换使用全角标点展示标题不加句号盘古之白使用 Claude而非使用Claude一句一种字体。针对本模板的 CJK 特别注意事项也是 preview.md 预览阶段规则的延伸窗口标题是翻译难题METRICS.LOG没有地道中文对应。方案一保留拉丁文件名METRICS.LOG、AGENDA.TXT方案二用中文描述词 拉丁扩展名季度指标.LOG、议程.TXT。前者更贴近 Win9x 年代后者对中文观众更易读。标题栏出现 CJK 时title-bar的 0.5px 字距必须归零。状态徽标READY/LIVE/OK/WARNING可直接翻译为短 CJK 词就绪/在线/通过/警告用 700 字重 状态色语义照常传递。组框缺口标题在中文下同样成立如客户数据因为缺口遮罩依赖背景色而非字形度量。CRT 扫描线层与字形无关对中文同样有效。已知缺口Press Start 2P 与 VT323 本质是拉丁专用字体8-bit 像素与 CRT 终端是对需要专门位图字体的时代的呼应现代 Web 没有等价物。需要中文像素展示时刻时诚实的做法是用大号 Noto Sans SC 并放弃像素字特征不要用其他像素风格中文字体替代会读成时代错误。把这两款字体留给拉丁时刻启动屏LOADING...、页脚ARROW KEYS to navigateCJK 幻灯片全程使用 Noto Sans SC。预览规则让预览成为真实的首页preview.md 的Preview Rules是全篇最可操作的部分共 9 条生成标题页预览时必须逐条遵守只构建一张 1920×1080 的标题页基于固定舞台模型fixed-stage。保留上文描述的调色板、类型角色、表面节奏与装饰词汇。使用用户的真实标题/副标题/上下文不复制演示幻灯片内容。渲染结果必须像真实的第一页幻灯片而不是模板选择卡。绝不在幻灯片上放置内部工作流文本preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、来源文档标签一律禁止。绝不在幻灯片上放置模板名或 slug只允许在对话消息中提及。绝不在幻灯片上放置用户需求备注想要的氛围、受众、内部用途标签除非用户明确要求这些词出现在幻灯片中。可见的界面元素只用真实内容幻灯片标题、真实章节名、日期、作者、公司、页码或来自用户材料的真实短语。预览生成阶段不得读取template.html不得读取其他模板的design.md用户选定模板后生成最终幻灯片前再读取完整的 design.md。这 9 条规则与技能级规则完全对齐——SKILL.md 的 Preview authenticity rules (NON-NEGOTIABLE) 在技能层面重申了同样的内容说明预览即真实首页是整个 frontend-slides 的不可妥协原则而非本模板独有。固定 1920×1080 舞台源码级验证preview.md 和 design.md 都要求最终成品遵循Frontend Slides Fixed-Stage Policy以固定 1920×1080 舞台为画布整体等比缩放到浏览器视口。这一契约在源码中可以得到三重印证。deck-stage.js 的缩放实现模板包自带的 deck-stage.js 实现了deck-stageWeb Component其核心常量在 deck-stage.jsconst DESIGN_W_DEFAULT 1920; const DESIGN_H_DEFAULT 1080;缩放逻辑在_fit()deck-stage.jsconst vw window.innerWidth; const vh window.innerHeight; const s Math.min(vw / this.designWidth, vh / this.designHeight); this._canvas.style.transform scale(${s});即整块 1920×1080 画布用Math.min取最小缩放比等比缩放、允许信箱/黑边绝不重排内容。它还内置了键盘导航←/→、PgUp/PgDn、Space、Home/End、数字键、R 重置、触摸三分区翻页、media print每页一屏的 PDF 输出以及非激活幻灯片用visibility/opacity隐藏而非卸载的状态保留策略。SKILL.md 的不可协商规则SKILL.md 把固定舞台列为 Fixed 16:9 Stage (NON-NEGOTIABLE)并在 Fixed Stage Rules 中进一步要求每张幻灯片在 1920×1080 设计尺寸下使用固定内部度量不得用响应式断点重排移动端内容幻灯片可见性必须通过.active/.visible配合visibility、opacity、pointer-events控制来自 viewport-base.css并须完整包含进每个成品 HTML不得使用display: none切换否则.slide-content { display: flex }这类后置布局类会覆盖它导致全部幻灯片同时可见clamp()只用于舞台之外的 UI 或小尺寸后备预览必须包含prefers-reduced-motion支持。bold-template-pack/README.md 的实现契约还要求成品为单个自包含 HTML 文件若源模板原先是视口流式的design.md 中确实保留了100vw × 100vh、max-width: 1200px等历史行为要把这些值当作设计比例翻译进 1920×1080 舞台坐标而不是当作最终成品的实时响应式规则。生成后验证SKILL.md 特别警告只做scrollHeight溢出检查是不够的因为网格面板可能视觉上互相遮挡。生成后必须在浏览器截图里同时验证文本溢出与面板重叠并抽查 1280×720 视口与一个手机视口下的截图。生成全套幻灯片的工作流与迭代指南选定 Retro Windows 后完整工作流如下读取 design.md将其视为设计配方而非待复制的文本。保留其字体、调色板、装饰词汇、间距节奏与组件语法但不复制演示幻灯片内容。将任何视口流式值翻译为 1920×1080 固定舞台坐标产出单个自包含 HTML 文件。用 viewport-base.css 完整内容 html-template.md 规定的 HTML 架构与 animation-patterns.md 的动效参考组织代码。截图验证文本溢出与面板重叠。design.md 的迭代指南给出了逐项生成的新组件规格可当作速查表新幻灯片 →win-window 藏蓝标题栏win-icon单字母 大写文件名 三按钮簇新内容区 →group-box凹陷缺口标题、panel-raised工具条/仪表盘或panel-sunken白色内容井新主标题 →text-lg22px 藏蓝 700启动屏/英雄标题才用text-xl32px 或 Press Start 2P 20–24px新指标卡 →group-boxmetric-xl藏蓝 700 绿色增量 12px 灰色上下文新图表 → Chart.js藏蓝梯队作主数据、状态色作类别段画布必须包在panel-raised里新列表/复选框/树 →retro-list箭头/retro-check字面x/tree-item 图标新按钮 →btn-retro成簇出现OK/Cancel/Help 或 Export/Print新状态徽标 → 状态色 700 字重永不装饰化状态脚注 →panel-raised横条用•分隔 3–4 个数据点数据来源、最后更新、计数、分类每张幻灯片必须视觉饱满——多面板堆叠 底部状态脚注 按钮条/导航装饰。已知缺口与使用限制design.md 末尾列出的 Known Gaps 是生成与演示时必须知情的内容Press Start 2P 与 VT323 从 Google Fonts CDN 加载可选正文栈MS Sans Serif 等系统字体无任何外部依赖字体加载失败也不会破坏整体美学。Chart.js 4.4.7 从 CDN 加载失败时幻灯片仍能渲染但图表区为空。CRT 扫描线层在真实投影时可能读作噪点而非怀旧质感投影演示前建议考虑关闭。斜边幻觉依赖合适缩放比——在极端缩放或高 DPI 且浏览器不做亚像素渲染时1–2px 宽的斜边可能变成实线或消失。无 hover 态是设计使然但现代观众可能觉得鼠标交互没反应。、x、、是字符型标记渲染效果随运行时字体度量而定。marquee 动画持续运行不可暂停会被部分无障碍审计标记为prefers-reduced-motion违规CRT 扫描线层同样应考虑适配prefers-reduced-motion或在无障碍要求高的场合降级。结语Retro Windows 是一个把1995 年软件 UI演绎到组件级的完整设计系统从win-window窗口隐喻、斜边深度语法、Win9x 系统调色板到 MS Sans Serif Press Start 2P VT323 的三字体分工再到 CRT 扫描线、缺口式组框、箭头列表与x字符复选框这些字符级细节。在 frontend-slides 中它的正确打开方式是渐进式披露先用 preview.md 按九条预览规则生成一张真实标题页供用户对比选定后再读 design.md 展开全套幻灯片最后通过 deck-stage.js 与 viewport-base.css 的固定舞台约束交付 1920×1080 的单个自包含 HTML。只要守住每一页都是软件窗口、每个表面都有斜边、每种状态色都有语义、绝不出现现代圆角与模糊阴影这几条底线你就能用任何用户题材做出那份一半俏皮怀旧、一半实用仪表盘的 CRT 时代幻灯片。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐LMCache Non-KV Caching 深度解析HiddenStateStore 隐藏状态缓存与 Encoder Cache 编码器缓存LMCache Non KV Caching 深度解析HiddenStateStore 隐藏状态缓存与 Encoder Cache 编码器缓存 导读KV CAI 技能AI 插件前端frontend-slides 的 Grove 模板封面预览完全指南从设计系统到 1920×1080 首屏预览的实践frontend slides 的 Grove 模板封面预览完全指南从设计系统到 1920×1080 首屏预览的实践 在 frontend slides 技能AI 技能AI 插件前端frontend-slides Coral 模板实战从 preview.md 封面预览到 Bebas Neue 杂志海报设计系统frontend slides Coral 模板实战从 preview.md 封面预览到 Bebas Neue 杂志海报设计系统 导读本文以 frontenAI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考