AI Agent技能设计范式Frontend Slides渐进式披露架构如何最小化上下文开销【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides 是一款开源 AI Agent 技能让编程智能体自动生成带丰富动画的 HTML 网页幻灯片还能把 PPT 一键转成网页演示。它的核心是一套渐进式披露Progressive Disclosure架构——先让 Agent 读轻量索引等用户选定风格后才加载完整设计文档把上下文开销降到最低。为什么上下文开销是 AI Agent 技能的最大成本对 coding agent 来说读进上下文窗口的每一行内容都在计费读得越多token 消耗越高推理越慢越贵。而 Frontend Slides 恰好拥有一个重资产设计库bold-template-pack/内置 34 套大胆风格的设计模板每套的完整设计文档design.md体积约 30–55KB34 套加起来超过1.4MB。如果 Agent 在对话一开始就全量灌入所有设计文档仅风格选择这一步就要吃掉几十万 token——而其中绝大部分内容永远不会被用到因为用户最终只会选定一种风格。所以一个好的技能设计必须回答一个问题每一步Agent 最少需要知道什么渐进式披露架构Frontend Slides 的四层加载金字塔Frontend Slides 的答案是渐进式披露先给 Agent 一张地图再按需揭示当前选择所需的具体文件。整个技能的资料被拆成四层由粗到细、各在其时加载层级文件体积何时加载1️⃣ 工作流地图SKILL.md约 28KB技能被调用时定义完整流程2️⃣ 元数据索引bold-template-pack/selection-index.json约 39KB风格选择阶段筛选 34 套模板3️⃣ 预览卡片bold-template-pack/templates/*/preview.md每套约 5KB筛选出候选后只读入选的几套4️⃣ 完整设计文档bold-template-pack/templates/*/design.md每套 30–55KB用户选定最终风格后只读一份第一层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 个字符粗估方案风格相关上下文约合 token全量灌入34 套 design.md1.44MB 索引 预设35 万渐进式披露索引 3 张预览卡 1 份设计文档约 2.5 万一次完整的幻灯片生成风格相关的上下文直接减少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 agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI Agent技能设计范式：Frontend Slides渐进式披露架构如何最小化上下文开销
AI Agent技能设计范式Frontend Slides渐进式披露架构如何最小化上下文开销【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides 是一款开源 AI Agent 技能让编程智能体自动生成带丰富动画的 HTML 网页幻灯片还能把 PPT 一键转成网页演示。它的核心是一套渐进式披露Progressive Disclosure架构——先让 Agent 读轻量索引等用户选定风格后才加载完整设计文档把上下文开销降到最低。为什么上下文开销是 AI Agent 技能的最大成本对 coding agent 来说读进上下文窗口的每一行内容都在计费读得越多token 消耗越高推理越慢越贵。而 Frontend Slides 恰好拥有一个重资产设计库bold-template-pack/内置 34 套大胆风格的设计模板每套的完整设计文档design.md体积约 30–55KB34 套加起来超过1.4MB。如果 Agent 在对话一开始就全量灌入所有设计文档仅风格选择这一步就要吃掉几十万 token——而其中绝大部分内容永远不会被用到因为用户最终只会选定一种风格。所以一个好的技能设计必须回答一个问题每一步Agent 最少需要知道什么渐进式披露架构Frontend Slides 的四层加载金字塔Frontend Slides 的答案是渐进式披露先给 Agent 一张地图再按需揭示当前选择所需的具体文件。整个技能的资料被拆成四层由粗到细、各在其时加载层级文件体积何时加载1️⃣ 工作流地图SKILL.md约 28KB技能被调用时定义完整流程2️⃣ 元数据索引bold-template-pack/selection-index.json约 39KB风格选择阶段筛选 34 套模板3️⃣ 预览卡片bold-template-pack/templates/*/preview.md每套约 5KB筛选出候选后只读入选的几套4️⃣ 完整设计文档bold-template-pack/templates/*/design.md每套 30–55KB用户选定最终风格后只读一份第一层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 个字符粗估方案风格相关上下文约合 token全量灌入34 套 design.md1.44MB 索引 预设35 万渐进式披露索引 3 张预览卡 1 份设计文档约 2.5 万一次完整的幻灯片生成风格相关的上下文直接减少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 agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考