尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

10分钟用ECC做出第一份HTML演示文稿指南

10分钟用ECC做出第一份HTML演示文稿指南 10分钟用ECC做出第一份HTML演示文稿指南【免费下载链接】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/ECCECC 是面向 Claude Code 等 AI 编码助手的开源能力系统它内置的 frontend-slides 技能能一句话生成零依赖不用装任何外部库的 HTML 演示文稿、HTML 幻灯片。不用再对着 PowerPoint 调半天对齐说完需求就能得到一份直接放映的幻灯片。它帮你解决什么先看三个你大概率遇过的情景。有想法但没时间做设计以前对着 PPT 模板调位置一小时 → 现在一句话帮我做10页演示frontend-slides 直接生成带动画。要把片子发给别人对方没装 Office以前导出 PDF 发过去 → 现在转成一个 HTML 文件对方浏览器里打开就能放。不知道自己审美在线不在线以前自己配色选字体出来一股模板味 → 现在它先做 3 个风格预览页给你看选一个或者混搭。从零到第一份演示快速上手没用过 ECC 也没关系照着下面走就行。先拿到仓库没有的话克隆一下git clone https://gitcode.com/GitHub_Trending/ev/ECC只装这一个技能已装过完整版的可跳过cd ECC ./install.sh --target claude --skills frontend-slides在项目目录里启动 Claude Code说用 frontend-slides 帮我做一份关于 X 主题的10页技术分享演示。它会问用途和想要的情绪然后生成 3 个风格预览你告诉它保留哪个或混合哪两个的元素。拿到一个presentation.html单文件浏览器打开就是成品直接投屏。几个让你少操心的设计点说白了CSS 你一行不用碰但有 3 个好处是直接享受到的。零依赖单文件样式和脚本全部写在 HTML 里面。你不用懂底层好处是这一个文件发给谁都能看断网也照放没有资源加载失败。一页就是一屏视口就是当前屏幕可见区域适配是硬规则内容装不下就拆页而不是把字缩小。你不用懂底层好处是投影仪上、手机上都不会出现半截滚动条。先看了再选正式生成之前它先做 3 张完整的预览页。你不用会用词描述配色直接看图选就行。不同场景怎么搭配风格先定内容再谈。ECC 一共给了 12 种预设下面三种搭配可以直接抄。技术分享 / 会议演讲选 Terminal Green 或 Neon Cyber 这类终端味预设代码每页控制在 8-10 行以内多就拆页结尾放一页自己跑一遍 demo的引导产品路演选 Bold Signal、Electric Studio 这类高冲击预设叙事顺序问题 → 方案 → 一个支撑数据图表信息量大就拆开别挤在一页团队内部周会 / 内部分享选 Swiss Modern、Paper Ink 这类安静的预设内容密度可以适当放宽结尾附上仓库和相关文档的路径方便同事自己看新手高频踩坑 ⚠️走到这一步大多数人会卡在这三个地方。你看到幻灯片里出现滚动条或者内容被截断。原因单页塞的东西超了密度上限。解决让它拆成两页单页不许滚动是写死的规则别硬塞。你看到笔记本或横屏手机上字明显变小了。原因字号和间距会按屏幕大小自动缩放就是 CSS 的 clamp() 函数内容多时就会被压。解决拆页别指望把字体缩到极限。你看到想换主色却找不到地方改。原因主题色统一放在文件顶部的 CSS 变量一组可以一处修改、全局生效的命名值里。解决直接对 AI 说把主色换成深蓝或自己改那一小段数值。适不适合你30秒判断先别急着装对着这两列看一遍。适合你的信号你的演示主要靠链接或邮件发出去对方不需要装任何东西你已经在用 Claude Code、Codex 这类 AI 编码助手你没设计经验但又不想让结果看起来像免费模板可能不太合适的情况公司要求严格的品牌模板每个色值、每款字都有规定你需要逐帧级的动画控制时间轴要精确到秒你只想用鼠标拖拽编辑不想用 AI 生成下一步更细的用法都写在仓库里skills/frontend-slides/SKILL.md是技能流程说明skills/frontend-slides/STYLE_PRESETS.md是 12 种预设的完整目录先翻一遍挑一个最对你味道的。仓库还没有的话回到快速上手把第一条命令跑掉然后打开终端——你第一份 HTML 演示文稿十分钟后就在手上了。【免费下载链接】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),仅供参考
返回列表