用HTML做PPTclaude-design-system-prompt的make-a-deck幻灯片技能完整教程【免费下载链接】claude-design-system-promptReverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.项目地址: https://gitcode.com/gh_mirrors/cl/claude-design-system-promptclaude-design-system-prompt是一个开源系统提示词 技能库它能把任意大语言模型LLM变成一位有主见、懂无障碍、拒绝AI味的设计搭档。其中的 make-a-deck 技能可以让 AI 用单个 HTML 文件生成 1920×1080 的 16:9 幻灯片支持键盘翻页、缩放适配、打印成 PDF甚至自带演讲者备注。什么是 make-a-deck 技能传统 PPT 要装软件、拖模板。而 make-a-deck 的思路是把幻灯片当作一个网页来设计——固定的 16:9 画布、专业的字体层级、1–2 个背景色、每一页只讲一件事。整个技能是一份分阶段作业流程文档AI 会照着它一步步执行。它在系统提示词第 20 章中注册为可触发技能只要你说做一个 deck / 做一份 presentationAI 就会自动加载它参见 claude/system-prompt.md 与 claude/system-prompt.md。快速上手两步配置 仓库同时提供两个版本按需取用版本入口适用平台Claude 版claude/system-prompt.mdClaude Code / Claude.aiCodex 版codex/AGENTS.md codex/system-prompt.mdOpenAI Codex单循环、无子代理获取仓库git clone https://gitcode.com/gh_mirrors/cl/claude-design-system-prompt注入提示词把system-prompt.md的内容作为系统提示词粘贴给任意支持 system prompt 的 LLM。技能文件skills/目录下的 14 个 md是按需加载的参考文档不需要手动注册。配置完成后直接说帮我做一份 5 页的工程例会幻灯片即可触发make-a-deck。make-a-deck 的六个执行阶段技能内部是一条清晰的流水线理解它能帮你更好地与 AI 协作 Phase 1 · 需求确认Discovery动手前先确认受众决定语气和信息密度、时长10 分钟约 10 页30 分钟约 20–25 页、语气正式 / 内部轻松 / 营销感 / 技术向、素材来源、是否需要演讲者备注以及是否有品牌规范——没有品牌就先跑 frontend-aesthetic-direction 定视觉方向。如果你一口气给足了上下文它会跳过提问直接开工。Phase 2 · 规划版式系统先定版式语言再画页面封面、章节页、内容页、金句页、对比双栏、结尾 CTA典型的 deck 只用 4–6 种版式背景色限制在 1–2 个。这个决定会写成注释块放在 HTML 文件顶部方便你审查。Phase 3 · 搭建 deck 外壳自动调用内置的 deck-shell 启动组件负责缩放/黑边适配、键盘与点按翻页、页码计数器、localStorage 记忆、打印转 PDF。每张幻灯片带data-screen-label标签从 1 开始编号你可以直接说第 3 页标题太长来精确指位。Phase 4 · 逐页构建这是质量最集中的阶段硬规则包括正文不小于 24px1920×1080 画布下理想 32px标题 60–96px每页只讲一个主信息次要元素更小更弱图片用设计系统素材或诚实占位拒绝手绘 SVG 填充砍掉Why choose us?这类填充页——它们只消耗观众注意力Phase 5 · 演讲者备注可选只要开口要AI 会把备注写成完整的口语化讲稿不是提纲存进页面里由外壳自动渲染。Phase 6 · 验证与交付从第一页走到最后一页多尺寸缩放是否正常、页码递增、方向键/空格翻页、内容不溢出、对比度是否达到 WCAG 标准可联动 accessibility-audit 做彻底检查。为什么它做不出一眼 AI的 PPT这是本项目最大的卖点。系统提示词明确规定AI 模板审美是失败模式不是默认值——拒绝滥用渐变、emoji 装饰、左边框圆角卡片、到处 Inter 字体。相关防御机制ai-slop-check专门检测渐变、emoji 装饰、默认字体等AI 味套路并自动修复hierarchy-rhythm-review检查字号 / 字重 / 间距是否成体系杜绝随机数值polish-pass交付前的终极质检门并行跑无障碍、AI 味、层级节奏、交互状态四项审查技能组合一条完整的幻灯片生产链skills/目录里的 14 个技能可以串联使用。做幻灯片时的推荐链路discovery-questions → frontend-aesthetic-direction → make-a-deck → polish-pass需求模糊时先由 discovery-questions 发起一轮结构化提问受众、时长、语气、备注……一轮问完自主执行想先探索信息结构用 wireframe 快速出 3 版低保真方案再转入make-a-deck成品想再调调接 make-tweakable 加一个悬浮调节面板常见问题Q必须用 Claude 吗A不必。任何支持 system prompt 的模型都可以GPT、Gemini、本地模型。Codex 版本已针对单循环环境做了适配见 codex/system-prompt.md。Q输出能当正式 PPT 用吗A可以。生成的 HTML 通过打印 → 存为 PDF即可得到标准 16:9 的 PDF 幻灯片直接用于投屏或分发。Q和直接用 PowerPoint/WPS 相比呢A它的优势在于改稿成本极低——改文案、换配色、加一页都是自然语言一句话而设计质量由系统提示词里 20 章设计规范兜底不会出现凑字数式的填充页。小结一句话总结make-a-deck 一个懂设计规范的 AI 幻灯片设计师。把 claude/system-prompt.md 喂给你的 LLM一句帮我做份 10 页的发布会 deck就能拿到一个可直接打印成 PDF 的专业 HTML 演示文稿。想深入细节建议对照 README.md 的技能分类表和 claude/skills/make-a-deck.md 原文走一遍完整流程。【免费下载链接】claude-design-system-promptReverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.项目地址: https://gitcode.com/gh_mirrors/cl/claude-design-system-prompt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
