1 个 HTML 文件搞定零依赖演示文稿frontend-slides 技能完整上手指南【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECCEverything Claude Code 是面向 Claude Code 的完整配置集合包含代理、技能、钩子、命令、规则和 MCP 等组件。其中的frontend-slides技能负责零依赖 HTML 演示文稿你可以从零搭建动画网页幻灯片也可以把 PPT 转成网页产出一个自包含文件——CSS 和 JS 都内联在里面双击打开就能放映不用联网、不装任何库。 3 步生成自包含 HTML 演示文稿克隆仓库把技能放进你的工作区git clone https://gitcode.com/GitHub_Trending/ev/everything-claude-code然后按文档启用frontend-slides技能。第一句提示词越具体越好比如做一份 8 页的产品推介幻灯片内容我先给你或者直接把 .pptx 文件丢给它说转成网页演示。技能定义见 skills/frontend-slides/SKILL.md。 三个典型场景各走各的路从零做幻灯片你手里只有主题、粗笔记甚至完整成稿都可以。技能只问最少必要的事用途推介、教学、会议演讲还是内部更新、长度短 5-10 页、中 10-20 页、长 20 页以上、内容状态成稿、粗笔记还是仅有主题。内容先给足再谈样式。PPT 转网页你手上是一个.pptx想换成可以发链接、可交互的网页版提取细节见下文。美化旧幻灯片你已有一套 HTML 幻灯片觉得排版平淡、动画生硬让它重新处理布局、动效和字体层级。 风格怎么定先三问再给 3 张预览不知道自己要什么风格这正是技能最擅长的地方——它不问抽象的你喜欢什么配色而是用画面说话先问感受这份幻灯片该让你印象深刻、充满活力、专注还是受到启发生成 3 个自包含的单幻灯片预览文件排版、配色、动画都直观可见你挑一张保留或者指定用 A 的字体配 B 的底色来混搭。如果你已经心里有数直接点名预设即可跳过预览。5 个热门预设按情绪速查想要的情绪推荐预设印象深刻 / 自信Bold Signal、Electric Studio、Dark Botanical兴奋 / 充满活力Creative Voltage、Neon Cyber、Split Pastel平静 / 专注Notebook Tabs、Paper Ink、Swiss Modern启发 / 感动Dark Botanical、Vintage Editorial、Pastel Geometry几个高频预设的气质Bold SignalArchivo Black Space Groteskcharcoal 深底压住全场亮橙焦点卡一锤定音适合主题演讲。Electric Studio只用 Manrope 一种字体黑白骨架加饱和钴蓝点睛机构提案的安全牌。Creative VoltageSyne Space Mono电蓝、霓虹黄、深蓝混色复古未来感最浓。Dark BotanicalCormorant IBM Plex Sans近黑、暖象牙、腮红、金与赤土安静且有贵气。 PPTX 转 HTML 的正确姿势转换走一条稳定的工具链优先用python3python-pptx提取文本、图片和演讲者备注跨平台、不挑系统库里没有python-pptx时它会先问你要不要安装或者回退到手动/导出流程不会硬跑提取结果保留幻灯片原有顺序、备注和素材提取完成后走和新建演示文稿完全一样的三问 预览选样式流程。✅ 质量底线视口适配与密度上限视口适配viewport fit意思是每张幻灯片恰好占满一屏屏内不允许出现滚动条内容塞不下就拆页而不是把字缩到看不清。导航齐全键盘方向键、触摸滑动、鼠标滚轮都能翻页另有进度指示器或页码索引入场动画在翻到新页时触发且尊重系统的prefers-reduced-motion设置可访问性语义化结构main/section/nav、可读对比度、纯键盘可操作HTML/CSS 默认全部内联字体取 Google Fonts 或 Fontshare背景用大气渐变加强标题层级图形只用抽象形状、网格、噪点与几何不堆插画代码注释清晰、响应式、高性能交付前会在多种分辨率下检查溢出。幻灯片类型内容上限标题页1 个标题 1 个副标题 可选标语内容页1 个标题 4-6 个要点或 2 个短段落功能网格最多 6 张卡片代码页最多 8-10 行引用页1 条引用 署名图片页1 张图且受视口约束 VS Code 里用它更顺手装好 Claude Code 扩展后体验会比纯终端更稳接受改动前先查看并直接编辑它的计划可开启自动接受让编辑一路跑完选中代码后用 提及特定行范围对话更精准对话历史随时可回翻还能在独立标签页或窗口中并行开多个对话。收尾一句话总结零依赖的自包含 HTML 严格的视口适配 用画面而不是形容词做选型frontend-slides让不懂设计的人也能交出有质感的演示文稿。完整文档docs/zh-CN/README.md技能定义skills/frontend-slides/SKILL.md【免费下载链接】ECCThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.项目地址: https://gitcode.com/GitHub_Trending/ev/ECC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考