Frontend Slides:让不会设计的人靠看三份真实预览挑出自己审美的零依赖 HTML 幻灯片 skill
我们的判断12 个安全预设 + 34 套 bold 模板 + 一条「三份预览必须像真实第一页」的 NON-NEGOTIABLE 规则,把选风格的主路径从「描述」改成「看」——这是给不会设计的人用的产品决定,不是模板堆料。另外两条值得抄进任何生成式 UI 流程:固定 1920×1080 舞台换排版确定性,以及验收必须看渲染截图查溢出与面板遮挡(只查 scrollHeight 抓不到 z 轴覆盖)。我们未安装跑出成品,记为待复现。
zarazhangrui/frontend-slides 是一个 coding-agent skill,MIT,主语言 JavaScript,29,716★ / 2,326 forks,仓库描述一句话:「用 coding agent 的前端能力在网页上做漂亮的幻灯片」。它的设计主张是 README 第一条 Philosophy——你不需要是设计师也能做出好看的东西,你只需要对看到的东西有反应。这句话决定了整套架构:绝大多数 PPT 类 prompt 集合让你先描述风格(「简约」「科技感」「商务」),而 SKILL.md 明确否掉这条路,Phase 2 叫 Style Discovery,原话是「大多数人无法用语言描述自己的设计偏好」,所以默认体验永远是视觉对比——先生成三份单页 HTML 预览自动打开让你挑,还专门写了「不要问用户是否想要选项或预设选择器」。三份预览的配比是硬规则:1 个安全预设(STYLE_PRESETS.md 的 12 个精选,按气质分暗色 Bold Signal / Electric Studio / Creative Voltage / Dark Botanical、亮色 Notebook Tabs / Pastel Geometry / Split Pastel / Vintage Editorial、特化 Neon Cyber / Terminal Green / Swiss Modern / Paper & Ink)+ ≥1 个 bold 模板(bold-template-pack 的 34 套设计系统,来自作者另一个仓库 beautiful-html-templates,每个配三张真实截图)+ 1 个 wildcard(第二个 bold 模板或 agent 自研定制设计,brief 里有比模板更锋利的机会时用这一格)。产物形态是零依赖单 HTML 文件,CSS/JS 全内联,没有 npm、构建工具与框架,理由写得实在:「依赖就是负债,一个 HTML 文件十年后还能打开,2019 年的 React 项目呢」。渐进披露是 token 工程:agent 先只读带 mood / tone / best_for / avoid_for / formality / density / scheme 字段的 selection-index.json,入围后读候选的 preview.md,只有用户最终选定那一个才读它的完整 design.md,并明确「除非缺关键实现细节否则不要读也不要抄 template.html」。它有一条被标成 NON-NEGOTIABLE 的预览真实性规则——每份风格预览必须看起来像用户 deck 的真实第一页而不是诊断卡,页面上不许出现 preview / template / preset / Option A-B-C / 文件名与路径,也不许把「sharp and provocative」这类需求备注当内容渲染。第 5 条核心原则同样 NON-NEGOTIABLE:固定 1920×1080 画布整体等比缩放,手机上也保持 16:9,可以 letterbox 不可以 re-layout;配套约束逐条对应真实 bug(必须内联 viewport-base.css 全文、页面显隐只能用基于 visibility / opacity / pointer-events 的.active /.visible 而禁用 display:none、clamp 只用于舞台之外、不许直接对 CSS 函数取负要写 calc(-1 * clamp(...))、必须带 prefers-reduced-motion)。反 AI slop 那节用第二人称直接对 agent 说话,点名要避开的收敛倾向包括 Inter / Roboto / Arial、白底紫色渐变、可预测布局,最狠一句是「你仍然会跨多次生成收敛到常见选择上(比如 Space Grotesk),避免它」。验收标准很专业:生成后要在浏览器渲染截图里同时验证内容溢出与面板重叠,只查 scrollHeight 不够,因为 grid 面板可能在视觉上互相覆盖。六个 Phase 覆盖新建、PPTX 转换(extract-pptx.py)、增强既有 HTML 三种模式与低密度、高密度两档,产物自带内联编辑(按 E 进编辑、Ctrl+S 保存),Phase 6 给出 deploy.sh(Vercel)与 export-pdf.sh(Playwright,–compact 改按 1280×720 渲染通常减 50–70%)的运维坑位。我们未安装该 plugin、未跑出真实 deck,记为待复现。
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides 然后 /plugin install frontend-slides@frontend-slides