AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载本篇技术指南以 bold-template-pack/templates/cobalt-grid/design.md 为骨架系统讲解 frontend-slides 仓库中 Cobalt Grid 这一「双色 risograph 趋势报告」模板的完整设计体系从奶油纸面 电光钴蓝的严格双色规则、Newsreader / Hanken Grotesk / DM Mono 三字体协作、永久图表纸网格与像素故障列装饰到 1920×1080 固定舞台的生成规范与中文排版适配。读完本文你将掌握该模板的全部配色 Token、字号阶梯、构图语法与源码级实现细节可直接用于生成高完成度的编辑型幻灯片。设计定位与适用场景Cobalt Grid 在 selection-index.json 中的元数据将其定位为editorial / design-research / studious / modernist风格的模板tagline 是Electric cobalt serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules。它最适合营造安静严肃的设计 / 研究简报、艺术出版物、策展趋势报告的气质适用于工作室年报、agency 能力展示、设计研究出版物、建筑 / 艺术 / 学术类演示以及任何需要单一强调色 打印账本式沉稳感而非企业抛光感的 deck。反向适用边界同样明确需要温暖感、多色能量或休闲俏皮语气的 deck 应避免该模板——严格的钴蓝 奶油 网格调色板是刻意克制的。配套的 preview.md 也强调其 cultural reference 是 WIRED Japan、Shift 杂志与以双色 risograph奶油 一色钴蓝印刷的建筑趋势报告。固定舞台政策设计文档的最优先规则design.md 开篇即声明Frontend Slides Fixed-Stage Policy这是高于文档其余部分响应式描述的最高优先级约束当该设计系统被frontend-slides技能使用时最终 deck 必须生成为固定 1920×1080 舞台并整体等比缩放到浏览器视口deck 在任何屏幕包括手机上都保持 16:9 画布允许 letterbox 或 pillarbox绝不为移动端重排内容即便源模板原本使用100vw、100vh、vw、vh、clamp()等视口流式 CSS也一律将其视为设计比例翻译为 1920×1080 舞台坐标而不是保留为生成 deck 中的实时响应规则最终输出应使用 deck-stage.js 或等价的内联舞台缩放器每张幻灯片按 1920×1080 渲染用一次transform缩放整个舞台并在渲染截图中同时验证文本溢出与面板重叠。这一点与 frontend-slides 技能核心的 SKILL.md 完全一致Fixed 16:9 Stage (NON-NEGOTIABLE)。从 deck-stage.js 源码可以看到默认设计尺寸即为1920×1080其_fit()方法第 527-540 行用Math.min(vw / designWidth, vh / designHeight)计算统一缩放比且为 PPTX 导出保留noscale属性路径。而 viewport-base.css 则提供了生成 deck 必须整体包含的.deck-stage、.slide.active/visible与打印单页布局等基础样式其中幻灯片切换必须用visibilityopacitypointer-events不能用display: none。三根基纸、墨与永不关闭的网格Cobalt Grid 是一个双色趋势报告编辑系统建立在三个不可动摇的根基上暖奶油纸画布{colors.paper}#F0EBDE——所有幻灯片的统一背景电光钴蓝墨色{colors.ink}#1F2BE0——系统中唯一墨水颜色同时服务标题、正文、边框、页码、图表纸网格、像素故障装饰与 QR 补丁永久的图表纸网格——通过每个.stage上的::before伪元素渲染不可关闭。网格不是可选的装饰它存在于每张幻灯片背后使整套 deck 呈现出建筑描图纸或日式趋势报告的质感。{colors.grid}的取值是rgba(31, 43, 224, 0.10)即 10% 透明度钴蓝网格单元尺寸由backgroundSize设为clamp(28px, 2.2vw, 44px)正方形位于 z-index 1。颜色系统严格双色绝无第三色design.md 的colors段定义了六个颜色 Token其中四个实色、两个透明度变体Token值用途paper#F0EBDE画布底色QR 补丁的纸色填充使其在像素故障列上读作独立色块paper-2#E6E0CE略深的奶油色供细微区域区分极少使用ink#1F2BE0唯一墨水色所有标题、正文、边框、chrome、网格、装饰与 QR 均用它ink-soft#5560E5较浅的钴蓝供次要标记极少使用gridrgba(31,43,224,0.10)10% 钴蓝专用于图表纸网格与像素堆叠柱状图的off单元ink-faintrgba(31,43,224,0.18)18% 钴蓝专用于密集列表 / 表格 / 账本行之间的细分隔线色彩别名将rule映射到ink、bg映射到paper说明结构规则与背景都走同一双色来源。设计文档明确声明系统不存在通俗意义上的强调色加入红色标注、绿色统计或黄色高亮都会破坏 risograph 双色身份。需要强调时正确手段是放大字号、把 Hanken 换成 Newsreader、加 mono 增减箭头或用透明度变暗——而不是引入新颜色。所有默认值也围绕这一定律展开默认幻灯片表面为 paper默认标题 / 正文 / 标签 / mono / 结构边框颜色均为 ink1.5px solid密集列表内的行分隔线用 ink-faint1px solid图表开状态数据色为 ink、关状态为 grid。字体排印三字体对话与完整字号阶梯系统的排版身份由三种字体的分工对话构成没有任何第四种字体Newsreaderserifweight 400另有 300/400/500 的 italic 轴——承载所有 display 时刻、节标题、统计数字。层次靠字号而非字重400 是唯一正规用法600/700 不使用。Hanken Grotesksans400–700——承载所有正文、大写字标签、微文本。正文用 400标签用 600。DM Monomonospace400–500——承载所有 chrome 元素页码、mono 标签、坐标刻度、竖向堆叠标签、表格中的增减箭头。design.md 的typography段定义了完整的字号 Token 阶梯下表将其参数化呈现clamp(min, preferred, max)Token尺寸字族 / 字重用途vbig-numeralclamp(110px, min(11vw, 18vh), 240px)Newsreader 400最大数字展示——英雄统计图display-heroclamp(100px, min(11vw, 18vh), 200px)Newsreader 400封面 / 英雄展示标题display-closingclamp(72px, min(8.4vw, 14vh), 180px)Newsreader 400后记 / 收尾版式结论标题display-chapterclamp(56px, min(6vw, 10vh), 130px)Newsreader 400章节开篇标题display-manifestoclamp(56px, min(6.4vw, 11vh), 120px)Newsreader 400宣言展示display-quoteclamp(50px, min(5.6vw, 9vh), 110px)Newsreader 400引言正文headline-indexclamp(48px, min(5vw, 8.5vh), 100px)Newsreader 400索引 / 趋势列表节标题headlineclamp(46px, min(4.8vw, 8.2vh), 92px)Newsreader 400数据 / 表格 / 图表节标题ed-calloutclamp(28px, min(2.8vw, 4.6vh), 50px)Newsreader 400英雄标题下的编辑副题row-headlineclamp(26px, 2vw, 40px)Newsreader 400索引列表行内标题table-nameclamp(20px, 1.6vw, 28px)Newsreader 400账本表格行内名称单元body-ledeclamp(15px, 1vw, 18px)Hanken Grotesk 400章节标题下导语段body-statclamp(15px, 1vw, 17px)Hanken Grotesk 400统计数字旁描述段bodyclamp(14px, 0.95vw, 15px)Hanken Grotesk 400标准正文micro-strongclamp(13px, 1vw, 16px)Hanken Grotesk 600最大大写标签 / kickermicroclamp(12px, 0.9vw, 14px)Hanken Grotesk 600标准大写标签 / lab-tagmicro-smclamp(11px, 0.75vw, 12px)Hanken Grotesk 600最小大写标签 / 表头mono-tagclamp(13px, 0.9vw, 15px)DM Mono 400mono 目录标签、索引行 num-tagmono-tickclamp(12px, 0.85vw, 14px)DM Mono 400mono 图表刻度、竖向堆叠标签条目mono-chromeclamp(11px, 0.82vw, 13px)DM Mono 400mono 页码、导航提示、次要元信息文档还给出了明确的选型建议不确定时使用headline46–92px作为主节标题而不是display-chapter仅限章节开篇时刻。签名式处理非可选约束只要对应元素类型出现以下规则就是强制的每个 Newsreader 元素字重 400、颜色 ink每个 Hanken 标签 / kicker / lab-tag / micro 都是大写字重 600字距 ≥ 0.16em不加字距的 Hanken 大写读起来像未处理过的文本每个 DM Mono 元素颜色 ink字距 0.04–0.08em更紧的 mono 字距会读起来像代码而非编辑排版每个 display 元素都带负字距display-hero -0.008em、vbig-numeral -0.015em、chapter / closing / manifesto / quote -0.005em图表纸网格在每张幻灯片上永久存在.stage::before不可按页覆盖上下 hairline 框架每页必有.hairlines::before/after默认应用页码必须位于底部 hairline 上方留出清晰间距hairline 锚定bottom: clamp(20px, 2vh, 32px)页码锚定bottom: clamp(48px, 4.8vh, 76px)二者不得相撞。行高在顶部塌缩display-hero / vbig-numeral 0.92、display-chapter 1.0、body 1.5。紧凑 display 开阔 body 的对比正是趋势报告的节奏来源。布局系统画布、间距与四件式 chrome 框架画布与舞台结构画布为100vw × 100vh全视口、溢出隐藏。每个.slide绝对定位填满视口同一时刻只有一个携带.activeopacity 1、pointer-events auto切换为 280ms 透明度淡入。.stage包裹在.deck内部position: fixed; inset: 0提供奶油背景与永久的::before图表纸网格。该结构对应 frontend-slides 标准体系中的.deck-viewport .deck-stage .slide参见 viewport-base.css 与 html-template.md 中的SlidePresentation控制器。边距与间距阶梯Token值用途edgeclamp(36px, 3.6vw, 80px)标准幻灯片内容、页码、hairline 的边距edge-innerclamp(60px, 8vw, 160px)宣言式居中语句使用的更紧凑内边距pad-topclamp(76px, 8vh, 130px)index/data/table 框架顶部内边距位于顶部 hairline 之下pad-bottomclamp(100px, 10vh, 150px)框架底部内边距位于底部 hairline 之上gap-lgclamp(28px, 3vw, 56px)幻灯片内主要区域间的大间距gap-mdclamp(20px, 2.2vh, 36px)标准元素间距gap-smclamp(14px, 1.6vh, 24px)紧密间距chrome 栏内部、署名到引言的间距gap-xsclamp(10px, 1.2vh, 18px)竖向堆叠行距、最小元素间距通用 chrome 框架每张幻灯片自动携带四件套框架顶部 hairline——1.5px solid 钴蓝距顶部约 2.6vh左右按edge内收底部 hairline——1.5px solid 钴蓝距底部约 2vh同样按edge内收页码——DM Mono 钴蓝锚定右下距底部约 4.8vh位于底部 hairline 之上导航提示——DM Mono 钴蓝、40% 透明度锚定左下与页码同一垂直高度。框架由.hairlines、.pagenum、.nav-hint规则自动渲染每张新幻灯片自动继承无需逐页手动编写。在 index、data、table、chapter 版式上内部还有一个嵌套的.frame内容矩形绝对定位inset: {pad-top} {edge} {pad-bottom}充当真正的内容容器。构图模式在 chrome 框架内内容通常遵循以下构图动作描述性而非规定性topbar块左 Newsreader 标题 右 mono lab-tag下方 1.5px 钴蓝规则作为通用节标题模式像素故障列锚定内容区右缘后记页有时锚左缘QR 补丁作为小标点通常在右上角竖向堆叠 mono 标签列锚定某一边缘密集账本或索引等 flex 行以微弱的钴蓝分隔线隔开。深度与层次扁平 结构规则Cobalt Grid没有任何投影、抬升卡片、圆角面或渐变所有元素都处于单一平面。深度信号全部来自结构1.5px 钴蓝规则上下 hairline、topbar 规则、署名规则1px 微弱钴蓝分隔线索引列表、表格、账本内的行分隔图表纸网格10% 透明度钴蓝背景营造量测平面感像素故障装饰竖扫描线列增加视觉肌理但不产生 z 轴抬升QR 补丁块纸色填充 1.5px 纸色 outset 阴影使其在网格 故障背景下仍可辨读。其中 QR 补丁的 1.5px 纸色 outset 是全系统唯一一个类阴影效果其功能是反阴影——把网格推离 QR 马赛克以保证可读性而非制造抬升。系统没有 z 轴深度。形状与装饰语法零圆角与五个签名装饰边框权重1.5px solid ink主结构规则上下 hairline、topbar 底规则、表头行底边框、图表基线规则1px solid ink引言署名上规则、宣言署名顶边框1px solid ink-faint18%密集列表 / 表格 / 账本行分隔1px solid grid10%永久图表纸网格1.5px paper 色 box-shadowQR 补丁可读性 outset功能性非装饰性。系统零圆角每个形状都是严格矩形无圆形元素——这是编辑系统里罕见的刻意选择属于趋势报告身份的一部分。签名装饰元素像素故障列pixel-glitch——台阶式竖扫描线列以内联 SVG 渲染。每一阶是一个矩形内含均匀分布的钴蓝竖线奶油底上。台阶宽度随列下行递减或反之形成故障像素化效果。绝对定位锚定某边缘通常右侧z-index 3pointer-events 禁用纯装饰。尺寸范围从紧凑的 16vw × 全高次级装饰到 32vw × 全高签名封面装饰不透明度 0.6–1.0作背景时降低、作主装饰时全开。QR 补丁块QR-block——8×8 网格单元部分.on solid 钴蓝默认 paper构成类 QR 马赛克。位于纸色填充背景之上4px 内边距与 1.5px 纸色 outset典型尺寸 58–100px 见方。用作构图标点通常在右上角。竖向堆叠标签列——一列 DM Mono 标签writing-mode: vertical-rltext-orientation: mixed把拉丁文本顺时针旋转 90°。锚定右缘、垂直居中、均匀分布读作沿边缘堆叠的目录式元数据。像素堆叠柱状图pixel-stack bar chart——一行 8 根堆栈每根是flex column-reverse的小水平单元默认 10% 钴蓝关、.onsolid 钴蓝开单元数量表示数值。1.5px 钴蓝顶边框 mono 刻度标签位于柱体下方作为坐标轴。数据渲染为由网格单元构成的像素化柱体直接呼应像素故障装饰。账本表格ledger-row——密集行的 flex 列每行是 5 列网格76px 0.6fr 1.4fr 0.7fr 0.5frnum-tag / name / description / mood-tag / delta-tag以 1px 微弱钴蓝底边框分隔。表头行用 1.5px solid 钴蓝。delta 标签通过::before前缀↑delta-up、↓delta-down变暗 40%、—delta-flat变暗 40%。其他版式组件——index list2×3 等 flex 行网格每行 56px num-tag 列 Newsreader row-headline Hanken 正文的列1px 微弱钴蓝底边框manifesto居中 display-manifesto 声明内嵌斜体em正文含.roman非斜体强调下方 1px 钴蓝顶边框 左 Hanken who-tag 右 mono meta-tagquoteHanken kicker display-quote 引言下方 1px 钴蓝署名行右缘配紧凑像素故障列colophon右对齐收尾版式display-closing 大标题 kicker像素故障列锚左缘镜像封面页脚 3–4 列段落署名网格。Dos and Donts保持身份的十条纪律Do所有 Newsreader 用 400 字重 ink 色字重层级靠字号而非加粗所有标签 / kicker / micro 用 Hanken 600 大写 0.16em 字距 ink所有 chrome页码、mono 标签、刻度、竖向堆叠用 DM Mono、0.04–0.08em 字距、ink每张幻灯片保留永久图表纸网格网格就是系统本身每张幻灯片保留上下 1.5px 钴蓝 hairline页码与导航提示位于底部 hairline 之上声明式幻灯片封面、章节、引言、后记用像素故障列作为主装饰与 QR 补丁搭配作为离散图形锚点index / data / table 版式用topbar 1.5px 规则作为标准节标题处理密集列表 / 表格 / 账本行之间用 1px 微弱钴蓝分隔线图表一律渲染为网格单元像素堆叠钴蓝开 / 钴蓝 10% 关。Dont不引入第二种墨水色严格双色是 risograph 身份不把 Newsreader 标题做成 600/700不关闭或隐藏图表纸网格不抑制上下 hairline不圆任何角系统零圆形元素不加投影、抬升卡片或渐变填充深度是结构性的不是 z 轴的不使用不加 0.16em 字距的 Hanken 大写不把页码直接放在底部 hairline 上须保持bottom: clamp(48px, 4.8vh, 76px)的留白不渲染没有纸色填充 1.5px paper outset 的 QR 补丁不塞满宣言 / 引言 / 后记版式——它们刻意留空让网格呼吸。密度哲学由版式类型决定疏密Cobalt Grid 是中等到密集、由网格组织的编辑密度系统。一张构图正确的幻灯片通常是一个大号 Newsreader 标题 多行结构化信息六条趋势的索引、八条条目的账本、八根像素堆叠柱的图表。图表纸下方主动想要被填满过于稀疏的幻灯片会露出过多网格、读起来像线框。例外是宣言、引言、后记版式——它们刻意留出空间让图表纸呼吸。选择规则chapter / manifesto / quote / colophon 稀疏index / data / table 密集。响应式、演示器行为与导出源模板的响应式本质是 viewport-fluiddisplay-hero 在最小视口约 100px 到最大约 200px 间缩放正文刻意保持 14–15px 窄区间图表纸网格单元 28px–44px 缩放维持整页约 50–80 格边距 36–80px1.5px hairline 与 1px 行分隔线固定不缩放。但在 frontend-slides 生成模型中这些 clamp 值一律被翻译为 1920×1080 舞台坐标不保留为实时重排规则。演示器行为幻灯片以 280ms 透明度交叉淡化导航由 JS 驱动.deck/.slide.active模式典型的方向键 / 空格约定可用左下导航提示以 40% 透明度的 mono 钴蓝显示交互指引。这与 deck-stage.js 的键盘导航实现←/→、PgUp/PgDn、Space、Home/End、数字键、R 重置一致该组件还会派发slidechangeCustomEvent供演讲者备注等宿主消费。打印 / 导出design.md 指出导出未显式处理每张幻灯片是 100vw × 100vh 块导出工作流应逐页快照 1920×1080网格与 hairline 叠加层在 PDF 捕获中应正确渲染无 blend 模式或滤镜。仓库配套的 scripts/export-pdf.sh 正是这样的工作流以 1920×1080或--compact时的 1280×720视口截图每张.slide再合并为 PDF而 deck-stage.js 的media print分支则让浏览器原生打印 → 存为 PDF也能做到一页一张。CJK 与国际化内容中文排版适配指南推荐中文配对角色拉丁字体推荐中文配对来源Display / HeadlineNewsreader 400思源宋体 Noto Serif SC 700Google FontsBody / LabelHanken Grotesk 400–600思源宋体 Noto Serif SC 400Google FontsChrome / MonoDM MonoDM Mono仅拉丁 / 数字——mono chrome 保持拉丁Google Fonts混排策略使用策略 A——单一字体栈带回退在同一个font-family栈中把 Noto Serif SC 声明在拉丁字体之后拉丁字形由 Newsreader / Hanken Grotesk 渲染CJK 字形自动回退到 NSC。mono chrome 保持纯拉丁 / 数字——页码、刻度、竖向堆叠标签不需要 CJK 回退DM Mono 按设计就不含 CJK 字形。字体加载代码link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link hrefhttps://fonts.googleapis.com/css2?familyNewsreader:ital,opsz,wght0,6..72,400..500;1,6..72,400..500familyHankenGrotesk:wght400..700familyDMMono:wght400..500familyNotoSerifSC:wght400;700displayswap relstylesheet:root { --font-display: Newsreader, Noto Serif SC, Georgia, serif; --font-body: Hanken Grotesk, Noto Serif SC, sans-serif; --font-mono: DM Mono, ui-monospace, monospace; } /* Headlines use Noto Serif SC 700; body uses Noto Serif SC 400. */通用 CJK 调整清单行高CJK 正文行高提到约 1.7原 1.5汉字比拉丁小写需要更多垂直呼吸字距汉字串上把letter-spacing归零0.16em 的 Hanken 大写追踪会打散汉字节奏紧字距只保留给拉丁片段text-transform内容为汉字时去掉 micro / label / kicker 上的text-transform: uppercase——中文无大小写强制 uppercase 不仅无效还会破坏混排拉丁缩写词的渲染标点中文句用全角。「」拉丁句用半角,.:;绝不在中文句中混入半角标点标题无句号中文标题惯例省略句末。展示字符串中须去掉Pangu 间距在相邻汉字与拉丁 / 数字之间插入细空格或普通空格如2026 年、AI 产品改善混排可读性一语句一字体不要在句中途切换 CJK 字族一个文本串只选单一字重的 Noto Serif SC。美学与已知缺口思源宋体是 Newsreader 自然的汉字搭档——同为安静文学衬线、粗细调制在大尺寸最高 18vh / 240px 的 vbig-numeral依然成立钴蓝 奶油双色规则在中文场景无需谈判因为只有一个墨水色可分配。NSC 700 承载本应 Newsreader 400 承担的大尺寸 displayNSC 400 承载正文与标签。DM Mono chrome 层刻意保持拉丁 / 数字——编号 001中数字由 DM Mono 渲染、汉字前缀走 Hanken/NSC保留 mono chrome 的技术规格声线。图表纸网格、像素故障列与 QR 补丁内容无关任何语言下读取一致。竖向堆叠标签用writing-mode: vertical-rl同样适用于汉字中文本就是最原始的竖排文字但同一条竖列中混排拉丁与汉字时汉字会转回正立而拉丁保持 90° 旋转因此应按语言隔离运行。已知缺口Noto Serif SC 无斜体轴中文历史上没有斜体所以宣言版式的斜体 Newsreader .roman翻转强调在纯汉字内容下失效需改用字重对比NSC 700 vs 400或微弱钴蓝调ink-faint恢复强调层级Newsreader 的 optical-size 轴6..72没有 NSC 等价物但 NSC 的品质下通常几乎不可察觉。迭代指南与已知缺口每张新幻灯片的创作检查单design.md 的 Iteration Guide自动继承永久图表纸网格、上下 1.5px hairline、右下页码、左下导航提示——这些住在.stage和.hairlines上不要逐页编写新标题一律 Newsreader 400 ink——不加粗、不着色新标签一律 Hanken 600 大写 0.16em 字距 ink新 chrome 一律 DM Mono ink 0.04–0.08em 字距新 index / data / table 内容页用 topbar左 Newsreader 标题 右 Hanken lab-tag 1.5px 钴蓝底规则新图表页用像素堆叠处理——钴蓝开 / 钴蓝 10% 关的 column-reverse 堆栈不引入单实色块填充柱状图新声明式页封面、章节、引言、后记用像素故障列为主装饰需要离散图形锚点时配 QR 补丁密集列表的新行分隔用 1px solid ink-faint18%全强度钴蓝只留给主要结构规则新组件继承零圆角、无阴影、无渐变的扁平性任何违反者先重构再加入系统只有一个墨水色ink和一个表面paper新构图永不引入第三色或第三表面调paper-2 可用但很少需要。实现层面的已知缺口源码事实引用自 design.md 的 Known Gaps 段像素故障列是逐次手写的内联 SVG没有生成式组件——调整台阶模式需直接编辑 SVG 标记QR 补丁的 8×8 单元模式逐次手写每个实例手动放置.on单元没有 QR 码生成逻辑像素堆叠柱状图的单元数量在标记中硬编码没有把数值翻译为 on 单元数的数据绑定层竖向堆叠标签列依赖writing-mode: vertical-rl现代浏览器可用但拉丁 / CJK 混排在此方向的渲染在不同渲染引擎下可能有差异宣言版式的斜体 .roman翻转模式是典型的反转强调斜体正文内含内联非斜体强调规则只在宣言专用 CSS 中未泛化QR 补丁的 1.5px 纸色 outset 是全系统唯一box-shadow用作反阴影不应挪作抬升用途后记的像素故障列锚左缘镜像封面其他页锚右缘——方向性逐页决定创作新声明版式时要考虑图表纸网格单元 28–44px 的 clamp 缩放在极端宽高比下整页网格数量可能显得不均系统加载三个 Google Fonts 家族Newsreader、Hanken Grotesk、DM Mono多字重——首屏渲染需要字体加载成功否则 Georgia/Helvetica 回退会偏移视觉节奏。小结Cobalt Grid 是 frontend-slides Bold Template Pack 中一套纪律极其严明的双色编辑系统奶油纸 钴蓝墨的严格二色律、Newsreader 400 / Hanken 600 大写 / DM Mono 三字体分工、永不开闭的图表纸网格与 1.5px hairline 框架、像素故障列与 QR 补丁签名装饰再加上面向中文的完整思源宋体适配方案。在实际使用中先在 selection-index.json 读取其元数据完成风格短名单经 preview.md 生成标题页预览确认选中后再读取完整 design.md 作为设计配方最后按固定 1920×1080 舞台模型、结合 viewport-base.css、deck-stage.js 与 html-template.md 的舞台架构生成整副 deck即可复现这一两色 risograph 专著式的编辑视觉。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐FrankenPHP 源码编译实战指南以 libphp.so 动态库方式构建现代 PHP 应用服务器FrankenPHP 源码编译实战指南以 libphp.so 动态库方式构建现代 PHP 应用服务器 导读 本指南围绕 FrankenPHP 官方推荐的编译方AI 技能AI 插件前端Frontend Slides Editorial Tri-Tone 模板解析三色编辑系统、语义别名与固定 1920×1080 舞台的完整设计配方Frontend Slides Editorial Tri Tone 模板解析三色编辑系统、语义别名与固定 1920×1080 舞台的完整设计配方 导读 EdAI 技能AI 插件前端Notepad-- 保姆级上手指南安装、配置与排障Notepad 保姆级上手指南安装、配置与排障 30秒认识 Notepad Notepad 是一款国产跨平台Windows / Linux / macOSAI 技能AI 插件前端上一篇缠论分析新境界通达信高效可视化插件终极指南下一篇深入解读 Claude Design「HTML email」技能手把手设计可在 Gmail / Outlook / Apple Mail 中稳定存活的自包含 HTML 邮件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考