[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tb-a-2077649162018488320-2077655090302287872":3},{"detail":4,"html":18,"toc":19,"catalog":60,"tool":64},{"id":5,"title":6,"coverUrl":7,"url":8,"level":8,"description":9,"publishDate":10,"views":11,"isCollect":12,"isLike":12,"vipRequired":13,"vipFlag":14,"price":8,"contentType":15,"station":8,"seq":15,"readMinutes":16,"toolIds":17,"relatedVideo":8},"2077655090302287872","frontend-slides：不用懂设计，一句话生成好看的网页 PPT","https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661644099420160",null,"HTML 演示品类 GitHub 星标第一（25.7k 星），科技博主张咋啦Zara出品。你只管说内容，它出 3 版风格让你挑，直接生成整套网页幻灯片，也能把旧 PPT 换成网页版。46 套设计风格，可导 PDF 或在线链接。","2026-07-16",0,"0",false,"1",1,6,[],"\u003Cdiv style=\"padding:0 4px 24px;font-size:14px;color:#333;line-height:1.85;word-break:break-word\">\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:0 0 18px;font-size:13px;line-height:1.7;color:#9A3412\">⭐ HTML 演示品类 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">GitHub 星标第一（25.7k 星）\u003C\u002Fstrong>，出自科技博主 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">张咋啦 Zara\u003C\u002Fstrong>（前飞书产品营销负责人、哈佛本科、美国湾区 AI 产品经理）。\u003C\u002Fdiv>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661644254609408\" style=\"width:100%;border-radius:12px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 16px\">frontend-slides 生成的幻灯片示例（Neo-Grid Bold 风格）\u003C\u002Fp>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s1\" data-toc>一、这是什么\u003C\u002Fh1>\n\n\u003Cp style=\"margin:0 0 14px\">frontend-slides 是一个跑在 AI 编程助手里的演示制作工具（skill），专门做 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">网页版幻灯片\u003C\u002Fstrong>——不是传统的 .pptx 文件，而是一个可以直接在浏览器里翻页演示的 HTML 页面。\u003C\u002Fp>\n\n\u003Cp style=\"margin:0 0 14px\">它能从零帮你生成一整套幻灯片，也能把你现成的 PowerPoint 提取出来、换成好看的网页版。最大的特点是\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">「不用你懂设计」\u003C\u002Fstrong>：你只管说内容，好不好看它来负责。\u003C\u002Fp>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s2\" data-toc>二、它解决什么痛点：给你看，不让你说\u003C\u002Fh1>\n\n\u003Cp style=\"margin:0 0 14px\">做 PPT 最难的从来不是写字，是\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">「不知道排成什么样才好看」\u003C\u002Fstrong>。传统 AI 工具会问你\"想要商务风还是极简风\"，可这些词你自己都说不清。\u003C\u002Fp>\n\n\u003Cp style=\"margin:0 0 14px\">frontend-slides 反过来玩——它一次直接给你 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">3 版不同风格的预览\u003C\u002Fstrong>，你挑一个顺眼的就行。作者把这套思路叫「Show, don't tell（给你看，不让你说）」，也就是你只需要\"反应\"，不需要\"描述\"。\u003C\u002Fp>\n\n\u003Cdiv style=\"background:#F8FAFC;border-left:3px solid #CBD5E1;border-radius:6px;padding:10px 14px;margin:0 0 16px;font-size:13px;line-height:1.7;color:#475569\">另一个坚持：\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">零依赖\u003C\u002Fstrong>。每份演示都是单个 HTML 文件，样式和脚本全内联，不装任何框架。作者的原话是——\"一个 HTML 文件 10 年后还能打开；2019 年的 React 项目？祝你好运。\"\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s3\" data-toc>三、核心能力\u003C\u002Fh1>\n\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s4\" data-toc>🎨 46 套设计风格\u003C\u002Fh2>\u003Cp style=\"margin:0\">12 套精选主题 + 34 套大胆模板，风格覆盖暗色、亮色、复古、瑞士排版、赛博等，还特意规避了\"白底紫渐变\"这种一眼 AI 味的俗套。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s5\" data-toc>📑 旧 PPT 一键翻新\u003C\u002Fh2>\u003Cp style=\"margin:0\">提取现有 PowerPoint 里的文字、图片和演讲备注，套上你选的新风格，变成网页版（需要 Python 环境）。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s6\" data-toc>🔗 导出与分享\u003C\u002Fh2>\u003Cp style=\"margin:0\">一条命令部署到 Vercel 拿到永久在线链接（手机\u002F平板\u002F电脑都能看），或者导成 1920×1080 的 PDF 发邮件、发群、打印。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s7\" data-toc>▶️ 演示与动画\u003C\u002Fh2>\u003Cp style=\"margin:0\">输出的 HTML 自带键盘翻页、过场动画，固定 16:9 比例，代码带注释、可读性好，方便再手动微调。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s8\" data-toc>🤖 多助手通用\u003C\u002Fh2>\u003Cp style=\"margin:0\">Claude Code 官方支持，也能在 Codex、Kimi Code、OpenCode、Gemini CLI 等有文件读写权限的助手里用。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s9\" data-toc>四、怎么用（5 步）\u003C\u002Fh1>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"background:#FF8916;color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;margin-top:2px\">1\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">起个头\u003C\u002Fstrong>：给它一段内容说明，或直接丢一个 PPT 文件。\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"background:#FF8916;color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;margin-top:2px\">2\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">挑风格\u003C\u002Fstrong>：它出 3 版预览（一个稳妥预设 + 一个大胆模板 + 一个惊喜款），选你喜欢的。\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"background:#FF8916;color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;margin-top:2px\">3\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">生成\u003C\u002Fstrong>：确认内容后，它按选定风格做出整套幻灯片。\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"background:#FF8916;color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;margin-top:2px\">4\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">预览调整\u003C\u002Fstrong>：浏览器里直接看，不满意就让它改内容、配色、排版。\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"background:#FF8916;color:#fff;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;margin-top:2px\">5\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">导出分享\u003C\u002Fstrong>：部署成在线链接，或导成 PDF。\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s10\" data-toc>五、46 套设计风格长什么样\u003C\u002Fh1>\n\n\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:20px 0 10px\" id=\"s11\" data-toc>12 套精选主题\u003C\u002Fh2>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">暗色系\u003C\u002Fstrong>：Bold Signal、Electric Studio、Creative Voltage、Dark Botanical\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">亮色系\u003C\u002Fstrong>：Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">特色款\u003C\u002Fstrong>：Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:20px 0 10px\" id=\"s12\" data-toc>34 套大胆模板 · 风格一览\u003C\u002Fh2>\n\u003Cp style=\"margin:0 0 14px\">从杂志编辑风到复古像素风，风格跨度极大，按需加载、用到才取。下面是其中 9 种的实际效果：\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661645353517056\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Editorial Tri-Tone · 三色编辑杂志风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661646146240512\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Cobalt Grid · 科技网格风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661648486662144\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Blue Professional · 商务蓝专业风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661649287774208\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Editorial Forest · 自然编辑风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661650172772352\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Sakura Chroma · 柔和樱色风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661650957107200\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Coral · 珊瑚活力风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661651863076864\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Bold Poster · 大字海报风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661653595324416\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 14px\">Retro Zine · 复古杂志风\u003C\u002Fp>\n\n\u003Cimg src=\"https:\u002F\u002Faicxd.com\u002Fapi\u002Ffile\u002Ffile\u002FremoteViewByFileId?fileId=2077661656954961920\" style=\"width:100%;border-radius:10px;margin:4px 0 4px;display:block\" loading=\"lazy\" decoding=\"async\">\n\u003Cp style=\"font-size:12px;color:#94A3B8;text-align:center;margin:0 0 16px\">8-Bit Orbit · 复古像素风\u003C\u002Fp>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s13\" data-toc>六、适合谁\u003C\u002Fh1>\n\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">不会写代码、不懂设计，但要快速做出专业演示的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">受够了千篇一律模板、想要点风格的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">手上有一堆旧 PPT、想搬到网页上分享的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:18px 0 0;font-size:13px;line-height:1.7;color:#9A3412\">⚠️ \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">一句实话\u003C\u002Fstrong>：它输出的是\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">网页幻灯片\u003C\u002Fstrong>，不导出可编辑的 .pptx 文件。如果你必须交付传统 PPT，去看「传统PPT」子分类里的 Anthropic 官方 pptx 或 ppt-master。另外它需要在 Claude Code 这类 AI 编程助手里使用，纯网页\u002FApp 用不了。\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n",[20,23,26,29,33,36,39,42,45,48,51,54,57],{"id":21,"text":22,"level":15},"s1","一、这是什么",{"id":24,"text":25,"level":15},"s2","二、它解决什么痛点：给你看，不让你说",{"id":27,"text":28,"level":15},"s3","三、核心能力",{"id":30,"text":31,"level":32},"s4","🎨 46 套设计风格",2,{"id":34,"text":35,"level":32},"s5","📑 旧 PPT 一键翻新",{"id":37,"text":38,"level":32},"s6","🔗 导出与分享",{"id":40,"text":41,"level":32},"s7","▶️ 演示与动画",{"id":43,"text":44,"level":32},"s8","🤖 多助手通用",{"id":46,"text":47,"level":15},"s9","四、怎么用（5 步）",{"id":49,"text":50,"level":15},"s10","五、46 套设计风格长什么样",{"id":52,"text":53,"level":32},"s11","12 套精选主题",{"id":55,"text":56,"level":32},"s12","34 套大胆模板 · 风格一览",{"id":58,"text":59,"level":15},"s13","六、适合谁",[61],{"id":5,"title":6,"coverUrl":7,"duration":8,"level":8,"publishDate":10,"views":11,"aiSoftapp":8,"tags":62,"contentType":15,"station":8,"seq":15,"relateId":8,"toolId":63,"readMinutes":16},[],"2077649162018488320",{"id":63,"createTime":65,"createdBy":66,"updateTime":65,"updatedBy":66,"echoMap":67,"slug":68,"name":69,"categorySlug":70,"subCategory":71,"region":8,"website":72,"appName":68,"description":73,"tags":74,"sortOrder":11,"state":15,"tenantCode":80,"tutorialContent":8,"resourceType":81,"accessTypes":68,"installCmd":82,"logo":83,"hotScore":84,"githubStars":85,"category":70},"2026-07-16 14:58:56","1744248479271616512",{},"","frontend-slides","ppt","用HTML做PPT","https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides","HTML 演示品类 GitHub 星标第一（25.7k 星）。科技博主张咋啦Zara（前飞书产品营销负责人、哈佛本科、美国湾区 AI 产品经理）出品。你用大白话说要讲什么，它先出 3 版视觉风格让你挑（不用懂设计术语），选定后直接生成整套网页幻灯片；也能把现成 PPT 的文字、图片、备注扒出来换成网页版。内置 46 套设计风格，能导 PDF 或一键生成在线分享链接。适合不会写代码、不懂设计但要快速做出好看演示的人。",[75,76,77,78,79],"大V·张咋啦Zara出品","HTML演示","零设计门槛","PPT转网页","46套风格","0000","skill","\u002Fplugin marketplace add https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides 然后 \u002Fplugin install frontend-slides@frontend-slides","https:\u002F\u002Fgithub.com\u002Fzarazhangrui.png",96,25700]