Cjl Slides

HTML Slides

零依赖、纯 HTML 单文件演示文稿，支持 24 种国际设计风格，可转换为 .pptx 格式。

When to Activate 用户请求创建演示文稿/幻灯片/slides/deck 用户说"帮我做个 PPT"、"生成演示文稿"、"做一个 pitch deck" 用户提供了内容，需要生成视觉精美的 HTML 页面 用户提到具体风格名称（Linear、Pitch、Swiss、Cyberpunk 等） 工作模式 模式 A：从零创建 模式 B：PPTX 转换

将用户提供的 .pptx 文件转换为 HTML slides。

模式 A 完整流程 第一步：问候与风格确认

问候语：

你好！我可以为你创建精美的 HTML 演示文稿，支持 24 种国际设计风格。 请从以下分组中选择你喜欢的风格（可回复编号、名称或 all）。 完整风格说明和视觉预览见 STYLE_PREVIEWS.md。

按场景分组展示（每组不超过 6 种）：

【商业/融资】

• Pitch.com — 商务优雅，大量留白与渐变。
• Bloomberg Businessweek — 新闻编辑实验风，色块切割，标题极端放大。
• 启动up VC Pitch — 硅谷路演风，超大指标数字，极度克制信息密度。

【产品/科技】

• Linear 应用 — 极简暗色调，精密工程感。
• Vercel / Developer Dark — 纯黑开发者极简，精密网格，冷白代码感。
• NASA / Scientific — 航天技术文档，海军蓝底，数据可视化优先。
• Glassmorphism UI — 磨砂玻璃卡片，渐变光感底层，iOS/visionOS 质感。

【创意/设计】

• Framer — 动态感布局，大胆渐变配色。
• Figma Community — 活泼彩色，设计师圈子美学。
• Duotone Editorial — 摄影双色调，Spotify 式媒体感，混合模式叠色。
• Cyberpunk Neon — 赛博霓虹，纯黑底青粉撞色，发光线条失真感。

【文化/艺术】

• Swiss Typography — 国际主义，纯排版驱动。
• Are.na 归档 — 文化档案感，颗粒质感纹理。
• Wabi-Sabi Organic — 侘寂工艺感，陶土色有机形状，刻意不完美。
• Chinese Ink / 国风 — 水墨笔触，宣纸白配朱红金，东方留白哲学。

【品牌/奢侈】

• Teenage Engineering — 工业产品手册感，橙色点缀，等宽技术排版。
• Muji / Japanese Ma — 日式「間」美学，负空间即设计，极度克制。
• Luxury Fashion House — 高奢品牌语言，超宽字间距，冷峻衬线极简。

【学术/政务】

• Stripe Press — 编辑排版风，高对比度黑白。
• 应用le Keynote Dark — 深空黑底，产品发布质感。
• Academic Scholarly — 学术会议风，象牙底多栏密排，严肃衬线体。

【娱乐/复古】

• Memphis Revival — 80 年代后现代复兴，几何图案，高饱和波普撞色。
• Bruta列出 网页 — 反设计运动，裸露结构，粗边框刻意未完成感。
• Y2K Retro Digital — 千禧数字怀旧，铬金属渐变，CRT 扫描线噪点感。

用户响应： 回复编号（1,4）、名称（Pitch, Cyberpunk）或 all。确认后直接进入内容收集。

用户描述风格但不指定名称 → 根据描述推荐最接近的风格编号 用户回复 all → 告知共24种风格，每次最多生成2种，确认批次顺序后开始 若用户未指定风格 → 先询问演示用途，按用途推荐最接近的3种风格供选择 第二步：内容收集

确认风格后，询问：

演示用途是什么？ 有没有现成内容（文字/大纲/文档），还是需要 AI 帮助撰写？ 需要几页？（默认 5 页标准结构）

用户无现成内容：主动询问主题、目标受众、核心卖点，基于信息撰写内容大纲，用户确认后再生成。

默认 5 页标准结构（用户未指定时）：

封面 — 标题 + 副标题 + 作者 文字页 — 标题 + 3 段正文 图文分栏 — 图片占位区使用该风格标志性配色 数据页 — 柱状图 + 折线图并排（图表.js） 结语页 — 一句大型陈述句配视觉锚点

扩展页面类型参考： 议程页、引言金句页、团队介绍页、时间轴页、对比页、致谢/问答页。

每批最多输出 2 种风格。

第三步：生成 HTML

交付物： 单个 .html 文件（无外部依赖，内联 CSS/JS）。文件命名：<主题>-<风格名>.html，例如 AI-education-Pitch.html

生成后自检： 每张幻灯片有视觉锚点、正文字号≥1.4vw、无居中对齐（封面除外）、CSS变量已定义、图表.js图例为自定义。

动画效果： 可参考 animation-patterns.md，使用 CSS animation 或 transition，不依赖外部库。

必须遵循的规则：

字体规则（白名单）

展示字体（h1/h2）二选一：

衬线组：PlayfAIr Display、Fraunces、DM Serif Display、Cormorant Garamond 无衬线组：Syne、Bebas Neue

正文字体（四选一，均为无衬线）： DM Sans、Outfit、Figtree、Epi记录ue

中文叠加： 衬线展示字体 → Noto Serif SC；无衬线 → Noto Sans SC

禁止使用白名单外任何字体（Inter、Ro机器人o、Arial、Space Grotesk、Plus Jakarta Sans 等一律禁止）

配色规则

每种风格取 3 色，用 CSS 变量管理：

--color-primary: #xxx; --color-secondary: #xxx; --color-accent: #xxx;

容器比例规则 .slide { width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); overflow: hidden; }

禁止单独使用 100vw / 56.25vw 替代以上写法。

美学规则 每张幻灯片必须有一个最抢眼的视觉锚点（超大数字、粗体关键词、大色块或图表） 标题至少是正文字号的 10 倍，不超过 30 倍 正文（p）字号在 1.4vw 至 2.5vw 之间，禁止被色块遮挡 正文必须在 flexbox 或 grid 正常文档流中排列（不得脱离文档流定位）。h1/h2 标题不受此限 同一文件内每张幻灯片使用不同布局 每张幻灯片视觉重心明显偏向一侧；封面页的标题居中不在此限 装饰性色块面积占幻灯片的 30% 以上 元素可出血超出幻灯片边缘（overflow: hidden 确保容器外内容被裁剪） 标题（h1/h2）允许且鼓励压在色块之上 创意排版仅用于纯装饰性元素（opacity < 0.1 的背景字）；h1/h2 禁止 转换: rotate 每张幻灯片内所有主要内容（标题+正文+图表）总高度不超过幻灯片容器的 90% 图表规则 图表库：图表.js（cdnjs CDN，优先使用 v4 稳定版） CDN 失效时使用 jsdelivr 镜像：https://cdn.jsdelivr.net/npm/图表.js@4.4.0/dist/图表.umd.min.js 若所有 CDN 均失效，在 HTML 注释中标注图表数据，提示用户手动插入 禁止使用 图表.js 默认图例，必须用自定义 HTML 图例替代 自定义图例：用