企业官网建设流程全解析

AI Agent技能设计范式：Frontend Slides渐进式披露架构如何最小化上下文开销

【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agent's frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides

Frontend Slides 是一款开源 AI Agent 技能：让编程智能体自动生成带丰富动画的 HTML 网页幻灯片，还能把 PPT 一键转成网页演示。它的核心是一套"渐进式披露"（Progressive Disclosure）架构——先让 Agent 读轻量索引，等用户选定风格后才加载完整设计文档，把上下文开销降到最低。

为什么上下文开销是 AI Agent 技能的最大成本？

对 coding agent 来说，读进上下文窗口的每一行内容都在计费：读得越多，token 消耗越高，推理越慢越贵。

而 Frontend Slides 恰好拥有一个"重资产"设计库：bold-template-pack/内置 34 套大胆风格的设计模板，每套的完整设计文档design.md体积约 30–55KB，34 套加起来超过1.4MB。

如果 Agent 在对话一开始就"全量灌入"所有设计文档，仅风格选择这一步就要吃掉几十万 token——而其中绝大部分内容永远不会被用到，因为用户最终只会选定一种风格。

所以一个好的技能设计必须回答一个问题：每一步，Agent 最少需要知道什么？

渐进式披露架构：Frontend Slides 的四层加载金字塔

Frontend Slides 的答案是渐进式披露：先给 Agent 一张"地图"，再按需揭示当前选择所需的具体文件。

整个技能的资料被拆成四层，由粗到细、各在其时加载：

第一层SKILL.md本身就是一张"目录 + 规则"：它定义从内容发现、风格发现、生成到交付、分享的完整阶段流程，文末还附了一张 Supporting Files 表格，明确列出每个支持文件"什么时候读"——这本身就是一份指向更低层的披露索引。

三步实操：风格选择阶段如何省下上下文

以最容易烧 token 的"风格选择"环节为例，它的流程正是围绕金字塔设计的：

第一步：只读索引，锁定候选。Agent 读取selection-index.json——每套模板只保留 mood、tone、formality、density、best_for / avoid_for 等字段。约 39KB 就能把 34 套模板筛个遍，一行设计正文都不用读。

第二步：只读预览卡片，生成真实首屏。对筛出的 3 个候选，Agent 只读各自的preview.md（约 5KB）。预览卡片里包含色板、字体分工和招牌手法，足够生成一张"像真幻灯片"的标题页，让用户用眼睛而不是用语言来表达审美。

第三步：选定后才读完整设计文档。只有当用户拍板最终风格，Agent 才加载那一份design.md（约 30–55KB），把它当作"设计配方"生成整套幻灯片。

值得玩味的是，索引文件里还内置了"负面规则"（never字段）：禁止批量读取任何 design.md；除非选中的设计文档缺少关键实现细节，否则不许读模板源文件。边界以机器可读的写法写死，Agent 就没有"顺手多读"的空间。

算一笔账：90%+ 的上下文开销省在哪

按 1 个 token ≈ 4 个字符粗估：

一次完整的幻灯片生成，风格相关的上下文直接减少90% 以上。省下的不只是费用：上下文窗口腾出来的空间，意味着 Agent 能更专注于用户的内容与版式，产出质量反而更高——这正是"最小化上下文开销"的复利。

写自己的 Agent 技能，可抄走的 3 条设计原则

• 先给地图，再给细节：顶层文档应是"工作流地图 + 加载时机表"，而不是全部知识的全文。
• 把资产压缩成元数据索引：常用筛选维度（氛围、正式度、适用场景）放进结构化索引，重内容留在磁盘上。
• 区分"预览层"和"完整层"：供选择的给最小卡片，供执行的给完整文档，两层不要混用。

完整的加载时机表可查SKILL.md的 Supporting Files 章节，设计哲学见README.md；生成阶段必读的STYLE_PRESETS.md、viewport-base.css、html-template.md、animation-patterns.md也都在仓库根目录。想亲手体验：

git clone https://gitcode.com/gh_mirrors/fr/frontend-slides

让支持文件系统的编程 Agent 从SKILL.md读起，说一句"用这个技能做一份幻灯片"，就能看到这套四层金字塔在实战中如何运转。

小结

渐进式披露是一个朴素却极具实效的 AI Agent 技能设计范式：该读的时候才读，只读当前决策所需，绝不预支未来的上下文。Frontend Slides 把 1.4MB 的资产库变成了"用多少、读多少"的按需资源——这套思路可以直接移植到你自己的技能设计中。

【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agent's frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides