AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载8-Bit Orbit 是frontend-slides开源仓库中 Bold Template Pack 提供的复古未来主义像素艺术演示系统融合 16-bit 街机怀旧与编辑部式的秩序感。本文以 8-Bit Orbit 完整设计文档 为主体结合 deck-stage.js、viewport-base.css 等仓库源码系统讲解其 4px 像素单元、三字体角色栈、霓虹深海军配色、硬边缘堆叠阴影与 CRT 氛围覆盖层的完整规范以及如何在frontend-slides强制要求的 1920×1080 固定舞台模型下还原这套「看起来刚刚开机」的街机美学。读完本文你将掌握从设计 Token 到最终 HTML 舞台的完整落地路径包括中文CJK内容适配策略。1. 系统定位像素美术的「开机感」8-Bit Orbit 的核心前提是4px 像素单元每一个阴影偏移、每一条边框、每一个角括号、每一个标签高度都必须是 4px 的整数倍。布局如同在一台老式 CRT 上栅格化后拖进 HTML而扫描线、噪点、暗角辉光和动画星空等大气覆盖层在所有表面上持续强化这一错觉。设计文档给这套系统下的定义是「介于街机框体与 Tron 时代会议室之间」其关键特征可归纳为三字体栈Tektur显示、Chakra Petch正文、Space MonoHUD/标签永不替换、永不越界混用深海军底色#0A0E27/#0F1B3D与彩色网格表面粉、青、薰衣草交替二者均承载 40px 蚀刻网格三只霓虹色青、粉、黄仅保留给显示层、数据、分隔线和标签填充永不作正文文字全部度量对齐 4px 像素单元边框 2–4px、阴影偏移 4px / 8px、角括号 24×24 且 4px 描边堆叠硬边缘偏移阴影是系统唯一的深度语言——永不模糊文字阴影除「黄→海军」级联外不做着色每一页都携带 z-index 49–51 的扫描线 噪点 CRT 暗角三件套L 形角括号取代圆角框定区域、卡片与数据瓷片等宽标签药丸label-pill是所有区域的通用眉标——海军底、霓虹字、0.2em 字距、全大写动画星野与悬浮像素方块铺满暗色表面——是氛围本身而非装饰。密度哲学中等密度、氛围满载。当表面干净且无伴随时系统会「破碎」——没有扫描线、噪点、暗角、粒子或彩色网格衬底字体会退化成普通网页排版。因此永远叠加氛围层而在内容区域内则要留足呼吸空间卡片 24–32px 间距、数据瓷片重内边距、让 Hero 文字主导。典型一页 一个显示层时刻 一小撮支撑元素徽章、标签、图表或小网格全部坐在完全装饰过的氛围背景上。2. Frontend Slides 固定舞台强制策略设计文档开篇的「Frontend Slides Fixed-Stage Policy」具有最高优先级高于文档后面任何「响应式」描述最终成片必须是固定的 1920×1080 舞台整体均匀缩放到浏览器视口在任何屏幕包括手机上都保持 16:9 画布可以信箱化letterbox或立柱化pillarbox但不得为移动端重排页面内容即便源模板原本用100vw、100vh、vw、vh、clamp()这类视口流体 CSS 实现也只把那些值当作设计比例翻译进 1920×1080 舞台坐标不能作为生成品中的实时响应规则生成时应使用 deck-stage.js 或等效的行内舞台缩放器每页在 1920×1080 渲染用一个 transform缩放整个舞台并对文字溢出和面板重叠做截图验证。这条策略在仓库多处得到印证frontend-slides技能规则SKILL.md明确「Fixed 16:9 StageNON-NEGOTIABLE」bold-template-pack/README.md 要求生成时包含 viewport-base.css 全文、把vw/vh/clamp()视为设计比例翻译为固定坐标bold-template-pack/selection-index.json 的frontend_slides_policy也记录了canvas_width: 1920、canvas_height: 1080、scale-stage-to-viewport。实现层面deck-stage.js内置了_fit()计算Math.min(vw / designWidth, vh / designHeight)作为缩放因子以transform: scale(s)套在 1920×1080 画布上noscale属性则让 PPTX 导出器捕获未缩放的真实几何。viewport-base.css提供.deck-viewport、.deck-stage1920×1080、.slide1920×1080、visibility/opacity/pointer-events控制显隐、media print每页一页、prefers-reduced-motion支持。这些构成 8-Bit Orbit 主题在frontend-slides中落地的底座。3. 色彩系统深海军为地三只霓虹为灯3.1 调色板Token色值职责Dark Voiddark-void#0A0E27最深的底色用于body与暗色网格表面基座在 CRT 暗角下读作带蓝偏的黑Deep Navydeep-navy#0F1B3D结构色——所有阴影堆栈、标签填充、暗色卡片、霓虹面上的按钮文字、图表条文字比 Void 略暖Neon Cyanneon-cyan#5EDCF4系统主辉光暗面标题、主按钮填充、统计数字、主图表条、时间线节点、导航点、角括号、暗面网格线7% 透明度Neon Pinkneon-pink#F0A6CA暖色强调彩色表面底色40px 海军上粉网格、次按钮填充、次级图表条、像素头像嘴部、第三级角括号Neon Yellowneon-yellow#F4D03F高调警示色按钮与精选卡的阴影晕、活动时间线节点填充、Hero 徽章、标签药丸文字变体、引语线、Tektur 文字阴影第一层Soft Lavendersoft-lavender#E2D5F2平静粉彩表面需要从霓虹-海军强度中喘口气的页面底色同样承载蚀刻海军网格Whitewhite#FFFFFF仅用于暗面/霓虹面上的文字颜色永不作幻灯片背景3.2 默认值默认表面背景dark-void 40px 青色网格bg-grid顶部永远叠加扫描线 噪点 CRT 辉光。暗面默认标题色neon-cyanHero 级文字配pixel-text-shadow-small或pixel-text-shadow。彩色网格面粉/青/薰衣草默认标题色deep-navy——霓虹文字在霓虹底上会失去可读性。暗面正文默认色rgba(255, 255, 255, 0.7)——软白而非纯白。彩色网格面正文默认色rgba(15, 27, 61, 0.75)——软海军。默认标签药丸deep-navy底 neon-yellow字彩色网格面上文字可换青或粉只要与海军底保持对比。默认强调色标注、统计数字neon-cyan。默认图表配色顺序青 → 粉 → 黄。默认角括号颜色neon-cyan黄、粉变体用于主题强调。需要页面更柔和温暖时把彩色网格从「青上海军」默认换成「海军上粉」「海军上青」或「海军上薰衣草」——结构关系反转网格线变成低透明度海军但排版规则不变。4. 字体系统Tektur / Chakra Petch / Space Mono 三声部4.1 角色分工Tektur显示脸——宽体、半几何的粗犷无衬线带微妙像素栅格切角。用于所有 Hero 标题、大标题、统计数字、引号标记与大数字。Tektur 的厚实性格是「街机原生感」的来源换成 Inter 或 Space Grotesk 会击穿整套美学。Chakra Petch正文字——人文主义无衬线带轻微几何/方形特征在 14–22px 小字号下依然干净且性格足以与 Tektur 同框而不消失。用于段落、Hero 标语、引语正文及任何较长散文。Space MonoHUD 脸——等宽字体专用于标签、徽章、图表数值/坐标轴、页码、日期片以及任何「系统读数」感的元素。等宽 宽字距 大写的组合就是这套系统的「界面」嗓音。角色禁令绝不用 Tektur 排正文绝不用 Chakra Petch 做界面镀铬绝不用 Space Mono 排标题。三声部分离就是排版结构本身。4.2 字号刻度表Token尺寸clamp字族字重用途pixel-hero48–128pxTektur900封面/起始显示标题——永远带双层文字阴影display32–64pxTektur700大型章节开篇headline24–45pxTektur700主要章节标题subhead17.6–24pxTektur700区域级副标题或卡片标题stat-number32–56pxTektur900数据瓷片数字——配小文字阴影body14.4–18.4pxChakra Petch400段落正文hero-tagline14.4–19.2pxChakra Petch400Hero 副标题/导语段quote-body17.6–25.6pxChakra Petch500引语文字label-pill12pxSpace Mono700海军标签药丸内部文字label-eyebrow13.6pxSpace Mono400标题上方独立大写眉标字距比药丸更宽badge11.2pxSpace Mono400仅描边 Hero 徽章文字chart-value12pxSpace Mono700图表条数值数字chart-label11.2pxSpace Mono400图表坐标轴或分类标签date-chip11.2pxSpace Mono400时间线事件日期标记counter12.8pxSpace Mono400常驻页码NN / NN4.3 默认与签名处理拿不准选哪个显示 Token 时默认用headline——它是章节级主力pixel-hero只留给封面与 CTA 时刻。每个 pixel-hero 元素必须带堆叠文字阴影青字上4px 4px 0 neon-yellow, 8px 8px 0 deep-navy缺了双层级联的 pixel-hero 读起来像未处理的普通显示字会击穿街机嗓音。每个统计数字必须带小文字阴影青字上3px 3px 0 deep-navy。每个 Space Mono 元素都大写 宽字距图表标签最小 0.05em药丸和徽章 0.08–0.2em独立眉标 0.3em。句首大写形式的 Mono 在这套系统中不存在。每个 Tektur 显示元素保持原生字距或略正Hero 级 0.04em负字距会把宽体 Tektur 压扁成不像同一个字体。每个 Chakra Petch 正文块 line-height ≥ 1.6——该字面较密正文行高收紧会糊成不可读。每个标签药丸固定 Space Mono 12px / 0.2em 字距无例外。每个图表数值/坐标轴标签用 Space Mono——数字镀铬永远是等宽不是 Tektur 或 Chakra Petch。排版原则音色对比是「厚显示 ↔ 人文正文 ↔ 宽字距等宽镀铬」。任何一声部换成别的字体系统都会坍缩成普通深色模式审美。显示层与正文层从不使用斜体唯一的斜体来自像素装饰元素上隐含的轻微倾斜。Tektur 永远「种在地上」——左对齐、宽松行高正文级运行永不居中居中只允许在 Hero 与 CTA 标题上Chakra Petch 永远「冷静」——默认左对齐、无全大写、无字距。5. 布局体系画布、像素单元与常驻镀铬5.1 画布系统源模板每页目标为100vw × 100vh。页面在slides-container内纵向堆叠用transform: translateY(...)导航同一时刻仅一页占据视口转场 800ms、缓动cubic-bezier(0.22, 1, 0.36, 1)。默认页内边距3vh 4vw内部slide-content最大宽max-width: 1200px并居中宽屏上内容保持编辑部列宽彩色背景铺满视口。注意这些vw/vh/clamp()值在frontend-slides生成时必须翻译为 1920×1080 舞台坐标即把 3vh ≈ 32px、4vw ≈ 77px、1200px 保留等比例换算不能当作活响应规则。5.2 像素单元纪律所有度量对齐 4px 网格边框 2px 或 4px阴影偏移 4px 或 8px角括号 24×24 4px 描边背景网格 40px 10 × 像素单元卡片内边距通常落在 8 的倍数16、24、32、48。正是这套纪律让系统读起来「栅格化」而非「矢量」。5.3 每页常驻镀铬导航点轨道垂直堆叠的 12×12 青色描边方块固定right: 24px垂直居中激活态内侧 8×8 填充青。页码Space Mono01 / 10格式固定bottom: 24px水平居中深海军半透明药丸底。导航提示USE KEYS ↑ ↓Space Mono 11px、50% 透明度固定bottom: 24px right: 24px。全页光标为crosshair——额外的街机信号。5.4 大气覆盖层堆叠z 序表面背景——bg-grid青上海军或彩色网格变体噪点层 z-index 49opacity 0.035扫描线 z-index 50multiply 混合CRT 暗角辉光 z-index 51仅暗面可选星野/像素粒子 z-index 1表面内部.slide-contentz-index 10位于大气层之上。这套覆盖层堆叠就是系统身份本身。不带它渲染的一页看起来就是个线框图。实现细节可在 deck-stage.js 看到导航/页码/缩放是舞台层职责而扫描线等覆盖层则属于每页幻灯片内部 CSS。6. 深度与层级硬边缘堆叠阴影系统只用堆叠、多步、硬边缘偏移阴影4px 像素单元三种模式三步海军 L 形pixel-l-shape——4px 0、0 4px、4px 4px三段海军偏移、零模糊。用于图表条与小尺寸浮起镀铬暗示单层跌落。六步按钮级联pixel-stack-cyan-yellow/pixel-stack-pink-cyan——先三步海军 4px 步进再三步彩色晕 8px 步进形成双层像素斜切效果。只用于pixel-button/* pixel-stack-cyan-yellow */ 4px 0 0 0 deep-navy, 0 4px 0 0 deep-navy, 4px 4px 0 0 deep-navy, 8px 4px 0 0 neon-yellow, 4px 8px 0 0 neon-yellow, 8px 8px 0 0 neon-yellow双层文字阴影pixel-text-shadow/pixel-text-shadow-small——黄层 4/4 再海军层 8/8统计数字级仅海军 3/3。所有阴影零模糊、硬边缘、锁定像素单元。模糊投影在系统中不存在。6.1 卡片阴影card-offset6px 6px 0 rgba(15, 27, 61, 0.15)——浅面非精选级卡片的软海军偏移card-featured8px 8px 0 neon-yellow——精选级卡片的霓虹黄偏移配-12pxtranslateY 抬升。6.2 角括号即深度L 形角括号取代区域与卡片上的传统边框处理。两枚对角括号暗示一个框架却不闭合它——眼睛会补全缺失的边。在统计块与特性卡上括号以top: -2px / left: -2px和bottom: -2px / right: -2px内嵌轻微突破单元边缘强化像素斜切感。6.3 大气深度扫描线 噪点 CRT 暗角堆叠为每个表面提供环境深度无需给个别元素加阴影。动画星野与悬浮粒子在内容背后叠加额外空间线索。这些都不是装饰性插件而是系统深度感知的核心。7. 形状与处理零圆角、方形像素圆角实际上为零。全系统唯一的圆来自 SVG 环形图几何。圆角按钮、圆角卡片、圆角药丸会立刻击穿像素美学。像素脸头像区使用方形眼睛与矩形嘴——解剖学由像素而非曲线构成。7.1 边框权重2px solid——特性卡外框、Hero 徽章、导航点、统计块框、图表条内边3px stroke——SVG 图表坐标轴海军4px solid——角括号、时间线节点边框、引语线、按钮内像素斜切。边框永远实线、永远海军或霓虹唯一的例外是时间线轨道timeline-rail故意用 16px 开 / 8px 关的重复线性渐变模拟「像素虚线」。7.2 装饰元素清单元素规格用途像素角括号24×24、4px 描边、两枚向外 L左上 右下默认青有黄/粉变体系统最标志性的非排版标记标签药丸海军矩形 霓虹黄 Space Mono 12px/0.2em变体换文字色通用章节眉标Hero 徽章2px 黄色描边 黄 Space Mono 文字Hero 标题下的特性标签簇统计块青色玻璃瓷片8% 青填充、20% 青边框 对角青括号大数字 Space Mono 粉标签数据展示特性卡磨砂白卡15% 白填充 blur 对角海军括号彩色网格面像素按钮青矩形 六步堆叠阴影悬停 2/2 平移、阴影坍缩为四步模拟按键手感引语线60×4 黄矩形 4×4 海军偏移阴影引语正文下方分隔时间线节点24×24 青方块 4px 海军边框坐落在海军虚线轨道上激活态填充变黄时间线日期片2px 内边距海军药丸 青 Space Mono 文字时间线事件标记像素脸120×120 方形「五官」青眼粉嘴绝对定位 div 组吉祥物兼签名装饰模块层级卡白矩形 6px 海军偏移阴影精选级换深海军填充、8px 黄阴影 -12px抬升特性用青::before 伪元素取代圆点套餐对比像素风景CTA 类表面底部一排可变高度海军山opacity 0.3源自硬编码高度数组[30, 50, 70, ...]街机地平线8. Dos 与 Donts8.1 该做的Do每页都叠加扫描线 噪点 CRT 暗角三件套——氛围就是设计系统没有它的表面只是线框。暗面默认标题用neon-cyan彩色网格面粉/青/薰衣草默认标题用deep-navy。每个 pixel-hero 用pixel-text-shadow每个统计数字用pixel-text-shadow-small——Tektur 显示字不带阴影就发平。所有度量对齐 4px 像素单元——边框宽、阴影偏移、内边距、角括号尺寸离格值破坏栅格化手感。显示用 Tektur、正文用 Chakra Petch、镀铬用 Space Mono严格互斥。眉标一律包进label-pill海军底、黄 Space Mono 文字、0.2em 字距、大写。海军底色每个区域至少配一枚霓虹辉光——文字、图表条、角括号或按钮阴影晕。纯海军没有霓虹点缀读作「死屏」。暗色 Hero 与 CTA 表面叠加动画星野和像素粒子漂浮——动效本身就是氛围的一部分。图表按青 → 粉 → 黄顺序排布系列数字/标签用 Space Mono。用对角 L 角括号框卡和数据瓷片而不是完整描边——隐含框架是系统的签名卡片处理。8.2 不该做的Dont不换字体。三声部缺一不可换成 Inter、Roboto 或 Space Grotesk 会整体坍缩。不圆任何角。像素美学依赖方形边border-radius 只留给 SVG 环形图几何。不模糊任何阴影。每枚阴影都是零模糊硬边缘0 4px 12px rgba(0,0,0,0.1)在这套系统里不存在。不在霓虹面上放霓虹文字。粉网格上的青标题会失去可读性——彩色底上一律转深海军。不用 Tektur 排句首大写正文不用 Chakra Petch 做镀铬/标签。每张脸只有一个角色。不引入第四只霓虹。调色板 青 粉 黄 薰衣草粉彩加绿加橙会破坏精挑细选过的霓虹三件套。任何一页即使图表密集或表格密集都不省略大气覆盖层——覆盖层不可谈判。不上大写的 Chakra Petch 正文。正文永远句首大写大写只属于 Space Mono 和 Tektur 显示层。不丢海军标签药丸换纯文字眉标——药丸是系统最醒目的「小镀铬」。不给文字或镀铬上偏轴阴影。每枚阴影都按 4px 步进向右下——左向或上向偏移不存在。9. 响应式与演播行为源模板视角8-Bit Orbit 源模板本身是视口流体系统基于vw/vh尺寸与clamp()区间整副 deck 无硬断点。缩放规律Hero 文字 48→128px、统计数字 32→56px、正文 14.4→18.4px而 4px 像素单元、40px 网格、扫描线 4px 条纹与角括号尺寸固定不缩放——视口越大像素镀铬显得越细有意为之。三个组件级断点max-width1024px特性网格 4→2 列、双栏布局堆叠900px特性网格继续坍缩、hbar 图表标签列缩窄500px特性网格单列、统计网格堆叠。演示行为ArrowDown/ArrowRight/Space前进ArrowUp/ArrowLeft后退Home到首、End到末触屏垂直滑动以 50px 阈值进退滚轮以 800ms 防抖锁进退转场 800mscubic-bezier(0.22, 1, 0.36, 1)translateY。deck-stage.js的实现还补充了键盘数字键跳页、R键复位、slidechangeCustomEventdetail.index/previousIndex/total/slide/reason以及移动端左右三分区点按可作为这套演播行为的落地参考。动画触发图表条与统计计数器在进页时用setTimeout交错100–150ms/项动画离页时归零以便重进重播。prefers-reduced-motion查询会禁用转场与星野/粒子闪烁关键帧。打印源模板无media print屏幕优先打印只输出当前页静态导出靠逐页截图扫描线与噪点是 CSS 渲染而非资源可完整保留。而在frontend-slides生成物中viewport-base.css 与deck-stage.js都内置了打印规则page尺寸跟随设计尺寸、每页一张、无页边距用浏览器「打印→存为 PDF」即可产出干净的逐页 PDF。10. CJK 与国际化内容适配用该模板承载中文或其他 CJK内容时把拉丁字族栈换成等价中文搭配并应用通用 CJK 调整。推荐中文字体通过 CDN 加载无需安装。10.1 推荐中文字体搭配角色拉丁默认中文对应显示 / Hero / 统计数字Tektur 700–900思源黑体 Noto Sans SC 900正文 / Hero 标语 / 引语Chakra Petch 400–500思源黑体 Noto Sans SC 400HUD 标签 / 徽章 / 图表值 / 页码Space Mono 400–700大写 宽字距思源黑体 Noto Sans SC 500无 transform、无字距——见下方 Known CJK Gap10.2 混排策略策略 A——单一 CJK 字族自含拉丁字形所有文本元素设font-family: Noto Sans SC, sans-serif。思源黑体自带拉丁字形与汉字并列干净利落使用 Tektur 字体这类句子会以统一字面渲染而不是词中切换字体。系统通常跑三字族显示/正文/HUD坍缩为单一 CJK 字面是正确取舍——三个拉丁字族都没有可信的中文对应视觉层级靠字重900/700/500/400加签名阴影堆栈来维持。10.3 加载方式在模板head中加入link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNotoSansSC:wght400;500;700;900displayswap relstylesheet10.4 通用 CJK 调整行高比拉丁规格提高约 15–25%。正文 1.75–1.85拉丁 1.7–1.8显示层 1.15–1.25拉丁 1.05–1.15。CJK 字形是方形且视觉饱满纵向拥挤度高于拉丁。字距所有 CJK 运行段设 0。模板给 Tektur 显示层的 0.04em 和 Space Mono 标签的 0.1–0.3em 宽字距在方形 CJK 字形上会显得破碎——汉字天然等距。文本变换不对中文做uppercase——CJK 无大小写。系统里每个 Space Mono 标签都用了text-transform: uppercaseCJK 运行段必须移除。标点使用全角中文标点。「」。显示标题不加句号中文排版惯例是显示级大标题末尾不加句号。CJK 与拉丁之间的空格盘古之白在每个汉字与相邻拉丁字符/数字之间插入 ASCII 空格。写8 位赛博 / 1989 模式不写8位赛博/1989模式。一句一字面思源黑体以统一风格覆盖 CJK 与拉丁字形让混合句子由它通吃别让浏览器在句中回退到 Tektur 或 Space Mono 处理 ASCII 字符。10.5 美学备注系统的身份建立在三声部上CJK 版本无法保留三字面对比。因此要更用力地靠非排版签名元素堆叠文字阴影黄 4/4、海军 8/8在思源黑体 900 标题上依然成立是字面变普通时承接街机嗓音的主力。所有大气覆盖层扫描线、噪点、CRT 暗角、星野、网格壁纸必须保留——它们在 CJK 版本里承担的身份工作比拉丁原版更多。Space Mono 标签药丸海军底、霓虹黄字、0.2em 字距、大写翻译效果不佳CJK 字形不接受宽字距和大写变换。中文标签药丸改用思源黑体 500、0 字距、无变换字号略收10–11px 而非 12px以保持药丸紧凑剪影彩色药丸底 角括号框架负责辨识度。10.6 已知 CJK 缺口没有 CDN 可加载的中文像素字体。系统街机美学依赖 Tektur 的半像素粗壮字符Google Fonts 或主流 CDN 上没有既「像素美术」又可读的中文字面。思源黑体 900 有分量但完全丢失像素网格信号。大气覆盖层扫描线、噪点、暗角、星野与像素斜切阴影堆栈必须独自扛起街机嗓音。没有 CDN 中文等宽 HUD 字体。Space Mono 的「系统读数」嗓音依赖等宽节奏 大写 0.1–0.3em 字距——三者都无法迁移到 CJK。标签药丸失去等宽特征要靠海军底 霓虹字 角括号框架维持镀铬辨识度。11. 迭代指南制作新页的检查清单任何新页面先上完整大气覆盖层三件套暗面扫描线 噪点 CRT 辉光彩色面扫描线 噪点与 40px 蚀刻网格表面。别跳过覆盖层。任何新显示元素用 Tektur新正文元素用 Chakra Petch新标签、徽章、计数器、图表值用 Space Mono。永不过界。任何新标题暗面neon-cyan、彩色网格面deep-navy——配相应 Tektur 字重Hero 级加堆叠文字阴影。任何新眉标用label-pill——海军底、霓虹黄 Space Mono 12px / 0.2em / 大写。别用裸 h 标签替代。任何新卡片或区域用对角 L 角括号左上 右下代替完整外框。隐含框架是系统签名。任何新度量对齐 4px 像素单元边框 2–4px、阴影偏移 4px/8px、角括号 24px、网格 40px。离格值会别扭。任何新阴影硬边缘零模糊按钮用六步级联卡片用 6px 海军或 8px 黄文字用双层级联。任何新图表按青 → 粉 → 黄循环系列数值与坐标轴标签永远 Space Mono。表面要更暖更软就切粉/青/薰衣草蚀刻网格变体——但所有排版规则不变海军标题、软海军正文。动画元素星野、粒子、图表条增长、计数器滚动尊重prefers-reduced-motion。大气覆盖层扫描线、噪点、暗角不动画永远常驻。12. 已知缺口与使用边界字体依赖 Google FontsTektur、Chakra Petch、Space Mono 通过 preconnect link加载后备只有cursive/sans-serif/monospace。在离线或受限网络环境中字体失败后美学坍缩为系统默认失去性格。星野与像素粒子由行内 JS 生成固定数量的绝对定位 div 随机位置与动画延迟。关键帧在 CSS 里但元素仅在 JS 成功运行时才创建。图表系统硬编码条高、hbar 宽度、计数器目标存于data-*属性靠 slide-index 匹配触发setTimeout交错。无数据绑定层——加新图表需复制 HTML 模式并更新 JS 的 slide-index 匹配器。像素风景 JS 生成源自硬编码高度数组[30, 50, 70, ...]山宽60 (i % 3) * 20px。改风景需编辑 JS 数组。CRT 暗角为固定深海军径向渐变调整需改 CSS 渐变 stop无可符号化的暗角强度。全页crosshair光标嵌入场景中可能与文本选择预期冲突。无滚轮/触屏的键盘提示提示文字USE KEYS ↑ ↓未覆盖已接线的滚轮与触屏。页码固定NN / NN补零格式超过 99 页会版式移位。角括号固定 24×24 4px 描边、不随视口缩放超大/超小视口下比例可能失调。13. 仓库落地路径速查在frontend-slides中真正还原 8-Bit Orbit 时可沿以下文件串起完整证据链模板选择元数据与前台策略bold-template-pack/selection-index.jsonslug8-bit-orbitmood retro-tech/playful/cyberpunk/energeticscheme darkdensity mediumbest_for 游戏/Web3/独立开发工具/hackathon 演示avoid_for 机构金融披露、医疗、传统奢侈品预览卡仅用于标题页预览最终成片务必读完整设计文档bold-template-pack/templates/8-bit-orbit/preview.md完整设计规范本文主体bold-template-pack/templates/8-bit-orbit/design.md舞台缩放/导航/打印组件bold-template-pack/deck-stage.js_fit()的scale()逻辑、slidechange事件、noscale导出模式、media print一页一页规则强制基础样式生成物必须全文包含viewport-base.css1920×1080 固定画布、.slide显隐控制、打印与减弱动效技能生成规则SKILL.mdFixed 16:9 Stage 非协商条款、density 模式、预览真实性规则模板包使用合同bold-template-pack/README.mddesign.md 是风格配方而非可复制内容、生成物须为单文件 HTML本仓库不包含任何图片资源因此本文不配图实际成片时扫描线、噪点、星野等氛围元素均由 CSS/JS 渲染无需外部素材。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐Element 组件详解Result 结果页组件完整使用指南Vue 2.0 UI ToolkitElement 组件详解Result 结果页组件完整使用指南Vue 2.0 UI Toolkit Result 组件是 Element UI 中用于对用户AI 技能AI 插件前端Editorial Forest 设计系统解析在 frontend-slides 中打造企鹅经典风格的 1920×1080 固定舞台演示Editorial Forest 设计系统解析在 frontend slides 中打造企鹅经典风格的 1920×1080 固定舞台演示 导读 本文围绕 fAI 技能AI 插件前端Frontend Slides Signal 模板实战标题预览卡、设计系统与 1920×1080 固定舞台Frontend Slides Signal 模板实战标题预览卡、设计系统与 1920×1080 固定舞台 本篇指南围绕 Frontend Slides 技能AI 技能AI 插件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考